@idsoftsource/initial-process 1.4.5 → 1.4.7

package/fesm2022/idsoftsource-initial-process.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { InjectionToken, inject, Injectable, Optional, Inject, EventEmitter, Output, Input, Directive, forwardRef, NgModule, Component, signal, Pipe, computed, effect, ElementRef, ViewChild } from '@angular/core';
 import * as i11 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i10 from '@angular/forms';
+import * as i8 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, COMPOSITION_BUFFER_MODE, Validators, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
@@ -2476,13 +2476,13 @@ class EducationComponent {
         this.educationForm.reset();
         this.fileName = '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EducationComponent, deps: [{ token: UserEducationService }, { token: UserService }, { token: CredentialingStore }, { token: EducationStore }, { token: CountryServices }, { token: PostalCodeServices }, { token: i6.TokenService }, { token: i10.FormBuilder }, { token: FileService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    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=\"education-container\">\r\n    <h3>Add Education</h3>\r\n    <p class=\"hint\">\r\n      Please list your educational history. This can cover anything from GED to college degree\r\n    </p>\r\n    <form [formGroup]=\"educationForm\">\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">General Equivalency Diploma / Degree</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\r\n        <div class=\"field\">\r\n          <div class=\"head\">Diploma / Degree Type</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</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 class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">Country</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              &nbsp;{{ item.country }}\r\n            </ng-template>\r\n            <!-- <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-item$=\"item$\" let-index=\"index\">\r\n          <span class=\"ng-value-label\">\r\n            {{item.country}}\r\n          </span>\r\n          <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\r\n            <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n          </span> &nbsp;\r\n        </ng-template> -->\r\n          </ng-select>\r\n        </div>\r\n\r\n        <div class=\"field\">\r\n          <div class=\"head\">State</div>\r\n          <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n            placeholder=\"Select State\">\r\n\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              &nbsp;{{ item.stateName }}\r\n            </ng-template>\r\n\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <span class=\"ng-value-label\">\r\n                {{ item.stateName }}\r\n              </span>\r\n              <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n              </span>\r\n            </ng-template>\r\n          </ng-select>\r\n\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</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</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\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"field date\">\r\n          <div class=\"mb-3 head\">\r\n            <div class=\"head\">To Date</div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"To date\" [maxDate]=\"maxDate\" 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\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"row\">\r\n        <div class=\"field full-width\">\r\n          <div class=\"head\">Comments</div>\r\n          <textarea placeholder=\"Description\" formControlName=\"comments\">\r\n      </textarea>\r\n        </div>\r\n      </div>\r\n    </form>\r\n    <div class=\"row\">\r\n    <div class=\"upload-wrapper\">\r\n        <p *ngIf=\"!fileName\" class=\"upload-title\">Upload</p>\r\n        <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n        <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Add documents below</p>\r\n        <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Documents\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n          {{ fileName }}\r\n          <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"action\">\r\n        <!-- Left button: Back or Cancel -->\r\n        <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n          {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n        </button>\r\n\r\n        <div class=\"right-actions\">\r\n          <!-- Skip button only for first entry (not editing or adding) -->\r\n          <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n            class=\"secondary\" (click)=\"nextStep()\">\r\n            Skip\r\n          </button>\r\n\r\n          <!-- Primary button -->\r\n          <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n            (click)=\"saveFile()\">\r\n            {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\">\r\n    <h3>Education Preview</h3>\r\n  </div>\r\n  <div class=\"accordion\">\r\n\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n      class=\"accordion-item border-0\">\r\n\r\n      <!-- HEADER (preview) -->\r\n      <h2 class=\"accordion-header\">\r\n         <button class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#edu_' + i\"\r\n          aria-expanded=\"true\">\r\n\r\n          <!-- LEFT : TITLE -->\r\n          <span class=\"accordion-title\">\r\n            {{ exp.courseName }}\r\n          </span>\r\n\r\n          <!-- RIGHT : EDIT ICON -->\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n          </span>\r\n\r\n        </button>\r\n      </h2>\r\n\r\n\r\n      <!-- BODY -->\r\n      <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse show\" style=\"margin-bottom: 20px;\">\r\n        <div class=\"accordion-body\">\r\n\r\n          <!-- GRID DATA (2 or 3 columns) -->\r\n          <div class=\"detail-grid\">\r\n\r\n            <div>\r\n              <strong>Course Name</strong><br />\r\n              <span class=\"job-title\"> {{ exp.courseName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Course Type</strong><br />\r\n              <span class=\"job-title\"> {{ exp.courseType }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Institute Name</strong><br />\r\n              <span class=\"job-title\"> {{ exp.instituteName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>From Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.startDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>To Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.endDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>State</strong><br />\r\n              <span class=\"job-title\"> {{ exp.state | stateName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>City</strong><br />\r\n              <span class=\"job-title\"> {{ exp.city }}</span>\r\n            </div>\r\n\r\n            <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n              <strong>Document</strong><br />\r\n              <a [href]=\"cloudfrontUrl+exp.fileUrl\" target=\"_blank\">\r\n                <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n          <div class=\"full-width mt-3\">\r\n            <strong>Comments</strong><br />\r\n            <span class=\"job-title\"> {{ exp.comments }}</span>\r\n          </div>\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()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\" style=\"background-color: #1f4d5f;\">\r\n        Add More Educations\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:18px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input,select,textarea{padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin-top:24px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;font-weight:500;margin-bottom:5px}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;margin-top:20px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin:50px 100px 20px}.action{display:flex;justify-content:space-between;margin:50px 0 20px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@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}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!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:#1e2541!important}.icon-color{cursor:pointer;width:20px;height:20px;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}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:400px}.accordion-item{margin:20px 100px}.add-btn{width:200px}@media screen and (max-width: 767px){.row{flex-direction:column;gap:12px}.right-actions{gap:9px;flex-direction:column-reverse}.preview-header{margin-left:0}.accordion{margin:20px 0}.actions,.action{gap:8px;display:flex;flex-direction:column-reverse}.accordion-item{margin:20px 0}.add-btn{width:unset}.actions{margin:50px 0 20px}}.remove-file{margin-left:10px;cursor:pointer;color:red;font-weight:700}.file-icon{width:23px;height:23px}\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: i10.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10.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: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10.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" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EducationComponent, deps: [{ token: UserEducationService }, { token: UserService }, { token: CredentialingStore }, { token: EducationStore }, { token: CountryServices }, { token: PostalCodeServices }, { token: i6.TokenService }, { token: i8.FormBuilder }, { token: FileService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
+    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=\"education-container\">\r\n    <h3>Add Education</h3>\r\n    <p class=\"hint\">\r\n      Please list your educational history. This can cover anything from GED to college degree\r\n    </p>\r\n    <form [formGroup]=\"educationForm\">\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">General Equivalency Diploma / Degree</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\r\n        <div class=\"field\">\r\n          <div class=\"head\">Diploma / Degree Type</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</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 class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">Country</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              &nbsp;{{ item.country }}\r\n            </ng-template>\r\n            <!-- <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-item$=\"item$\" let-index=\"index\">\r\n          <span class=\"ng-value-label\">\r\n            {{item.country}}\r\n          </span>\r\n          <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\r\n            <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n          </span> &nbsp;\r\n        </ng-template> -->\r\n          </ng-select>\r\n        </div>\r\n\r\n        <div class=\"field\">\r\n          <div class=\"head\">State</div>\r\n          <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n            placeholder=\"Select State\">\r\n\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              &nbsp;{{ item.stateName }}\r\n            </ng-template>\r\n\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <span class=\"ng-value-label\">\r\n                {{ item.stateName }}\r\n              </span>\r\n              <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n              </span>\r\n            </ng-template>\r\n          </ng-select>\r\n\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</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</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\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"field date\">\r\n          <div class=\"mb-3 head\">\r\n            <div class=\"head\">To Date</div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"To date\" [maxDate]=\"maxDate\" 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\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"row\">\r\n        <div class=\"field full-width\">\r\n          <div class=\"head\">Comments</div>\r\n          <textarea placeholder=\"Description\" formControlName=\"comments\">\r\n      </textarea>\r\n        </div>\r\n      </div>\r\n    </form>\r\n    <div class=\"row\">\r\n    <div class=\"upload-wrapper\">\r\n        <p *ngIf=\"!fileName\" class=\"upload-title\">Upload</p>\r\n        <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n        <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Add documents below</p>\r\n        <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Documents\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n          {{ fileName }}\r\n          <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"action\">\r\n        <!-- Left button: Back or Cancel -->\r\n        <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n          {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n        </button>\r\n\r\n        <div class=\"right-actions\">\r\n          <!-- Skip button only for first entry (not editing or adding) -->\r\n          <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n            class=\"secondary\" (click)=\"nextStep()\">\r\n            Skip\r\n          </button>\r\n\r\n          <!-- Primary button -->\r\n          <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n            (click)=\"saveFile()\">\r\n            {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\">\r\n    <h3>Education Preview</h3>\r\n  </div>\r\n  <div class=\"accordion\">\r\n\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n      class=\"accordion-item border-0\">\r\n\r\n      <!-- HEADER (preview) -->\r\n      <h2 class=\"accordion-header\">\r\n         <button class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#edu_' + i\"\r\n          aria-expanded=\"true\">\r\n\r\n          <!-- LEFT : TITLE -->\r\n          <span class=\"accordion-title\">\r\n            {{ exp.courseName }}\r\n          </span>\r\n\r\n          <!-- RIGHT : EDIT ICON -->\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n          </span>\r\n\r\n        </button>\r\n      </h2>\r\n\r\n\r\n      <!-- BODY -->\r\n      <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse show\" style=\"margin-bottom: 20px;\">\r\n        <div class=\"accordion-body\">\r\n\r\n          <!-- GRID DATA (2 or 3 columns) -->\r\n          <div class=\"detail-grid\">\r\n\r\n            <div>\r\n              <strong>Course Name</strong><br />\r\n              <span class=\"job-title\"> {{ exp.courseName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Course Type</strong><br />\r\n              <span class=\"job-title\"> {{ exp.courseType }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Institute Name</strong><br />\r\n              <span class=\"job-title\"> {{ exp.instituteName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>From Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.startDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>To Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.endDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>State</strong><br />\r\n              <span class=\"job-title\"> {{ exp.state | stateName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>City</strong><br />\r\n              <span class=\"job-title\"> {{ exp.city }}</span>\r\n            </div>\r\n\r\n            <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n              <strong>Document</strong><br />\r\n              <a [href]=\"cloudfrontUrl+exp.fileUrl\" target=\"_blank\">\r\n                <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n          <div class=\"full-width mt-3\">\r\n            <strong>Comments</strong><br />\r\n            <span class=\"job-title\"> {{ exp.comments }}</span>\r\n          </div>\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()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\" style=\"background-color: #1f4d5f;\">\r\n        Add More Educations\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:18px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input,select,textarea{padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin-top:24px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;font-weight:500;margin-bottom:5px}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;margin-top:20px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin:50px 100px 20px}.action{display:flex;justify-content:space-between;margin:50px 0 20px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@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}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!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:#1e2541!important}.icon-color{cursor:pointer;width:20px;height:20px;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}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:400px}.accordion-item{margin:20px 100px}.add-btn{width:200px}@media screen and (max-width: 767px){.row{flex-direction:column;gap:12px}.right-actions{gap:9px;flex-direction:column-reverse}.preview-header{margin-left:0}.accordion{margin:20px 0}.actions,.action{gap:8px;display:flex;flex-direction:column-reverse}.accordion-item{margin:20px 0}.add-btn{width:unset}.actions{margin:50px 0 20px}}.remove-file{margin-left:10px;cursor:pointer;color:red;font-weight:700}.file-icon{width:23px;height:23px}\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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EducationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-education', standalone: false, template: "<div *ngIf=\"!showpreview()\">\r\n  <div class=\"education-container\">\r\n    <h3>Add Education</h3>\r\n    <p class=\"hint\">\r\n      Please list your educational history. This can cover anything from GED to college degree\r\n    </p>\r\n    <form [formGroup]=\"educationForm\">\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">General Equivalency Diploma / Degree</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\r\n        <div class=\"field\">\r\n          <div class=\"head\">Diploma / Degree Type</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</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 class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">Country</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              &nbsp;{{ item.country }}\r\n            </ng-template>\r\n            <!-- <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-item$=\"item$\" let-index=\"index\">\r\n          <span class=\"ng-value-label\">\r\n            {{item.country}}\r\n          </span>\r\n          <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\r\n            <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n          </span> &nbsp;\r\n        </ng-template> -->\r\n          </ng-select>\r\n        </div>\r\n\r\n        <div class=\"field\">\r\n          <div class=\"head\">State</div>\r\n          <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n            placeholder=\"Select State\">\r\n\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              &nbsp;{{ item.stateName }}\r\n            </ng-template>\r\n\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <span class=\"ng-value-label\">\r\n                {{ item.stateName }}\r\n              </span>\r\n              <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n              </span>\r\n            </ng-template>\r\n          </ng-select>\r\n\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</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</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\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"field date\">\r\n          <div class=\"mb-3 head\">\r\n            <div class=\"head\">To Date</div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"To date\" [maxDate]=\"maxDate\" 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\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"row\">\r\n        <div class=\"field full-width\">\r\n          <div class=\"head\">Comments</div>\r\n          <textarea placeholder=\"Description\" formControlName=\"comments\">\r\n      </textarea>\r\n        </div>\r\n      </div>\r\n    </form>\r\n    <div class=\"row\">\r\n    <div class=\"upload-wrapper\">\r\n        <p *ngIf=\"!fileName\" class=\"upload-title\">Upload</p>\r\n        <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n        <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Add documents below</p>\r\n        <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Documents\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n          {{ fileName }}\r\n          <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"action\">\r\n        <!-- Left button: Back or Cancel -->\r\n        <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n          {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n        </button>\r\n\r\n        <div class=\"right-actions\">\r\n          <!-- Skip button only for first entry (not editing or adding) -->\r\n          <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n            class=\"secondary\" (click)=\"nextStep()\">\r\n            Skip\r\n          </button>\r\n\r\n          <!-- Primary button -->\r\n          <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n            (click)=\"saveFile()\">\r\n            {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\">\r\n    <h3>Education Preview</h3>\r\n  </div>\r\n  <div class=\"accordion\">\r\n\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n      class=\"accordion-item border-0\">\r\n\r\n      <!-- HEADER (preview) -->\r\n      <h2 class=\"accordion-header\">\r\n         <button class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#edu_' + i\"\r\n          aria-expanded=\"true\">\r\n\r\n          <!-- LEFT : TITLE -->\r\n          <span class=\"accordion-title\">\r\n            {{ exp.courseName }}\r\n          </span>\r\n\r\n          <!-- RIGHT : EDIT ICON -->\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n          </span>\r\n\r\n        </button>\r\n      </h2>\r\n\r\n\r\n      <!-- BODY -->\r\n      <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse show\" style=\"margin-bottom: 20px;\">\r\n        <div class=\"accordion-body\">\r\n\r\n          <!-- GRID DATA (2 or 3 columns) -->\r\n          <div class=\"detail-grid\">\r\n\r\n            <div>\r\n              <strong>Course Name</strong><br />\r\n              <span class=\"job-title\"> {{ exp.courseName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Course Type</strong><br />\r\n              <span class=\"job-title\"> {{ exp.courseType }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Institute Name</strong><br />\r\n              <span class=\"job-title\"> {{ exp.instituteName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>From Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.startDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>To Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.endDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>State</strong><br />\r\n              <span class=\"job-title\"> {{ exp.state | stateName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>City</strong><br />\r\n              <span class=\"job-title\"> {{ exp.city }}</span>\r\n            </div>\r\n\r\n            <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n              <strong>Document</strong><br />\r\n              <a [href]=\"cloudfrontUrl+exp.fileUrl\" target=\"_blank\">\r\n                <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n          <div class=\"full-width mt-3\">\r\n            <strong>Comments</strong><br />\r\n            <span class=\"job-title\"> {{ exp.comments }}</span>\r\n          </div>\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()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\" style=\"background-color: #1f4d5f;\">\r\n        Add More Educations\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:18px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input,select,textarea{padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin-top:24px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;font-weight:500;margin-bottom:5px}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;margin-top:20px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin:50px 100px 20px}.action{display:flex;justify-content:space-between;margin:50px 0 20px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@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}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!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:#1e2541!important}.icon-color{cursor:pointer;width:20px;height:20px;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}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:400px}.accordion-item{margin:20px 100px}.add-btn{width:200px}@media screen and (max-width: 767px){.row{flex-direction:column;gap:12px}.right-actions{gap:9px;flex-direction:column-reverse}.preview-header{margin-left:0}.accordion{margin:20px 0}.actions,.action{gap:8px;display:flex;flex-direction:column-reverse}.accordion-item{margin:20px 0}.add-btn{width:unset}.actions{margin:50px 0 20px}}.remove-file{margin-left:10px;cursor:pointer;color:red;font-weight:700}.file-icon{width:23px;height:23px}\n"] }]
-        }], ctorParameters: () => [{ type: UserEducationService }, { type: UserService }, { type: CredentialingStore }, { type: EducationStore }, { type: CountryServices }, { type: PostalCodeServices }, { type: i6.TokenService }, { type: i10.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
+        }], ctorParameters: () => [{ type: UserEducationService }, { type: UserService }, { type: CredentialingStore }, { type: EducationStore }, { type: CountryServices }, { type: PostalCodeServices }, { type: i6.TokenService }, { type: i8.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
                 type: Input
             }], providerName: [{
                 type: Input
@@ -2986,13 +2986,13 @@ class CertificationComponent {
         this.certificateForm.reset();
         this.fileName = '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CertificationComponent, deps: [{ token: UserDocumentService }, { token: UserService }, { token: CredentialingStore }, { token: CertificationStore }, { token: i6.TokenService }, { token: PostalCodeServices }, { token: i10.FormBuilder }, { token: FileService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CertificationComponent, isStandalone: false, selector: "app-certification", inputs: { states: "states", providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n  <h3>Add Certificates</h3>\r\n  <p class=\"hint\">\r\n    Recommended for your role\r\n  </p>\r\n  <div class=\"document-container\">\r\n    <input type=\"text\" class=\"search-input\" placeholder=\"Search documents here...\" [formControl]=\"searchControl\" />\r\n\r\n    <div class=\"grid\">\r\n      <div *ngFor=\"let item of documentTypes\">\r\n        <label class=\"checkbox-row\">\r\n          <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n          <span class=\"title\">{{ item.type }}</span>\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <form [formGroup]=\"certificateForm\">\r\n    <div class=\"row\" style=\"margin-top: 20px;\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">Certificate Number</div>\r\n        <input type=\"text\" placeholder=\"Enter your Certificate Number here\" formControlName=\"number\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n               certificateForm.get('number')?.hasError('required')\">\r\n          Certificate number is required\r\n        </small>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"head\">Certificate Issued By</div>\r\n        <input type=\"text\" placeholder=\"Enter Certificate Issued By here\" formControlName=\"issuedBy\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n               certificateForm.get('issuedBy')?.hasError('required')\">\r\n          Certificate issued by is required\r\n        </small>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">Issued State</div>\r\n        <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n          placeholder=\"Select Issued State here\">\r\n          <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n            &nbsp;{{ item.stateName }}\r\n          </ng-template>\r\n          <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n            <span class=\"ng-value-label\">\r\n              {{ item.stateName }}\r\n            </span>\r\n            <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n              <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n            </span>\r\n          </ng-template>\r\n        </ng-select>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Issued Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n            [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n               certificateForm.get('issueDate')?.hasError('required')\">\r\n            Issued date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Expiration Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" [maxDate]=\"maxDate\" bsDatepicker\r\n            [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n               certificateForm.get('expiryDate')?.hasError('required')\">\r\n            Expiry date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field full-width\">\r\n        <div class=\"head\">Comments</div>\r\n        <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n      </textarea>\r\n      </div>\r\n    </div>\r\n  </form>\r\n  <div class=\"row\">\r\n   <div class=\"upload-wrapper\">\r\n        <p *ngIf=\"!fileName\" class=\"upload-title\">Upload</p>\r\n        <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n        <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Add documents below</p>\r\n        <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Documents\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n          {{ fileName }}\r\n          <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n        </p>\r\n      </div>\r\n\r\n  </div>\r\n  <div class=\"action\">\r\n    <!-- Left button: Back or Cancel -->\r\n    <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n      {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n    </button>\r\n\r\n    <div class=\"right-actions\">\r\n      <!-- Skip button only for first entry (not editing or adding) -->\r\n      <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n        (click)=\"nextStep()\">\r\n        Skip\r\n      </button>\r\n\r\n      <!-- Primary button -->\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n        (click)=\"saveFile()\">\r\n        {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\">\r\n    <h3>Certifications Preview</h3>\r\n  </div>\r\n  <div class=\"accordion\" style=\"margin: 20px 100px;\">\r\n\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n      class=\"accordion-item border-0\">\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#edu_' + i\"\r\n          aria-expanded=\"true\">\r\n          <span class=\"accordion-title\">\r\n            {{ exp.documentTypeName }}\r\n          </span>\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n          </span>\r\n        </button>\r\n      </h2>\r\n\r\n\r\n      <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse show\" style=\"margin-bottom: 20px;\">\r\n        <div class=\"accordion-body\">\r\n          <div class=\"detail-grid\">\r\n            <div>\r\n              <strong>Certificate Name</strong><br />\r\n              <span class=\"job-title\"> {{ exp.documentTypeName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Certificate Number</strong><br />\r\n              <span class=\"job-title\"> {{ exp.number }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued By</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issuedBy }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued State</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issuedState | stateName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issueDate | date:'MM/dd/yyyy' }} </span>\r\n            </div>\r\n            <div>\r\n              <strong>Expiry Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n\r\n            <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n              <strong>Document</strong><br />\r\n              <a [href]=\"cloudfrontUrl+exp.fileUrl\" target=\"_blank\">\r\n                <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n          <div class=\"full-width mt-3\">\r\n            <strong>Description</strong><br />\r\n            <span class=\"job-title\"> {{ exp.notes }}</span>\r\n          </div>\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()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\" style=\"background-color: #1f4d5f;\">\r\n        Add More Certifications\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:23px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;color:#374151}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;font-weight:500;margin-bottom:5px}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.document-container{max-width:1100px;margin:auto}.search-input{width:100%;max-width:400px;height:44px;margin-bottom:16px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer}.content .title{font-weight:600;font-size:14px}.checkbox-row input{margin:0}.title{font-size:14px;font-weight:600}.content .desc{font-size:12px;color:#666;margin-top:4px}.save-btn{margin-top:20px;padding:10px 18px;border-radius:6px;border:none;background:#4077ad;color:#fff;cursor:pointer}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!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:#1e2541!important}.work-preview{max-width:1000px;padding:15px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin:50px 100px 20px}.action{display:flex;justify-content:space-between;margin:50px 0 20px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@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}}.icon-color{cursor:pointer;width:20px;height:20px;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}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:350px}.accordion{margin:20px 100px}.add-btn{width:200px}@media screen and (max-width: 767px){.hint{margin-bottom:5px}.add-btn{width:unset}.date-time-filter{font-size:14px}.search-input{margin-bottom:0}.right-actions{gap:5px}.preview-header{margin-left:0}.accordion{margin:20px 0!important}.actions{flex-direction:column-reverse;gap:5px}.right-actions{gap:5px;flex-direction:column-reverse}.actions{margin:50px 0 20px}.action{flex-direction:column-reverse;gap:5px}}.remove-file{margin-left:10px;cursor:pointer;color:red;font-weight:700}.file-icon{width:23px;height:23px}\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: i10.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10.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: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i10.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10.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" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CertificationComponent, deps: [{ token: UserDocumentService }, { token: UserService }, { token: CredentialingStore }, { token: CertificationStore }, { token: i6.TokenService }, { token: PostalCodeServices }, { token: i8.FormBuilder }, { token: FileService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CertificationComponent, isStandalone: false, selector: "app-certification", inputs: { states: "states", providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n  <h3>Add Certificates</h3>\r\n  <p class=\"hint\">\r\n    Recommended for your role\r\n  </p>\r\n  <div class=\"document-container\">\r\n    <input type=\"text\" class=\"search-input\" placeholder=\"Search documents here...\" [formControl]=\"searchControl\" />\r\n\r\n    <div class=\"grid\">\r\n      <div *ngFor=\"let item of documentTypes\">\r\n        <label class=\"checkbox-row\">\r\n          <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n          <span class=\"title\">{{ item.type }}</span>\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <form [formGroup]=\"certificateForm\">\r\n    <div class=\"row\" style=\"margin-top: 20px;\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">Certificate Number</div>\r\n        <input type=\"text\" placeholder=\"Enter your Certificate Number here\" formControlName=\"number\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n               certificateForm.get('number')?.hasError('required')\">\r\n          Certificate number is required\r\n        </small>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"head\">Certificate Issued By</div>\r\n        <input type=\"text\" placeholder=\"Enter Certificate Issued By here\" formControlName=\"issuedBy\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n               certificateForm.get('issuedBy')?.hasError('required')\">\r\n          Certificate issued by is required\r\n        </small>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">Issued State</div>\r\n        <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n          placeholder=\"Select Issued State here\">\r\n          <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n            &nbsp;{{ item.stateName }}\r\n          </ng-template>\r\n          <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n            <span class=\"ng-value-label\">\r\n              {{ item.stateName }}\r\n            </span>\r\n            <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n              <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n            </span>\r\n          </ng-template>\r\n        </ng-select>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Issued Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n            [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n               certificateForm.get('issueDate')?.hasError('required')\">\r\n            Issued date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Expiration Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" [maxDate]=\"maxDate\" bsDatepicker\r\n            [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n               certificateForm.get('expiryDate')?.hasError('required')\">\r\n            Expiry date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field full-width\">\r\n        <div class=\"head\">Comments</div>\r\n        <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n      </textarea>\r\n      </div>\r\n    </div>\r\n  </form>\r\n  <div class=\"row\">\r\n   <div class=\"upload-wrapper\">\r\n        <p *ngIf=\"!fileName\" class=\"upload-title\">Upload</p>\r\n        <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n        <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Add documents below</p>\r\n        <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Documents\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n          {{ fileName }}\r\n          <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n        </p>\r\n      </div>\r\n\r\n  </div>\r\n  <div class=\"action\">\r\n    <!-- Left button: Back or Cancel -->\r\n    <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n      {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n    </button>\r\n\r\n    <div class=\"right-actions\">\r\n      <!-- Skip button only for first entry (not editing or adding) -->\r\n      <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n        (click)=\"nextStep()\">\r\n        Skip\r\n      </button>\r\n\r\n      <!-- Primary button -->\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n        (click)=\"saveFile()\">\r\n        {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\">\r\n    <h3>Certifications Preview</h3>\r\n  </div>\r\n  <div class=\"accordion\" style=\"margin: 20px 100px;\">\r\n\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n      class=\"accordion-item border-0\">\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#edu_' + i\"\r\n          aria-expanded=\"true\">\r\n          <span class=\"accordion-title\">\r\n            {{ exp.documentTypeName }}\r\n          </span>\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n          </span>\r\n        </button>\r\n      </h2>\r\n\r\n\r\n      <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse show\" style=\"margin-bottom: 20px;\">\r\n        <div class=\"accordion-body\">\r\n          <div class=\"detail-grid\">\r\n            <div>\r\n              <strong>Certificate Name</strong><br />\r\n              <span class=\"job-title\"> {{ exp.documentTypeName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Certificate Number</strong><br />\r\n              <span class=\"job-title\"> {{ exp.number }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued By</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issuedBy }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued State</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issuedState | stateName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issueDate | date:'MM/dd/yyyy' }} </span>\r\n            </div>\r\n            <div>\r\n              <strong>Expiry Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n\r\n            <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n              <strong>Document</strong><br />\r\n              <a [href]=\"cloudfrontUrl+exp.fileUrl\" target=\"_blank\">\r\n                <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n          <div class=\"full-width mt-3\">\r\n            <strong>Description</strong><br />\r\n            <span class=\"job-title\"> {{ exp.notes }}</span>\r\n          </div>\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()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\" style=\"background-color: #1f4d5f;\">\r\n        Add More Certifications\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:23px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;color:#374151}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;font-weight:500;margin-bottom:5px}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.document-container{max-width:1100px;margin:auto}.search-input{width:100%;max-width:400px;height:44px;margin-bottom:16px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer}.content .title{font-weight:600;font-size:14px}.checkbox-row input{margin:0}.title{font-size:14px;font-weight:600}.content .desc{font-size:12px;color:#666;margin-top:4px}.save-btn{margin-top:20px;padding:10px 18px;border-radius:6px;border:none;background:#4077ad;color:#fff;cursor:pointer}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!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:#1e2541!important}.work-preview{max-width:1000px;padding:15px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin:50px 100px 20px}.action{display:flex;justify-content:space-between;margin:50px 0 20px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@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}}.icon-color{cursor:pointer;width:20px;height:20px;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}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:350px}.accordion{margin:20px 100px}.add-btn{width:200px}@media screen and (max-width: 767px){.hint{margin-bottom:5px}.add-btn{width:unset}.date-time-filter{font-size:14px}.search-input{margin-bottom:0}.right-actions{gap:5px}.preview-header{margin-left:0}.accordion{margin:20px 0!important}.actions{flex-direction:column-reverse;gap:5px}.right-actions{gap:5px;flex-direction:column-reverse}.actions{margin:50px 0 20px}.action{flex-direction:column-reverse;gap:5px}}.remove-file{margin-left:10px;cursor:pointer;color:red;font-weight:700}.file-icon{width:23px;height:23px}\n"], dependencies: [{ kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CertificationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-certification', standalone: false, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n  <h3>Add Certificates</h3>\r\n  <p class=\"hint\">\r\n    Recommended for your role\r\n  </p>\r\n  <div class=\"document-container\">\r\n    <input type=\"text\" class=\"search-input\" placeholder=\"Search documents here...\" [formControl]=\"searchControl\" />\r\n\r\n    <div class=\"grid\">\r\n      <div *ngFor=\"let item of documentTypes\">\r\n        <label class=\"checkbox-row\">\r\n          <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n          <span class=\"title\">{{ item.type }}</span>\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <form [formGroup]=\"certificateForm\">\r\n    <div class=\"row\" style=\"margin-top: 20px;\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">Certificate Number</div>\r\n        <input type=\"text\" placeholder=\"Enter your Certificate Number here\" formControlName=\"number\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n               certificateForm.get('number')?.hasError('required')\">\r\n          Certificate number is required\r\n        </small>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"head\">Certificate Issued By</div>\r\n        <input type=\"text\" placeholder=\"Enter Certificate Issued By here\" formControlName=\"issuedBy\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n               certificateForm.get('issuedBy')?.hasError('required')\">\r\n          Certificate issued by is required\r\n        </small>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">Issued State</div>\r\n        <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n          placeholder=\"Select Issued State here\">\r\n          <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n            &nbsp;{{ item.stateName }}\r\n          </ng-template>\r\n          <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n            <span class=\"ng-value-label\">\r\n              {{ item.stateName }}\r\n            </span>\r\n            <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n              <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n            </span>\r\n          </ng-template>\r\n        </ng-select>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Issued Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n            [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n               certificateForm.get('issueDate')?.hasError('required')\">\r\n            Issued date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Expiration Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" [maxDate]=\"maxDate\" bsDatepicker\r\n            [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n               certificateForm.get('expiryDate')?.hasError('required')\">\r\n            Expiry date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field full-width\">\r\n        <div class=\"head\">Comments</div>\r\n        <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n      </textarea>\r\n      </div>\r\n    </div>\r\n  </form>\r\n  <div class=\"row\">\r\n   <div class=\"upload-wrapper\">\r\n        <p *ngIf=\"!fileName\" class=\"upload-title\">Upload</p>\r\n        <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n        <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Add documents below</p>\r\n        <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Documents\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n          {{ fileName }}\r\n          <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n        </p>\r\n      </div>\r\n\r\n  </div>\r\n  <div class=\"action\">\r\n    <!-- Left button: Back or Cancel -->\r\n    <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n      {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n    </button>\r\n\r\n    <div class=\"right-actions\">\r\n      <!-- Skip button only for first entry (not editing or adding) -->\r\n      <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n        (click)=\"nextStep()\">\r\n        Skip\r\n      </button>\r\n\r\n      <!-- Primary button -->\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n        (click)=\"saveFile()\">\r\n        {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\">\r\n    <h3>Certifications Preview</h3>\r\n  </div>\r\n  <div class=\"accordion\" style=\"margin: 20px 100px;\">\r\n\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n      class=\"accordion-item border-0\">\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#edu_' + i\"\r\n          aria-expanded=\"true\">\r\n          <span class=\"accordion-title\">\r\n            {{ exp.documentTypeName }}\r\n          </span>\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n          </span>\r\n        </button>\r\n      </h2>\r\n\r\n\r\n      <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse show\" style=\"margin-bottom: 20px;\">\r\n        <div class=\"accordion-body\">\r\n          <div class=\"detail-grid\">\r\n            <div>\r\n              <strong>Certificate Name</strong><br />\r\n              <span class=\"job-title\"> {{ exp.documentTypeName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Certificate Number</strong><br />\r\n              <span class=\"job-title\"> {{ exp.number }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued By</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issuedBy }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued State</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issuedState | stateName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issueDate | date:'MM/dd/yyyy' }} </span>\r\n            </div>\r\n            <div>\r\n              <strong>Expiry Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n\r\n            <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n              <strong>Document</strong><br />\r\n              <a [href]=\"cloudfrontUrl+exp.fileUrl\" target=\"_blank\">\r\n                <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n          <div class=\"full-width mt-3\">\r\n            <strong>Description</strong><br />\r\n            <span class=\"job-title\"> {{ exp.notes }}</span>\r\n          </div>\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()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\" style=\"background-color: #1f4d5f;\">\r\n        Add More Certifications\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:23px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;color:#374151}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;font-weight:500;margin-bottom:5px}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.document-container{max-width:1100px;margin:auto}.search-input{width:100%;max-width:400px;height:44px;margin-bottom:16px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer}.content .title{font-weight:600;font-size:14px}.checkbox-row input{margin:0}.title{font-size:14px;font-weight:600}.content .desc{font-size:12px;color:#666;margin-top:4px}.save-btn{margin-top:20px;padding:10px 18px;border-radius:6px;border:none;background:#4077ad;color:#fff;cursor:pointer}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!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:#1e2541!important}.work-preview{max-width:1000px;padding:15px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin:50px 100px 20px}.action{display:flex;justify-content:space-between;margin:50px 0 20px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@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}}.icon-color{cursor:pointer;width:20px;height:20px;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}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:350px}.accordion{margin:20px 100px}.add-btn{width:200px}@media screen and (max-width: 767px){.hint{margin-bottom:5px}.add-btn{width:unset}.date-time-filter{font-size:14px}.search-input{margin-bottom:0}.right-actions{gap:5px}.preview-header{margin-left:0}.accordion{margin:20px 0!important}.actions{flex-direction:column-reverse;gap:5px}.right-actions{gap:5px;flex-direction:column-reverse}.actions{margin:50px 0 20px}.action{flex-direction:column-reverse;gap:5px}}.remove-file{margin-left:10px;cursor:pointer;color:red;font-weight:700}.file-icon{width:23px;height:23px}\n"] }]
-        }], ctorParameters: () => [{ type: UserDocumentService }, { type: UserService }, { type: CredentialingStore }, { type: CertificationStore }, { type: i6.TokenService }, { type: PostalCodeServices }, { type: i10.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { states: [{
+        }], ctorParameters: () => [{ type: UserDocumentService }, { type: UserService }, { type: CredentialingStore }, { type: CertificationStore }, { type: i6.TokenService }, { type: PostalCodeServices }, { type: i8.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { states: [{
                 type: Input
             }], providerId: [{
                 type: Input
@@ -3996,8 +3996,8 @@ class SkillsComponent {
     ngOnDestroy() {
         this.userSkillsSub?.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SkillsComponent, deps: [{ token: SkillSetService }, { token: UserSkillSetService }, { token: UserService }, { token: i10.UntypedFormBuilder }, { token: UtilsService }, { token: i6.RoleContextService }, { token: CredentialingStore }, { token: i6.TokenService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SkillsComponent, isStandalone: false, selector: "app-skills", inputs: { providerId: "providerId", providerName: "providerName" }, ngImport: i0, template: "<!-- SKILL PREVIEW LIST -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'preview'\">\r\n  <h5 class=\"title text-secondary\">Skills Preview</h5>\r\n  <!-- <p class=\"subtitle\">First-time users should enter skillsets with Inspector Match, Once you setup skillsets in your\r\n    business profile you can add skills under</p> -->\r\n  <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n    <accordion-group *ngFor=\"let skill of userSkillsPreview\" #accGroup\r\n      (isOpenChange)=\"onSkillAccordionChange(skill, $event)\">\r\n      <!-- HEADER -->\r\n      <div accordion-heading class=\"skill-preview-header\">\r\n        <span class=\"fw-semibold text-secondary\">\r\n          {{ skill.skillSetName }}\r\n        </span>\r\n        <div class=\"actions\">\r\n          <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n            <button type=\"button\" class=\"me-3\" (click)=\"editSkillFromPreview(skill, accGroup, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" alt=\"icon\" />\r\n            </button>\r\n            <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n              [class.rotate]=\"accGroup.isOpen\" />\r\n          </ng-container>\r\n          <ng-container *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\">\r\n            <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backToSkill(accGroup)\">\r\n              Cancel\r\n            </button>\r\n            <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserSkillset()\" [disabled]=\"showLoader\">\r\n              Update\r\n            </button>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <!-- BODY -->\r\n      <div class=\"skill-preview-body content-part\">\r\n        <!-- DISPLAY MODE -->\r\n        <div *ngIf=\"!isEditMode || model?.skillSetId !== skill.skillSetId\"\r\n          class=\"d-flex justify-content-between align-items-center flex-wrap gap-3\">\r\n          <div>\r\n            <label>Service Provider</label> <br>\r\n            {{ skill.providerName }}\r\n          </div>\r\n          <div>\r\n            <label>Skill</label> <br>\r\n            {{ skill.skillSetName }}\r\n          </div>\r\n          <div style=\"pointer-events: none;\">\r\n            <label>Self Ability Rating</label> <br>\r\n            <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n          </div>\r\n          <div>\r\n            <label class=\"mb-0 pb-0 label\">Years of Experience</label> <br>\r\n            {{ skill?.year }}\r\n          </div>\r\n          <div>\r\n            <label>Visible</label> <br>\r\n            <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"skill.profileVisibility\" disabled>\r\n          </div>\r\n          <div class=\"w-100 mt-3\">\r\n            <label>Description</label> <br>\r\n            {{ skill.notes }}\r\n          </div>\r\n        </div>\r\n        <!-- EDIT MODE -->\r\n        <div *ngIf=\"isEditMode && model?.skillSetId === skill.skillSetId\" [formGroup]=\"tab.at(0)\">\r\n          <div class=\"d-flex justify-content-between align-items-center flex-wrap gap-3\">\r\n            <div>\r\n              <label>Service Provider</label> <br>\r\n              {{ skill.providerName }}\r\n            </div>\r\n            <div>\r\n              <label>Skill</label> <br>\r\n              {{ skill.skillSetName }}\r\n            </div>\r\n            <div>\r\n              <label>Self Ability Rating</label> <br>\r\n              <ngx-stars *ngIf=\"tab.at(0)?.get('starRating')?.value !== null\" [key]=\"tab.at(0).get('starRating')?.value\"\r\n                [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n                (ratingOutput)=\"onEditRating($event)\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div style=\"width: 200px;\">\r\n              <label class=\"mb-0 label pb-0\">Years of Experience</label> <br>\r\n              <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n                formControlName=\"year\" [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\"\r\n                bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"></ng-select>\r\n            </div>\r\n            <div>\r\n              <label>Visible</label> <br>\r\n              <input class=\"form-check-input \" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n            </div>\r\n          </div>\r\n          <div class=\"mt-3\">\r\n            <label>Description</label> <br>\r\n            <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\" placeholder=\"Enter notes\"\r\n              style=\"height: 80px;\"></textarea>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </accordion-group>\r\n  </accordion>\r\n</div>\r\n\r\n<!-- Add part -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'add'\">\r\n  <h2 class=\"title text-secondary\">Add Skills</h2>\r\n  <p class=\"subtitle\">A minimum of 5 skills is needed</p>\r\n  <div class=\"content-part\">\r\n    <h6 class=\"text-secondary\"> {{ form?.value?.id ? \"Update Skill Category\" : \"Create Skill Category\" }}</h6>\r\n    <div class=\"sub-section\">\r\n      <div class=\"row mt-2\">\r\n        <div class=\"col-12 col-md-12 col-sm-12\">\r\n          <div class=\"search-part\">\r\n            <input type=\"text\" placeholder=\"Search / Add Skillsets here\" [(ngModel)]=\"searchSkillQry\"\r\n              (input)=\"getSkillSets()\" />\r\n            <button class=\"btn\" (click)=\"createNewSkills()\" tooltip=\"Add Skillset\">\r\n              <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n            </button>\r\n          </div>\r\n          <div *ngIf=\"errMsg\" class=\"invalid-feedback is-invalid d-block\">\r\n            Please Enter Skillsets Name\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n        {{nameError}}\r\n      </div>\r\n      <div class=\"col skills-section\" [ngClass]=\"showLoading && !isEditMode ? 'loader':''\">\r\n        <div class=\"row mt-2\" [ngStyle]=\"showLoader && !isEditMode ? {'min-height': '150px'} : {}\">\r\n          <div class=\"col-12 col-md-4\" *ngFor=\"let skill of skillSets\">\r\n            <div class=\"mt-2 gap-1 d-flex align-items-start\">\r\n              <input type=\"checkbox\" [checked]=\"skill.selected\" (change)=\"onSelectedSkillsets($event, skill)\"\r\n                id=\"{{skill.id}}\" name=\"{{skill.id}}\">\r\n              <label class=\"text-title\" for=\"{{skill.id}}\">\r\n                {{ skill.name }}\r\n              </label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        [ngClass]=\"{ 'loader': showLoading && !isEditMode,'pt-3': !showLoading && !isEditMode,'edit-mode': isEditMode}\">\r\n        <!-- <loader [show]=\"showLoading\" [small]=\"true\"></loader> -->\r\n        <tabset #tabSet>\r\n          <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab.controls; let index = index\"\r\n            [label]=\"tabs[index]\" tab1 id={{tabs[index]}} #{{tabs[index]}}>\r\n            <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n              <span class=\"text-secondary\">{{tabs[index]}}</span>\r\n              <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.skillSetId.value)\">\r\n                <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n              </button>\r\n            </ng-template>\r\n            <div [formGroup]=\"group\" class=\"tab-card\">\r\n              <div class=\"card-body\">\r\n                <div class=\"row\">\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Self Ability Rating</label>\r\n                    <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\" [maxStars]=\"5\">\r\n                    </ngx-stars>\r\n                    <div *ngIf=\"userSkillSubmitted && k?.starRating?.errors\" class=\"invalid-feedback\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\">\r\n                      <div *ngIf=\"k?.starRating?.errors?.required\">Star\r\n                        Rating is\r\n                        required</div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label \">Years of Experience</label>\r\n                    <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\"\r\n                      bindLabel=\"text\" formControlName=\"year\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\" bindValue=\"value\"\r\n                      [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"\r\n                      (change)=\"onYearChange(group)\"></ng-select>\r\n\r\n                    <div *ngIf=\"userSkillSubmitted && k?.year?.errors\" class=\"invalid-feedback\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\">\r\n                      <div *ngIf=\"k?.year?.errors?.required\">Year is\r\n                        required</div>\r\n                    </div>\r\n\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1 text-center\">\r\n                    <label class=\"label\">Profile\r\n                      Visibility</label><br />\r\n                    <input class=\"form-check-input \" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n                  </div>\r\n\r\n                  <div class=\"col-12 col-md-2 mt-1\" *ngIf=\"tab.controls.length>1 && index == copyOptionIndex\">\r\n                    <label class=\"mb-2 label\">Copy to All Tabs</label>\r\n                    <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index,group.value)\"\r\n                      role=\"switch\">\r\n                  </div>\r\n                </div>\r\n                <div>\r\n                  <label class=\"label\">Description</label>\r\n                  <div class=\"col-12 col-md-12 mt-1\">\r\n                    <textarea placeholder=\"Description of your Skill here\" formControlName=\"notes\" class=\"form-control\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.notes?.errors }\" rows=\"5\"></textarea>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </tab>\r\n        </tabset>\r\n      </div>\r\n      <!-- <div class=\"row pt-3\">\r\n        <div class=\"pt-3 text-end\">\r\n          <button class=\"back-btn\" (click)=\"reset()\">Reset</button>\r\n        </div>\r\n      </div> -->\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Footer buttons -->\r\n\r\n<div *ngIf=\"store.stepView() === 'add'\" class=\"skills-container last footer-actions\">\r\n  <button class=\"back-btn\" (click)=\"cancel()\">Cancel</button>\r\n  <div class=\"mb-res\">   \r\n    <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n      Continue</button>\r\n  </div>\r\n</div>\r\n\r\n\r\n<div *ngIf=\"store.stepView() !== 'add'\" class=\"skills-container last footer-actions\">\r\n  <button class=\"back-btn\" (click)=\"back()\">Back</button>\r\n  <div class=\"mb-res\">\r\n    <button class=\"back-btn me-3\" *ngIf=\"store.stepView() === 'add'\" (click)=\"next()\">Skip</button>\r\n    <button class=\"continue-btn add me-3\" *ngIf=\"store.stepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n      Add More Skills\r\n    </button>\r\n    <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n      Continue</button>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";.skills-container{max-width:1000px;margin:40px auto;min-height:300px}.skills-container.last{min-height:unset}.title{font-size:22px;margin-bottom:4px}.subtitle{font-size:13px;color:#777;margin-bottom:30px}.content-part{background:#fff}.content-part p,.content-part div{font-size:small}.content-part .card{margin-top:15px;background-color:#fff;border-radius:10px}.content-part .card .row{margin-top:-15px}.content-part .card .sub-section{padding:0 10px}.content-part .card .sub-section .title{font-size:16px;font-weight:400;color:var(--font-primary)}.content-part .card .sub-section .info-title{font-size:12px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .card .sub-section .content{font-size:12px}.content-part .card .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px}.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-color:#fff;border-radius:5px;color:var(--font-primary);margin-top:15px}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;position:relative;border-radius:5px;border:1px solid #d3dae6;padding:10px 0 10px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;height:45px}.content-part .search-part input{width:auto;flex:1;color:var(--font-dark);font-size:var(--font12-input);font-weight:400;border:none;background:none;outline:none}.content-part .search-part .btn{background:#1e2541;border-radius:5px;padding:5px;width:41px;height:36px;margin-right:3px}.content-part .search-part .btn img{filter:brightness(0) invert(1)}.content-part textarea{width:100%;height:100px;background:none}.content-part .skills-section{margin-left:5px}.content-part .skills-section .category-title{margin-bottom:5px;font-size:13px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .skills-section .text-title{font-size:13px;margin-left:3px;color:var(--font-primary);display:contents}.content-part .skills-section input[type=checkbox]{border:2px solid #000!important;height:14px!important;width:15px!important;border-radius:2px!important;margin:2px}.content-part .skills-section input[type=checkbox]:checked{background-color:#000!important;border:2px solid #000!important}.content-part .skills-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#000;width:15px;display:flex;justify-content:center;border:2px solid #000;height:14px;align-items:center;border-radius:2px}.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:#237b4b!important;border:1px solid #237b4b!important}::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#f1f4fa}::ng-deep .ng-select .ng-select-container{background:#f1f4fa;border:1px solid #ccc;border-radius:5px}.back-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background:#d3dae6;color:#fff;border-radius:5px;padding:6px 8px}.save-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px}.create-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px;height:40px;min-width:9rem}.form-control{color:#333;background:none!important;min-height:36px;font-size:small;height:43px}.form-control:focus{box-shadow:none!important}.close-popup{position:absolute;right:7px;top:4px;width:25px}.label{font-size:12px;font-weight:700;padding-bottom:8px}.form-control:focus{border:var(--bs-border-width) solid var(--bs-border-color)}::ng-deep .nav-link{color:#000!important}.loader{filter:blur(3px);height:40px}.edit-mode ::ng-deep .nav-tabs{display:none!important}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:100px}.skip-btn,.back-btn{background:#d3dae6;color:#6c757dc7;font-size:14px;border-radius:5px;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px}.skip-btn.edit,.back-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn{padding:7px 23px;background-color:#4077ad;color:#fff;border-radius:5px;min-width:8rem;min-height:45px;border:white}.continue-btn:disabled{background-color:#d1d5db;cursor:not-allowed}.continue-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn.add{background-color:#2e5b70}.skill-preview-wrapper{margin-bottom:24px}.skill-preview-card{border-radius:12px;margin-bottom:12px;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease;overflow:hidden}::ng-deep accordion-group+accordion-group{margin-top:20px}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:10px 0}.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)}.skill-preview-body label{font-weight:500;font-size:13px;color:#6b7280}.skill-preview-body p{margin:0}@media screen and (max-width: 767px){.skills-container{padding:0 10px}.footer-actions{flex-direction:column-reverse;gap:5px;margin-top:65px}.back-btn{width:100%}.continue-btn{padding:10px 43px}.mb-res{display:flex;flex-direction:column-reverse;gap:5px;width:100%}}\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: i10.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: i10.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i10.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "component", type: NgxStarsComponent, selector: "ngx-stars", inputs: ["maxStars", "initialStars", "readonly", "size", "color", "animation", "animationSpeed", "customPadding", "wholeStars", "customStarIcons"], outputs: ["ratingOutput"] }, { kind: "directive", type: i12$2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i13.TabDirective, selector: "tab, [tab]", inputs: ["heading", "id", "disabled", "removable", "tabOrder", "customClass", "active"], outputs: ["selectTab", "deselect", "removed"], exportAs: ["tab"] }, { kind: "component", type: i13.TabsetComponent, selector: "tabset", inputs: ["vertical", "justified", "type"] }, { kind: "directive", type: i13.TabHeadingDirective, selector: "[tabHeading]" }, { kind: "component", type: i14.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i14.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }], animations: [
+    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: i6.RoleContextService }, { token: CredentialingStore }, { token: i6.TokenService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SkillsComponent, isStandalone: false, selector: "app-skills", inputs: { providerId: "providerId", providerName: "providerName" }, ngImport: i0, template: "<!-- SKILL PREVIEW LIST -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'preview'\">\r\n  <h5 class=\"title text-secondary\">Skills Preview</h5>\r\n  <!-- <p class=\"subtitle\">First-time users should enter skillsets with Inspector Match, Once you setup skillsets in your\r\n    business profile you can add skills under</p> -->\r\n  <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n    <accordion-group *ngFor=\"let skill of userSkillsPreview\" #accGroup\r\n      (isOpenChange)=\"onSkillAccordionChange(skill, $event)\">\r\n      <!-- HEADER -->\r\n      <div accordion-heading class=\"skill-preview-header\">\r\n        <span class=\"fw-semibold text-secondary\">\r\n          {{ skill.skillSetName }}\r\n        </span>\r\n        <div class=\"actions\">\r\n          <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n            <button type=\"button\" class=\"me-3\" (click)=\"editSkillFromPreview(skill, accGroup, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" alt=\"icon\" />\r\n            </button>\r\n            <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n              [class.rotate]=\"accGroup.isOpen\" />\r\n          </ng-container>\r\n          <ng-container *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\">\r\n            <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backToSkill(accGroup)\">\r\n              Cancel\r\n            </button>\r\n            <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserSkillset()\" [disabled]=\"showLoader\">\r\n              Update\r\n            </button>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <!-- BODY -->\r\n      <div class=\"skill-preview-body content-part\">\r\n        <!-- DISPLAY MODE -->\r\n        <div *ngIf=\"!isEditMode || model?.skillSetId !== skill.skillSetId\"\r\n          class=\"d-flex justify-content-between align-items-center flex-wrap gap-3\">\r\n          <div>\r\n            <label>Service Provider</label> <br>\r\n            {{ skill.providerName }}\r\n          </div>\r\n          <div>\r\n            <label>Skill</label> <br>\r\n            {{ skill.skillSetName }}\r\n          </div>\r\n          <div style=\"pointer-events: none;\">\r\n            <label>Self Ability Rating</label> <br>\r\n            <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n          </div>\r\n          <div>\r\n            <label class=\"mb-0 pb-0 label\">Years of Experience</label> <br>\r\n            {{ skill?.year }}\r\n          </div>\r\n          <div>\r\n            <label>Visible</label> <br>\r\n            <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"skill.profileVisibility\" disabled>\r\n          </div>\r\n          <div class=\"w-100 mt-3\">\r\n            <label>Description</label> <br>\r\n            {{ skill.notes }}\r\n          </div>\r\n        </div>\r\n        <!-- EDIT MODE -->\r\n        <div *ngIf=\"isEditMode && model?.skillSetId === skill.skillSetId\" [formGroup]=\"tab.at(0)\">\r\n          <div class=\"d-flex justify-content-between align-items-center flex-wrap gap-3\">\r\n            <div>\r\n              <label>Service Provider</label> <br>\r\n              {{ skill.providerName }}\r\n            </div>\r\n            <div>\r\n              <label>Skill</label> <br>\r\n              {{ skill.skillSetName }}\r\n            </div>\r\n            <div>\r\n              <label>Self Ability Rating</label> <br>\r\n              <ngx-stars *ngIf=\"tab.at(0)?.get('starRating')?.value !== null\" [key]=\"tab.at(0).get('starRating')?.value\"\r\n                [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n                (ratingOutput)=\"onEditRating($event)\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div style=\"width: 200px;\">\r\n              <label class=\"mb-0 label pb-0\">Years of Experience</label> <br>\r\n              <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n                formControlName=\"year\" [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\"\r\n                bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"></ng-select>\r\n            </div>\r\n            <div>\r\n              <label>Visible</label> <br>\r\n              <input class=\"form-check-input \" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n            </div>\r\n          </div>\r\n          <div class=\"mt-3\">\r\n            <label>Description</label> <br>\r\n            <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\" placeholder=\"Enter notes\"\r\n              style=\"height: 80px;\"></textarea>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </accordion-group>\r\n  </accordion>\r\n</div>\r\n\r\n<!-- Add part -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'add'\">\r\n  <h2 class=\"title text-secondary\">Add Skills</h2>\r\n  <p class=\"subtitle\">A minimum of 5 skills is needed</p>\r\n  <div class=\"content-part\">\r\n    <h6 class=\"text-secondary\"> {{ form?.value?.id ? \"Update Skill Category\" : \"Create Skill Category\" }}</h6>\r\n    <div class=\"sub-section\">\r\n      <div class=\"row mt-2\">\r\n        <div class=\"col-12 col-md-12 col-sm-12\">\r\n          <div class=\"search-part\">\r\n            <input type=\"text\" placeholder=\"Search / Add Skillsets here\" [(ngModel)]=\"searchSkillQry\"\r\n              (input)=\"getSkillSets()\" />\r\n            <button class=\"btn\" (click)=\"createNewSkills()\" tooltip=\"Add Skillset\">\r\n              <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n            </button>\r\n          </div>\r\n          <div *ngIf=\"errMsg\" class=\"invalid-feedback is-invalid d-block\">\r\n            Please Enter Skillsets Name\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n        {{nameError}}\r\n      </div>\r\n      <div class=\"col skills-section\" [ngClass]=\"showLoading && !isEditMode ? 'loader':''\">\r\n        <div class=\"row mt-2\" [ngStyle]=\"showLoader && !isEditMode ? {'min-height': '150px'} : {}\">\r\n          <div class=\"col-12 col-md-4\" *ngFor=\"let skill of skillSets\">\r\n            <div class=\"mt-2 gap-1 d-flex align-items-start\">\r\n              <input type=\"checkbox\" [checked]=\"skill.selected\" (change)=\"onSelectedSkillsets($event, skill)\"\r\n                id=\"{{skill.id}}\" name=\"{{skill.id}}\">\r\n              <label class=\"text-title\" for=\"{{skill.id}}\">\r\n                {{ skill.name }}\r\n              </label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        [ngClass]=\"{ 'loader': showLoading && !isEditMode,'pt-3': !showLoading && !isEditMode,'edit-mode': isEditMode}\">\r\n        <!-- <loader [show]=\"showLoading\" [small]=\"true\"></loader> -->\r\n        <tabset #tabSet>\r\n          <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab.controls; let index = index\"\r\n            [label]=\"tabs[index]\" tab1 id={{tabs[index]}} #{{tabs[index]}}>\r\n            <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n              <span class=\"text-secondary\">{{tabs[index]}}</span>\r\n              <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.skillSetId.value)\">\r\n                <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n              </button>\r\n            </ng-template>\r\n            <div [formGroup]=\"group\" class=\"tab-card\">\r\n              <div class=\"card-body\">\r\n                <div class=\"row\">\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Self Ability Rating</label>\r\n                    <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\" [maxStars]=\"5\">\r\n                    </ngx-stars>\r\n                    <div *ngIf=\"userSkillSubmitted && k?.starRating?.errors\" class=\"invalid-feedback\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\">\r\n                      <div *ngIf=\"k?.starRating?.errors?.required\">Star\r\n                        Rating is\r\n                        required</div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label \">Years of Experience</label>\r\n                    <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\"\r\n                      bindLabel=\"text\" formControlName=\"year\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\" bindValue=\"value\"\r\n                      [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"\r\n                      (change)=\"onYearChange(group)\"></ng-select>\r\n\r\n                    <div *ngIf=\"userSkillSubmitted && k?.year?.errors\" class=\"invalid-feedback\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\">\r\n                      <div *ngIf=\"k?.year?.errors?.required\">Year is\r\n                        required</div>\r\n                    </div>\r\n\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1 text-center\">\r\n                    <label class=\"label\">Profile\r\n                      Visibility</label><br />\r\n                    <input class=\"form-check-input \" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n                  </div>\r\n\r\n                  <div class=\"col-12 col-md-2 mt-1\" *ngIf=\"tab.controls.length>1 && index == copyOptionIndex\">\r\n                    <label class=\"mb-2 label\">Copy to All Tabs</label>\r\n                    <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index,group.value)\"\r\n                      role=\"switch\">\r\n                  </div>\r\n                </div>\r\n                <div>\r\n                  <label class=\"label\">Description</label>\r\n                  <div class=\"col-12 col-md-12 mt-1\">\r\n                    <textarea placeholder=\"Description of your Skill here\" formControlName=\"notes\" class=\"form-control\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.notes?.errors }\" rows=\"5\"></textarea>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </tab>\r\n        </tabset>\r\n      </div>\r\n      <!-- <div class=\"row pt-3\">\r\n        <div class=\"pt-3 text-end\">\r\n          <button class=\"back-btn\" (click)=\"reset()\">Reset</button>\r\n        </div>\r\n      </div> -->\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Footer buttons -->\r\n\r\n<div *ngIf=\"store.stepView() === 'add'\" class=\"skills-container last footer-actions\">\r\n  <button class=\"back-btn\" (click)=\"cancel()\">Cancel</button>\r\n  <div class=\"mb-res\">   \r\n    <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n      Continue</button>\r\n  </div>\r\n</div>\r\n\r\n\r\n<div *ngIf=\"store.stepView() !== 'add'\" class=\"skills-container last footer-actions\">\r\n  <button class=\"back-btn\" (click)=\"back()\">Back</button>\r\n  <div class=\"mb-res\">\r\n    <button class=\"back-btn me-3\" *ngIf=\"store.stepView() === 'add'\" (click)=\"next()\">Skip</button>\r\n    <button class=\"continue-btn add me-3\" *ngIf=\"store.stepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n      Add More Skills\r\n    </button>\r\n    <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n      Continue</button>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";.skills-container{max-width:1000px;margin:40px auto;min-height:300px}.skills-container.last{min-height:unset}.title{font-size:22px;margin-bottom:4px}.subtitle{font-size:13px;color:#777;margin-bottom:30px}.content-part{background:#fff}.content-part p,.content-part div{font-size:small}.content-part .card{margin-top:15px;background-color:#fff;border-radius:10px}.content-part .card .row{margin-top:-15px}.content-part .card .sub-section{padding:0 10px}.content-part .card .sub-section .title{font-size:16px;font-weight:400;color:var(--font-primary)}.content-part .card .sub-section .info-title{font-size:12px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .card .sub-section .content{font-size:12px}.content-part .card .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px}.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-color:#fff;border-radius:5px;color:var(--font-primary);margin-top:15px}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;position:relative;border-radius:5px;border:1px solid #d3dae6;padding:10px 0 10px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;height:45px}.content-part .search-part input{width:auto;flex:1;color:var(--font-dark);font-size:var(--font12-input);font-weight:400;border:none;background:none;outline:none}.content-part .search-part .btn{background:#1e2541;border-radius:5px;padding:5px;width:41px;height:36px;margin-right:3px}.content-part .search-part .btn img{filter:brightness(0) invert(1)}.content-part textarea{width:100%;height:100px;background:none}.content-part .skills-section{margin-left:5px}.content-part .skills-section .category-title{margin-bottom:5px;font-size:13px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .skills-section .text-title{font-size:13px;margin-left:3px;color:var(--font-primary);display:contents}.content-part .skills-section input[type=checkbox]{border:2px solid #000!important;height:14px!important;width:15px!important;border-radius:2px!important;margin:2px}.content-part .skills-section input[type=checkbox]:checked{background-color:#000!important;border:2px solid #000!important}.content-part .skills-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#000;width:15px;display:flex;justify-content:center;border:2px solid #000;height:14px;align-items:center;border-radius:2px}.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:#237b4b!important;border:1px solid #237b4b!important}::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#f1f4fa}::ng-deep .ng-select .ng-select-container{background:#f1f4fa;border:1px solid #ccc;border-radius:5px}.back-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background:#d3dae6;color:#fff;border-radius:5px;padding:6px 8px}.save-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px}.create-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px;height:40px;min-width:9rem}.form-control{color:#333;background:none!important;min-height:36px;font-size:small;height:43px}.form-control:focus{box-shadow:none!important}.close-popup{position:absolute;right:7px;top:4px;width:25px}.label{font-size:12px;font-weight:700;padding-bottom:8px}.form-control:focus{border:var(--bs-border-width) solid var(--bs-border-color)}::ng-deep .nav-link{color:#000!important}.loader{filter:blur(3px);height:40px}.edit-mode ::ng-deep .nav-tabs{display:none!important}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:100px}.skip-btn,.back-btn{background:#d3dae6;color:#6c757dc7;font-size:14px;border-radius:5px;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px}.skip-btn.edit,.back-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn{padding:7px 23px;background-color:#4077ad;color:#fff;border-radius:5px;min-width:8rem;min-height:45px;border:white}.continue-btn:disabled{background-color:#d1d5db;cursor:not-allowed}.continue-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn.add{background-color:#2e5b70}.skill-preview-wrapper{margin-bottom:24px}.skill-preview-card{border-radius:12px;margin-bottom:12px;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease;overflow:hidden}::ng-deep accordion-group+accordion-group{margin-top:20px}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:10px 0}.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)}.skill-preview-body label{font-weight:500;font-size:13px;color:#6b7280}.skill-preview-body p{margin:0}@media screen and (max-width: 767px){.skills-container{padding:0 10px}.footer-actions{flex-direction:column-reverse;gap:5px;margin-top:65px}.back-btn{width:100%}.continue-btn{padding:10px 43px}.mb-res{display:flex;flex-direction:column-reverse;gap:5px;width:100%}}\n"], dependencies: [{ kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "component", type: NgxStarsComponent, selector: "ngx-stars", inputs: ["maxStars", "initialStars", "readonly", "size", "color", "animation", "animationSpeed", "customPadding", "wholeStars", "customStarIcons"], outputs: ["ratingOutput"] }, { kind: "directive", type: i12$2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i13.TabDirective, selector: "tab, [tab]", inputs: ["heading", "id", "disabled", "removable", "tabOrder", "customClass", "active"], outputs: ["selectTab", "deselect", "removed"], exportAs: ["tab"] }, { kind: "component", type: i13.TabsetComponent, selector: "tabset", inputs: ["vertical", "justified", "type"] }, { kind: "directive", type: i13.TabHeadingDirective, selector: "[tabHeading]" }, { kind: "component", type: i14.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i14.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }], animations: [
             trigger('expandCollapse', [
                 state('open', style({
                     height: '*',
@@ -4036,7 +4036,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             transition('open <=> closed', animate('300ms ease'))
                         ])
                     ], template: "<!-- SKILL PREVIEW LIST -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'preview'\">\r\n  <h5 class=\"title text-secondary\">Skills Preview</h5>\r\n  <!-- <p class=\"subtitle\">First-time users should enter skillsets with Inspector Match, Once you setup skillsets in your\r\n    business profile you can add skills under</p> -->\r\n  <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n    <accordion-group *ngFor=\"let skill of userSkillsPreview\" #accGroup\r\n      (isOpenChange)=\"onSkillAccordionChange(skill, $event)\">\r\n      <!-- HEADER -->\r\n      <div accordion-heading class=\"skill-preview-header\">\r\n        <span class=\"fw-semibold text-secondary\">\r\n          {{ skill.skillSetName }}\r\n        </span>\r\n        <div class=\"actions\">\r\n          <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n            <button type=\"button\" class=\"me-3\" (click)=\"editSkillFromPreview(skill, accGroup, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" alt=\"icon\" />\r\n            </button>\r\n            <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n              [class.rotate]=\"accGroup.isOpen\" />\r\n          </ng-container>\r\n          <ng-container *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\">\r\n            <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backToSkill(accGroup)\">\r\n              Cancel\r\n            </button>\r\n            <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserSkillset()\" [disabled]=\"showLoader\">\r\n              Update\r\n            </button>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <!-- BODY -->\r\n      <div class=\"skill-preview-body content-part\">\r\n        <!-- DISPLAY MODE -->\r\n        <div *ngIf=\"!isEditMode || model?.skillSetId !== skill.skillSetId\"\r\n          class=\"d-flex justify-content-between align-items-center flex-wrap gap-3\">\r\n          <div>\r\n            <label>Service Provider</label> <br>\r\n            {{ skill.providerName }}\r\n          </div>\r\n          <div>\r\n            <label>Skill</label> <br>\r\n            {{ skill.skillSetName }}\r\n          </div>\r\n          <div style=\"pointer-events: none;\">\r\n            <label>Self Ability Rating</label> <br>\r\n            <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n          </div>\r\n          <div>\r\n            <label class=\"mb-0 pb-0 label\">Years of Experience</label> <br>\r\n            {{ skill?.year }}\r\n          </div>\r\n          <div>\r\n            <label>Visible</label> <br>\r\n            <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"skill.profileVisibility\" disabled>\r\n          </div>\r\n          <div class=\"w-100 mt-3\">\r\n            <label>Description</label> <br>\r\n            {{ skill.notes }}\r\n          </div>\r\n        </div>\r\n        <!-- EDIT MODE -->\r\n        <div *ngIf=\"isEditMode && model?.skillSetId === skill.skillSetId\" [formGroup]=\"tab.at(0)\">\r\n          <div class=\"d-flex justify-content-between align-items-center flex-wrap gap-3\">\r\n            <div>\r\n              <label>Service Provider</label> <br>\r\n              {{ skill.providerName }}\r\n            </div>\r\n            <div>\r\n              <label>Skill</label> <br>\r\n              {{ skill.skillSetName }}\r\n            </div>\r\n            <div>\r\n              <label>Self Ability Rating</label> <br>\r\n              <ngx-stars *ngIf=\"tab.at(0)?.get('starRating')?.value !== null\" [key]=\"tab.at(0).get('starRating')?.value\"\r\n                [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n                (ratingOutput)=\"onEditRating($event)\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div style=\"width: 200px;\">\r\n              <label class=\"mb-0 label pb-0\">Years of Experience</label> <br>\r\n              <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n                formControlName=\"year\" [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\"\r\n                bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"></ng-select>\r\n            </div>\r\n            <div>\r\n              <label>Visible</label> <br>\r\n              <input class=\"form-check-input \" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n            </div>\r\n          </div>\r\n          <div class=\"mt-3\">\r\n            <label>Description</label> <br>\r\n            <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\" placeholder=\"Enter notes\"\r\n              style=\"height: 80px;\"></textarea>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </accordion-group>\r\n  </accordion>\r\n</div>\r\n\r\n<!-- Add part -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'add'\">\r\n  <h2 class=\"title text-secondary\">Add Skills</h2>\r\n  <p class=\"subtitle\">A minimum of 5 skills is needed</p>\r\n  <div class=\"content-part\">\r\n    <h6 class=\"text-secondary\"> {{ form?.value?.id ? \"Update Skill Category\" : \"Create Skill Category\" }}</h6>\r\n    <div class=\"sub-section\">\r\n      <div class=\"row mt-2\">\r\n        <div class=\"col-12 col-md-12 col-sm-12\">\r\n          <div class=\"search-part\">\r\n            <input type=\"text\" placeholder=\"Search / Add Skillsets here\" [(ngModel)]=\"searchSkillQry\"\r\n              (input)=\"getSkillSets()\" />\r\n            <button class=\"btn\" (click)=\"createNewSkills()\" tooltip=\"Add Skillset\">\r\n              <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n            </button>\r\n          </div>\r\n          <div *ngIf=\"errMsg\" class=\"invalid-feedback is-invalid d-block\">\r\n            Please Enter Skillsets Name\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n        {{nameError}}\r\n      </div>\r\n      <div class=\"col skills-section\" [ngClass]=\"showLoading && !isEditMode ? 'loader':''\">\r\n        <div class=\"row mt-2\" [ngStyle]=\"showLoader && !isEditMode ? {'min-height': '150px'} : {}\">\r\n          <div class=\"col-12 col-md-4\" *ngFor=\"let skill of skillSets\">\r\n            <div class=\"mt-2 gap-1 d-flex align-items-start\">\r\n              <input type=\"checkbox\" [checked]=\"skill.selected\" (change)=\"onSelectedSkillsets($event, skill)\"\r\n                id=\"{{skill.id}}\" name=\"{{skill.id}}\">\r\n              <label class=\"text-title\" for=\"{{skill.id}}\">\r\n                {{ skill.name }}\r\n              </label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        [ngClass]=\"{ 'loader': showLoading && !isEditMode,'pt-3': !showLoading && !isEditMode,'edit-mode': isEditMode}\">\r\n        <!-- <loader [show]=\"showLoading\" [small]=\"true\"></loader> -->\r\n        <tabset #tabSet>\r\n          <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab.controls; let index = index\"\r\n            [label]=\"tabs[index]\" tab1 id={{tabs[index]}} #{{tabs[index]}}>\r\n            <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n              <span class=\"text-secondary\">{{tabs[index]}}</span>\r\n              <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.skillSetId.value)\">\r\n                <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n              </button>\r\n            </ng-template>\r\n            <div [formGroup]=\"group\" class=\"tab-card\">\r\n              <div class=\"card-body\">\r\n                <div class=\"row\">\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Self Ability Rating</label>\r\n                    <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\" [maxStars]=\"5\">\r\n                    </ngx-stars>\r\n                    <div *ngIf=\"userSkillSubmitted && k?.starRating?.errors\" class=\"invalid-feedback\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\">\r\n                      <div *ngIf=\"k?.starRating?.errors?.required\">Star\r\n                        Rating is\r\n                        required</div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label \">Years of Experience</label>\r\n                    <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\"\r\n                      bindLabel=\"text\" formControlName=\"year\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\" bindValue=\"value\"\r\n                      [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"\r\n                      (change)=\"onYearChange(group)\"></ng-select>\r\n\r\n                    <div *ngIf=\"userSkillSubmitted && k?.year?.errors\" class=\"invalid-feedback\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\">\r\n                      <div *ngIf=\"k?.year?.errors?.required\">Year is\r\n                        required</div>\r\n                    </div>\r\n\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1 text-center\">\r\n                    <label class=\"label\">Profile\r\n                      Visibility</label><br />\r\n                    <input class=\"form-check-input \" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n                  </div>\r\n\r\n                  <div class=\"col-12 col-md-2 mt-1\" *ngIf=\"tab.controls.length>1 && index == copyOptionIndex\">\r\n                    <label class=\"mb-2 label\">Copy to All Tabs</label>\r\n                    <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index,group.value)\"\r\n                      role=\"switch\">\r\n                  </div>\r\n                </div>\r\n                <div>\r\n                  <label class=\"label\">Description</label>\r\n                  <div class=\"col-12 col-md-12 mt-1\">\r\n                    <textarea placeholder=\"Description of your Skill here\" formControlName=\"notes\" class=\"form-control\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.notes?.errors }\" rows=\"5\"></textarea>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </tab>\r\n        </tabset>\r\n      </div>\r\n      <!-- <div class=\"row pt-3\">\r\n        <div class=\"pt-3 text-end\">\r\n          <button class=\"back-btn\" (click)=\"reset()\">Reset</button>\r\n        </div>\r\n      </div> -->\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Footer buttons -->\r\n\r\n<div *ngIf=\"store.stepView() === 'add'\" class=\"skills-container last footer-actions\">\r\n  <button class=\"back-btn\" (click)=\"cancel()\">Cancel</button>\r\n  <div class=\"mb-res\">   \r\n    <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n      Continue</button>\r\n  </div>\r\n</div>\r\n\r\n\r\n<div *ngIf=\"store.stepView() !== 'add'\" class=\"skills-container last footer-actions\">\r\n  <button class=\"back-btn\" (click)=\"back()\">Back</button>\r\n  <div class=\"mb-res\">\r\n    <button class=\"back-btn me-3\" *ngIf=\"store.stepView() === 'add'\" (click)=\"next()\">Skip</button>\r\n    <button class=\"continue-btn add me-3\" *ngIf=\"store.stepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n      Add More Skills\r\n    </button>\r\n    <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n      Continue</button>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";.skills-container{max-width:1000px;margin:40px auto;min-height:300px}.skills-container.last{min-height:unset}.title{font-size:22px;margin-bottom:4px}.subtitle{font-size:13px;color:#777;margin-bottom:30px}.content-part{background:#fff}.content-part p,.content-part div{font-size:small}.content-part .card{margin-top:15px;background-color:#fff;border-radius:10px}.content-part .card .row{margin-top:-15px}.content-part .card .sub-section{padding:0 10px}.content-part .card .sub-section .title{font-size:16px;font-weight:400;color:var(--font-primary)}.content-part .card .sub-section .info-title{font-size:12px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .card .sub-section .content{font-size:12px}.content-part .card .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px}.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-color:#fff;border-radius:5px;color:var(--font-primary);margin-top:15px}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;position:relative;border-radius:5px;border:1px solid #d3dae6;padding:10px 0 10px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;height:45px}.content-part .search-part input{width:auto;flex:1;color:var(--font-dark);font-size:var(--font12-input);font-weight:400;border:none;background:none;outline:none}.content-part .search-part .btn{background:#1e2541;border-radius:5px;padding:5px;width:41px;height:36px;margin-right:3px}.content-part .search-part .btn img{filter:brightness(0) invert(1)}.content-part textarea{width:100%;height:100px;background:none}.content-part .skills-section{margin-left:5px}.content-part .skills-section .category-title{margin-bottom:5px;font-size:13px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .skills-section .text-title{font-size:13px;margin-left:3px;color:var(--font-primary);display:contents}.content-part .skills-section input[type=checkbox]{border:2px solid #000!important;height:14px!important;width:15px!important;border-radius:2px!important;margin:2px}.content-part .skills-section input[type=checkbox]:checked{background-color:#000!important;border:2px solid #000!important}.content-part .skills-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#000;width:15px;display:flex;justify-content:center;border:2px solid #000;height:14px;align-items:center;border-radius:2px}.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:#237b4b!important;border:1px solid #237b4b!important}::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#f1f4fa}::ng-deep .ng-select .ng-select-container{background:#f1f4fa;border:1px solid #ccc;border-radius:5px}.back-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background:#d3dae6;color:#fff;border-radius:5px;padding:6px 8px}.save-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px}.create-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px;height:40px;min-width:9rem}.form-control{color:#333;background:none!important;min-height:36px;font-size:small;height:43px}.form-control:focus{box-shadow:none!important}.close-popup{position:absolute;right:7px;top:4px;width:25px}.label{font-size:12px;font-weight:700;padding-bottom:8px}.form-control:focus{border:var(--bs-border-width) solid var(--bs-border-color)}::ng-deep .nav-link{color:#000!important}.loader{filter:blur(3px);height:40px}.edit-mode ::ng-deep .nav-tabs{display:none!important}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:100px}.skip-btn,.back-btn{background:#d3dae6;color:#6c757dc7;font-size:14px;border-radius:5px;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px}.skip-btn.edit,.back-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn{padding:7px 23px;background-color:#4077ad;color:#fff;border-radius:5px;min-width:8rem;min-height:45px;border:white}.continue-btn:disabled{background-color:#d1d5db;cursor:not-allowed}.continue-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn.add{background-color:#2e5b70}.skill-preview-wrapper{margin-bottom:24px}.skill-preview-card{border-radius:12px;margin-bottom:12px;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease;overflow:hidden}::ng-deep accordion-group+accordion-group{margin-top:20px}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:10px 0}.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)}.skill-preview-body label{font-weight:500;font-size:13px;color:#6b7280}.skill-preview-body p{margin:0}@media screen and (max-width: 767px){.skills-container{padding:0 10px}.footer-actions{flex-direction:column-reverse;gap:5px;margin-top:65px}.back-btn{width:100%}.continue-btn{padding:10px 43px}.mb-res{display:flex;flex-direction:column-reverse;gap:5px;width:100%}}\n"] }]
-        }], ctorParameters: () => [{ type: SkillSetService }, { type: UserSkillSetService }, { type: UserService }, { type: i10.UntypedFormBuilder }, { type: UtilsService }, { type: i6.RoleContextService }, { type: CredentialingStore }, { type: i6.TokenService }], propDecorators: { providerId: [{
+        }], ctorParameters: () => [{ type: SkillSetService }, { type: UserSkillSetService }, { type: UserService }, { type: i8.UntypedFormBuilder }, { type: UtilsService }, { type: i6.RoleContextService }, { type: CredentialingStore }, { type: i6.TokenService }], propDecorators: { providerId: [{
                 type: Input
             }], providerName: [{
                 type: Input
@@ -4482,13 +4482,13 @@ class LicensesComponent {
         this.certificateForm.reset();
         this.fileName = '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LicensesComponent, deps: [{ token: UserDocumentService }, { token: UserService }, { token: CredentialingStore }, { token: LicenseStore }, { token: i6.TokenService }, { token: PostalCodeServices }, { token: i10.FormBuilder }, { token: FileService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: LicensesComponent, isStandalone: false, selector: "app-licenses", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl", states: "states" }, ngImport: i0, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n\r\n  <h3>Add Licenses</h3>\r\n  <p class=\"hint\">\r\n    Recommended for your role\r\n  </p>\r\n  <div class=\"document-container\">\r\n    <input type=\"text\" class=\"search-input\" placeholder=\"Search documents here...\" [formControl]=\"searchControl\" />\r\n    <div class=\"grid\">\r\n      <div *ngFor=\"let item of documentTypes\">\r\n        <label class=\"checkbox-row\">\r\n          <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n          <span class=\"title\">{{ item.type }}</span>\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <form [formGroup]=\"certificateForm\">\r\n    <div class=\"row\" style=\"margin-top: 20px;\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">License Number</div>\r\n        <input type=\"text\" placeholder=\"Enter your License Number here\" formControlName=\"number\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n               certificateForm.get('number')?.hasError('required')\">\r\n          License number is required\r\n        </small>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"head\">License Issued By</div>\r\n        <input type=\"text\" placeholder=\"Enter License Issued By here\" formControlName=\"issuedBy\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n               certificateForm.get('issuedBy')?.hasError('required')\">\r\n          License issued by is required\r\n        </small>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">Issued State</div>\r\n        <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n          placeholder=\"Select Issued State\">\r\n          <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n            &nbsp;{{ item.stateName }}\r\n          </ng-template>\r\n          <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n            <span class=\"ng-value-label\">\r\n              {{ item.stateName }}\r\n            </span>\r\n            <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n              <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n            </span>\r\n          </ng-template>\r\n        </ng-select>\r\n      </div>\r\n    </div>\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Issued Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n            [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n               certificateForm.get('issueDate')?.hasError('required')\">\r\n            Issued date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Expiration Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" [maxDate]=\"maxDate\" bsDatepicker\r\n            [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n               certificateForm.get('expiryDate')?.hasError('required')\">\r\n            Expiry date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field full-width\">\r\n        <div class=\"head\">Comments</div>\r\n        <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n      </textarea>\r\n      </div>\r\n    </div>\r\n  </form>\r\n  <div class=\"row\">\r\n   <div class=\"upload-wrapper\">\r\n        <p *ngIf=\"!fileName\" class=\"upload-title\">Upload</p>\r\n        <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n        <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Add documents below</p>\r\n        <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Documents\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n          {{ fileName }}\r\n          <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n        </p>\r\n      </div>\r\n  </div>\r\n  <div class=\"action\">\r\n    <!-- Left button: Back or Cancel -->\r\n    <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n      {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n    </button>\r\n\r\n    <div class=\"right-actions\">\r\n      <!-- Skip button only for first entry (not editing or adding) -->\r\n      <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n        (click)=\"nextStep()\">\r\n        Skip\r\n      </button>\r\n\r\n      <!-- Primary button -->\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n        (click)=\"saveFile()\">\r\n        {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\">\r\n    <h3>Licenses Preview</h3>\r\n  </div>\r\n  <div class=\"accordion\" style=\"margin: 20px 100px;\">\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n      class=\"accordion-item border-0\">\r\n\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#edu_' + i\"\r\n          aria-expanded=\"true\">\r\n          <span class=\"accordion-title\">\r\n            {{ exp.documentTypeName }}\r\n          </span>\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n          </span>\r\n        </button>\r\n      </h2>\r\n     <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse show\" style=\"margin-bottom: 20px;\">\r\n        <div class=\"accordion-body\">\r\n          <div class=\"detail-grid\">\r\n            <div>\r\n              <strong>License Name</strong><br />\r\n              <span class=\"job-title\"> {{ exp.documentTypeName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>License Number</strong><br />\r\n              <span class=\"job-title\"> {{ exp.number }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued By</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issuedBy }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued State</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issuedState | stateName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issueDate | date:'MM/dd/yyyy' }} </span>\r\n            </div>\r\n            <div>\r\n              <strong>Expiry Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n\r\n            <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n              <strong>Document</strong><br />\r\n              <a [href]=\"cloudfrontUrl+exp.fileUrl\" target=\"_blank\">\r\n                <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n          <div class=\"full-width mt-3\">\r\n            <strong>Description</strong><br />\r\n            <span class=\"job-title\"> {{ exp.notes }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\" style=\"background-color: #1f4d5f;\">\r\n        Add More Licenses\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:23px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;color:#374151}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;font-weight:500;margin-bottom:5px}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.document-container{max-width:1100px;margin:auto}.search-input{width:100%;max-width:400px;height:44px;margin-bottom:16px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer}.content .title{font-weight:600;font-size:14px}.checkbox-row input{margin:0}.title{font-size:14px;font-weight:600}.content .desc{font-size:12px;color:#666;margin-top:4px}.save-btn{margin-top:20px;padding:10px 18px;border-radius:6px;border:none;background:#4077ad;color:#fff;cursor:pointer}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!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:#1e2541!important}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin:50px 100px 20px}.action{display:flex;justify-content:space-between;margin:50px 0 20px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@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}}.icon-color{cursor:pointer;width:20px;height:20px;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}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:350px}.accordion{margin:20px 100px}.add-btn{width:200px}@media screen and (max-width: 767px){.hint{margin-bottom:7px}.date-time-filter{font-size:14px}.search-input{margin-bottom:0}.right-actions{gap:5px}.preview-header{margin-left:0}.accordion{margin:20px 0!important}.actions{flex-direction:column-reverse;gap:7px;margin:50px 0 20px}.right-actions{gap:5px;flex-direction:column-reverse}.add-btn{width:unset}.action{display:flex;flex-direction:column-reverse;gap:5px}}.remove-file{margin-left:10px;cursor:pointer;color:red;font-weight:700}.file-icon{width:23px;height:23px}\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: i10.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10.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: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i10.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10.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" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LicensesComponent, deps: [{ token: UserDocumentService }, { token: UserService }, { token: CredentialingStore }, { token: LicenseStore }, { token: i6.TokenService }, { token: PostalCodeServices }, { token: i8.FormBuilder }, { token: FileService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: LicensesComponent, isStandalone: false, selector: "app-licenses", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl", states: "states" }, ngImport: i0, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n\r\n  <h3>Add Licenses</h3>\r\n  <p class=\"hint\">\r\n    Recommended for your role\r\n  </p>\r\n  <div class=\"document-container\">\r\n    <input type=\"text\" class=\"search-input\" placeholder=\"Search documents here...\" [formControl]=\"searchControl\" />\r\n    <div class=\"grid\">\r\n      <div *ngFor=\"let item of documentTypes\">\r\n        <label class=\"checkbox-row\">\r\n          <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n          <span class=\"title\">{{ item.type }}</span>\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <form [formGroup]=\"certificateForm\">\r\n    <div class=\"row\" style=\"margin-top: 20px;\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">License Number</div>\r\n        <input type=\"text\" placeholder=\"Enter your License Number here\" formControlName=\"number\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n               certificateForm.get('number')?.hasError('required')\">\r\n          License number is required\r\n        </small>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"head\">License Issued By</div>\r\n        <input type=\"text\" placeholder=\"Enter License Issued By here\" formControlName=\"issuedBy\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n               certificateForm.get('issuedBy')?.hasError('required')\">\r\n          License issued by is required\r\n        </small>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">Issued State</div>\r\n        <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n          placeholder=\"Select Issued State\">\r\n          <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n            &nbsp;{{ item.stateName }}\r\n          </ng-template>\r\n          <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n            <span class=\"ng-value-label\">\r\n              {{ item.stateName }}\r\n            </span>\r\n            <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n              <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n            </span>\r\n          </ng-template>\r\n        </ng-select>\r\n      </div>\r\n    </div>\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Issued Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n            [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n               certificateForm.get('issueDate')?.hasError('required')\">\r\n            Issued date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Expiration Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" [maxDate]=\"maxDate\" bsDatepicker\r\n            [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n               certificateForm.get('expiryDate')?.hasError('required')\">\r\n            Expiry date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field full-width\">\r\n        <div class=\"head\">Comments</div>\r\n        <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n      </textarea>\r\n      </div>\r\n    </div>\r\n  </form>\r\n  <div class=\"row\">\r\n   <div class=\"upload-wrapper\">\r\n        <p *ngIf=\"!fileName\" class=\"upload-title\">Upload</p>\r\n        <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n        <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Add documents below</p>\r\n        <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Documents\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n          {{ fileName }}\r\n          <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n        </p>\r\n      </div>\r\n  </div>\r\n  <div class=\"action\">\r\n    <!-- Left button: Back or Cancel -->\r\n    <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n      {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n    </button>\r\n\r\n    <div class=\"right-actions\">\r\n      <!-- Skip button only for first entry (not editing or adding) -->\r\n      <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n        (click)=\"nextStep()\">\r\n        Skip\r\n      </button>\r\n\r\n      <!-- Primary button -->\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n        (click)=\"saveFile()\">\r\n        {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\">\r\n    <h3>Licenses Preview</h3>\r\n  </div>\r\n  <div class=\"accordion\" style=\"margin: 20px 100px;\">\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n      class=\"accordion-item border-0\">\r\n\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#edu_' + i\"\r\n          aria-expanded=\"true\">\r\n          <span class=\"accordion-title\">\r\n            {{ exp.documentTypeName }}\r\n          </span>\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n          </span>\r\n        </button>\r\n      </h2>\r\n     <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse show\" style=\"margin-bottom: 20px;\">\r\n        <div class=\"accordion-body\">\r\n          <div class=\"detail-grid\">\r\n            <div>\r\n              <strong>License Name</strong><br />\r\n              <span class=\"job-title\"> {{ exp.documentTypeName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>License Number</strong><br />\r\n              <span class=\"job-title\"> {{ exp.number }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued By</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issuedBy }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued State</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issuedState | stateName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issueDate | date:'MM/dd/yyyy' }} </span>\r\n            </div>\r\n            <div>\r\n              <strong>Expiry Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n\r\n            <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n              <strong>Document</strong><br />\r\n              <a [href]=\"cloudfrontUrl+exp.fileUrl\" target=\"_blank\">\r\n                <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n          <div class=\"full-width mt-3\">\r\n            <strong>Description</strong><br />\r\n            <span class=\"job-title\"> {{ exp.notes }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\" style=\"background-color: #1f4d5f;\">\r\n        Add More Licenses\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:23px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;color:#374151}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;font-weight:500;margin-bottom:5px}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.document-container{max-width:1100px;margin:auto}.search-input{width:100%;max-width:400px;height:44px;margin-bottom:16px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer}.content .title{font-weight:600;font-size:14px}.checkbox-row input{margin:0}.title{font-size:14px;font-weight:600}.content .desc{font-size:12px;color:#666;margin-top:4px}.save-btn{margin-top:20px;padding:10px 18px;border-radius:6px;border:none;background:#4077ad;color:#fff;cursor:pointer}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!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:#1e2541!important}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin:50px 100px 20px}.action{display:flex;justify-content:space-between;margin:50px 0 20px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@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}}.icon-color{cursor:pointer;width:20px;height:20px;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}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:350px}.accordion{margin:20px 100px}.add-btn{width:200px}@media screen and (max-width: 767px){.hint{margin-bottom:7px}.date-time-filter{font-size:14px}.search-input{margin-bottom:0}.right-actions{gap:5px}.preview-header{margin-left:0}.accordion{margin:20px 0!important}.actions{flex-direction:column-reverse;gap:7px;margin:50px 0 20px}.right-actions{gap:5px;flex-direction:column-reverse}.add-btn{width:unset}.action{display:flex;flex-direction:column-reverse;gap:5px}}.remove-file{margin-left:10px;cursor:pointer;color:red;font-weight:700}.file-icon{width:23px;height:23px}\n"], dependencies: [{ kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LicensesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-licenses', standalone: false, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n\r\n  <h3>Add Licenses</h3>\r\n  <p class=\"hint\">\r\n    Recommended for your role\r\n  </p>\r\n  <div class=\"document-container\">\r\n    <input type=\"text\" class=\"search-input\" placeholder=\"Search documents here...\" [formControl]=\"searchControl\" />\r\n    <div class=\"grid\">\r\n      <div *ngFor=\"let item of documentTypes\">\r\n        <label class=\"checkbox-row\">\r\n          <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n          <span class=\"title\">{{ item.type }}</span>\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <form [formGroup]=\"certificateForm\">\r\n    <div class=\"row\" style=\"margin-top: 20px;\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">License Number</div>\r\n        <input type=\"text\" placeholder=\"Enter your License Number here\" formControlName=\"number\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n               certificateForm.get('number')?.hasError('required')\">\r\n          License number is required\r\n        </small>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"head\">License Issued By</div>\r\n        <input type=\"text\" placeholder=\"Enter License Issued By here\" formControlName=\"issuedBy\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n               certificateForm.get('issuedBy')?.hasError('required')\">\r\n          License issued by is required\r\n        </small>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">Issued State</div>\r\n        <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n          placeholder=\"Select Issued State\">\r\n          <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n            &nbsp;{{ item.stateName }}\r\n          </ng-template>\r\n          <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n            <span class=\"ng-value-label\">\r\n              {{ item.stateName }}\r\n            </span>\r\n            <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n              <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n            </span>\r\n          </ng-template>\r\n        </ng-select>\r\n      </div>\r\n    </div>\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Issued Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n            [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n               certificateForm.get('issueDate')?.hasError('required')\">\r\n            Issued date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Expiration Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" [maxDate]=\"maxDate\" bsDatepicker\r\n            [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n               certificateForm.get('expiryDate')?.hasError('required')\">\r\n            Expiry date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field full-width\">\r\n        <div class=\"head\">Comments</div>\r\n        <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n      </textarea>\r\n      </div>\r\n    </div>\r\n  </form>\r\n  <div class=\"row\">\r\n   <div class=\"upload-wrapper\">\r\n        <p *ngIf=\"!fileName\" class=\"upload-title\">Upload</p>\r\n        <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n        <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Add documents below</p>\r\n        <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Documents\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n          {{ fileName }}\r\n          <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n        </p>\r\n      </div>\r\n  </div>\r\n  <div class=\"action\">\r\n    <!-- Left button: Back or Cancel -->\r\n    <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n      {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n    </button>\r\n\r\n    <div class=\"right-actions\">\r\n      <!-- Skip button only for first entry (not editing or adding) -->\r\n      <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n        (click)=\"nextStep()\">\r\n        Skip\r\n      </button>\r\n\r\n      <!-- Primary button -->\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n        (click)=\"saveFile()\">\r\n        {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\">\r\n    <h3>Licenses Preview</h3>\r\n  </div>\r\n  <div class=\"accordion\" style=\"margin: 20px 100px;\">\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n      class=\"accordion-item border-0\">\r\n\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#edu_' + i\"\r\n          aria-expanded=\"true\">\r\n          <span class=\"accordion-title\">\r\n            {{ exp.documentTypeName }}\r\n          </span>\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n          </span>\r\n        </button>\r\n      </h2>\r\n     <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse show\" style=\"margin-bottom: 20px;\">\r\n        <div class=\"accordion-body\">\r\n          <div class=\"detail-grid\">\r\n            <div>\r\n              <strong>License Name</strong><br />\r\n              <span class=\"job-title\"> {{ exp.documentTypeName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>License Number</strong><br />\r\n              <span class=\"job-title\"> {{ exp.number }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued By</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issuedBy }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued State</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issuedState | stateName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issueDate | date:'MM/dd/yyyy' }} </span>\r\n            </div>\r\n            <div>\r\n              <strong>Expiry Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n\r\n            <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n              <strong>Document</strong><br />\r\n              <a [href]=\"cloudfrontUrl+exp.fileUrl\" target=\"_blank\">\r\n                <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n          <div class=\"full-width mt-3\">\r\n            <strong>Description</strong><br />\r\n            <span class=\"job-title\"> {{ exp.notes }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\" style=\"background-color: #1f4d5f;\">\r\n        Add More Licenses\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:23px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;color:#374151}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;font-weight:500;margin-bottom:5px}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.document-container{max-width:1100px;margin:auto}.search-input{width:100%;max-width:400px;height:44px;margin-bottom:16px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer}.content .title{font-weight:600;font-size:14px}.checkbox-row input{margin:0}.title{font-size:14px;font-weight:600}.content .desc{font-size:12px;color:#666;margin-top:4px}.save-btn{margin-top:20px;padding:10px 18px;border-radius:6px;border:none;background:#4077ad;color:#fff;cursor:pointer}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!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:#1e2541!important}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin:50px 100px 20px}.action{display:flex;justify-content:space-between;margin:50px 0 20px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@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}}.icon-color{cursor:pointer;width:20px;height:20px;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}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:350px}.accordion{margin:20px 100px}.add-btn{width:200px}@media screen and (max-width: 767px){.hint{margin-bottom:7px}.date-time-filter{font-size:14px}.search-input{margin-bottom:0}.right-actions{gap:5px}.preview-header{margin-left:0}.accordion{margin:20px 0!important}.actions{flex-direction:column-reverse;gap:7px;margin:50px 0 20px}.right-actions{gap:5px;flex-direction:column-reverse}.add-btn{width:unset}.action{display:flex;flex-direction:column-reverse;gap:5px}}.remove-file{margin-left:10px;cursor:pointer;color:red;font-weight:700}.file-icon{width:23px;height:23px}\n"] }]
-        }], ctorParameters: () => [{ type: UserDocumentService }, { type: UserService }, { type: CredentialingStore }, { type: LicenseStore }, { type: i6.TokenService }, { type: PostalCodeServices }, { type: i10.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
+        }], ctorParameters: () => [{ type: UserDocumentService }, { type: UserService }, { type: CredentialingStore }, { type: LicenseStore }, { type: i6.TokenService }, { type: PostalCodeServices }, { type: i8.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
                 type: Input
             }], providerName: [{
                 type: Input
@@ -5168,8 +5168,8 @@ class ToolsComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToolsComponent, deps: [{ token: ToolService }, { token: UserToolService }, { token: i10.UntypedFormBuilder }, { token: UserService }, { token: UtilsService }, { token: CredentialingStore }, { token: i6.TokenService }, { token: UserDetailService }, { token: LIBRARY_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
-    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" }, ngImport: i0, template: "<!-- Tool PREVIEW LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n  <h5 class=\"title text-secondary\">Tools Preview</h5>\r\n  <!-- <p class=\"subtitle\">Add Tools</p> -->\r\n  <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n    <accordion-group *ngFor=\"let tool of userToolsPreview\" #accGroup (isOpenChange)=\"onAccordionChange(tool, $event)\">\r\n      <div accordion-heading class=\"skill-preview-header d-flex justify-content-between align-items-center\">\r\n        <span class=\"fw-semibold text-secondary\">\r\n          {{ tool.toolName }}\r\n        </span>\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <!-- EDIT MODE BUTTONS -->\r\n          <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool); else viewActions\">\r\n            <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backTool(accGroup)\">\r\n              Cancel\r\n            </button>\r\n            <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserTools()\" \r\n              [disabled]=\"showLoader\">\r\n              Update\r\n            </button>\r\n          </ng-container>\r\n          <!-- VIEW MODE ACTIONS -->\r\n          <ng-template #viewActions>\r\n            <button type=\"button\" class=\"me-3\" (click)=\"editToolFromPreview(tool, accGroup, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" />\r\n            </button>\r\n            <!-- Arrow (ngx controls click) -->\r\n            <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n              [class.rotate]=\"accGroup.isOpen\" />\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n      <!-- BODY -->\r\n      <div class=\"skill-preview-body content-part mt-3\">\r\n        <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n          <div class=\"row g-3 row-gap-2\">\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Service Provider</label>\r\n              <div class=\"value\">{{ tool.providerName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Manufacturer</label>\r\n              <div class=\"value\">{{ tool.make }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Years of Experience</label>\r\n              <div class=\"value\">{{ tool.year }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Self Ability Rating</label>\r\n              <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\" style=\"pointer-events: none\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Active</label><br />\r\n              <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"tool.profileVisibility\" disabled>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Tools / Equipment</label>\r\n              <div class=\"value\">{{ tool.toolName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Model</label>\r\n              <div class=\"value\">{{ tool.model }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Serial Number</label>\r\n              <div class=\"value\">{{ tool.serialNumber }}</div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label>Description</label>\r\n              <div class=\"value\">{{ tool.notes }}</div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Edit Mode -->\r\n        <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\" [formGroup]=\"tab.at(0)\">\r\n          <div class=\"row g-3\">\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Service Provider</label>\r\n              <div class=\"value\">{{ tool.providerName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Manufacturer</label> <br />\r\n              <input class=\"form-control\" type=\"text\" formControlName=\"make\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Years of Experience</label>\r\n              <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" bindValue=\"value\" formControlName=\"year\"\r\n                [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\">\r\n              </ng-select>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Self Ability Rating</label>\r\n              <ngx-stars [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n                (ratingOutput)=\"onRatingSets($event)\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Active</label><br />\r\n              <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Tools / Equipment</label>\r\n              <input class=\"form-control\" [value]=\"tool.toolName\" readonly>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Model</label>\r\n              <input class=\"form-control\" formControlName=\"model\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Serial Number</label>\r\n              <input class=\"form-control\" formControlName=\"serialNumber\">\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label>Description</label>\r\n              <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\"></textarea>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </accordion-group>\r\n  </accordion>\r\n</div>\r\n\r\n<!-- Tool LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'add'\">\r\n  <h3 class=\"text-secondary\">Add Tools</h3>\r\n  <p class=\"info\">Manage specialty tools and equipment</p>\r\n  <div class=\"content-part\">\r\n    <h6 class=\"text-secondary\"> Add User Tool</h6>\r\n    <div class=\"sub-section\">\r\n      <div class=\"row mt-2\">\r\n        <div class=\"col-12 col-md-12 col-sm-12 ps-lg-0\">\r\n          <div class=\"search-part\" *ngIf=\"!isEditMode\">\r\n            <input type=\"text\" placeholder=\"Search / Add Tools here\" [(ngModel)]=\"searchToolQry\" (input)=\"getTools()\" />\r\n            <button class=\"btn\" (click)=\"createNewTools()\" tooltip=\"Add Tool\">\r\n              <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18px\" height=\"18px\" />\r\n            </button>\r\n          </div>\r\n          <div *ngIf=\"!searchToolQry && toolSubmittedValue\" class=\"invalid-feedback is-invalid d-block\">\r\n            Please Enter Tools Name\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n        {{ nameError }}\r\n      </div>\r\n      <div class=\"col tools-section\" [ngClass]=\"showLoading ? 'loader':''\">\r\n        <div class=\"row mt-2\" [ngStyle]=\"showLoader ? {'min-height': '150px'} : {}\">\r\n          <div class=\"col-12 col-md-4\" *ngFor=\"let Tool of tools\">\r\n            <div class=\"mt-2 d-flex\">\r\n              <input (change)=\"onSelectedTools($event, Tool)\" [checked]=\"Tool.selected == true\" id=\"{{ Tool.id }}\"\r\n                name=\"{{ Tool.id }}\" type=\"checkbox\" />\r\n              <label class=\"text-title\" for=\"{{ Tool.id }}\">\r\n                {{ Tool.name }}</label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div [ngClass]=\"{ 'loader': showLoading,'pt-3': !showLoading,'edit-mode': isEditMode}\">\r\n        <tabset #tabSet>\r\n          <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab?.controls; let index = index\"\r\n            [label]=\"tabs[index]\" tab1 id=\"{{ tabs[index] }}\" #{{tabs[index]}}>\r\n            <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n              <span class=\"text-secondary\">{{ tabs[index] }}</span>\r\n              <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.toolId.value)\">\r\n                <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n              </button>\r\n            </ng-template>\r\n            <div [formGroup]=\"group\" class=\"tab-card\">\r\n              <div class=\"card-body mt-3 position-relative\">\r\n                <div class=\"col-12 col-md-3 mt-1 copyAll\" *ngIf=\"\r\n                          tab.controls.length > 1 && index == copyOptionIndex\r\n                        \">\r\n                  <label class=\"label\">Copy to All Tabs</label>\r\n                  <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index, group.value,viewTab)\"\r\n                    role=\"switch\" />\r\n                </div>\r\n                <div class=\"row\" [ngClass]=\"index == 0 && tab.controls.length > 1 ? 'mt-5' : '' \">\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Self-ability Rating</label>\r\n                    <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n                      [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.starRating.errors }\" [maxStars]=\"5\">\r\n                    </ngx-stars>\r\n                    <div *ngIf=\"userToolSubmitted && k.starRating.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid':\r\n                                userToolSubmitted && k.starRating.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.starRating.errors.required\">\r\n                        Star Rating is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Profile Visibility</label><br />\r\n                    <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\" />\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Years of Experience</label>\r\n                    <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" (change)=\"onYearChange(group)\"\r\n                      formControlName=\"year\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.year.errors\r\n                            }\" bindValue=\"value\" [closeOnSelect]=\"true\" [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\"\r\n                      id=\"reqStates\"></ng-select>\r\n\r\n                    <div *ngIf=\"userToolSubmitted && k.year.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.year.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.year.errors.required\">\r\n                        Year is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Manufacturer</label>\r\n                    <input id=\"make\" formControlName=\"make\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Manufacturer here\"  (change)=\"onYearChange(group)\" />\r\n                    <!-- <div *ngIf=\"userToolSubmitted && k.make.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.make.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.make.errors.required\">\r\n                        Manufacturer is required\r\n                      </div>\r\n                    </div> -->\r\n                  </div>\r\n                </div>\r\n                <div class=\"row pt-2\">\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Model</label>\r\n                    <input id=\"model\" formControlName=\"model\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Model here\"  (change)=\"onYearChange(group)\" />\r\n                    <!-- <div *ngIf=\"userToolSubmitted && k.model.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.model.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.model.errors.required\">\r\n                        Model is required\r\n                      </div>\r\n                    </div> -->\r\n                  </div>\r\n\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\" label\">Serial Number</label>\r\n                    <input id=\"serialNumber\" formControlName=\"serialNumber\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Serial Number here\"  />\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Comment</label>\r\n                    <textarea placeholder=\"Enter your comment here\" formControlName=\"notes\" class=\"form-control\"\r\n                      [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.notes.errors\r\n                            }\" rows=\"2\"></textarea>\r\n                    <div *ngIf=\"userToolSubmitted && k.notes.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.notes.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.notes.errors.required\">\r\n                        Description is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </tab>\r\n        </tabset>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"tools-container last pt-5 mt-5\">\r\n    <div *ngIf=\"store.toolStepView() === 'add'\" class=\"d-flex justify-content-between pt-3 mob-res\">\r\n    <!-- (click)=\"reset()\" -->\r\n    <button class=\"back-btn\" (click)=\"cancel()\">Cancel</button>\r\n    <div class=\"mob-view\">\r\n      <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\" [ng2-loading]=\"showLoader\"\r\n        [disabled]=\"showLoader\" class=\"float-end save-btn\">\r\n        Add\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"store.toolStepView() !== 'add'\" class=\"d-flex justify-content-between pt-3 mob-res\">\r\n    <!-- (click)=\"reset()\" -->\r\n    <button class=\"back-btn\" (click)=\"goBack()\">Back</button>\r\n    <div class=\"mob-view\">\r\n      <button class=\"back-btn me-3 add\" *ngIf=\"store.toolStepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n        Add More Tools\r\n      </button>\r\n      <button    [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\" (click)=\"saveFinal()\"\r\n        class=\"float-end save-btn\">\r\n        Go To Dashboard\r\n      </button>\r\n      <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\"  [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" class=\"float-end save-btn\">\r\n        Add\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";.tools-container{max-width:1000px;margin:40px auto;min-height:300px}.tools-container.last{min-height:unset}.tools-container h3{margin-bottom:5px;font-size:22px;font-weight:500}.tools-container .info{font-size:13px;color:#666;margin-bottom:30px}.content-part{background:#fff}.content-part p,.content-part div{font-size:small}.content-part div .label{font-size:12px!important;font-weight:700!important;padding-bottom:5px!important}.content-part .row{margin-top:-15px}.content-part .sub-section{padding:0 10px}.content-part .sub-section .title{font-size:16px;font-weight:400;color:var(--font-primary)}.content-part .sub-section .info-title{font-size:12px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .sub-section .content{font-size:12px}.content-part .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px}.content-part .sub-section .subsection input{width:30%}.content-part .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background-color:#fff;border-radius:5px;color:var(--font-primary)}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;height:45px;position:relative;border-radius:5px;border:1px solid #d3dae6;padding:10px 0 10px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.content-part .search-part input{width:auto;flex:1;color:var(--font-dark);font-size:var(--font12-input);font-weight:400;border:none;background:none;outline:none}.content-part .search-part .btn{background:#1e2541;border-radius:5px;padding:5px;width:41px;height:36px;margin-right:3px}.content-part .search-part .btn img{filter:brightness(0) invert(1)}.content-part textarea{width:100%;background:none}.content-part .tools-section{margin-left:5px}.content-part .tools-section .category-title{margin-bottom:5px;font-size:13px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .tools-section .text-title{font-size:13px;margin-left:3px;color:var(--font-primary)}.content-part .tools-section input[type=checkbox]{border:2px solid #000!important;height:14px!important;width:15px!important;border-radius:2px!important;margin:2px}.content-part .tools-section input[type=checkbox]:checked{background-color:#000!important;border:2px solid #000!important}.content-part .tools-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#000;width:15px;display:flex;justify-content:center;border:2px solid #000;height:14px;align-items:center;border-radius:2px}.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:#237b4b!important;border:1px solid #237b4b!important}.copyAll{position:absolute;right:0;text-align:end;top:-40px}.close-popup{position:absolute;right:7px;top:4px;width:25px}.form-control:focus{border:var(--bs-border-width) solid var(--bs-border-color)}::ng-deep .nav-link{color:#000!important}.back-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background:#d3dae6;color:#6c757dc7;border-radius:5px}.back-btn.edit{padding:5px 20px;min-height:20px;min-width:auto}.back-btn.add{background:#2e5b70;color:#fff}.save-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px}.create-btn{font-size:14px;transition:.2s;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px;height:40px;min-width:9rem}.form-control{color:#333;background:none!important;font-size:small;height:45px}.form-control:focus{box-shadow:none!important}@media only screen and (min-width: 300px) and (max-width: 450px){.modal-content .close-popup{width:16px}}.loader{filter:blur(3px)}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.skill-preview-body label{font-weight:500;font-size:14px;color:#6b7280;padding-bottom:5px}.skill-preview-body p{margin:0}.skill-preview-body .value{font-size:13px;color:#212529}.skill-preview-card{border-radius:12px;margin-bottom:12px;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease;overflow:hidden}.continue-btn{background-color:#4077ad;padding:5px 20px;min-height:20px;font-weight:500;color:#fff;border-radius:5px}.action-btns{display:flex;justify-content:space-between;align-items:center}.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:15px}.actions button{padding:10px 22px;border:none;border-radius:6px;font-size:14px;transition:all .2s ease;font-weight:500;min-width:8rem;min-height:45px}.actions .secondary{color:#6c757dc7;background-color:#e0e0e0}.actions .secondary:hover{background-color:#d5d5d5}.actions .primary{background-color:#2196f3;color:#fff}.actions .primary:hover{background-color:#1976d2}@media (max-width: 600px){.actions{flex-direction:column;align-items:stretch}.actions button{width:100%}}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .2s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.icon-color.rotate{transform:rotate(180deg)}@media screen and (max-width: 767px){.tools-container{padding:0 10px}.tools-container .mob-view{display:flex;justify-content:space-between;flex-direction:column-reverse;gap:5px}.tools-container .mob-res{flex-direction:column-reverse;gap:5px}.footer-actions{flex-direction:column-reverse;gap:5px;margin-top:65px}.continue-btn{padding:7px 45px}.back-btn{width:100%}.continue-btn{padding:10px 43px}.save-btn{padding:10px 15px;width:unset;margin-left:0!important}}.save-btn{margin-left:15px}\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: i10.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: i10.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i10.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "component", type: NgxStarsComponent, selector: "ngx-stars", inputs: ["maxStars", "initialStars", "readonly", "size", "color", "animation", "animationSpeed", "customPadding", "wholeStars", "customStarIcons"], outputs: ["ratingOutput"] }, { kind: "directive", type: i12$2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i13.TabDirective, selector: "tab, [tab]", inputs: ["heading", "id", "disabled", "removable", "tabOrder", "customClass", "active"], outputs: ["selectTab", "deselect", "removed"], exportAs: ["tab"] }, { kind: "component", type: i13.TabsetComponent, selector: "tabset", inputs: ["vertical", "justified", "type"] }, { kind: "directive", type: i13.TabHeadingDirective, selector: "[tabHeading]" }, { kind: "component", type: i14.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i14.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }], animations: [
+    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: i6.TokenService }, { token: UserDetailService }, { token: LIBRARY_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
+    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" }, ngImport: i0, template: "<!-- Tool PREVIEW LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n  <h5 class=\"title text-secondary\">Tools Preview</h5>\r\n  <!-- <p class=\"subtitle\">Add Tools</p> -->\r\n  <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n    <accordion-group *ngFor=\"let tool of userToolsPreview\" #accGroup (isOpenChange)=\"onAccordionChange(tool, $event)\">\r\n      <div accordion-heading class=\"skill-preview-header d-flex justify-content-between align-items-center\">\r\n        <span class=\"fw-semibold text-secondary\">\r\n          {{ tool.toolName }}\r\n        </span>\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <!-- EDIT MODE BUTTONS -->\r\n          <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool); else viewActions\">\r\n            <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backTool(accGroup)\">\r\n              Cancel\r\n            </button>\r\n            <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserTools()\" \r\n              [disabled]=\"showLoader\">\r\n              Update\r\n            </button>\r\n          </ng-container>\r\n          <!-- VIEW MODE ACTIONS -->\r\n          <ng-template #viewActions>\r\n            <button type=\"button\" class=\"me-3\" (click)=\"editToolFromPreview(tool, accGroup, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" />\r\n            </button>\r\n            <!-- Arrow (ngx controls click) -->\r\n            <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n              [class.rotate]=\"accGroup.isOpen\" />\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n      <!-- BODY -->\r\n      <div class=\"skill-preview-body content-part mt-3\">\r\n        <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n          <div class=\"row g-3 row-gap-2\">\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Service Provider</label>\r\n              <div class=\"value\">{{ tool.providerName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Manufacturer</label>\r\n              <div class=\"value\">{{ tool.make }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Years of Experience</label>\r\n              <div class=\"value\">{{ tool.year }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Self Ability Rating</label>\r\n              <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\" style=\"pointer-events: none\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Active</label><br />\r\n              <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"tool.profileVisibility\" disabled>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Tools / Equipment</label>\r\n              <div class=\"value\">{{ tool.toolName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Model</label>\r\n              <div class=\"value\">{{ tool.model }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Serial Number</label>\r\n              <div class=\"value\">{{ tool.serialNumber }}</div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label>Description</label>\r\n              <div class=\"value\">{{ tool.notes }}</div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Edit Mode -->\r\n        <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\" [formGroup]=\"tab.at(0)\">\r\n          <div class=\"row g-3\">\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Service Provider</label>\r\n              <div class=\"value\">{{ tool.providerName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Manufacturer</label> <br />\r\n              <input class=\"form-control\" type=\"text\" formControlName=\"make\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Years of Experience</label>\r\n              <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" bindValue=\"value\" formControlName=\"year\"\r\n                [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\">\r\n              </ng-select>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Self Ability Rating</label>\r\n              <ngx-stars [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n                (ratingOutput)=\"onRatingSets($event)\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Active</label><br />\r\n              <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Tools / Equipment</label>\r\n              <input class=\"form-control\" [value]=\"tool.toolName\" readonly>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Model</label>\r\n              <input class=\"form-control\" formControlName=\"model\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Serial Number</label>\r\n              <input class=\"form-control\" formControlName=\"serialNumber\">\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label>Description</label>\r\n              <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\"></textarea>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </accordion-group>\r\n  </accordion>\r\n</div>\r\n\r\n<!-- Tool LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'add'\">\r\n  <h3 class=\"text-secondary\">Add Tools</h3>\r\n  <p class=\"info\">Manage specialty tools and equipment</p>\r\n  <div class=\"content-part\">\r\n    <h6 class=\"text-secondary\"> Add User Tool</h6>\r\n    <div class=\"sub-section\">\r\n      <div class=\"row mt-2\">\r\n        <div class=\"col-12 col-md-12 col-sm-12 ps-lg-0\">\r\n          <div class=\"search-part\" *ngIf=\"!isEditMode\">\r\n            <input type=\"text\" placeholder=\"Search / Add Tools here\" [(ngModel)]=\"searchToolQry\" (input)=\"getTools()\" />\r\n            <button class=\"btn\" (click)=\"createNewTools()\" tooltip=\"Add Tool\">\r\n              <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18px\" height=\"18px\" />\r\n            </button>\r\n          </div>\r\n          <div *ngIf=\"!searchToolQry && toolSubmittedValue\" class=\"invalid-feedback is-invalid d-block\">\r\n            Please Enter Tools Name\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n        {{ nameError }}\r\n      </div>\r\n      <div class=\"col tools-section\" [ngClass]=\"showLoading ? 'loader':''\">\r\n        <div class=\"row mt-2\" [ngStyle]=\"showLoader ? {'min-height': '150px'} : {}\">\r\n          <div class=\"col-12 col-md-4\" *ngFor=\"let Tool of tools\">\r\n            <div class=\"mt-2 d-flex\">\r\n              <input (change)=\"onSelectedTools($event, Tool)\" [checked]=\"Tool.selected == true\" id=\"{{ Tool.id }}\"\r\n                name=\"{{ Tool.id }}\" type=\"checkbox\" />\r\n              <label class=\"text-title\" for=\"{{ Tool.id }}\">\r\n                {{ Tool.name }}</label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div [ngClass]=\"{ 'loader': showLoading,'pt-3': !showLoading,'edit-mode': isEditMode}\">\r\n        <tabset #tabSet>\r\n          <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab?.controls; let index = index\"\r\n            [label]=\"tabs[index]\" tab1 id=\"{{ tabs[index] }}\" #{{tabs[index]}}>\r\n            <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n              <span class=\"text-secondary\">{{ tabs[index] }}</span>\r\n              <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.toolId.value)\">\r\n                <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n              </button>\r\n            </ng-template>\r\n            <div [formGroup]=\"group\" class=\"tab-card\">\r\n              <div class=\"card-body mt-3 position-relative\">\r\n                <div class=\"col-12 col-md-3 mt-1 copyAll\" *ngIf=\"\r\n                          tab.controls.length > 1 && index == copyOptionIndex\r\n                        \">\r\n                  <label class=\"label\">Copy to All Tabs</label>\r\n                  <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index, group.value,viewTab)\"\r\n                    role=\"switch\" />\r\n                </div>\r\n                <div class=\"row\" [ngClass]=\"index == 0 && tab.controls.length > 1 ? 'mt-5' : '' \">\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Self-ability Rating</label>\r\n                    <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n                      [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.starRating.errors }\" [maxStars]=\"5\">\r\n                    </ngx-stars>\r\n                    <div *ngIf=\"userToolSubmitted && k.starRating.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid':\r\n                                userToolSubmitted && k.starRating.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.starRating.errors.required\">\r\n                        Star Rating is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Profile Visibility</label><br />\r\n                    <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\" />\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Years of Experience</label>\r\n                    <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" (change)=\"onYearChange(group)\"\r\n                      formControlName=\"year\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.year.errors\r\n                            }\" bindValue=\"value\" [closeOnSelect]=\"true\" [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\"\r\n                      id=\"reqStates\"></ng-select>\r\n\r\n                    <div *ngIf=\"userToolSubmitted && k.year.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.year.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.year.errors.required\">\r\n                        Year is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Manufacturer</label>\r\n                    <input id=\"make\" formControlName=\"make\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Manufacturer here\"  (change)=\"onYearChange(group)\" />\r\n                    <!-- <div *ngIf=\"userToolSubmitted && k.make.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.make.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.make.errors.required\">\r\n                        Manufacturer is required\r\n                      </div>\r\n                    </div> -->\r\n                  </div>\r\n                </div>\r\n                <div class=\"row pt-2\">\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Model</label>\r\n                    <input id=\"model\" formControlName=\"model\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Model here\"  (change)=\"onYearChange(group)\" />\r\n                    <!-- <div *ngIf=\"userToolSubmitted && k.model.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.model.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.model.errors.required\">\r\n                        Model is required\r\n                      </div>\r\n                    </div> -->\r\n                  </div>\r\n\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\" label\">Serial Number</label>\r\n                    <input id=\"serialNumber\" formControlName=\"serialNumber\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Serial Number here\"  />\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Comment</label>\r\n                    <textarea placeholder=\"Enter your comment here\" formControlName=\"notes\" class=\"form-control\"\r\n                      [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.notes.errors\r\n                            }\" rows=\"2\"></textarea>\r\n                    <div *ngIf=\"userToolSubmitted && k.notes.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.notes.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.notes.errors.required\">\r\n                        Description is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </tab>\r\n        </tabset>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"tools-container last pt-5 mt-5\">\r\n    <div *ngIf=\"store.toolStepView() === 'add'\" class=\"d-flex justify-content-between pt-3 mob-res\">\r\n    <!-- (click)=\"reset()\" -->\r\n    <button class=\"back-btn\" (click)=\"cancel()\">Cancel</button>\r\n    <div class=\"mob-view\">\r\n      <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\" [ng2-loading]=\"showLoader\"\r\n        [disabled]=\"showLoader\" class=\"float-end save-btn\">\r\n        Add\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"store.toolStepView() !== 'add'\" class=\"d-flex justify-content-between pt-3 mob-res\">\r\n    <!-- (click)=\"reset()\" -->\r\n    <button class=\"back-btn\" (click)=\"goBack()\">Back</button>\r\n    <div class=\"mob-view\">\r\n      <button class=\"back-btn me-3 add\" *ngIf=\"store.toolStepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n        Add More Tools\r\n      </button>\r\n      <button    [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\" (click)=\"saveFinal()\"\r\n        class=\"float-end save-btn\">\r\n        Go To Dashboard\r\n      </button>\r\n      <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\"  [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" class=\"float-end save-btn\">\r\n        Add\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";.tools-container{max-width:1000px;margin:40px auto;min-height:300px}.tools-container.last{min-height:unset}.tools-container h3{margin-bottom:5px;font-size:22px;font-weight:500}.tools-container .info{font-size:13px;color:#666;margin-bottom:30px}.content-part{background:#fff}.content-part p,.content-part div{font-size:small}.content-part div .label{font-size:12px!important;font-weight:700!important;padding-bottom:5px!important}.content-part .row{margin-top:-15px}.content-part .sub-section{padding:0 10px}.content-part .sub-section .title{font-size:16px;font-weight:400;color:var(--font-primary)}.content-part .sub-section .info-title{font-size:12px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .sub-section .content{font-size:12px}.content-part .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px}.content-part .sub-section .subsection input{width:30%}.content-part .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background-color:#fff;border-radius:5px;color:var(--font-primary)}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;height:45px;position:relative;border-radius:5px;border:1px solid #d3dae6;padding:10px 0 10px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.content-part .search-part input{width:auto;flex:1;color:var(--font-dark);font-size:var(--font12-input);font-weight:400;border:none;background:none;outline:none}.content-part .search-part .btn{background:#1e2541;border-radius:5px;padding:5px;width:41px;height:36px;margin-right:3px}.content-part .search-part .btn img{filter:brightness(0) invert(1)}.content-part textarea{width:100%;background:none}.content-part .tools-section{margin-left:5px}.content-part .tools-section .category-title{margin-bottom:5px;font-size:13px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .tools-section .text-title{font-size:13px;margin-left:3px;color:var(--font-primary)}.content-part .tools-section input[type=checkbox]{border:2px solid #000!important;height:14px!important;width:15px!important;border-radius:2px!important;margin:2px}.content-part .tools-section input[type=checkbox]:checked{background-color:#000!important;border:2px solid #000!important}.content-part .tools-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#000;width:15px;display:flex;justify-content:center;border:2px solid #000;height:14px;align-items:center;border-radius:2px}.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:#237b4b!important;border:1px solid #237b4b!important}.copyAll{position:absolute;right:0;text-align:end;top:-40px}.close-popup{position:absolute;right:7px;top:4px;width:25px}.form-control:focus{border:var(--bs-border-width) solid var(--bs-border-color)}::ng-deep .nav-link{color:#000!important}.back-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background:#d3dae6;color:#6c757dc7;border-radius:5px}.back-btn.edit{padding:5px 20px;min-height:20px;min-width:auto}.back-btn.add{background:#2e5b70;color:#fff}.save-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px}.create-btn{font-size:14px;transition:.2s;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px;height:40px;min-width:9rem}.form-control{color:#333;background:none!important;font-size:small;height:45px}.form-control:focus{box-shadow:none!important}@media only screen and (min-width: 300px) and (max-width: 450px){.modal-content .close-popup{width:16px}}.loader{filter:blur(3px)}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.skill-preview-body label{font-weight:500;font-size:14px;color:#6b7280;padding-bottom:5px}.skill-preview-body p{margin:0}.skill-preview-body .value{font-size:13px;color:#212529}.skill-preview-card{border-radius:12px;margin-bottom:12px;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease;overflow:hidden}.continue-btn{background-color:#4077ad;padding:5px 20px;min-height:20px;font-weight:500;color:#fff;border-radius:5px}.action-btns{display:flex;justify-content:space-between;align-items:center}.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:15px}.actions button{padding:10px 22px;border:none;border-radius:6px;font-size:14px;transition:all .2s ease;font-weight:500;min-width:8rem;min-height:45px}.actions .secondary{color:#6c757dc7;background-color:#e0e0e0}.actions .secondary:hover{background-color:#d5d5d5}.actions .primary{background-color:#2196f3;color:#fff}.actions .primary:hover{background-color:#1976d2}@media (max-width: 600px){.actions{flex-direction:column;align-items:stretch}.actions button{width:100%}}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .2s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.icon-color.rotate{transform:rotate(180deg)}@media screen and (max-width: 767px){.tools-container{padding:0 10px}.tools-container .mob-view{display:flex;justify-content:space-between;flex-direction:column-reverse;gap:5px}.tools-container .mob-res{flex-direction:column-reverse;gap:5px}.footer-actions{flex-direction:column-reverse;gap:5px;margin-top:65px}.continue-btn{padding:7px 45px}.back-btn{width:100%}.continue-btn{padding:10px 43px}.save-btn{padding:10px 15px;width:unset;margin-left:0!important}}.save-btn{margin-left:15px}\n"], dependencies: [{ kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "component", type: NgxStarsComponent, selector: "ngx-stars", inputs: ["maxStars", "initialStars", "readonly", "size", "color", "animation", "animationSpeed", "customPadding", "wholeStars", "customStarIcons"], outputs: ["ratingOutput"] }, { kind: "directive", type: i12$2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i13.TabDirective, selector: "tab, [tab]", inputs: ["heading", "id", "disabled", "removable", "tabOrder", "customClass", "active"], outputs: ["selectTab", "deselect", "removed"], exportAs: ["tab"] }, { kind: "component", type: i13.TabsetComponent, selector: "tabset", inputs: ["vertical", "justified", "type"] }, { kind: "directive", type: i13.TabHeadingDirective, selector: "[tabHeading]" }, { kind: "component", type: i14.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i14.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }], animations: [
             trigger('expandCollapse', [
                 state('open', style({
                     height: '*',
@@ -5208,7 +5208,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             transition('open <=> closed', animate('300ms ease'))
                         ])
                     ], template: "<!-- Tool PREVIEW LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n  <h5 class=\"title text-secondary\">Tools Preview</h5>\r\n  <!-- <p class=\"subtitle\">Add Tools</p> -->\r\n  <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n    <accordion-group *ngFor=\"let tool of userToolsPreview\" #accGroup (isOpenChange)=\"onAccordionChange(tool, $event)\">\r\n      <div accordion-heading class=\"skill-preview-header d-flex justify-content-between align-items-center\">\r\n        <span class=\"fw-semibold text-secondary\">\r\n          {{ tool.toolName }}\r\n        </span>\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <!-- EDIT MODE BUTTONS -->\r\n          <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool); else viewActions\">\r\n            <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backTool(accGroup)\">\r\n              Cancel\r\n            </button>\r\n            <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserTools()\" \r\n              [disabled]=\"showLoader\">\r\n              Update\r\n            </button>\r\n          </ng-container>\r\n          <!-- VIEW MODE ACTIONS -->\r\n          <ng-template #viewActions>\r\n            <button type=\"button\" class=\"me-3\" (click)=\"editToolFromPreview(tool, accGroup, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" />\r\n            </button>\r\n            <!-- Arrow (ngx controls click) -->\r\n            <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n              [class.rotate]=\"accGroup.isOpen\" />\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n      <!-- BODY -->\r\n      <div class=\"skill-preview-body content-part mt-3\">\r\n        <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n          <div class=\"row g-3 row-gap-2\">\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Service Provider</label>\r\n              <div class=\"value\">{{ tool.providerName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Manufacturer</label>\r\n              <div class=\"value\">{{ tool.make }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Years of Experience</label>\r\n              <div class=\"value\">{{ tool.year }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Self Ability Rating</label>\r\n              <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\" style=\"pointer-events: none\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Active</label><br />\r\n              <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"tool.profileVisibility\" disabled>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Tools / Equipment</label>\r\n              <div class=\"value\">{{ tool.toolName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Model</label>\r\n              <div class=\"value\">{{ tool.model }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Serial Number</label>\r\n              <div class=\"value\">{{ tool.serialNumber }}</div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label>Description</label>\r\n              <div class=\"value\">{{ tool.notes }}</div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Edit Mode -->\r\n        <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\" [formGroup]=\"tab.at(0)\">\r\n          <div class=\"row g-3\">\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Service Provider</label>\r\n              <div class=\"value\">{{ tool.providerName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Manufacturer</label> <br />\r\n              <input class=\"form-control\" type=\"text\" formControlName=\"make\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Years of Experience</label>\r\n              <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" bindValue=\"value\" formControlName=\"year\"\r\n                [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\">\r\n              </ng-select>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Self Ability Rating</label>\r\n              <ngx-stars [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n                (ratingOutput)=\"onRatingSets($event)\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Active</label><br />\r\n              <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Tools / Equipment</label>\r\n              <input class=\"form-control\" [value]=\"tool.toolName\" readonly>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Model</label>\r\n              <input class=\"form-control\" formControlName=\"model\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Serial Number</label>\r\n              <input class=\"form-control\" formControlName=\"serialNumber\">\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label>Description</label>\r\n              <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\"></textarea>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </accordion-group>\r\n  </accordion>\r\n</div>\r\n\r\n<!-- Tool LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'add'\">\r\n  <h3 class=\"text-secondary\">Add Tools</h3>\r\n  <p class=\"info\">Manage specialty tools and equipment</p>\r\n  <div class=\"content-part\">\r\n    <h6 class=\"text-secondary\"> Add User Tool</h6>\r\n    <div class=\"sub-section\">\r\n      <div class=\"row mt-2\">\r\n        <div class=\"col-12 col-md-12 col-sm-12 ps-lg-0\">\r\n          <div class=\"search-part\" *ngIf=\"!isEditMode\">\r\n            <input type=\"text\" placeholder=\"Search / Add Tools here\" [(ngModel)]=\"searchToolQry\" (input)=\"getTools()\" />\r\n            <button class=\"btn\" (click)=\"createNewTools()\" tooltip=\"Add Tool\">\r\n              <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18px\" height=\"18px\" />\r\n            </button>\r\n          </div>\r\n          <div *ngIf=\"!searchToolQry && toolSubmittedValue\" class=\"invalid-feedback is-invalid d-block\">\r\n            Please Enter Tools Name\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n        {{ nameError }}\r\n      </div>\r\n      <div class=\"col tools-section\" [ngClass]=\"showLoading ? 'loader':''\">\r\n        <div class=\"row mt-2\" [ngStyle]=\"showLoader ? {'min-height': '150px'} : {}\">\r\n          <div class=\"col-12 col-md-4\" *ngFor=\"let Tool of tools\">\r\n            <div class=\"mt-2 d-flex\">\r\n              <input (change)=\"onSelectedTools($event, Tool)\" [checked]=\"Tool.selected == true\" id=\"{{ Tool.id }}\"\r\n                name=\"{{ Tool.id }}\" type=\"checkbox\" />\r\n              <label class=\"text-title\" for=\"{{ Tool.id }}\">\r\n                {{ Tool.name }}</label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div [ngClass]=\"{ 'loader': showLoading,'pt-3': !showLoading,'edit-mode': isEditMode}\">\r\n        <tabset #tabSet>\r\n          <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab?.controls; let index = index\"\r\n            [label]=\"tabs[index]\" tab1 id=\"{{ tabs[index] }}\" #{{tabs[index]}}>\r\n            <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n              <span class=\"text-secondary\">{{ tabs[index] }}</span>\r\n              <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.toolId.value)\">\r\n                <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n              </button>\r\n            </ng-template>\r\n            <div [formGroup]=\"group\" class=\"tab-card\">\r\n              <div class=\"card-body mt-3 position-relative\">\r\n                <div class=\"col-12 col-md-3 mt-1 copyAll\" *ngIf=\"\r\n                          tab.controls.length > 1 && index == copyOptionIndex\r\n                        \">\r\n                  <label class=\"label\">Copy to All Tabs</label>\r\n                  <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index, group.value,viewTab)\"\r\n                    role=\"switch\" />\r\n                </div>\r\n                <div class=\"row\" [ngClass]=\"index == 0 && tab.controls.length > 1 ? 'mt-5' : '' \">\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Self-ability Rating</label>\r\n                    <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n                      [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.starRating.errors }\" [maxStars]=\"5\">\r\n                    </ngx-stars>\r\n                    <div *ngIf=\"userToolSubmitted && k.starRating.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid':\r\n                                userToolSubmitted && k.starRating.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.starRating.errors.required\">\r\n                        Star Rating is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Profile Visibility</label><br />\r\n                    <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\" />\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Years of Experience</label>\r\n                    <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" (change)=\"onYearChange(group)\"\r\n                      formControlName=\"year\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.year.errors\r\n                            }\" bindValue=\"value\" [closeOnSelect]=\"true\" [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\"\r\n                      id=\"reqStates\"></ng-select>\r\n\r\n                    <div *ngIf=\"userToolSubmitted && k.year.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.year.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.year.errors.required\">\r\n                        Year is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Manufacturer</label>\r\n                    <input id=\"make\" formControlName=\"make\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Manufacturer here\"  (change)=\"onYearChange(group)\" />\r\n                    <!-- <div *ngIf=\"userToolSubmitted && k.make.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.make.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.make.errors.required\">\r\n                        Manufacturer is required\r\n                      </div>\r\n                    </div> -->\r\n                  </div>\r\n                </div>\r\n                <div class=\"row pt-2\">\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Model</label>\r\n                    <input id=\"model\" formControlName=\"model\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Model here\"  (change)=\"onYearChange(group)\" />\r\n                    <!-- <div *ngIf=\"userToolSubmitted && k.model.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.model.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.model.errors.required\">\r\n                        Model is required\r\n                      </div>\r\n                    </div> -->\r\n                  </div>\r\n\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\" label\">Serial Number</label>\r\n                    <input id=\"serialNumber\" formControlName=\"serialNumber\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Serial Number here\"  />\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Comment</label>\r\n                    <textarea placeholder=\"Enter your comment here\" formControlName=\"notes\" class=\"form-control\"\r\n                      [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.notes.errors\r\n                            }\" rows=\"2\"></textarea>\r\n                    <div *ngIf=\"userToolSubmitted && k.notes.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.notes.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.notes.errors.required\">\r\n                        Description is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </tab>\r\n        </tabset>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"tools-container last pt-5 mt-5\">\r\n    <div *ngIf=\"store.toolStepView() === 'add'\" class=\"d-flex justify-content-between pt-3 mob-res\">\r\n    <!-- (click)=\"reset()\" -->\r\n    <button class=\"back-btn\" (click)=\"cancel()\">Cancel</button>\r\n    <div class=\"mob-view\">\r\n      <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\" [ng2-loading]=\"showLoader\"\r\n        [disabled]=\"showLoader\" class=\"float-end save-btn\">\r\n        Add\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"store.toolStepView() !== 'add'\" class=\"d-flex justify-content-between pt-3 mob-res\">\r\n    <!-- (click)=\"reset()\" -->\r\n    <button class=\"back-btn\" (click)=\"goBack()\">Back</button>\r\n    <div class=\"mob-view\">\r\n      <button class=\"back-btn me-3 add\" *ngIf=\"store.toolStepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n        Add More Tools\r\n      </button>\r\n      <button    [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\" (click)=\"saveFinal()\"\r\n        class=\"float-end save-btn\">\r\n        Go To Dashboard\r\n      </button>\r\n      <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\"  [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" class=\"float-end save-btn\">\r\n        Add\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";.tools-container{max-width:1000px;margin:40px auto;min-height:300px}.tools-container.last{min-height:unset}.tools-container h3{margin-bottom:5px;font-size:22px;font-weight:500}.tools-container .info{font-size:13px;color:#666;margin-bottom:30px}.content-part{background:#fff}.content-part p,.content-part div{font-size:small}.content-part div .label{font-size:12px!important;font-weight:700!important;padding-bottom:5px!important}.content-part .row{margin-top:-15px}.content-part .sub-section{padding:0 10px}.content-part .sub-section .title{font-size:16px;font-weight:400;color:var(--font-primary)}.content-part .sub-section .info-title{font-size:12px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .sub-section .content{font-size:12px}.content-part .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px}.content-part .sub-section .subsection input{width:30%}.content-part .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background-color:#fff;border-radius:5px;color:var(--font-primary)}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;height:45px;position:relative;border-radius:5px;border:1px solid #d3dae6;padding:10px 0 10px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.content-part .search-part input{width:auto;flex:1;color:var(--font-dark);font-size:var(--font12-input);font-weight:400;border:none;background:none;outline:none}.content-part .search-part .btn{background:#1e2541;border-radius:5px;padding:5px;width:41px;height:36px;margin-right:3px}.content-part .search-part .btn img{filter:brightness(0) invert(1)}.content-part textarea{width:100%;background:none}.content-part .tools-section{margin-left:5px}.content-part .tools-section .category-title{margin-bottom:5px;font-size:13px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .tools-section .text-title{font-size:13px;margin-left:3px;color:var(--font-primary)}.content-part .tools-section input[type=checkbox]{border:2px solid #000!important;height:14px!important;width:15px!important;border-radius:2px!important;margin:2px}.content-part .tools-section input[type=checkbox]:checked{background-color:#000!important;border:2px solid #000!important}.content-part .tools-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#000;width:15px;display:flex;justify-content:center;border:2px solid #000;height:14px;align-items:center;border-radius:2px}.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:#237b4b!important;border:1px solid #237b4b!important}.copyAll{position:absolute;right:0;text-align:end;top:-40px}.close-popup{position:absolute;right:7px;top:4px;width:25px}.form-control:focus{border:var(--bs-border-width) solid var(--bs-border-color)}::ng-deep .nav-link{color:#000!important}.back-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background:#d3dae6;color:#6c757dc7;border-radius:5px}.back-btn.edit{padding:5px 20px;min-height:20px;min-width:auto}.back-btn.add{background:#2e5b70;color:#fff}.save-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px}.create-btn{font-size:14px;transition:.2s;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px;height:40px;min-width:9rem}.form-control{color:#333;background:none!important;font-size:small;height:45px}.form-control:focus{box-shadow:none!important}@media only screen and (min-width: 300px) and (max-width: 450px){.modal-content .close-popup{width:16px}}.loader{filter:blur(3px)}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.skill-preview-body label{font-weight:500;font-size:14px;color:#6b7280;padding-bottom:5px}.skill-preview-body p{margin:0}.skill-preview-body .value{font-size:13px;color:#212529}.skill-preview-card{border-radius:12px;margin-bottom:12px;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease;overflow:hidden}.continue-btn{background-color:#4077ad;padding:5px 20px;min-height:20px;font-weight:500;color:#fff;border-radius:5px}.action-btns{display:flex;justify-content:space-between;align-items:center}.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:15px}.actions button{padding:10px 22px;border:none;border-radius:6px;font-size:14px;transition:all .2s ease;font-weight:500;min-width:8rem;min-height:45px}.actions .secondary{color:#6c757dc7;background-color:#e0e0e0}.actions .secondary:hover{background-color:#d5d5d5}.actions .primary{background-color:#2196f3;color:#fff}.actions .primary:hover{background-color:#1976d2}@media (max-width: 600px){.actions{flex-direction:column;align-items:stretch}.actions button{width:100%}}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .2s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.icon-color.rotate{transform:rotate(180deg)}@media screen and (max-width: 767px){.tools-container{padding:0 10px}.tools-container .mob-view{display:flex;justify-content:space-between;flex-direction:column-reverse;gap:5px}.tools-container .mob-res{flex-direction:column-reverse;gap:5px}.footer-actions{flex-direction:column-reverse;gap:5px;margin-top:65px}.continue-btn{padding:7px 45px}.back-btn{width:100%}.continue-btn{padding:10px 43px}.save-btn{padding:10px 15px;width:unset;margin-left:0!important}}.save-btn{margin-left:15px}\n"] }]
-        }], ctorParameters: () => [{ type: ToolService }, { type: UserToolService }, { type: i10.UntypedFormBuilder }, { type: UserService }, { type: UtilsService }, { type: CredentialingStore }, { type: i6.TokenService }, { type: UserDetailService }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: ToolService }, { type: UserToolService }, { type: i8.UntypedFormBuilder }, { type: UserService }, { type: UtilsService }, { type: CredentialingStore }, { type: i6.TokenService }, { type: UserDetailService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LIBRARY_CONFIG]
                 }] }], propDecorators: { roleData: [{
@@ -5929,13 +5929,13 @@ class RoleSelectComponent {
     back() {
         this.store.previousStep();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RoleSelectComponent, deps: [{ token: CredentialingStore }, { token: UserService }, { token: UserDocumentService }, { token: i2.Router }, { token: IndustryService }, { token: UserDetailService }, { token: FileService }, { token: ProvidersService }, { token: i6.TokenService }, { token: i10.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: RoleSelectComponent, isStandalone: false, selector: "app-role-select", inputs: { roleData: "roleData", cloudfrontUrl: "cloudfrontUrl", providerId: "providerId", providerName: "providerName" }, outputs: { backToParent: "backToParent" }, ngImport: i0, template: "<div class=\"role-selection-container\">\r\n  <h2>Basic Details</h2>\r\n  <p class=\"note\">We need basic information and a headshot for your profile</p>\r\n  <div class=\"profile-field\">\r\n    <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n      <div class=\"spinner-border\"></div>\r\n    </div>\r\n    <form *ngIf=\"isLoaded\" [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          <label class=\"note-label mb-2 mb-3\">First Name*</label>\r\n          <input [ngClass]=\"{ 'is-invalid':  u.firstName.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n            type=\"text\" class=\"form-control\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n          <div *ngIf=\" u?.firstName?.invalid &&\r\n      (u?.firstName?.touched || u?.firstName?.dirty)\" 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          <label class=\"note-label mb-2 mb-3\">Last Name*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\"\r\n            [ngClass]=\"{\r\n    'is-invalid':\r\n      u.lastName.invalid && (u.lastName.touched || u.lastName.dirty)\r\n  }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n    u.lastName.invalid &&\r\n    (u.lastName.touched || u.lastName.dirty)\r\n  \">\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\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Email*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.email.invalid && (u.email.touched || u.email.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.email.invalid &&\r\n      (u.email.touched || u.email.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.email.errors?.required\">\r\n              Email is required\r\n            </div>\r\n            <div class=\"ms-1\" *ngIf=\"u.email.errors?.email\">\r\n              Please enter a valid email address\r\n            </div>\r\n          </div>\r\n        </div>\r\n\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          <label class=\"note-label mb-2\">Home Address 1*</label>\r\n\r\n          <input type=\"text\" autocomplete=\"new-address-view\" name=\"random-address-{{randomId}}\" class=\"form-control\"\r\n            placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete\r\n            [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.address1.invalid && (u.address1.touched || u.address1.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.address1.invalid &&\r\n      (u.address1.touched || u.address1.dirty)\r\n    \">\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\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">City*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.city.invalid && (u.city.touched || u.city.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.city.invalid &&\r\n      (u.city.touched || u.city.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n              City is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">State*</label>\r\n\r\n          <input type=\"text\" autocomplete=\"new-state-view\" name=\"random-state-{{randomId}}\" class=\"form-control\"\r\n            id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.state.invalid && (u.state.touched || u.state.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.state.invalid &&\r\n      (u.state.touched || u.state.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n              State is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n\r\n\r\n\r\n\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\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=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.city.invalid && (u.city.touched || u.city.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.city.invalid &&\r\n      (u.city.touched || u.city.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n              City is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\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=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.state.invalid && (u.state.touched || u.state.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.state.invalid &&\r\n      (u.state.touched || u.state.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n              State is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div> -->\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Zip Code*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n            [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.zipcode.invalid && (u.zipcode.touched || u.zipcode.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.zipcode.invalid &&\r\n      (u.zipcode.touched || u.zipcode.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.zipcode.errors?.required\">\r\n              Zipcode 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          <label class=\"note-label mb-2\">Country*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n            [ngClass]=\"{\r\n      'is-invalid':\r\n        u.country.invalid && (u.country.touched || u.country.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.country.invalid &&\r\n      (u.country.touched || u.country.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n              Country 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          <label class=\"note-label mb-2\">Phone Number*</label>\r\n\r\n          <input type=\"text\" autocomplete=\"new-phone-view\" name=\"random-phone-{{randomId}}\"\r\n            class=\"form-control block shadow-none\" id=\"inputPhone\" placeholder=\"Phone Number\" autocomplete=\"off\"\r\n            formControlName=\"phoneNumber\" maxlength=\"14\" (input)=\"phoneMask($event)\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.phoneNumber.invalid &&\r\n        (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.phoneNumber.invalid &&\r\n      (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n    \">\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\r\n\r\n\r\n\r\n\r\n\r\n\r\n      </div>\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n          <label class=\"note-label mb-2\">Years of experience*</label>\r\n\r\n          <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n            formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n            bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n            id=\"yearsOfExperince\"></ng-select>\r\n\r\n          <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n      (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n              Years Of Experience is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12\r\n         mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Job Title*</label>\r\n\r\n          <ng-select class=\"w-100\" class=\"custom-ng-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n            [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n            [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n            placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n          </ng-select>\r\n          <div *ngIf=\" u.userJobTitle.invalid &&\r\n      (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n              Job title 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 position-relative\">\r\n          <label class=\"note-label mb-2\">Profile image</label>\r\n\r\n          <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\" class=\"d-none\" />\r\n          <input [(ngModel)]=\"fileName\"  [ngModelOptions]=\"{ standalone: true }\" readonly type=\"text\" class=\"form-control pe-5\"\r\n            placeholder=\"Upload Profile Picture\" (click)=\"uploadFile.click()\" />\r\n          <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n        </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n        <div class=\"res d-flex justify-content-between\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Industry</label>\r\n\r\n            <ng-select class=\"w-100 custom-ng-select\" formControlName=\"industries\" [items]=\"industries\"\r\n              [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\"\r\n              [closeOnSelect]=\"false\" id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n\r\n              <!-- Dropdown option -->\r\n              <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                <span class=\"form-check\">\r\n                  <span class=\"form-check-input-wrapper\">\r\n                    <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                  </span>\r\n                  {{ item.industryName }}\r\n                </span>\r\n              </ng-template>\r\n\r\n              <!-- Selected label -->\r\n              <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n                <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                  <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n                </span>\r\n              </ng-template>\r\n              <div *ngIf=\"u.industries.invalid &&\r\n      (u.industries.touched || u.industries.dirty)\" class=\"invalid-feedback\">\r\n                <div class=\"ms-1\" *ngIf=\"u.industries.errors.required\">\r\n                  Industry is required\r\n                </div>\r\n              </div>\r\n            </ng-select>\r\n          </div>\r\n          <div class=\"form-group col-sm-12 col-md-4\">\r\n            <div class=\"image-wrapper\">\r\n              <!-- Spinner -->\r\n              <div *ngIf=\"isImageLoading\" class=\"spinner\"></div>\r\n              <!-- Image -->\r\n              <div *ngIf=\"previewUrl\">\r\n                <img [src]=\"cloudfrontUrl+previewUrl\" class=\"preview-image mt-2\" />\r\n              </div>\r\n\r\n            </div>\r\n            <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n              <div>{{ userError }}</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </form>\r\n\r\n\r\n    <!-- <div class=\"d-flex flex-wrap justify-content-between row\">\r\n      <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Resume Submission</h2>\r\n      <p class=\"note mb-2\">Submit your resume here</p>\r\n      <div class=\"col-sm-12 col-md-8\">\r\n        <div class=\"form-group mb-2 position-relative\">\r\n          <input #fileInput type=\"file\" accept=\"/*\" (change)=\"selectFile($event)\" class=\"d-none\" />\r\n          <input [(ngModel)]=\"resumeName\" readonly type=\"text\" class=\"form-control pe-5\"\r\n            placeholder=\"Upload Resume Here\" (click)=\"fileInput.click()\" />\r\n\r\n          <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon-resume\"\r\n            (click)=\"fileInput.click()\" />\r\n          <div *ngIf=\"isResumeRequired\" class=\"invalid-feedback d-block ms-1\">\r\n            Upload your resume\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"d-flex flex-wrap justify-content-between row\">\r\n      <div class=\"col-sm-12 col-md-8\" style=\"padding-left: 15px;\">\r\n        <div class=\"resume-wrapper\">\r\n          <div *ngIf=\"isresumeLoading\" class=\"spinner-resume\"></div>\r\n\r\n          <a *ngIf=\"list\" [href]=\"cloudfrontUrl+list.fileUrl\" class=\"mt-2\" target=\"_blank\">\r\n            <span>{{ list.fileName }}</span>\r\n          </a>\r\n        </div>\r\n        <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n          <div>{{ userError }}</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=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n\r\n      <button type=\"button\" class=\"primary ct-btn\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\"\r\n        (click)=\"saveFinal()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n<!-- \r\n<div class=\"producer-type-container\">\r\n  <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Type of jobs</h2>\r\n  <p class=\"notes\">What type of job are you interested in</p>\r\n  <div class=\"job-list\">\r\n    <div class=\"job-item\" *ngFor=\"let job of jobTypes\" [class.selected]=\"isSelected(job)\" (click)=\"toggleJob(job)\">\r\n      <span class=\"plus\">+</span> {{ job.text }}\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"actions\">\r\n  <button type=\"button\" class=\"secondary\" (click)=\"onBackClick()\">Back</button>\r\n  <div class=\"right-actions\">\r\n\r\n    <button type=\"button\" class=\"primary\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" (click)=\"saveFinal()\">\r\n      Continue\r\n    </button>\r\n  </div>\r\n</div> -->", styles: [".preview-image{width:250px;height:100px;object-fit:contain;margin-top:5px;border-radius:5px}.upload-icon-resume{position:absolute;right:25px;top:17px;width:18px;height:18px;cursor:pointer}.upload-icon{position:absolute;right:25px;top:45px;width:18px;height:18px;cursor:pointer}::ng-deep .ng-select .ng-select-container{width:101%;border-radius:7px}.form-control{font-size:14px;color:#6b7280}.role-selection-container{max-width:950px;margin:0 auto;min-height:300px;padding:2rem}.role-selection-container h2{margin-bottom:.5rem;font-size:1.5rem;font-weight:600}.role-selection-container .note{font-size:.875rem;color:#6b7280}.role-selection-container .note-label{font-size:.875rem;color:#6b7280;padding-left:5px}.role-selection-container .dropdown-wrapper{display:flex;gap:.5rem;margin-bottom:1rem}.role-selection-container .dropdown-wrapper select{flex:1;padding:.5rem;border:1px solid #d1d5db;border-radius:.375rem}.role-selection-container .dropdown-wrapper .add-btn{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border:none;border-radius:.375rem;cursor:pointer}.role-selection-container .dropdown-wrapper .add-btn:disabled{background-color:#d1d5db;cursor:not-allowed}.role-selection-container .selected-roles{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.role-selection-container .selected-roles .role-card{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-radius:.375rem;background-color:#fef3c7;color:#92400e}.role-selection-container .selected-roles .role-card .remove-btn{background:none;border:none;font-size:1.2rem;font-weight:700;cursor:pointer;color:#b91c1c}.role-selection-container .navigation-buttons{display:flex;justify-content:flex-end;gap:1rem;margin-top:70px;margin-bottom:50px}.role-selection-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.image-wrapper{position:relative;width:150px;height:150px}.resume-wrapper{position:relative;width:550px;height:1px}.spinner{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:163%;margin-top:-2px;margin-left:-7px;animation:spin 1s linear infinite}.spinner-resume{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:99%;margin-top:-51px;margin-left:-20px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.profile-field{margin-top:-10px}.profile-field input{line-height:30px}.producer-type-container{max-width:1000px;margin:0 auto;min-height:300px}.producer-type-container h2{font-size:1.5rem;font-weight:600;margin-bottom:.5rem}.producer-type-container p{font-size:.875rem;color:#6b7280;margin-bottom:1.5rem}.producer-type-container .job-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem}.producer-type-container .job-list .job-item{padding:.75rem 1rem;font-size:14px;border:1px solid #d1d5db;border-radius:.375rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s}.producer-type-container .job-list .job-item.selected{border-color:#4077ad;background-color:#eff6ff}.producer-type-container .job-list .job-item .plus{font-weight:700}.producer-type-container .navigation-buttons{display:flex;justify-content:flex-end;gap:.5rem;margin:50px 0}.producer-type-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer}.producer-type-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer}.producer-type-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.actions{display:flex;justify-content:space-between;margin:50px 0 27px}.right-actions{display:flex;gap:16px}button{height:44px;min-width:120px;border:none;font-size:14px;cursor:pointer;border-radius:5px}button.primary{background-color:#4077ad;color:#fff;border-radius:5px}button.secondary{background-color:#d5d6da;color:#525862;border-radius:5px}button:disabled{background-color:#9ca3af;cursor:not-allowed}::ng-deep .custom-ng-select.ng-select-multiple .ng-select-container{min-height:45px!important;height:auto!important;display:flex;align-items:center;overflow:visible!important}::ng-deep .custom-ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap!important;overflow:visible!important;padding-top:2px;padding-bottom:2px}::ng-deep .custom-ng-select.ng-select-multiple .ng-value{margin-bottom:4px}::ng-deep .custom-ng-select.ng-select-multiple .ng-arrow-wrapper{display:flex;align-items:center;height:100%}:host ::ng-deep .custom-ng-select .ng-select-container{padding:0!important;font-size:13px!important}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-top:3px;font-size:14px;color:#6b7280}::ng-deep .ng-select .ng-select-container{padding-top:3px;font-size:14px;color:#6b7280}@media screen and (max-width: 767px){.actions{margin:10px 0;flex-direction:column-reverse;gap:5px}.res{flex-direction:column-reverse}.spinner{width:24px;height:24px;top:-22%;left:180%}.spinner-resume{width:25px;height:25px;top:-22%;left:32%}.ct-btn{width:100%;margin-top:45px}}\n"], dependencies: [{ kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10.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: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i10.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i10.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10.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: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RoleSelectComponent, deps: [{ token: CredentialingStore }, { token: UserService }, { token: UserDocumentService }, { token: i2.Router }, { token: IndustryService }, { token: UserDetailService }, { token: FileService }, { token: ProvidersService }, { token: i6.TokenService }, { token: i8.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: RoleSelectComponent, isStandalone: false, selector: "app-role-select", inputs: { roleData: "roleData", cloudfrontUrl: "cloudfrontUrl", providerId: "providerId", providerName: "providerName" }, outputs: { backToParent: "backToParent" }, ngImport: i0, template: "<div class=\"role-selection-container\">\r\n  <h2>Basic Details</h2>\r\n  <p class=\"note\">We need basic information and a headshot for your profile</p>\r\n  <div class=\"profile-field\">\r\n    <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n      <div class=\"spinner-border\"></div>\r\n    </div>\r\n    <form *ngIf=\"isLoaded\" [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          <label class=\"note-label mb-2 mb-3\">First Name*</label>\r\n          <input [ngClass]=\"{ 'is-invalid':  u.firstName.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n            type=\"text\" class=\"form-control\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n          <div *ngIf=\" u?.firstName?.invalid &&\r\n      (u?.firstName?.touched || u?.firstName?.dirty)\" 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          <label class=\"note-label mb-2 mb-3\">Last Name*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\"\r\n            [ngClass]=\"{\r\n    'is-invalid':\r\n      u.lastName.invalid && (u.lastName.touched || u.lastName.dirty)\r\n  }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n    u.lastName.invalid &&\r\n    (u.lastName.touched || u.lastName.dirty)\r\n  \">\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\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Email*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.email.invalid && (u.email.touched || u.email.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.email.invalid &&\r\n      (u.email.touched || u.email.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.email.errors?.required\">\r\n              Email is required\r\n            </div>\r\n            <div class=\"ms-1\" *ngIf=\"u.email.errors?.email\">\r\n              Please enter a valid email address\r\n            </div>\r\n          </div>\r\n        </div>\r\n\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          <label class=\"note-label mb-2\">Home Address 1*</label>\r\n\r\n          <input type=\"text\" autocomplete=\"new-address-view\" name=\"random-address-{{randomId}}\" class=\"form-control\"\r\n            placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete\r\n            [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.address1.invalid && (u.address1.touched || u.address1.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.address1.invalid &&\r\n      (u.address1.touched || u.address1.dirty)\r\n    \">\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\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">City*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.city.invalid && (u.city.touched || u.city.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.city.invalid &&\r\n      (u.city.touched || u.city.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n              City is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">State*</label>\r\n\r\n          <input type=\"text\" autocomplete=\"new-state-view\" name=\"random-state-{{randomId}}\" class=\"form-control\"\r\n            id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.state.invalid && (u.state.touched || u.state.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.state.invalid &&\r\n      (u.state.touched || u.state.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n              State is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n\r\n\r\n\r\n\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\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=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.city.invalid && (u.city.touched || u.city.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.city.invalid &&\r\n      (u.city.touched || u.city.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n              City is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\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=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.state.invalid && (u.state.touched || u.state.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.state.invalid &&\r\n      (u.state.touched || u.state.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n              State is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div> -->\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Zip Code*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n            [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.zipcode.invalid && (u.zipcode.touched || u.zipcode.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.zipcode.invalid &&\r\n      (u.zipcode.touched || u.zipcode.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.zipcode.errors?.required\">\r\n              Zipcode 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          <label class=\"note-label mb-2\">Country*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n            [ngClass]=\"{\r\n      'is-invalid':\r\n        u.country.invalid && (u.country.touched || u.country.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.country.invalid &&\r\n      (u.country.touched || u.country.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n              Country 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          <label class=\"note-label mb-2\">Phone Number*</label>\r\n\r\n          <input type=\"text\" autocomplete=\"new-phone-view\" name=\"random-phone-{{randomId}}\"\r\n            class=\"form-control block shadow-none\" id=\"inputPhone\" placeholder=\"Phone Number\" autocomplete=\"off\"\r\n            formControlName=\"phoneNumber\" maxlength=\"14\" (input)=\"phoneMask($event)\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.phoneNumber.invalid &&\r\n        (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.phoneNumber.invalid &&\r\n      (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n    \">\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\r\n\r\n\r\n\r\n\r\n\r\n\r\n      </div>\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n          <label class=\"note-label mb-2\">Years of experience*</label>\r\n\r\n          <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n            formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n            bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n            id=\"yearsOfExperince\"></ng-select>\r\n\r\n          <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n      (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n              Years Of Experience is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12\r\n         mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Job Title*</label>\r\n\r\n          <ng-select class=\"w-100\" class=\"custom-ng-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n            [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n            [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n            placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n          </ng-select>\r\n          <div *ngIf=\" u.userJobTitle.invalid &&\r\n      (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n              Job title 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 position-relative\">\r\n          <label class=\"note-label mb-2\">Profile image</label>\r\n\r\n          <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\" class=\"d-none\" />\r\n          <input [(ngModel)]=\"fileName\"  [ngModelOptions]=\"{ standalone: true }\" readonly type=\"text\" class=\"form-control pe-5\"\r\n            placeholder=\"Upload Profile Picture\" (click)=\"uploadFile.click()\" />\r\n          <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n        </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n        <div class=\"res d-flex justify-content-between\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Industry</label>\r\n\r\n            <ng-select class=\"w-100 custom-ng-select\" formControlName=\"industries\" [items]=\"industries\"\r\n              [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\"\r\n              [closeOnSelect]=\"false\" id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n\r\n              <!-- Dropdown option -->\r\n              <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                <span class=\"form-check\">\r\n                  <span class=\"form-check-input-wrapper\">\r\n                    <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                  </span>\r\n                  {{ item.industryName }}\r\n                </span>\r\n              </ng-template>\r\n\r\n              <!-- Selected label -->\r\n              <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n                <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                  <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n                </span>\r\n              </ng-template>\r\n              <div *ngIf=\"u.industries.invalid &&\r\n      (u.industries.touched || u.industries.dirty)\" class=\"invalid-feedback\">\r\n                <div class=\"ms-1\" *ngIf=\"u.industries.errors.required\">\r\n                  Industry is required\r\n                </div>\r\n              </div>\r\n            </ng-select>\r\n          </div>\r\n          <div class=\"form-group col-sm-12 col-md-4\">\r\n            <div class=\"image-wrapper\">\r\n              <!-- Spinner -->\r\n              <div *ngIf=\"isImageLoading\" class=\"spinner\"></div>\r\n              <!-- Image -->\r\n              <div *ngIf=\"previewUrl\">\r\n                <img [src]=\"cloudfrontUrl+previewUrl\" class=\"preview-image mt-2\" />\r\n              </div>\r\n\r\n            </div>\r\n            <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n              <div>{{ userError }}</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </form>\r\n\r\n\r\n    <!-- <div class=\"d-flex flex-wrap justify-content-between row\">\r\n      <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Resume Submission</h2>\r\n      <p class=\"note mb-2\">Submit your resume here</p>\r\n      <div class=\"col-sm-12 col-md-8\">\r\n        <div class=\"form-group mb-2 position-relative\">\r\n          <input #fileInput type=\"file\" accept=\"/*\" (change)=\"selectFile($event)\" class=\"d-none\" />\r\n          <input [(ngModel)]=\"resumeName\" readonly type=\"text\" class=\"form-control pe-5\"\r\n            placeholder=\"Upload Resume Here\" (click)=\"fileInput.click()\" />\r\n\r\n          <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon-resume\"\r\n            (click)=\"fileInput.click()\" />\r\n          <div *ngIf=\"isResumeRequired\" class=\"invalid-feedback d-block ms-1\">\r\n            Upload your resume\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"d-flex flex-wrap justify-content-between row\">\r\n      <div class=\"col-sm-12 col-md-8\" style=\"padding-left: 15px;\">\r\n        <div class=\"resume-wrapper\">\r\n          <div *ngIf=\"isresumeLoading\" class=\"spinner-resume\"></div>\r\n\r\n          <a *ngIf=\"list\" [href]=\"cloudfrontUrl+list.fileUrl\" class=\"mt-2\" target=\"_blank\">\r\n            <span>{{ list.fileName }}</span>\r\n          </a>\r\n        </div>\r\n        <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n          <div>{{ userError }}</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=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n\r\n      <button type=\"button\" class=\"primary ct-btn\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\"\r\n        (click)=\"saveFinal()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n<!-- \r\n<div class=\"producer-type-container\">\r\n  <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Type of jobs</h2>\r\n  <p class=\"notes\">What type of job are you interested in</p>\r\n  <div class=\"job-list\">\r\n    <div class=\"job-item\" *ngFor=\"let job of jobTypes\" [class.selected]=\"isSelected(job)\" (click)=\"toggleJob(job)\">\r\n      <span class=\"plus\">+</span> {{ job.text }}\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"actions\">\r\n  <button type=\"button\" class=\"secondary\" (click)=\"onBackClick()\">Back</button>\r\n  <div class=\"right-actions\">\r\n\r\n    <button type=\"button\" class=\"primary\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" (click)=\"saveFinal()\">\r\n      Continue\r\n    </button>\r\n  </div>\r\n</div> -->", styles: [".preview-image{width:250px;height:100px;object-fit:contain;margin-top:5px;border-radius:5px}.upload-icon-resume{position:absolute;right:25px;top:17px;width:18px;height:18px;cursor:pointer}.upload-icon{position:absolute;right:25px;top:45px;width:18px;height:18px;cursor:pointer}::ng-deep .ng-select .ng-select-container{width:101%;border-radius:7px}.form-control{font-size:14px;color:#6b7280}.role-selection-container{max-width:950px;margin:0 auto;min-height:300px;padding:2rem}.role-selection-container h2{margin-bottom:.5rem;font-size:1.5rem;font-weight:600}.role-selection-container .note{font-size:.875rem;color:#6b7280}.role-selection-container .note-label{font-size:.875rem;color:#6b7280;padding-left:5px}.role-selection-container .dropdown-wrapper{display:flex;gap:.5rem;margin-bottom:1rem}.role-selection-container .dropdown-wrapper select{flex:1;padding:.5rem;border:1px solid #d1d5db;border-radius:.375rem}.role-selection-container .dropdown-wrapper .add-btn{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border:none;border-radius:.375rem;cursor:pointer}.role-selection-container .dropdown-wrapper .add-btn:disabled{background-color:#d1d5db;cursor:not-allowed}.role-selection-container .selected-roles{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.role-selection-container .selected-roles .role-card{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-radius:.375rem;background-color:#fef3c7;color:#92400e}.role-selection-container .selected-roles .role-card .remove-btn{background:none;border:none;font-size:1.2rem;font-weight:700;cursor:pointer;color:#b91c1c}.role-selection-container .navigation-buttons{display:flex;justify-content:flex-end;gap:1rem;margin-top:70px;margin-bottom:50px}.role-selection-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.image-wrapper{position:relative;width:150px;height:150px}.resume-wrapper{position:relative;width:550px;height:1px}.spinner{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:163%;margin-top:-2px;margin-left:-7px;animation:spin 1s linear infinite}.spinner-resume{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:99%;margin-top:-51px;margin-left:-20px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.profile-field{margin-top:-10px}.profile-field input{line-height:30px}.producer-type-container{max-width:1000px;margin:0 auto;min-height:300px}.producer-type-container h2{font-size:1.5rem;font-weight:600;margin-bottom:.5rem}.producer-type-container p{font-size:.875rem;color:#6b7280;margin-bottom:1.5rem}.producer-type-container .job-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem}.producer-type-container .job-list .job-item{padding:.75rem 1rem;font-size:14px;border:1px solid #d1d5db;border-radius:.375rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s}.producer-type-container .job-list .job-item.selected{border-color:#4077ad;background-color:#eff6ff}.producer-type-container .job-list .job-item .plus{font-weight:700}.producer-type-container .navigation-buttons{display:flex;justify-content:flex-end;gap:.5rem;margin:50px 0}.producer-type-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer}.producer-type-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer}.producer-type-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.actions{display:flex;justify-content:space-between;margin:50px 0 27px}.right-actions{display:flex;gap:16px}button{height:44px;min-width:120px;border:none;font-size:14px;cursor:pointer;border-radius:5px}button.primary{background-color:#4077ad;color:#fff;border-radius:5px}button.secondary{background-color:#d5d6da;color:#525862;border-radius:5px}button:disabled{background-color:#9ca3af;cursor:not-allowed}::ng-deep .custom-ng-select.ng-select-multiple .ng-select-container{min-height:45px!important;height:auto!important;display:flex;align-items:center;overflow:visible!important}::ng-deep .custom-ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap!important;overflow:visible!important;padding-top:2px;padding-bottom:2px}::ng-deep .custom-ng-select.ng-select-multiple .ng-value{margin-bottom:4px}::ng-deep .custom-ng-select.ng-select-multiple .ng-arrow-wrapper{display:flex;align-items:center;height:100%}:host ::ng-deep .custom-ng-select .ng-select-container{padding:0!important;font-size:13px!important}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-top:3px;font-size:14px;color:#6b7280}::ng-deep .ng-select .ng-select-container{padding-top:3px;font-size:14px;color:#6b7280}@media screen and (max-width: 767px){.actions{margin:10px 0;flex-direction:column-reverse;gap:5px}.res{flex-direction:column-reverse}.spinner{width:24px;height:24px;top:-22%;left:180%}.spinner-resume{width:25px;height:25px;top:-22%;left:32%}.ct-btn{width:100%;margin-top:45px}}\n"], dependencies: [{ kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RoleSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-role-select', standalone: false, template: "<div class=\"role-selection-container\">\r\n  <h2>Basic Details</h2>\r\n  <p class=\"note\">We need basic information and a headshot for your profile</p>\r\n  <div class=\"profile-field\">\r\n    <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n      <div class=\"spinner-border\"></div>\r\n    </div>\r\n    <form *ngIf=\"isLoaded\" [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          <label class=\"note-label mb-2 mb-3\">First Name*</label>\r\n          <input [ngClass]=\"{ 'is-invalid':  u.firstName.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n            type=\"text\" class=\"form-control\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n          <div *ngIf=\" u?.firstName?.invalid &&\r\n      (u?.firstName?.touched || u?.firstName?.dirty)\" 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          <label class=\"note-label mb-2 mb-3\">Last Name*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\"\r\n            [ngClass]=\"{\r\n    'is-invalid':\r\n      u.lastName.invalid && (u.lastName.touched || u.lastName.dirty)\r\n  }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n    u.lastName.invalid &&\r\n    (u.lastName.touched || u.lastName.dirty)\r\n  \">\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\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Email*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.email.invalid && (u.email.touched || u.email.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.email.invalid &&\r\n      (u.email.touched || u.email.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.email.errors?.required\">\r\n              Email is required\r\n            </div>\r\n            <div class=\"ms-1\" *ngIf=\"u.email.errors?.email\">\r\n              Please enter a valid email address\r\n            </div>\r\n          </div>\r\n        </div>\r\n\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          <label class=\"note-label mb-2\">Home Address 1*</label>\r\n\r\n          <input type=\"text\" autocomplete=\"new-address-view\" name=\"random-address-{{randomId}}\" class=\"form-control\"\r\n            placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete\r\n            [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.address1.invalid && (u.address1.touched || u.address1.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.address1.invalid &&\r\n      (u.address1.touched || u.address1.dirty)\r\n    \">\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\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">City*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.city.invalid && (u.city.touched || u.city.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.city.invalid &&\r\n      (u.city.touched || u.city.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n              City is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">State*</label>\r\n\r\n          <input type=\"text\" autocomplete=\"new-state-view\" name=\"random-state-{{randomId}}\" class=\"form-control\"\r\n            id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.state.invalid && (u.state.touched || u.state.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.state.invalid &&\r\n      (u.state.touched || u.state.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n              State is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n\r\n\r\n\r\n\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\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=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.city.invalid && (u.city.touched || u.city.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.city.invalid &&\r\n      (u.city.touched || u.city.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n              City is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\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=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.state.invalid && (u.state.touched || u.state.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.state.invalid &&\r\n      (u.state.touched || u.state.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n              State is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div> -->\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Zip Code*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n            [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.zipcode.invalid && (u.zipcode.touched || u.zipcode.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.zipcode.invalid &&\r\n      (u.zipcode.touched || u.zipcode.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.zipcode.errors?.required\">\r\n              Zipcode 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          <label class=\"note-label mb-2\">Country*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n            [ngClass]=\"{\r\n      'is-invalid':\r\n        u.country.invalid && (u.country.touched || u.country.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.country.invalid &&\r\n      (u.country.touched || u.country.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n              Country 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          <label class=\"note-label mb-2\">Phone Number*</label>\r\n\r\n          <input type=\"text\" autocomplete=\"new-phone-view\" name=\"random-phone-{{randomId}}\"\r\n            class=\"form-control block shadow-none\" id=\"inputPhone\" placeholder=\"Phone Number\" autocomplete=\"off\"\r\n            formControlName=\"phoneNumber\" maxlength=\"14\" (input)=\"phoneMask($event)\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.phoneNumber.invalid &&\r\n        (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.phoneNumber.invalid &&\r\n      (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n    \">\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\r\n\r\n\r\n\r\n\r\n\r\n\r\n      </div>\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n          <label class=\"note-label mb-2\">Years of experience*</label>\r\n\r\n          <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n            formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n            bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n            id=\"yearsOfExperince\"></ng-select>\r\n\r\n          <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n      (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n              Years Of Experience is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12\r\n         mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Job Title*</label>\r\n\r\n          <ng-select class=\"w-100\" class=\"custom-ng-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n            [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n            [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n            placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n          </ng-select>\r\n          <div *ngIf=\" u.userJobTitle.invalid &&\r\n      (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n              Job title 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 position-relative\">\r\n          <label class=\"note-label mb-2\">Profile image</label>\r\n\r\n          <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\" class=\"d-none\" />\r\n          <input [(ngModel)]=\"fileName\"  [ngModelOptions]=\"{ standalone: true }\" readonly type=\"text\" class=\"form-control pe-5\"\r\n            placeholder=\"Upload Profile Picture\" (click)=\"uploadFile.click()\" />\r\n          <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n        </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n        <div class=\"res d-flex justify-content-between\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Industry</label>\r\n\r\n            <ng-select class=\"w-100 custom-ng-select\" formControlName=\"industries\" [items]=\"industries\"\r\n              [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\"\r\n              [closeOnSelect]=\"false\" id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n\r\n              <!-- Dropdown option -->\r\n              <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                <span class=\"form-check\">\r\n                  <span class=\"form-check-input-wrapper\">\r\n                    <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                  </span>\r\n                  {{ item.industryName }}\r\n                </span>\r\n              </ng-template>\r\n\r\n              <!-- Selected label -->\r\n              <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n                <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                  <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n                </span>\r\n              </ng-template>\r\n              <div *ngIf=\"u.industries.invalid &&\r\n      (u.industries.touched || u.industries.dirty)\" class=\"invalid-feedback\">\r\n                <div class=\"ms-1\" *ngIf=\"u.industries.errors.required\">\r\n                  Industry is required\r\n                </div>\r\n              </div>\r\n            </ng-select>\r\n          </div>\r\n          <div class=\"form-group col-sm-12 col-md-4\">\r\n            <div class=\"image-wrapper\">\r\n              <!-- Spinner -->\r\n              <div *ngIf=\"isImageLoading\" class=\"spinner\"></div>\r\n              <!-- Image -->\r\n              <div *ngIf=\"previewUrl\">\r\n                <img [src]=\"cloudfrontUrl+previewUrl\" class=\"preview-image mt-2\" />\r\n              </div>\r\n\r\n            </div>\r\n            <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n              <div>{{ userError }}</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </form>\r\n\r\n\r\n    <!-- <div class=\"d-flex flex-wrap justify-content-between row\">\r\n      <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Resume Submission</h2>\r\n      <p class=\"note mb-2\">Submit your resume here</p>\r\n      <div class=\"col-sm-12 col-md-8\">\r\n        <div class=\"form-group mb-2 position-relative\">\r\n          <input #fileInput type=\"file\" accept=\"/*\" (change)=\"selectFile($event)\" class=\"d-none\" />\r\n          <input [(ngModel)]=\"resumeName\" readonly type=\"text\" class=\"form-control pe-5\"\r\n            placeholder=\"Upload Resume Here\" (click)=\"fileInput.click()\" />\r\n\r\n          <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon-resume\"\r\n            (click)=\"fileInput.click()\" />\r\n          <div *ngIf=\"isResumeRequired\" class=\"invalid-feedback d-block ms-1\">\r\n            Upload your resume\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"d-flex flex-wrap justify-content-between row\">\r\n      <div class=\"col-sm-12 col-md-8\" style=\"padding-left: 15px;\">\r\n        <div class=\"resume-wrapper\">\r\n          <div *ngIf=\"isresumeLoading\" class=\"spinner-resume\"></div>\r\n\r\n          <a *ngIf=\"list\" [href]=\"cloudfrontUrl+list.fileUrl\" class=\"mt-2\" target=\"_blank\">\r\n            <span>{{ list.fileName }}</span>\r\n          </a>\r\n        </div>\r\n        <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n          <div>{{ userError }}</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=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n\r\n      <button type=\"button\" class=\"primary ct-btn\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\"\r\n        (click)=\"saveFinal()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n<!-- \r\n<div class=\"producer-type-container\">\r\n  <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Type of jobs</h2>\r\n  <p class=\"notes\">What type of job are you interested in</p>\r\n  <div class=\"job-list\">\r\n    <div class=\"job-item\" *ngFor=\"let job of jobTypes\" [class.selected]=\"isSelected(job)\" (click)=\"toggleJob(job)\">\r\n      <span class=\"plus\">+</span> {{ job.text }}\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"actions\">\r\n  <button type=\"button\" class=\"secondary\" (click)=\"onBackClick()\">Back</button>\r\n  <div class=\"right-actions\">\r\n\r\n    <button type=\"button\" class=\"primary\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" (click)=\"saveFinal()\">\r\n      Continue\r\n    </button>\r\n  </div>\r\n</div> -->", styles: [".preview-image{width:250px;height:100px;object-fit:contain;margin-top:5px;border-radius:5px}.upload-icon-resume{position:absolute;right:25px;top:17px;width:18px;height:18px;cursor:pointer}.upload-icon{position:absolute;right:25px;top:45px;width:18px;height:18px;cursor:pointer}::ng-deep .ng-select .ng-select-container{width:101%;border-radius:7px}.form-control{font-size:14px;color:#6b7280}.role-selection-container{max-width:950px;margin:0 auto;min-height:300px;padding:2rem}.role-selection-container h2{margin-bottom:.5rem;font-size:1.5rem;font-weight:600}.role-selection-container .note{font-size:.875rem;color:#6b7280}.role-selection-container .note-label{font-size:.875rem;color:#6b7280;padding-left:5px}.role-selection-container .dropdown-wrapper{display:flex;gap:.5rem;margin-bottom:1rem}.role-selection-container .dropdown-wrapper select{flex:1;padding:.5rem;border:1px solid #d1d5db;border-radius:.375rem}.role-selection-container .dropdown-wrapper .add-btn{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border:none;border-radius:.375rem;cursor:pointer}.role-selection-container .dropdown-wrapper .add-btn:disabled{background-color:#d1d5db;cursor:not-allowed}.role-selection-container .selected-roles{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.role-selection-container .selected-roles .role-card{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-radius:.375rem;background-color:#fef3c7;color:#92400e}.role-selection-container .selected-roles .role-card .remove-btn{background:none;border:none;font-size:1.2rem;font-weight:700;cursor:pointer;color:#b91c1c}.role-selection-container .navigation-buttons{display:flex;justify-content:flex-end;gap:1rem;margin-top:70px;margin-bottom:50px}.role-selection-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.image-wrapper{position:relative;width:150px;height:150px}.resume-wrapper{position:relative;width:550px;height:1px}.spinner{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:163%;margin-top:-2px;margin-left:-7px;animation:spin 1s linear infinite}.spinner-resume{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:99%;margin-top:-51px;margin-left:-20px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.profile-field{margin-top:-10px}.profile-field input{line-height:30px}.producer-type-container{max-width:1000px;margin:0 auto;min-height:300px}.producer-type-container h2{font-size:1.5rem;font-weight:600;margin-bottom:.5rem}.producer-type-container p{font-size:.875rem;color:#6b7280;margin-bottom:1.5rem}.producer-type-container .job-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem}.producer-type-container .job-list .job-item{padding:.75rem 1rem;font-size:14px;border:1px solid #d1d5db;border-radius:.375rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s}.producer-type-container .job-list .job-item.selected{border-color:#4077ad;background-color:#eff6ff}.producer-type-container .job-list .job-item .plus{font-weight:700}.producer-type-container .navigation-buttons{display:flex;justify-content:flex-end;gap:.5rem;margin:50px 0}.producer-type-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer}.producer-type-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer}.producer-type-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.actions{display:flex;justify-content:space-between;margin:50px 0 27px}.right-actions{display:flex;gap:16px}button{height:44px;min-width:120px;border:none;font-size:14px;cursor:pointer;border-radius:5px}button.primary{background-color:#4077ad;color:#fff;border-radius:5px}button.secondary{background-color:#d5d6da;color:#525862;border-radius:5px}button:disabled{background-color:#9ca3af;cursor:not-allowed}::ng-deep .custom-ng-select.ng-select-multiple .ng-select-container{min-height:45px!important;height:auto!important;display:flex;align-items:center;overflow:visible!important}::ng-deep .custom-ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap!important;overflow:visible!important;padding-top:2px;padding-bottom:2px}::ng-deep .custom-ng-select.ng-select-multiple .ng-value{margin-bottom:4px}::ng-deep .custom-ng-select.ng-select-multiple .ng-arrow-wrapper{display:flex;align-items:center;height:100%}:host ::ng-deep .custom-ng-select .ng-select-container{padding:0!important;font-size:13px!important}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-top:3px;font-size:14px;color:#6b7280}::ng-deep .ng-select .ng-select-container{padding-top:3px;font-size:14px;color:#6b7280}@media screen and (max-width: 767px){.actions{margin:10px 0;flex-direction:column-reverse;gap:5px}.res{flex-direction:column-reverse}.spinner{width:24px;height:24px;top:-22%;left:180%}.spinner-resume{width:25px;height:25px;top:-22%;left:32%}.ct-btn{width:100%;margin-top:45px}}\n"] }]
-        }], ctorParameters: () => [{ type: CredentialingStore }, { type: UserService }, { type: UserDocumentService }, { type: i2.Router }, { type: IndustryService }, { type: UserDetailService }, { type: FileService }, { type: ProvidersService }, { type: i6.TokenService }, { type: i10.FormBuilder }], propDecorators: { backToParent: [{
+        }], ctorParameters: () => [{ type: CredentialingStore }, { type: UserService }, { type: UserDocumentService }, { type: i2.Router }, { type: IndustryService }, { type: UserDetailService }, { type: FileService }, { type: ProvidersService }, { type: i6.TokenService }, { type: i8.FormBuilder }], propDecorators: { backToParent: [{
                 type: Output
             }], roleData: [{
                 type: Input
@@ -28520,7 +28520,7 @@ class Step2CoverageComponent {
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Step2CoverageComponent, deps: [{ token: CredentialingStore }, { token: UsMapLatestService }, { token: PostalCodeServices }, { token: UserCoverageAreaService }, { token: AlertService }, { token: i6.TokenService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: Step2CoverageComponent, isStandalone: false, selector: "app-coverage", inputs: { providerId: "providerId", providerName: "providerName", states: "states" }, ngImport: i0, template: "<div class=\"coverage-container\">\r\n  <div class=\"first-section\">\r\n    <h4 class=\"head\">Coverage Area</h4>\r\n    <!-- <p>Let's start with the basics. Where are you located?</p>\r\n    <span>We use this to match you with jobs nearby</span>\r\n    <div class=\"location-inputs\">\r\n      <input type=\"text\" placeholder=\"City\" [(ngModel)]=\"city\">\r\n      <input type=\"text\" placeholder=\"State\" [(ngModel)]=\"state\">\r\n    </div> -->\r\n  </div>\r\n\r\n  <div class=\"coverage-options\">\r\n    <div class=\"d-flex justify-content-between\">\r\n      <h6 class=\"text-secondary view-card fw-semibold\" style=\"font-size: 14px;\"> Where can you complete assignments?\r\n      </h6>\r\n      <div class=\"d-flex gap-1\">\r\n        <label class=\"form-check-label\">Show Map</label>\r\n        <div class=\"form-check form-switch\">\r\n          <input class=\"form-check-input\" type=\"checkbox\" (change)=\"toggleMap()\" role=\"switch\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <hr class=\"m-0 border-3\">\r\n\r\n    <div class=\"pb-1 d-flex align-items-center mt-2\">\r\n      <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length > 0\"></span>\r\n      <span class=\"view-card text-secondary ms-3\" style=\"font-size: 14px;\">\r\n        My Current Coverage Area\r\n      </span>\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"cursor: pointer;\" (click)=\"skip()\">\r\n      <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length == 0\"></span>\r\n      <span class=\"view-card text-secondary ms-3\" style=\"font-size: 14px;\">\r\n        Not Applicable\r\n      </span>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"state-selector\">\r\n    <div class=\"row pb-2\">\r\n      <div class=\"col-md-12\">\r\n        <div class=\"position-relative\">\r\n          <!-- ng-select -->\r\n          <ng-select [clearable]=\"true\" [multiple]=\"true\" (change)=\"setSelectedStates($event)\" [items]=\"states\"\r\n            [(ngModel)]=\"selectedStates\" bindLabel=\"stateName\" bindValue=\"stateCode\" [closeOnSelect]=\"false\"\r\n            placeholder=\"Select State\" id=\"reqStates\" [loading]=\"isStatesLoading\">\r\n            <!-- Option Template -->\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n              <span class=\"form-check\">\r\n                <span class=\"form-check-input-wrapper\">\r\n                  <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                </span>\r\n                {{ item.stateName }}\r\n              </span>\r\n            </ng-template>\r\n\r\n            <!-- Label Template -->\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <ng-container *ngIf=\"!isStatesLoading\">\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-container>\r\n            </ng-template>\r\n          </ng-select>\r\n        </div>\r\n\r\n\r\n      </div>\r\n    </div>\r\n    <div class=\"border-0 empty-message mt-4\" *ngIf=\"!isStatesLoading && coverages.length == 0\">\r\n      <div class=\"text-center text-secondary\" style=\"font-size: 14px;\">No States Selected yet</div>\r\n    </div>\r\n    <div class=\"coverage-options\">\r\n      <div class=\"col-md-10 col-12 py-2 map-wrapper\" [class.open]=\"showMap\">\r\n        <us-map [filteredLocations]=\"filteredLocations\"></us-map>\r\n      </div>\r\n    </div>\r\n    <div class=\"col-12 mt-4\" *ngIf=\"!isStatesLoading\">\r\n      <div *ngIf=\"coverages.length > 0\">\r\n        <div class=\"col-8 p-0 ms-2\">\r\n          <h4 class=\"head\">Coverage Area\r\n            Counties</h4>\r\n        </div>\r\n      </div>\r\n      <div class=\"row pt-2 pb-2\">\r\n        <div class=\"col-12 \">\r\n          <div class=\"row\">\r\n            <div class=\"col-12\" *ngFor=\"let coverage of coverages; let coverageIndex = index\">\r\n              <div class=\"row m-0\" style=\"background: #dedede;\">\r\n                <div class=\"col-10\" style=\"margin-left: 0px;padding-left: 5px !important;\">\r\n                  <div class=\"form-group my-2\">\r\n                    <div class=\"custom-control custom-checkbox\">\r\n                      <label style=\"padding-top: 2px;\">Select All</label>\r\n                      <input type=\"checkbox\" style=\"width: 16px;border: 1px solid #ddd;\"\r\n                        id=\"stateCheckbox{{ coverage.state + coverageIndex }}\" [(ngModel)]=\"coverage.checked\"\r\n                        [indeterminate]=\"coverage.indeterminate\" (change)=\"onSelectAllChanged(coverage)\" />\r\n                      <label for=\"stateCheckbox{{ coverage?.state + coverageIndex }}\"\r\n                        class=\"custom-control font-weight-bold\"></label>\r\n                      <label class=\"position-absolute\" style=\"margin-left: 88px;\"\r\n                        [attr.for]=\"'stateCheckbox' + coverage.state + coverageIndex\">\r\n                        {{ coverage.state | stateName }}\r\n                      </label>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-2\" style=\"display: flex;\r\n    justify-content: flex-end;\r\n    align-items: center;\r\n    height: 21px;\r\n    \">\r\n                  <img class=\"mt-2 mt-sm-2 pt-2 pointer\" [src]=\"coverage?.isShow\r\n    ? '/assets/images/icons/arrow-up.svg'\r\n    : '/assets/images/icons/arrow-down.svg'\" alt=\"toggle\" (click)=\"coverage.isShow = !coverage?.isShow\" />\r\n                </div>\r\n                <span></span>\r\n              </div>\r\n              <hr class=\"mt-0\" />\r\n              <ng-container *ngIf=\"coverage?.isShow\">\r\n                <div class=\"form-group mb-1\">\r\n                  <input type=\"text\" class=\"font-default form-check-inline form-control h-37\"\r\n                    placeholder=\"Select Counties In {{ coverage.state | stateName }}\" [(ngModel)]=\"coverage.query\" />\r\n                </div>\r\n                 <div class=\"row m-lg-2\" style=\"height: 160px;overflow-y: auto;padding-left: 1.6rem;\">\r\n                  <div class=\"list-group-item col-3 res-coverage col-sm-6 p-1\"\r\n                    *ngFor=\"let county of coverage.counties | SearchBy: 'countyName':coverage.query; let countyIndex = index\">\r\n                    <div class=\"form-check\">\r\n                      <input class=\"form-check-input\" type=\"checkbox\"\r\n                        [id]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\"\r\n                        [(ngModel)]=\"county.checked\"\r\n                        (change)=\"onChangedCounty($event, coverage.state, county.countyName)\" />\r\n                      <label class=\"form-check-label\"\r\n                        [for]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\">\r\n                        {{ county.countyName }}\r\n                      </label>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"previousStep()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"skip()\">\r\n        Skip\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"coverageSave\" [ng2-loading]=\"coverageSave\"\r\n        (click)=\"saveCoverage()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n\r\n</div>", styles: [".coverage-container{max-width:1000px;margin:0 auto;padding:2rem;min-height:300px}.coverage-container .form-check-label{color:#69707d}.coverage-container .head{margin-bottom:.5rem;font-size:20px;font-weight:600;color:#69707d}.coverage-container p{font-size:16px;font-weight:500;color:#6b7280;margin-bottom:7px;margin-top:25px}.coverage-container .first-section span{color:#6b7280}.coverage-container .location-inputs{display:flex;gap:1rem;margin-bottom:5rem;margin-top:20px}.coverage-container .location-inputs input{flex:1;padding:5px 15px;border:1px solid #d1d5db;border-radius:.375rem;height:45px}.coverage-container .state-selector .empty-message{width:100%;padding:1rem;background-color:#f3f4f6;text-align:center;color:#6b7280;border-radius:.375rem}.coverage-container .state-selector .custom-control{font-size:15px;display:flex;align-items:center;gap:7px;color:#69707d;padding-left:13px}.coverage-container .state-selector .custom-control-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .state-selector .form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .coverage-options{margin-bottom:1rem}.coverage-container .coverage-options label{font-size:.875rem;display:flex;align-items:center;gap:.25rem;width:110px}.coverage-container .coverage-options label .show-map{margin-left:auto}.coverage-container .coverage-options .icon-black{filter:brightness(0) saturate(100%) invert(10%) sepia(47%) saturate(3454%) hue-rotate(184deg) brightness(98%) contrast(101%)}.coverage-container .coverage-options .icon-gray{filter:brightness(0) saturate(100%) invert(100%) sepia(4%) saturate(29%) hue-rotate(68deg) brightness(112%) contrast(80%)}.coverage-container .coverage-options .form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .coverage-options .square-box{width:12px;height:12px;border:2px solid;display:inline-block}.coverage-container .coverage-options .square-box.black{background:#002b49;border:0;width:15px;height:14px}.coverage-container .coverage-options .square-box.gray{border:1px solid rgba(128,128,128,.231372549)!important;border:0;width:15px;height:15px}.coverage-container .coverage-options .map-wrapper{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s ease,opacity .3s ease}.coverage-container .coverage-options .map-wrapper>*{overflow:hidden}.coverage-container .coverage-options .map-wrapper.open{grid-template-rows:1fr;opacity:1}.coverage-container .navigation-buttons{display:flex;justify-content:flex-end;gap:1rem;margin-top:70px;margin-bottom:50px}.coverage-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer;min-width:18%;min-height:50px}.coverage-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer;min-width:18%;min-height:50px}.coverage-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}::ng-deep .ng-select .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:10px}.custom-checkbox1{display:inline-block;width:15px;height:15px;border:1px solid #ccc;margin-right:8px;vertical-align:middle;position:relative;cursor:pointer;border-radius:3px;background-color:#fff}.custom-checkbox2{display:inline-block;width:15px;height:15px;border:1px solid #ccc;vertical-align:middle;position:relative;cursor:pointer;border-radius:3px;background-color:#fff}.custom-checkbox2.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox2.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.custom-checkbox1.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox1.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.select-loader{position:absolute;top:-28px;left:0;font-size:12px;color:#4077ad;display:flex;align-items:center;gap:6px}::ng-deep .form-check{display:block;min-height:1.5rem;margin-bottom:.125rem}.right-actions{display:flex;gap:16px}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border:none;font-size:14px;cursor:pointer;border-radius:5px}button.primary{background-color:#4077ad;color:#fff;border-radius:5px}button.secondary{background-color:#d5d6da;color:#525862;border-radius:5px}button:disabled{background-color:#9ca3af;cursor:not-allowed}.icon-color{cursor:pointer;background:transparent;width:20px;height:20px;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}.custom-control label{padding-top:8px}@media screen and (max-width: 767px){.actions{gap:5px;display:flex;flex-direction:column-reverse}.actions button{min-width:90px}.right-actions{gap:5px;justify-content:space-between;display:flex;flex-direction:column-reverse}.custom-control label{padding-top:0}.res-coverage{width:50%}.pointer{display:none}}\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: i10.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: i10.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UsMapComponent, selector: "us-map", inputs: ["selectedStates", "allowedStates", "isReadOnly", "filteredLocations"], outputs: ["onMapClick"] }, { 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: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: SearchPipe, name: "SearchBy" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: Step2CoverageComponent, isStandalone: false, selector: "app-coverage", inputs: { providerId: "providerId", providerName: "providerName", states: "states" }, ngImport: i0, template: "<div class=\"coverage-container\">\r\n  <div class=\"first-section\">\r\n    <h4 class=\"head\">Coverage Area</h4>\r\n    <!-- <p>Let's start with the basics. Where are you located?</p>\r\n    <span>We use this to match you with jobs nearby</span>\r\n    <div class=\"location-inputs\">\r\n      <input type=\"text\" placeholder=\"City\" [(ngModel)]=\"city\">\r\n      <input type=\"text\" placeholder=\"State\" [(ngModel)]=\"state\">\r\n    </div> -->\r\n  </div>\r\n\r\n  <div class=\"coverage-options\">\r\n    <div class=\"d-flex justify-content-between\">\r\n      <h6 class=\"text-secondary view-card fw-semibold\" style=\"font-size: 14px;\"> Where can you complete assignments?\r\n      </h6>\r\n      <div class=\"d-flex gap-1\">\r\n        <label class=\"form-check-label\">Show Map</label>\r\n        <div class=\"form-check form-switch\">\r\n          <input class=\"form-check-input\" type=\"checkbox\" (change)=\"toggleMap()\" role=\"switch\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <hr class=\"m-0 border-3\">\r\n\r\n    <div class=\"pb-1 d-flex align-items-center mt-2\">\r\n      <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length > 0\"></span>\r\n      <span class=\"view-card text-secondary ms-3\" style=\"font-size: 14px;\">\r\n        My Current Coverage Area\r\n      </span>\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"cursor: pointer;\" (click)=\"skip()\">\r\n      <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length == 0\"></span>\r\n      <span class=\"view-card text-secondary ms-3\" style=\"font-size: 14px;\">\r\n        Not Applicable\r\n      </span>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"state-selector\">\r\n    <div class=\"row pb-2\">\r\n      <div class=\"col-md-12\">\r\n        <div class=\"position-relative\">\r\n          <!-- ng-select -->\r\n          <ng-select [clearable]=\"true\" [multiple]=\"true\" (change)=\"setSelectedStates($event)\" [items]=\"states\"\r\n            [(ngModel)]=\"selectedStates\" bindLabel=\"stateName\" bindValue=\"stateCode\" [closeOnSelect]=\"false\"\r\n            placeholder=\"Select State\" id=\"reqStates\" [loading]=\"isStatesLoading\">\r\n            <!-- Option Template -->\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n              <span class=\"form-check\">\r\n                <span class=\"form-check-input-wrapper\">\r\n                  <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                </span>\r\n                {{ item.stateName }}\r\n              </span>\r\n            </ng-template>\r\n\r\n            <!-- Label Template -->\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <ng-container *ngIf=\"!isStatesLoading\">\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-container>\r\n            </ng-template>\r\n          </ng-select>\r\n        </div>\r\n\r\n\r\n      </div>\r\n    </div>\r\n    <div class=\"border-0 empty-message mt-4\" *ngIf=\"!isStatesLoading && coverages.length == 0\">\r\n      <div class=\"text-center text-secondary\" style=\"font-size: 14px;\">No States Selected yet</div>\r\n    </div>\r\n    <div class=\"coverage-options\">\r\n      <div class=\"col-md-10 col-12 py-2 map-wrapper\" [class.open]=\"showMap\">\r\n        <us-map [filteredLocations]=\"filteredLocations\"></us-map>\r\n      </div>\r\n    </div>\r\n    <div class=\"col-12 mt-4\" *ngIf=\"!isStatesLoading\">\r\n      <div *ngIf=\"coverages.length > 0\">\r\n        <div class=\"col-8 p-0 ms-2\">\r\n          <h4 class=\"head\">Coverage Area\r\n            Counties</h4>\r\n        </div>\r\n      </div>\r\n      <div class=\"row pt-2 pb-2\">\r\n        <div class=\"col-12 \">\r\n          <div class=\"row\">\r\n            <div class=\"col-12\" *ngFor=\"let coverage of coverages; let coverageIndex = index\">\r\n              <div class=\"row m-0\" style=\"background: #dedede;\">\r\n                <div class=\"col-10\" style=\"margin-left: 0px;padding-left: 5px !important;\">\r\n                  <div class=\"form-group my-2\">\r\n                    <div class=\"custom-control custom-checkbox\">\r\n                      <label style=\"padding-top: 2px;\">Select All</label>\r\n                      <input type=\"checkbox\" style=\"width: 16px;border: 1px solid #ddd;\"\r\n                        id=\"stateCheckbox{{ coverage.state + coverageIndex }}\" [(ngModel)]=\"coverage.checked\"\r\n                        [indeterminate]=\"coverage.indeterminate\" (change)=\"onSelectAllChanged(coverage)\" />\r\n                      <label for=\"stateCheckbox{{ coverage?.state + coverageIndex }}\"\r\n                        class=\"custom-control font-weight-bold\"></label>\r\n                      <label class=\"position-absolute\" style=\"margin-left: 88px;\"\r\n                        [attr.for]=\"'stateCheckbox' + coverage.state + coverageIndex\">\r\n                        {{ coverage.state | stateName }}\r\n                      </label>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-2\" style=\"display: flex;\r\n    justify-content: flex-end;\r\n    align-items: center;\r\n    height: 21px;\r\n    \">\r\n                  <img class=\"mt-2 mt-sm-2 pt-2 pointer\" [src]=\"coverage?.isShow\r\n    ? '/assets/images/icons/arrow-up.svg'\r\n    : '/assets/images/icons/arrow-down.svg'\" alt=\"toggle\" (click)=\"coverage.isShow = !coverage?.isShow\" />\r\n                </div>\r\n                <span></span>\r\n              </div>\r\n              <hr class=\"mt-0\" />\r\n              <ng-container *ngIf=\"coverage?.isShow\">\r\n                <div class=\"form-group mb-1\">\r\n                  <input type=\"text\" class=\"font-default form-check-inline form-control h-37\"\r\n                    placeholder=\"Select Counties In {{ coverage.state | stateName }}\" [(ngModel)]=\"coverage.query\" />\r\n                </div>\r\n                 <div class=\"row m-lg-2\" style=\"height: 160px;overflow-y: auto;padding-left: 1.6rem;\">\r\n                  <div class=\"list-group-item col-3 res-coverage col-sm-6 p-1\"\r\n                    *ngFor=\"let county of coverage.counties | SearchBy: 'countyName':coverage.query; let countyIndex = index\">\r\n                    <div class=\"form-check\">\r\n                      <input class=\"form-check-input\" type=\"checkbox\"\r\n                        [id]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\"\r\n                        [(ngModel)]=\"county.checked\"\r\n                        (change)=\"onChangedCounty($event, coverage.state, county.countyName)\" />\r\n                      <label class=\"form-check-label\"\r\n                        [for]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\">\r\n                        {{ county.countyName }}\r\n                      </label>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"previousStep()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"skip()\">\r\n        Skip\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"coverageSave\" [ng2-loading]=\"coverageSave\"\r\n        (click)=\"saveCoverage()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n\r\n</div>", styles: [".coverage-container{max-width:1000px;margin:0 auto;padding:2rem;min-height:300px}.coverage-container .form-check-label{color:#69707d}.coverage-container .head{margin-bottom:.5rem;font-size:20px;font-weight:600;color:#69707d}.coverage-container p{font-size:16px;font-weight:500;color:#6b7280;margin-bottom:7px;margin-top:25px}.coverage-container .first-section span{color:#6b7280}.coverage-container .location-inputs{display:flex;gap:1rem;margin-bottom:5rem;margin-top:20px}.coverage-container .location-inputs input{flex:1;padding:5px 15px;border:1px solid #d1d5db;border-radius:.375rem;height:45px}.coverage-container .state-selector .empty-message{width:100%;padding:1rem;background-color:#f3f4f6;text-align:center;color:#6b7280;border-radius:.375rem}.coverage-container .state-selector .custom-control{font-size:15px;display:flex;align-items:center;gap:7px;color:#69707d;padding-left:13px}.coverage-container .state-selector .custom-control-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .state-selector .form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .coverage-options{margin-bottom:1rem}.coverage-container .coverage-options label{font-size:.875rem;display:flex;align-items:center;gap:.25rem;width:110px}.coverage-container .coverage-options label .show-map{margin-left:auto}.coverage-container .coverage-options .icon-black{filter:brightness(0) saturate(100%) invert(10%) sepia(47%) saturate(3454%) hue-rotate(184deg) brightness(98%) contrast(101%)}.coverage-container .coverage-options .icon-gray{filter:brightness(0) saturate(100%) invert(100%) sepia(4%) saturate(29%) hue-rotate(68deg) brightness(112%) contrast(80%)}.coverage-container .coverage-options .form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .coverage-options .square-box{width:12px;height:12px;border:2px solid;display:inline-block}.coverage-container .coverage-options .square-box.black{background:#002b49;border:0;width:15px;height:14px}.coverage-container .coverage-options .square-box.gray{border:1px solid rgba(128,128,128,.231372549)!important;border:0;width:15px;height:15px}.coverage-container .coverage-options .map-wrapper{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s ease,opacity .3s ease}.coverage-container .coverage-options .map-wrapper>*{overflow:hidden}.coverage-container .coverage-options .map-wrapper.open{grid-template-rows:1fr;opacity:1}.coverage-container .navigation-buttons{display:flex;justify-content:flex-end;gap:1rem;margin-top:70px;margin-bottom:50px}.coverage-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer;min-width:18%;min-height:50px}.coverage-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer;min-width:18%;min-height:50px}.coverage-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}::ng-deep .ng-select .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:10px}.custom-checkbox1{display:inline-block;width:15px;height:15px;border:1px solid #ccc;margin-right:8px;vertical-align:middle;position:relative;cursor:pointer;border-radius:3px;background-color:#fff}.custom-checkbox2{display:inline-block;width:15px;height:15px;border:1px solid #ccc;vertical-align:middle;position:relative;cursor:pointer;border-radius:3px;background-color:#fff}.custom-checkbox2.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox2.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.custom-checkbox1.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox1.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.select-loader{position:absolute;top:-28px;left:0;font-size:12px;color:#4077ad;display:flex;align-items:center;gap:6px}::ng-deep .form-check{display:block;min-height:1.5rem;margin-bottom:.125rem}.right-actions{display:flex;gap:16px}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border:none;font-size:14px;cursor:pointer;border-radius:5px}button.primary{background-color:#4077ad;color:#fff;border-radius:5px}button.secondary{background-color:#d5d6da;color:#525862;border-radius:5px}button:disabled{background-color:#9ca3af;cursor:not-allowed}.icon-color{cursor:pointer;background:transparent;width:20px;height:20px;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}.custom-control label{padding-top:8px}@media screen and (max-width: 767px){.actions{gap:5px;display:flex;flex-direction:column-reverse}.actions button{min-width:90px}.right-actions{gap:5px;justify-content:space-between;display:flex;flex-direction:column-reverse}.custom-control label{padding-top:0}.res-coverage{width:50%}.pointer{display:none}}\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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UsMapComponent, selector: "us-map", inputs: ["selectedStates", "allowedStates", "isReadOnly", "filteredLocations"], outputs: ["onMapClick"] }, { 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: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: SearchPipe, name: "SearchBy" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Step2CoverageComponent, decorators: [{
             type: Component,
@@ -28980,13 +28980,13 @@ class WorkexperienceComponent {
         this.workexperienceForm.reset();
         this.fileName = '';
     }
-    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: i6.TokenService }, { token: i10.FormBuilder }, { token: FileService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    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=\"education-container\">\r\n    <h3>Add Work Experience</h3>\r\n    <p class=\"hint\">\r\n      Add your prior and current work history below\r\n    </p>\r\n    <form [formGroup]=\"workexperienceForm\">\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">Company Name</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\r\n        <div class=\"field\">\r\n          <div class=\"head\">Job Title</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 class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">Country</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              &nbsp;{{ item.country }}\r\n            </ng-template>\r\n          </ng-select>\r\n        </div>\r\n        <div class=\"field\">\r\n          <div class=\"head\">State</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              &nbsp;{{ item.stateName }}\r\n            </ng-template>\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <span class=\"ng-value-label\">\r\n                {{ item.stateName }}\r\n              </span>\r\n              <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n              </span>\r\n            </ng-template>\r\n          </ng-select>\r\n        </div>\r\n      </div>\r\n      <div class=\"row form-row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">City</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</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</div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"To date\" [maxDate]=\"maxDate\" 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\r\n      <div class=\"row\">\r\n        <div class=\"field full-width\">\r\n          <div class=\"head\">Job Description or duties</div>\r\n          <textarea placeholder=\"Description\" formControlName=\"jobDescription\">\r\n      </textarea>\r\n        </div>\r\n      </div>\r\n    </form>\r\n    <div class=\"row\">\r\n     <div class=\"upload-wrapper\">\r\n        <p *ngIf=\"!fileName\" class=\"upload-title\">Upload</p>\r\n        <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n        <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Add documents below</p>\r\n        <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Documents\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n          {{ fileName }}\r\n          <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n        </p>\r\n      </div>\r\n      <div class=\"actions\">\r\n        <!-- Left button: Back or Cancel -->\r\n        <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n          {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n        </button>\r\n\r\n        <div class=\"right-actions\">\r\n          <!-- Skip button only for first entry (not editing or adding) -->\r\n          <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n            class=\"secondary\" (click)=\"nextStep()\">\r\n            Skip\r\n          </button>\r\n\r\n          <!-- Primary button -->\r\n          <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n            (click)=\"saveFile()\">\r\n            {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\">\r\n    <h3>Work Experiences Preview</h3>\r\n  </div>\r\n  <div class=\"accordion\">\r\n\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n      class=\"accordion-item border-0\">\r\n\r\n      <!-- HEADER (preview) -->\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button\" \r\n        type=\"button\" \r\n        data-bs-toggle=\"collapse\"\r\n        [attr.data-bs-target]=\"'#edu_' + i\"\r\n        aria-expanded=\"true\">\r\n\r\n          <!-- LEFT : TITLE -->\r\n          <span class=\"accordion-title\">\r\n            {{ exp.companyName }}\r\n          </span>\r\n\r\n          <!-- RIGHT : EDIT ICON -->\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n          </span>\r\n\r\n        </button>\r\n      </h2>\r\n\r\n\r\n      <!-- BODY -->\r\n     <div [id]=\"'edu_' + i\" \r\n     class=\"accordion-collapse collapse show\"\r\n     style=\"margin-bottom: 20px;\">\r\n        <div class=\"accordion-body\">\r\n\r\n          <!-- GRID DATA (2 or 3 columns) -->\r\n          <div class=\"detail-grid\">\r\n            <div>\r\n              <strong>Company Name</strong><br />\r\n              <span class=\"job-title\">{{ exp.companyName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Job Title</strong><br />\r\n              <span class=\"job-title\">{{ exp.jobTitle }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>From Date</strong><br />\r\n              <span class=\"job-title\">{{ exp.fromDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>To Date</strong><br />\r\n              <span class=\"job-title\">{{ exp.toDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n\r\n            <div>\r\n              <strong>Country</strong><br />\r\n              <span class=\"job-title\">{{ exp.country }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>State</strong><br />\r\n              <span class=\"job-title\">{{ exp.state | stateName }}</span>\r\n            </div>\r\n\r\n            <div>\r\n              <strong>City</strong><br />\r\n              <span class=\"job-title\">{{ exp.city }}</span>\r\n            </div>\r\n\r\n\r\n            <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n              <strong>Document</strong><br />\r\n              <a [href]=\"cloudfrontUrl+exp.fileUrl\" target=\"_blank\">\r\n                <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n          <div class=\"full-width mt-3\">\r\n            <strong>Job Description</strong><br />\r\n            <span class=\"job-title\"> {{ exp.jobDescription }}</span>\r\n          </div>\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()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\" style=\"background-color: #1f4d5f;\">\r\n        Add More Experiences\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:18px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input,select,textarea{padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:50px 0 20px}.action{display:flex;justify-content:space-between;margin:50px 100px 20px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;margin-bottom:5px;font-weight:500}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;margin-top:25px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@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}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!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:#1e2541!important}.icon-color{cursor:pointer;width:20px;height:20px;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}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:380px}.accordion{margin:20px 100px}.add-btn{width:200px}@media screen and (max-width: 767px){.preview-header{margin-left:0}.accordion{margin:20px 0}.actions,.action{flex-direction:column-reverse;gap:5px}.action{margin:50px 0 20px}.right-actions{justify-content:space-between;gap:5px;display:flex;flex-direction:column-reverse}.form-row{gap:14px;flex-direction:column}.pointer{display:none}.add-btn{width:unset}}.remove-file{margin-left:10px;cursor:pointer;color:red;font-weight:700}.file-icon{width:23px;height:23px}\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: i10.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10.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: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10.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" }] });
+    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: i6.TokenService }, { token: i8.FormBuilder }, { token: FileService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
+    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=\"education-container\">\r\n    <h3>Add Work Experience</h3>\r\n    <p class=\"hint\">\r\n      Add your prior and current work history below\r\n    </p>\r\n    <form [formGroup]=\"workexperienceForm\">\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">Company Name</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\r\n        <div class=\"field\">\r\n          <div class=\"head\">Job Title</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 class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">Country</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              &nbsp;{{ item.country }}\r\n            </ng-template>\r\n          </ng-select>\r\n        </div>\r\n        <div class=\"field\">\r\n          <div class=\"head\">State</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              &nbsp;{{ item.stateName }}\r\n            </ng-template>\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <span class=\"ng-value-label\">\r\n                {{ item.stateName }}\r\n              </span>\r\n              <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n              </span>\r\n            </ng-template>\r\n          </ng-select>\r\n        </div>\r\n      </div>\r\n      <div class=\"row form-row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">City</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</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</div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"To date\" [maxDate]=\"maxDate\" 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\r\n      <div class=\"row\">\r\n        <div class=\"field full-width\">\r\n          <div class=\"head\">Job Description or duties</div>\r\n          <textarea placeholder=\"Description\" formControlName=\"jobDescription\">\r\n      </textarea>\r\n        </div>\r\n      </div>\r\n    </form>\r\n    <div class=\"row\">\r\n     <div class=\"upload-wrapper\">\r\n        <p *ngIf=\"!fileName\" class=\"upload-title\">Upload</p>\r\n        <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n        <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Add documents below</p>\r\n        <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Documents\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n          {{ fileName }}\r\n          <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n        </p>\r\n      </div>\r\n      <div class=\"actions\">\r\n        <!-- Left button: Back or Cancel -->\r\n        <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n          {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n        </button>\r\n\r\n        <div class=\"right-actions\">\r\n          <!-- Skip button only for first entry (not editing or adding) -->\r\n          <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n            class=\"secondary\" (click)=\"nextStep()\">\r\n            Skip\r\n          </button>\r\n\r\n          <!-- Primary button -->\r\n          <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n            (click)=\"saveFile()\">\r\n            {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\">\r\n    <h3>Work Experiences Preview</h3>\r\n  </div>\r\n  <div class=\"accordion\">\r\n\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n      class=\"accordion-item border-0\">\r\n\r\n      <!-- HEADER (preview) -->\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button\" \r\n        type=\"button\" \r\n        data-bs-toggle=\"collapse\"\r\n        [attr.data-bs-target]=\"'#edu_' + i\"\r\n        aria-expanded=\"true\">\r\n\r\n          <!-- LEFT : TITLE -->\r\n          <span class=\"accordion-title\">\r\n            {{ exp.companyName }}\r\n          </span>\r\n\r\n          <!-- RIGHT : EDIT ICON -->\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n          </span>\r\n\r\n        </button>\r\n      </h2>\r\n\r\n\r\n      <!-- BODY -->\r\n     <div [id]=\"'edu_' + i\" \r\n     class=\"accordion-collapse collapse show\"\r\n     style=\"margin-bottom: 20px;\">\r\n        <div class=\"accordion-body\">\r\n\r\n          <!-- GRID DATA (2 or 3 columns) -->\r\n          <div class=\"detail-grid\">\r\n            <div>\r\n              <strong>Company Name</strong><br />\r\n              <span class=\"job-title\">{{ exp.companyName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Job Title</strong><br />\r\n              <span class=\"job-title\">{{ exp.jobTitle }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>From Date</strong><br />\r\n              <span class=\"job-title\">{{ exp.fromDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>To Date</strong><br />\r\n              <span class=\"job-title\">{{ exp.toDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n\r\n            <div>\r\n              <strong>Country</strong><br />\r\n              <span class=\"job-title\">{{ exp.country }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>State</strong><br />\r\n              <span class=\"job-title\">{{ exp.state | stateName }}</span>\r\n            </div>\r\n\r\n            <div>\r\n              <strong>City</strong><br />\r\n              <span class=\"job-title\">{{ exp.city }}</span>\r\n            </div>\r\n\r\n\r\n            <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n              <strong>Document</strong><br />\r\n              <a [href]=\"cloudfrontUrl+exp.fileUrl\" target=\"_blank\">\r\n                <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n          <div class=\"full-width mt-3\">\r\n            <strong>Job Description</strong><br />\r\n            <span class=\"job-title\"> {{ exp.jobDescription }}</span>\r\n          </div>\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()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\" style=\"background-color: #1f4d5f;\">\r\n        Add More Experiences\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:18px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input,select,textarea{padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:50px 0 20px}.action{display:flex;justify-content:space-between;margin:50px 100px 20px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;margin-bottom:5px;font-weight:500}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;margin-top:25px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@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}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!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:#1e2541!important}.icon-color{cursor:pointer;width:20px;height:20px;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}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:380px}.accordion{margin:20px 100px}.add-btn{width:200px}@media screen and (max-width: 767px){.preview-header{margin-left:0}.accordion{margin:20px 0}.actions,.action{flex-direction:column-reverse;gap:5px}.action{margin:50px 0 20px}.right-actions{justify-content:space-between;gap:5px;display:flex;flex-direction:column-reverse}.form-row{gap:14px;flex-direction:column}.pointer{display:none}.add-btn{width:unset}}.remove-file{margin-left:10px;cursor:pointer;color:red;font-weight:700}.file-icon{width:23px;height:23px}\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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WorkexperienceComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-workexperience', standalone: false, template: "<div *ngIf=\"!showpreview()\">\r\n  <div class=\"education-container\">\r\n    <h3>Add Work Experience</h3>\r\n    <p class=\"hint\">\r\n      Add your prior and current work history below\r\n    </p>\r\n    <form [formGroup]=\"workexperienceForm\">\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">Company Name</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\r\n        <div class=\"field\">\r\n          <div class=\"head\">Job Title</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 class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">Country</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              &nbsp;{{ item.country }}\r\n            </ng-template>\r\n          </ng-select>\r\n        </div>\r\n        <div class=\"field\">\r\n          <div class=\"head\">State</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              &nbsp;{{ item.stateName }}\r\n            </ng-template>\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <span class=\"ng-value-label\">\r\n                {{ item.stateName }}\r\n              </span>\r\n              <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n              </span>\r\n            </ng-template>\r\n          </ng-select>\r\n        </div>\r\n      </div>\r\n      <div class=\"row form-row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">City</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</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</div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"To date\" [maxDate]=\"maxDate\" 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\r\n      <div class=\"row\">\r\n        <div class=\"field full-width\">\r\n          <div class=\"head\">Job Description or duties</div>\r\n          <textarea placeholder=\"Description\" formControlName=\"jobDescription\">\r\n      </textarea>\r\n        </div>\r\n      </div>\r\n    </form>\r\n    <div class=\"row\">\r\n     <div class=\"upload-wrapper\">\r\n        <p *ngIf=\"!fileName\" class=\"upload-title\">Upload</p>\r\n        <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n        <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Add documents below</p>\r\n        <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Documents\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n          {{ fileName }}\r\n          <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n        </p>\r\n      </div>\r\n      <div class=\"actions\">\r\n        <!-- Left button: Back or Cancel -->\r\n        <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n          {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n        </button>\r\n\r\n        <div class=\"right-actions\">\r\n          <!-- Skip button only for first entry (not editing or adding) -->\r\n          <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n            class=\"secondary\" (click)=\"nextStep()\">\r\n            Skip\r\n          </button>\r\n\r\n          <!-- Primary button -->\r\n          <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n            (click)=\"saveFile()\">\r\n            {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\">\r\n    <h3>Work Experiences Preview</h3>\r\n  </div>\r\n  <div class=\"accordion\">\r\n\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n      class=\"accordion-item border-0\">\r\n\r\n      <!-- HEADER (preview) -->\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button\" \r\n        type=\"button\" \r\n        data-bs-toggle=\"collapse\"\r\n        [attr.data-bs-target]=\"'#edu_' + i\"\r\n        aria-expanded=\"true\">\r\n\r\n          <!-- LEFT : TITLE -->\r\n          <span class=\"accordion-title\">\r\n            {{ exp.companyName }}\r\n          </span>\r\n\r\n          <!-- RIGHT : EDIT ICON -->\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n          </span>\r\n\r\n        </button>\r\n      </h2>\r\n\r\n\r\n      <!-- BODY -->\r\n     <div [id]=\"'edu_' + i\" \r\n     class=\"accordion-collapse collapse show\"\r\n     style=\"margin-bottom: 20px;\">\r\n        <div class=\"accordion-body\">\r\n\r\n          <!-- GRID DATA (2 or 3 columns) -->\r\n          <div class=\"detail-grid\">\r\n            <div>\r\n              <strong>Company Name</strong><br />\r\n              <span class=\"job-title\">{{ exp.companyName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Job Title</strong><br />\r\n              <span class=\"job-title\">{{ exp.jobTitle }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>From Date</strong><br />\r\n              <span class=\"job-title\">{{ exp.fromDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>To Date</strong><br />\r\n              <span class=\"job-title\">{{ exp.toDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n\r\n            <div>\r\n              <strong>Country</strong><br />\r\n              <span class=\"job-title\">{{ exp.country }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>State</strong><br />\r\n              <span class=\"job-title\">{{ exp.state | stateName }}</span>\r\n            </div>\r\n\r\n            <div>\r\n              <strong>City</strong><br />\r\n              <span class=\"job-title\">{{ exp.city }}</span>\r\n            </div>\r\n\r\n\r\n            <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n              <strong>Document</strong><br />\r\n              <a [href]=\"cloudfrontUrl+exp.fileUrl\" target=\"_blank\">\r\n                <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n          <div class=\"full-width mt-3\">\r\n            <strong>Job Description</strong><br />\r\n            <span class=\"job-title\"> {{ exp.jobDescription }}</span>\r\n          </div>\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()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\" style=\"background-color: #1f4d5f;\">\r\n        Add More Experiences\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:18px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input,select,textarea{padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:50px 0 20px}.action{display:flex;justify-content:space-between;margin:50px 100px 20px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;margin-bottom:5px;font-weight:500}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;margin-top:25px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@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}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!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:#1e2541!important}.icon-color{cursor:pointer;width:20px;height:20px;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}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:380px}.accordion{margin:20px 100px}.add-btn{width:200px}@media screen and (max-width: 767px){.preview-header{margin-left:0}.accordion{margin:20px 0}.actions,.action{flex-direction:column-reverse;gap:5px}.action{margin:50px 0 20px}.right-actions{justify-content:space-between;gap:5px;display:flex;flex-direction:column-reverse}.form-row{gap:14px;flex-direction:column}.pointer{display:none}.add-btn{width:unset}}.remove-file{margin-left:10px;cursor:pointer;color:red;font-weight:700}.file-icon{width:23px;height:23px}\n"] }]
-        }], ctorParameters: () => [{ type: UserExperienceService }, { type: UserService }, { type: WorkExperienceStore }, { type: CredentialingStore }, { type: CountryServices }, { type: PostalCodeServices }, { type: i6.TokenService }, { type: i10.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
+        }], ctorParameters: () => [{ type: UserExperienceService }, { type: UserService }, { type: WorkExperienceStore }, { type: CredentialingStore }, { type: CountryServices }, { type: PostalCodeServices }, { type: i6.TokenService }, { type: i8.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
                 type: Input
             }], providerName: [{
                 type: Input
@@ -29142,7 +29142,7 @@ class FirstComponent {
     resumeName;
     fileDataUser;
     model = { fileId: null, fileUrl: null, fileName: null };
-    nextStep = new EventEmitter(); // New Output for Tab Switching
+    nextStep = new EventEmitter();
     constructor(store, tokenService, resumedetail, fileService) {
         this.store = store;
         this.tokenService = tokenService;
@@ -29171,24 +29171,16 @@ class FirstComponent {
             setTimeout(() => {
                 this.store.addSuccess(true);
                 this.saveAWSFile();
-                // this.uploadresume()
             }, 1500);
         }
     }
     openFile(fileInput, event) {
         event.stopPropagation();
-        if (!this.resumeName) {
-            fileInput.click();
-        }
-        // this.saveAWSFile();
+        fileInput.click();
     }
     handleAutoNavigation() {
         this.store.nextStep();
     }
-    // uploadresume() {
-    //   this.store.setProfile(this.sample)
-    //   this.handleAutoNavigation();
-    // }
     manual() {
         this.store.addSuccess(false);
         this.store.nextStep();
@@ -29238,6 +29230,9 @@ class FirstComponent {
             next: (res) => {
                 if (res?.failed) {
                     this.isUploading = false;
+                    this.resumeName = null; // ✅ RESET
+                    this.fileData = null; // ✅ RESET
+                    this.model = { fileId: null, fileUrl: null, fileName: null }; // ✅ RESET
                     return;
                 }
                 this.handleAutoNavigation();
@@ -29249,8 +29244,9 @@ class FirstComponent {
             },
             error: (err) => {
                 console.error('Upload failed:', err);
-                // 🔥 IMPORTANT: handle 504 or any error
                 this.isUploading = false;
+                this.resumeName = null; // ✅ RESET
+                this.fileData = null; // ✅ RESET
             }
         });
     }
@@ -29258,11 +29254,11 @@ class FirstComponent {
         this.backToParent.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FirstComponent, deps: [{ token: CredentialingStore }, { token: i6.TokenService }, { token: ResumeDetailService }, { token: FileService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: FirstComponent, isStandalone: false, selector: "app-first", outputs: { backToParent: "backToParent", nextStep: "nextStep" }, ngImport: i0, template: "<div class=\"wrapper position-relative\">\r\n\r\n  <h2 class=\"title\">Upload your resume *</h2>\r\n    <p class=\"subtitle\">Upload your resume and we\u2019ll fill the rest.</p>\r\n\r\n\r\n  <!-- Upload Resume Option -->\r\n<div class=\"option-card\">\r\n\r\n  <!-- Hidden file input -->\r\n  <input\r\n    #fileInput\r\n    type=\"file\"\r\n    accept=\".pdf,.doc,.docx\"\r\n    (change)=\"onFileSelected($event)\"\r\n    hidden\r\n  />\r\n\r\n  <!-- Radio -->\r\n\r\n  <div class=\"card-content\">\r\n    <!-- Only these trigger file picker -->\r\n    <div class=\"left\" (click)=\"openFile(fileInput, $event)\">\r\n      <img src=\"assets/images/icons/upload-resume.png\" style=\"width: 55px;\" alt=\"Upload\" />\r\n    </div>\r\n\r\n    <div class=\"right\">\r\n      <h3 (click)=\"openFile(fileInput, $event)\">Upload my resume</h3>\r\n      <p>We\u2019ll extract job titles, experience, and skills.</p>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n  <!-- Manual Option -->\r\n  <label class=\"option-card\" (click)=\"manual()\">\r\n\r\n    <div class=\"card-content\" (click)=\"manual()\">\r\n      <div class=\"left\">\r\n        <img src=\"assets/images/icons/technical-support.svg\" alt=\"Manual\" />\r\n      </div>\r\n\r\n      <div class=\"right\" (click)=\"manual()\">\r\n        <h3>Enter manually</h3>\r\n        <p>You will enter all information manually.</p>\r\n      </div>\r\n    </div>\r\n  </label>\r\n\r\n  <!-- \u2705 Overlay INSIDE wrapper -->\r\n  <div *ngIf=\"isUploading\" class=\"overlay\">\r\n    <div class=\"spinner-container\">\r\n      <div class=\"spinner\"></div>\r\n      <p>Processing your resume...</p>\r\n    </div>\r\n  </div>\r\n<div>\r\n  <button class=\"back-btn\" (click)=\"onBackClick()\">Back</button>\r\n</div>\r\n</div>\r\n\r\n", styles: [".wrapper{max-width:600px;margin:50px auto;font-family:Arial,sans-serif}.subtitle{color:#6b7280;font-size:14px;margin-bottom:10px}.title{font-size:24px;font-weight:600;margin-bottom:30px}.option-card{display:block;border:1px solid #d1d5db;border-radius:10px;padding:20px;margin-bottom:20px;cursor:pointer;transition:all .2s ease;position:relative}.option-card input[type=radio]{position:absolute;left:15px;top:43px}.card-content{display:flex;gap:20px;margin-left:30px;align-items:flex-start}.left img{width:50px;opacity:.7}.right h3{margin:0;font-size:16px;font-weight:600}.right p{margin:5px 0 10px;color:#6b7280;font-size:14px}.file-display input{font-size:13px;cursor:pointer}.error-text{color:#dc2626;font-size:12px;margin-top:5px}.option-card:hover{border-color:#6366f1;background:#f9fafb}.option-card:has(input:checked){border:2px solid #6366f1;background:#eef2ff}.wrapper{position:relative}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#fffc;z-index:100;display:flex;justify-content:center;align-items:center;pointer-events:all}.spinner{width:40px;height:40px;margin-left:60px;border:4px solid #ddd;border-top:4px solid #1165B8;border-radius:50%;animation:spin 1s linear infinite}.spinner-container{text-align:center}@keyframes spin{to{transform:rotate(360deg)}}.back-btn{font-size:20px;font-weight:500;width:100px;background:#d3dae6;color:#6c757dc7;border-radius:5px;border:none;padding:8px;cursor:pointer}@media screen and (max-width: 767px){.wrapper{position:relative;width:90%}.back-btn{width:100%}}\n"], dependencies: [{ kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: FirstComponent, isStandalone: false, selector: "app-first", outputs: { backToParent: "backToParent", nextStep: "nextStep" }, ngImport: i0, template: "<div class=\"wrapper position-relative\">\r\n\r\n  <h2 class=\"title\">Upload your resume *</h2>\r\n    <p class=\"subtitle\">Upload your resume and we\u2019ll fill the rest.</p>\r\n\r\n\r\n<div class=\"option-card\" (click)=\"openFile(fileInput, $event)\">\r\n\r\n  <input\r\n    #fileInput\r\n    type=\"file\"\r\n    accept=\".pdf,.doc,.docx\"\r\n    (change)=\"onFileSelected($event)\"\r\n    hidden\r\n  />\r\n\r\n\r\n  <div class=\"card-content\">\r\n    <div class=\"left\">\r\n      <img src=\"assets/images/icons/upload-resume.png\" style=\"width: 55px;\" alt=\"Upload\" />\r\n    </div>\r\n\r\n    <div class=\"right\">\r\n      <h3>Upload my resume</h3>\r\n      <p>We\u2019ll extract job titles, experience, and skills.</p>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n  <label class=\"option-card\" (click)=\"manual()\">\r\n\r\n    <div class=\"card-content\" (click)=\"manual()\">\r\n      <div class=\"left\">\r\n        <img src=\"assets/images/icons/technical-support.svg\" alt=\"Manual\" />\r\n      </div>\r\n\r\n      <div class=\"right\" (click)=\"manual()\">\r\n        <h3>Enter manually</h3>\r\n        <p>You will enter all information manually.</p>\r\n      </div>\r\n    </div>\r\n  </label>\r\n\r\n  <div *ngIf=\"isUploading\" class=\"overlay\">\r\n    <div class=\"spinner-container\">\r\n      <div class=\"spinner\"></div>\r\n      <p>Processing your resume...</p>\r\n    </div>\r\n  </div>\r\n<div>\r\n  <button class=\"back-btn\" (click)=\"onBackClick()\">Back</button>\r\n</div>\r\n</div>\r\n\r\n", styles: [".wrapper{max-width:600px;margin:50px auto;font-family:Arial,sans-serif}.subtitle{color:#6b7280;font-size:14px;margin-bottom:10px}.title{font-size:24px;font-weight:600;margin-bottom:30px}.option-card{display:block;border:1px solid #d1d5db;border-radius:10px;padding:20px;margin-bottom:20px;cursor:pointer;transition:all .2s ease;position:relative}.option-card input[type=radio]{position:absolute;left:15px;top:43px}.card-content{display:flex;gap:20px;margin-left:30px;align-items:flex-start}.left img{width:50px;opacity:.7}.right h3{margin:0;font-size:16px;font-weight:600}.right p{margin:5px 0 10px;color:#6b7280;font-size:14px}.file-display input{font-size:13px;cursor:pointer}.error-text{color:#dc2626;font-size:12px;margin-top:5px}.option-card:hover{border-color:#6366f1;background:#f9fafb}.option-card:has(input:checked){border:2px solid #6366f1;background:#eef2ff}.wrapper{position:relative}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#fffc;z-index:100;display:flex;justify-content:center;align-items:center;pointer-events:all}.spinner{width:40px;height:40px;margin-left:60px;border:4px solid #ddd;border-top:4px solid #1165B8;border-radius:50%;animation:spin 1s linear infinite}.spinner-container{text-align:center}@keyframes spin{to{transform:rotate(360deg)}}.back-btn{font-size:20px;font-weight:500;width:100px;background:#d3dae6;color:#6c757dc7;border-radius:5px;border:none;padding:8px;cursor:pointer}@media screen and (max-width: 767px){.wrapper{position:relative;width:90%}.back-btn{width:100%}}\n"], dependencies: [{ kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FirstComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-first', standalone: false, template: "<div class=\"wrapper position-relative\">\r\n\r\n  <h2 class=\"title\">Upload your resume *</h2>\r\n    <p class=\"subtitle\">Upload your resume and we\u2019ll fill the rest.</p>\r\n\r\n\r\n  <!-- Upload Resume Option -->\r\n<div class=\"option-card\">\r\n\r\n  <!-- Hidden file input -->\r\n  <input\r\n    #fileInput\r\n    type=\"file\"\r\n    accept=\".pdf,.doc,.docx\"\r\n    (change)=\"onFileSelected($event)\"\r\n    hidden\r\n  />\r\n\r\n  <!-- Radio -->\r\n\r\n  <div class=\"card-content\">\r\n    <!-- Only these trigger file picker -->\r\n    <div class=\"left\" (click)=\"openFile(fileInput, $event)\">\r\n      <img src=\"assets/images/icons/upload-resume.png\" style=\"width: 55px;\" alt=\"Upload\" />\r\n    </div>\r\n\r\n    <div class=\"right\">\r\n      <h3 (click)=\"openFile(fileInput, $event)\">Upload my resume</h3>\r\n      <p>We\u2019ll extract job titles, experience, and skills.</p>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n  <!-- Manual Option -->\r\n  <label class=\"option-card\" (click)=\"manual()\">\r\n\r\n    <div class=\"card-content\" (click)=\"manual()\">\r\n      <div class=\"left\">\r\n        <img src=\"assets/images/icons/technical-support.svg\" alt=\"Manual\" />\r\n      </div>\r\n\r\n      <div class=\"right\" (click)=\"manual()\">\r\n        <h3>Enter manually</h3>\r\n        <p>You will enter all information manually.</p>\r\n      </div>\r\n    </div>\r\n  </label>\r\n\r\n  <!-- \u2705 Overlay INSIDE wrapper -->\r\n  <div *ngIf=\"isUploading\" class=\"overlay\">\r\n    <div class=\"spinner-container\">\r\n      <div class=\"spinner\"></div>\r\n      <p>Processing your resume...</p>\r\n    </div>\r\n  </div>\r\n<div>\r\n  <button class=\"back-btn\" (click)=\"onBackClick()\">Back</button>\r\n</div>\r\n</div>\r\n\r\n", styles: [".wrapper{max-width:600px;margin:50px auto;font-family:Arial,sans-serif}.subtitle{color:#6b7280;font-size:14px;margin-bottom:10px}.title{font-size:24px;font-weight:600;margin-bottom:30px}.option-card{display:block;border:1px solid #d1d5db;border-radius:10px;padding:20px;margin-bottom:20px;cursor:pointer;transition:all .2s ease;position:relative}.option-card input[type=radio]{position:absolute;left:15px;top:43px}.card-content{display:flex;gap:20px;margin-left:30px;align-items:flex-start}.left img{width:50px;opacity:.7}.right h3{margin:0;font-size:16px;font-weight:600}.right p{margin:5px 0 10px;color:#6b7280;font-size:14px}.file-display input{font-size:13px;cursor:pointer}.error-text{color:#dc2626;font-size:12px;margin-top:5px}.option-card:hover{border-color:#6366f1;background:#f9fafb}.option-card:has(input:checked){border:2px solid #6366f1;background:#eef2ff}.wrapper{position:relative}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#fffc;z-index:100;display:flex;justify-content:center;align-items:center;pointer-events:all}.spinner{width:40px;height:40px;margin-left:60px;border:4px solid #ddd;border-top:4px solid #1165B8;border-radius:50%;animation:spin 1s linear infinite}.spinner-container{text-align:center}@keyframes spin{to{transform:rotate(360deg)}}.back-btn{font-size:20px;font-weight:500;width:100px;background:#d3dae6;color:#6c757dc7;border-radius:5px;border:none;padding:8px;cursor:pointer}@media screen and (max-width: 767px){.wrapper{position:relative;width:90%}.back-btn{width:100%}}\n"] }]
+            args: [{ selector: 'app-first', standalone: false, template: "<div class=\"wrapper position-relative\">\r\n\r\n  <h2 class=\"title\">Upload your resume *</h2>\r\n    <p class=\"subtitle\">Upload your resume and we\u2019ll fill the rest.</p>\r\n\r\n\r\n<div class=\"option-card\" (click)=\"openFile(fileInput, $event)\">\r\n\r\n  <input\r\n    #fileInput\r\n    type=\"file\"\r\n    accept=\".pdf,.doc,.docx\"\r\n    (change)=\"onFileSelected($event)\"\r\n    hidden\r\n  />\r\n\r\n\r\n  <div class=\"card-content\">\r\n    <div class=\"left\">\r\n      <img src=\"assets/images/icons/upload-resume.png\" style=\"width: 55px;\" alt=\"Upload\" />\r\n    </div>\r\n\r\n    <div class=\"right\">\r\n      <h3>Upload my resume</h3>\r\n      <p>We\u2019ll extract job titles, experience, and skills.</p>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n  <label class=\"option-card\" (click)=\"manual()\">\r\n\r\n    <div class=\"card-content\" (click)=\"manual()\">\r\n      <div class=\"left\">\r\n        <img src=\"assets/images/icons/technical-support.svg\" alt=\"Manual\" />\r\n      </div>\r\n\r\n      <div class=\"right\" (click)=\"manual()\">\r\n        <h3>Enter manually</h3>\r\n        <p>You will enter all information manually.</p>\r\n      </div>\r\n    </div>\r\n  </label>\r\n\r\n  <div *ngIf=\"isUploading\" class=\"overlay\">\r\n    <div class=\"spinner-container\">\r\n      <div class=\"spinner\"></div>\r\n      <p>Processing your resume...</p>\r\n    </div>\r\n  </div>\r\n<div>\r\n  <button class=\"back-btn\" (click)=\"onBackClick()\">Back</button>\r\n</div>\r\n</div>\r\n\r\n", styles: [".wrapper{max-width:600px;margin:50px auto;font-family:Arial,sans-serif}.subtitle{color:#6b7280;font-size:14px;margin-bottom:10px}.title{font-size:24px;font-weight:600;margin-bottom:30px}.option-card{display:block;border:1px solid #d1d5db;border-radius:10px;padding:20px;margin-bottom:20px;cursor:pointer;transition:all .2s ease;position:relative}.option-card input[type=radio]{position:absolute;left:15px;top:43px}.card-content{display:flex;gap:20px;margin-left:30px;align-items:flex-start}.left img{width:50px;opacity:.7}.right h3{margin:0;font-size:16px;font-weight:600}.right p{margin:5px 0 10px;color:#6b7280;font-size:14px}.file-display input{font-size:13px;cursor:pointer}.error-text{color:#dc2626;font-size:12px;margin-top:5px}.option-card:hover{border-color:#6366f1;background:#f9fafb}.option-card:has(input:checked){border:2px solid #6366f1;background:#eef2ff}.wrapper{position:relative}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#fffc;z-index:100;display:flex;justify-content:center;align-items:center;pointer-events:all}.spinner{width:40px;height:40px;margin-left:60px;border:4px solid #ddd;border-top:4px solid #1165B8;border-radius:50%;animation:spin 1s linear infinite}.spinner-container{text-align:center}@keyframes spin{to{transform:rotate(360deg)}}.back-btn{font-size:20px;font-weight:500;width:100px;background:#d3dae6;color:#6c757dc7;border-radius:5px;border:none;padding:8px;cursor:pointer}@media screen and (max-width: 767px){.wrapper{position:relative;width:90%}.back-btn{width:100%}}\n"] }]
         }], ctorParameters: () => [{ type: CredentialingStore }, { type: i6.TokenService }, { type: ResumeDetailService }, { type: FileService }], propDecorators: { backToParent: [{
                 type: Output
             }], nextStep: [{
@@ -29271,6 +29267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 
 class PreviewComponent {
     store;
+    fileService;
     userSkillSetService;
     userToolService;
     userDocumentService;
@@ -29282,7 +29279,17 @@ class PreviewComponent {
     providerId;
     providerName;
     roleData;
+    cloudfrontUrl;
     backToParent = new EventEmitter();
+    fileData = null;
+    model = { fileId: null, fileUrl: null, fileName: null };
+    awsFileUpdate = [];
+    fileName;
+    fileChanged = false;
+    isSavingWork = false;
+    isSavingEducation = false;
+    isSavingCertification = false;
+    isSavingLicense = false;
     payloadUserId;
     payloadUserName;
     resumeData;
@@ -29291,8 +29298,9 @@ class PreviewComponent {
     showBackConfirmPopup = false;
     userId;
     userName;
-    constructor(store, userSkillSetService, userToolService, userDocumentService, userEducation, userDetailService, userExperienceService, tokenService, libConfig) {
+    constructor(store, fileService, userSkillSetService, userToolService, userDocumentService, userEducation, userDetailService, userExperienceService, tokenService, libConfig) {
         this.store = store;
+        this.fileService = fileService;
         this.userSkillSetService = userSkillSetService;
         this.userToolService = userToolService;
         this.userDocumentService = userDocumentService;
@@ -29305,6 +29313,12 @@ class PreviewComponent {
     }
     email;
     showLoader = false;
+    uploadFolderBySection = {
+        work: 'Experience',
+        education: 'Education',
+        certification: 'Certification',
+        license: 'License'
+    };
     expYears = [];
     details = signal(undefined, ...(ngDevMode ? [{ debugName: "details" }] : []));
     async ngOnInit() {
@@ -29678,6 +29692,10 @@ class PreviewComponent {
                 endDate: null,
                 isCurrent: false,
                 responsibilities: [],
+                fileId: null,
+                fileUrl: null,
+                fileName: null,
+                fileObject: null,
             }
         });
         this.expandedIndex.set(-1);
@@ -29700,12 +29718,26 @@ class PreviewComponent {
     cancelEditJob() {
         this.jobEditor.set({ mode: 'closed', index: null, data: null });
     }
-    saveEditJob() {
+    async saveEditJob() {
         const current = this.store.profileSignal();
         const jobIndex = this.editingJobIndex();
         const nextJob = this.tempJob();
         if (!current || !nextJob)
             return;
+        if (nextJob.fileObject) {
+            this.isSavingWork = true;
+            try {
+                this.fileData = nextJob.fileObject;
+                const uploaded = await this.saveAWSFile(this.uploadFolderBySection.work);
+                nextJob.fileId = uploaded.fileId;
+                nextJob.fileUrl = uploaded.fileUrl;
+                nextJob.fileName = uploaded.fileName;
+                nextJob.fileObject = null;
+            }
+            finally {
+                this.isSavingWork = false;
+            }
+        }
         const next = this.isAddingJob()
             ? { ...current, workExperience: [...(current.workExperience ?? []), nextJob] }
             : {
@@ -29715,6 +29747,20 @@ class PreviewComponent {
         this.commitProfile(next);
         this.cancelEditJob();
     }
+    onWorkExperienceFileSelected(event) {
+        this.revokeObjectUrl(this.tempJob()?.filePreviewUrl);
+        this.selectFile(event);
+        const file = this.fileData;
+        if (!file)
+            return;
+        this.patchTempJob({
+            fileId: null,
+            fileUrl: null,
+            fileName: file.name,
+            fileObject: file,
+            filePreviewUrl: URL.createObjectURL(file)
+        });
+    }
     deleteJob(index) {
         const current = this.store.profileSignal();
         if (!current?.workExperience?.length)
@@ -30012,9 +30058,27 @@ class PreviewComponent {
                 issueDate: null,
                 expiryDate: null,
                 credentialId: null,
+                fileId: null,
+                fileUrl: null,
+                fileName: null,
+                fileObject: null,
             }
         });
     }
+    onCertificationFileSelected(event) {
+        this.revokeObjectUrl(this.tempCertification()?.filePreviewUrl);
+        this.selectFile(event);
+        const file = this.fileData;
+        if (!file)
+            return;
+        this.patchTempCertification({
+            fileId: null,
+            fileUrl: null,
+            fileName: file.name,
+            fileObject: file,
+            filePreviewUrl: URL.createObjectURL(file)
+        });
+    }
     startEditCertification(index) {
         const current = this.store.profileSignal();
         const cert = current?.certifications?.[index];
@@ -30037,12 +30101,26 @@ class PreviewComponent {
             return;
         this.certificationEditor.update((e) => ({ ...e, data: { ...cert, ...patch } }));
     }
-    saveCertificationEditor() {
+    async saveCertificationEditor() {
         const current = this.store.profileSignal();
         const idx = this.editingCertificationIndex();
         const nextCert = this.tempCertification();
         if (!current || !nextCert)
             return;
+        if (nextCert.fileObject) {
+            this.isSavingCertification = true;
+            try {
+                this.fileData = nextCert.fileObject;
+                const uploaded = await this.saveAWSFile(this.uploadFolderBySection.certification);
+                nextCert.fileId = uploaded.fileId;
+                nextCert.fileUrl = uploaded.fileUrl;
+                nextCert.fileName = uploaded.fileName;
+                nextCert.fileObject = null;
+            }
+            finally {
+                this.isSavingCertification = false;
+            }
+        }
         const name = this.normalizeNullableString(nextCert.name);
         if (!name)
             return;
@@ -30090,9 +30168,27 @@ class PreviewComponent {
                 state: null,
                 issueDate: null,
                 expiryDate: null,
+                fileId: null,
+                fileUrl: null,
+                fileName: null,
+                fileObject: null,
             }
         });
     }
+    onLicenseFileSelected(event) {
+        this.revokeObjectUrl(this.tempLicense()?.filePreviewUrl);
+        this.selectFile(event);
+        const file = this.fileData;
+        if (!file)
+            return;
+        this.patchTempLicense({
+            fileId: null,
+            fileUrl: null,
+            fileName: file.name,
+            fileObject: file,
+            filePreviewUrl: URL.createObjectURL(file)
+        });
+    }
     startEditLicense(index) {
         const current = this.store.profileSignal();
         const lic = current?.licenses?.[index];
@@ -30115,12 +30211,26 @@ class PreviewComponent {
             return;
         this.licenseEditor.update((e) => ({ ...e, data: { ...lic, ...patch } }));
     }
-    saveLicenseEditor() {
+    async saveLicenseEditor() {
         const current = this.store.profileSignal();
         const idx = this.editingLicenseIndex();
         const nextLic = this.tempLicense();
         if (!current || !nextLic)
             return;
+        if (nextLic.fileObject) {
+            this.isSavingLicense = true;
+            try {
+                this.fileData = nextLic.fileObject;
+                const uploaded = await this.saveAWSFile(this.uploadFolderBySection.license);
+                nextLic.fileId = uploaded.fileId;
+                nextLic.fileUrl = uploaded.fileUrl;
+                nextLic.fileName = uploaded.fileName;
+                nextLic.fileObject = null;
+            }
+            finally {
+                this.isSavingLicense = false;
+            }
+        }
         const name = this.normalizeNullableString(nextLic.name);
         if (!name)
             return;
@@ -30171,9 +30281,27 @@ class PreviewComponent {
                 startDate: '',
                 endDate: '',
                 achievements: [],
+                fileId: null,
+                fileUrl: null,
+                fileName: null,
+                fileObject: null,
             }
         });
     }
+    onEducationFileSelected(event) {
+        this.revokeObjectUrl(this.tempEducation()?.filePreviewUrl);
+        this.selectFile(event);
+        const file = this.fileData;
+        if (!file)
+            return;
+        this.patchTempEducation({
+            fileId: null,
+            fileUrl: null,
+            fileName: file.name,
+            fileObject: file,
+            filePreviewUrl: URL.createObjectURL(file)
+        });
+    }
     startEditEducation(index) {
         const current = this.store.profileSignal();
         const edu = current?.education?.[index];
@@ -30197,12 +30325,26 @@ class PreviewComponent {
             return;
         this.educationEditor.update((e) => ({ ...e, data: { ...edu, ...patch } }));
     }
-    saveEducation() {
+    async saveEducation() {
         const current = this.store.profileSignal();
         const idx = this.editingEducationIndex();
         const nextEdu = this.tempEducation();
         if (!current || !nextEdu)
             return;
+        if (nextEdu.fileObject) {
+            this.isSavingEducation = true;
+            try {
+                this.fileData = nextEdu.fileObject;
+                const uploaded = await this.saveAWSFile(this.uploadFolderBySection.education);
+                nextEdu.fileId = uploaded.fileId;
+                nextEdu.fileUrl = uploaded.fileUrl;
+                nextEdu.fileName = uploaded.fileName;
+                nextEdu.fileObject = null;
+            }
+            finally {
+                this.isSavingEducation = false;
+            }
+        }
         if (this.isAddingEducation())
             this.appendToMainModel('education', nextEdu);
         else if (idx !== null)
@@ -30320,7 +30462,7 @@ class PreviewComponent {
             return;
         this.commitProfile({ ...current, basicDetails: { ...this.tempProfile } });
     }
-    saveResumedetails() {
+    async saveResumedetails() {
         this.showPopup = true;
         const rawSteps = [
             {
@@ -30448,6 +30590,80 @@ class PreviewComponent {
             }
         });
     }
+    async saveAWSFile(sectionFolder) {
+        if (!this.fileData)
+            return { fileId: null, fileUrl: null, fileName: null };
+        const fileType = this.fileData.type;
+        const fileExtension = fileType.split('/')[1] || fileType.split('/')[0] || 'file';
+        const generatedFileName = `${new uuid().newId()}.${fileExtension}`;
+        const key = `User/${this.payloadUserId}/${sectionFolder}/${generatedFileName}`;
+        const result = await this.fileService.uploadImageAsync(this.fileData, {
+            key,
+            contentType: fileType,
+            Expires: 300
+        });
+        if (!result.success) {
+            return { fileId: null, fileUrl: null, fileName: null };
+        }
+        const files = {
+            fileName: this.fileData.name,
+            fileSize: this.fileData.size,
+            fileType: this.fileData.type,
+            fileLocation: result.publicUrl,
+            encrypted: true,
+            publicUrl: result.publicUrl
+        };
+        files.fileLocation = files.fileLocation.replace(/^https?:\/\/[^/]+\//, '');
+        files.publicUrl = files.publicUrl.replace(/^https?:\/\/[^/]+\//, '');
+        return new Promise((resolve) => {
+            this.fileService.awsFileUpload([files]).subscribe((res) => {
+                if (res?.[0]?.fileId) {
+                    this.model.fileId = res[0].fileId;
+                    this.model.fileUrl = res[0].publicUrl;
+                    this.model.fileName = this.fileData.name;
+                    this.awsFileUpdate.push({
+                        fileId: res?.[0]?.fileId,
+                        isActive: true,
+                    });
+                    resolve({
+                        fileId: res[0].fileId,
+                        fileUrl: res[0].publicUrl,
+                        fileName: this.fileData.name
+                    });
+                    return;
+                }
+                resolve({ fileId: null, fileUrl: null, fileName: null });
+            });
+        });
+    }
+    selectFile(event) {
+        this.fileData = event.target.files[0];
+        if (this.fileData) {
+            this.fileName = this.fileData.name;
+            this.model.fileName = this.fileName;
+            this.fileChanged = true;
+        }
+    }
+    toAbsoluteFileUrl(fileUrl) {
+        if (!fileUrl)
+            return null;
+        if (/^https?:\/\//i.test(fileUrl))
+            return fileUrl;
+        const base = (this.cloudfrontUrl || '').replace(/\/+$/, '');
+        const path = fileUrl.replace(/^\/+/, '');
+        return base ? `${base}/${path}` : fileUrl;
+    }
+    revokeObjectUrl(url) {
+        if (url && url.startsWith('blob:')) {
+            URL.revokeObjectURL(url);
+        }
+    }
+    previewSelectedFile(item) {
+        const previewUrl = item?.filePreviewUrl || this.toAbsoluteFileUrl(item?.fileUrl);
+        if (!previewUrl || typeof window === 'undefined')
+            return;
+        window.open(previewUrl, '_blank');
+    }
     mapBasicDetailsToUserDetail(data) {
         const basic = data.basicDetails;
         this.email = data.email;
@@ -30502,9 +30718,9 @@ class PreviewComponent {
                 fromDate: this.formatDate(exp.startDate),
                 toDate: exp.isCurrent ? null : this.formatDate(exp.endDate),
                 jobDescription: exp.responsibilities?.join(', ') || "",
-                fileId: null,
-                fileUrl: null,
-                fileName: null,
+                fileId: exp.fileId ?? null,
+                fileUrl: exp.fileUrl ?? null,
+                fileName: exp.fileName ?? null,
                 reviewStatus: 2
             };
         });
@@ -30527,6 +30743,9 @@ class PreviewComponent {
                 startDate: this.formatDate(exp.startDate),
                 endDate: this.formatDate(exp.endDate),
                 comments: exp.achievements[0],
+                fileId: exp.fileId ?? null,
+                fileUrl: exp.fileUrl ?? null,
+                fileName: exp.fileName ?? null,
                 reviewStatus: 2
             };
         });
@@ -30549,6 +30768,9 @@ class PreviewComponent {
                 mainType: 2,
                 emailId,
                 forUser: 2,
+                fileId: exp.fileId ?? null,
+                fileUrl: exp.fileUrl ?? null,
+                fileName: exp.fileName ?? null,
                 isPrimary: false,
                 profileVisibility: true,
                 notify: true,
@@ -30574,6 +30796,9 @@ class PreviewComponent {
                 status: 2,
                 mainType: 1,
                 forUser: 2,
+                fileId: exp.fileId ?? null,
+                fileUrl: exp.fileUrl ?? null,
+                fileName: exp.fileName ?? null,
                 isPrimary: false,
                 profileVisibility: true,
                 notify: true,
@@ -30641,13 +30866,13 @@ class PreviewComponent {
         const d = new Date(date + "-01"); // add day
         return d.toISOString();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PreviewComponent, deps: [{ token: CredentialingStore }, { token: UserSkillSetService }, { token: UserToolService }, { token: UserDocumentService }, { token: UserEducationService }, { token: UserDetailService }, { token: UserExperienceService }, { token: i6.TokenService }, { token: LIBRARY_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: PreviewComponent, isStandalone: false, selector: "app-preview", inputs: { providerId: "providerId", providerName: "providerName", roleData: "roleData" }, outputs: { backToParent: "backToParent" }, ngImport: i0, template: "\r\n<div class=\"preview-page-header\">\r\n  <h2 class=\"preview-title\">Confirm based on your resume</h2>\r\n  <p class=\"preview-subtitle\">Please confirm everything is accurate. It is based on your resume</p>\r\n</div>\r\n\r\n\r\n<div class=\"container py-4\">\r\n  <div class=\"section mb-5\">\r\n    <div *ngIf=\"details() as data; else loading\">\r\n      <div class=\"card shadow-sm border-0\" *ngIf=\"!isEditMode()\">\r\n        <div class=\"card-body p-4\">\r\n          <div class=\"d-flex justify-content-between align-items-start mb-4\">\r\n            <div>\r\n              <div class=\"d-flex align-items-center gap-2\">\r\n                <h2 class=\"fw-bold mb-1\">{{ data.firstName }} {{ data.lastName }}</h2>\r\n                <span *ngIf=\"basicSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n                  Missing info\r\n                </span>\r\n              </div>\r\n              <p class=\"text-muted\">{{ data.jobTitle }} \u2022 {{ data.yearsOfExperience }} Years Exp.</p>\r\n              <div *ngIf=\"basicIssues().length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ basicIssues().join(' \u2022 ') }}</div>\r\n              </div>\r\n            </div>\r\n            <span class=\"badge bg-primary-subtle text-primary border p-2\">ID: Verified</span>\r\n          </div>\r\n\r\n          <div class=\"row g-4\">\r\n            <div class=\"col-12 border-bottom pb-2\">\r\n              <h6 class=\"text-uppercase small fw-bold text-muted\">Summary</h6>\r\n              <p class=\"text-secondary small mb-0\">{{ data.summary }}</p>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <label class=\"small text-muted d-block\">EMAIL</label>\r\n              <span class=\"fw-bold small\">{{ data.email }}</span>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <label class=\"small text-muted d-block\">PHONE</label>\r\n              <span class=\"fw-bold small\">{{ data.phone }}</span>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <label class=\"small text-muted d-block\">LOCATION</label>\r\n              <span class=\"small\">{{ data.address }},{{ data.city }},{{ data.state }},{{ data.zipCode }}, {{\r\n                data.country }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"card-footer bg-light text-end\">\r\n          <button class=\"btn btn-sm btn-primary px-4\" (click)=\"toggleEdit()\">Edit Details</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"card shadow-sm border-0\" *ngIf=\"isEditMode()\">\r\n        <div class=\"card-header bg-white fw-bold\">Update Profile</div>\r\n        <div class=\"card-body p-4\">\r\n          <form class=\"row g-3\" #basicForm=\"ngForm\" novalidate>\r\n            <div *ngIf=\"basicIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ basicIssues().join(' \u2022 ') }}</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">First Name <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.firstName\"\r\n                name=\"fName\"\r\n                placeholder=\"First Name\"\r\n                required\r\n                #fName=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"fName.invalid && (fName.dirty || fName.touched)\">First name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Last Name <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.lastName\"\r\n                name=\"lName\"\r\n                placeholder=\"Last Name\"\r\n                required\r\n                #lName=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"lName.invalid && (lName.dirty || lName.touched)\">Last name is required</div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">Summary</label>\r\n              <textarea class=\"form-control\" rows=\"3\" [(ngModel)]=\"tempProfile.summary\" name=\"sum\"\r\n                placeholder=\"Summary\"></textarea>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Email <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"email\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.email\"\r\n                name=\"email\"\r\n                placeholder=\"Email\"\r\n                required\r\n                email\r\n                #email=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"email.invalid && (email.dirty || email.touched)\">\r\n                <span *ngIf=\"email.errors?.['required']\">Email is required</span>\r\n                <span *ngIf=\"email.errors?.['email']\">Email format is invalid</span>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Phone Number <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [ngModel]=\"tempProfile.phone\"\r\n                (ngModelChange)=\"tempProfile.phone = sanitizePhone($event)\"\r\n                name=\"phone\"\r\n                placeholder=\"Phone (10 digits)\"\r\n                required\r\n                pattern=\"^\\d{10}$\"\r\n                maxlength=\"10\"\r\n                inputmode=\"numeric\"\r\n                #phone=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"phone.invalid && (phone.dirty || phone.touched)\">\r\n                <span *ngIf=\"phone.errors?.['required']\">Phone number is required</span>\r\n                <span *ngIf=\"phone.errors?.['pattern']\">Phone number must be 10 digits</span>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-md-3\">\r\n              <label class=\"small text-muted d-block\">Home Address <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.address\"\r\n                name=\"address\"\r\n                placeholder=\"Home Address\"\r\n                required\r\n                #address=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"address.invalid && (address.dirty || address.touched)\">Home address is required</div>\r\n            </div>\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.city\"\r\n                name=\"city\"\r\n                placeholder=\"City\"\r\n                required\r\n                #city=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"city.invalid && (city.dirty || city.touched)\">City is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.state\"\r\n                name=\"state\"\r\n                placeholder=\"State\"\r\n                required\r\n                #state=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"state.invalid && (state.dirty || state.touched)\">State is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">Zip Code <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.zipCode\"\r\n                name=\"zipCode\"\r\n                placeholder=\"Zip Code\"\r\n                required\r\n                #zipCode=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"zipCode.invalid && (zipCode.dirty || zipCode.touched)\">Zip code is required</div>\r\n            </div>\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.country\"\r\n                name=\"country\"\r\n                placeholder=\"Country\"\r\n                required\r\n                #country=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"country.invalid && (country.dirty || country.touched)\">Country is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Job Title <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.jobTitle\"\r\n                name=\"jobTitle\"\r\n                placeholder=\"Job Title\"\r\n                required\r\n                #jobTitle=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"jobTitle.invalid && (jobTitle.dirty || jobTitle.touched)\">Job title is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"number\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.yearsOfExperience\"\r\n                name=\"yearsOfExperience\"\r\n                placeholder=\"Years of Experience\"\r\n                required\r\n                min=\"0\"\r\n                #yearsOfExperience=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"yearsOfExperience.invalid && (yearsOfExperience.dirty || yearsOfExperience.touched)\">\r\n                Years of experience is required\r\n              </div>\r\n            </div>\r\n\r\n\r\n          </form>\r\n        </div>\r\n        <div class=\"card-footer bg-light text-end gap-2 d-flex justify-content-end\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancel()\">Cancel</button>\r\n          <button class=\"btn btn-sm btn-success px-4\" (click)=\"save()\">Save Changes</button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <h5 class=\"fw-bold mb-0\">Work Experience</h5>\r\n        <span *ngIf=\"workSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n          Missing info\r\n        </span>\r\n      </div>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n        style=\"width: 32px; height: 32px; line-height: 1;\"\r\n        title=\"Add work experience\"\r\n        (click)=\"addJob()\"\r\n      >\r\n        <span class=\"fw-bold fs-5\">+</span>\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"experience().length === 0 && !isAddingJob()\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n      <div class=\"fw-semibold\">Missing required fields</div>\r\n      <div class=\"small\">Add at least one work experience.</div>\r\n    </div>\r\n    <div class=\"list-group list-group-flush shadow-sm rounded\">\r\n      <div *ngIf=\"isAddingJob() && tempJob()\" class=\"list-group-item p-3\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">JOB TITLE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempJob()?.jobTitle\"\r\n              (ngModelChange)=\"patchTempJob({ jobTitle: $event })\"\r\n              name=\"newJobTitle\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">COMPANY <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempJob()?.company\"\r\n              (ngModelChange)=\"patchTempJob({ company: $event })\"\r\n              name=\"newCompany\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">CITY <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempJob()?.city\"\r\n              (ngModelChange)=\"patchTempJob({ city: $event })\"\r\n              name=\"newCity\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.city)\">City is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempJob()?.startDate\"\r\n              (ngModelChange)=\"patchTempJob({ startDate: $event })\"\r\n              name=\"newStartDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.startDate)\">Start date is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [disabled]=\"tempJob()?.isCurrent\"\r\n              [ngModel]=\"tempJob()?.endDate\"\r\n              (ngModelChange)=\"patchTempJob({ endDate: $event })\"\r\n              name=\"newEndDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"!tempJob()?.isCurrent && isBlank(tempJob()?.endDate)\">End date is required</div>\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"!tempJob()?.isCurrent && isMonthRangeInvalid(tempJob()?.startDate, tempJob()?.endDate)\">\r\n              Start date must be less than end date\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-4 d-flex align-items-end\">\r\n            <div class=\"form-check\">\r\n              <input\r\n                class=\"form-check-input\"\r\n                type=\"checkbox\"\r\n                [ngModel]=\"tempJob()?.isCurrent\"\r\n                (ngModelChange)=\"setTempJobIsCurrent($event)\"\r\n                name=\"newIsCurrent\"\r\n                id=\"newIsCurrent\"\r\n              />\r\n              <label class=\"form-check-label\" for=\"newIsCurrent\">Current</label>\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">RESPONSIBILITIES (one per line)</label>\r\n            <textarea\r\n              rows=\"4\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"(tempJob()?.responsibilities || []).join('\\n')\"\r\n              (ngModelChange)=\"updateTempResponsibilities($event)\"\r\n              name=\"newResponsibilities\"\r\n            ></textarea>\r\n          </div>\r\n        </form>\r\n        <div class=\"card-footer bg-light text-end mt-3\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditJob(); $event.stopPropagation()\">Cancel</button>\r\n          <button class=\"btn btn-sm btn-success px-4\" (click)=\"saveEditJob(); $event.stopPropagation()\">Save</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let job of experience(); let i = index\" class=\"list-group-item p-3\">\r\n\r\n        <div class=\"d-flex justify-content-between align-items-center\">\r\n          <div class=\"d-flex align-items-center cursor-pointer flex-grow-1\" (click)=\"toggleJob(i)\">\r\n            <i class=\"bi bi-briefcase text-primary me-3 fs-4\"></i>\r\n            <div>\r\n              <h6 class=\"mb-0 fw-bold\">{{ job.jobTitle }}</h6>\r\n              <small class=\"text-muted\">\r\n                {{ job.company }} \u2022 {{ formatMonthYear(job.startDate) }} - {{ job.isCurrent ? 'Present' : formatMonthYear(job.endDate) }}\r\n              </small>\r\n              <div\r\n                *ngIf=\"editingJobIndex() !== i && (workIssuesByIndex()[i] || []).length > 0\"\r\n                class=\"alert alert-warning py-1 px-2 mt-2\"\r\n              >\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (workIssuesByIndex()[i] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"d-flex align-items-center gap-2\">\r\n            \r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n              (click)=\"startEditJob(i)\"\r\n              title=\"Edit\"\r\n            >\r\n              <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n            </button>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-danger action-icon-btn\"\r\n              (click)=\"deleteJob(i);\"\r\n              title=\"Delete\"\r\n            >\r\n              <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n            \r\n\r\n            <!-- <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-light p-0\"\r\n              style=\"width: 34px; height: 34px;\"\r\n              (click)=\"toggleJob(i)\"\r\n              title=\"Expand\"\r\n            >\r\n              <i class=\"bi cursor-pointer\" [ngClass]=\"expandedIndex() === i ? 'bi-chevron-up' : 'bi-chevron-down'\"></i>\r\n            </button> -->\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"mt-3 bg-light p-3 rounded small\" *ngIf=\"expandedIndex() === i\">\r\n          <ng-container *ngIf=\"editingJobIndex() !== i; else editJobForm\">\r\n            <ul class=\"mb-0\">\r\n              <li *ngFor=\"let res of job.responsibilities\">{{ res }}</li>\r\n            </ul>\r\n          </ng-container>\r\n\r\n          <ng-template #editJobForm>\r\n            <div *ngIf=\"(workIssuesByIndex()[i] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ (workIssuesByIndex()[i] || []).join(' \u2022 ') }}</div>\r\n            </div>\r\n            <form class=\"row g-2\">\r\n              <div class=\"col-md-6\">\r\n                <label class=\"small text-muted d-block\">JOB TITLE <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [ngModel]=\"tempJob()?.jobTitle\"\r\n                  (ngModelChange)=\"patchTempJob({ jobTitle: $event })\"\r\n                  name=\"jobTitle{{ i }}\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.jobTitle)\">Job title is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-6\">\r\n                <label class=\"small text-muted d-block\">COMPANY <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [ngModel]=\"tempJob()?.company\"\r\n                  (ngModelChange)=\"patchTempJob({ company: $event })\"\r\n                  name=\"company{{ i }}\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.company)\">Company name is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">CITY <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [ngModel]=\"tempJob()?.city\"\r\n                  (ngModelChange)=\"patchTempJob({ city: $event })\"\r\n                  name=\"city{{ i }}\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.city)\">City is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"month\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [ngModel]=\"tempJob()?.startDate\"\r\n                  (ngModelChange)=\"patchTempJob({ startDate: $event })\"\r\n                  name=\"startDate{{ i }}\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.startDate)\">Start date is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"month\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [disabled]=\"tempJob()?.isCurrent\"\r\n                  [ngModel]=\"tempJob()?.endDate\"\r\n                  (ngModelChange)=\"patchTempJob({ endDate: $event })\"\r\n                  name=\"endDate{{ i }}\"\r\n                />\r\n                <div\r\n                  class=\"small text-danger mt-1\"\r\n                  *ngIf=\"!tempJob()?.isCurrent && isBlank(tempJob()?.endDate)\"\r\n                >\r\n                  End date is required\r\n                </div>\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"!tempJob()?.isCurrent && isMonthRangeInvalid(tempJob()?.startDate, tempJob()?.endDate)\">\r\n                  Start date must be less than end date\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4 d-flex align-items-end\">\r\n                <div class=\"form-check\">\r\n                  <input\r\n                    class=\"form-check-input\"\r\n                    type=\"checkbox\"\r\n                    [ngModel]=\"tempJob()?.isCurrent\"\r\n                    (ngModelChange)=\"setTempJobIsCurrent($event)\"\r\n                    name=\"isCurrent{{ i }}\"\r\n                    id=\"isCurrent{{ i }}\"\r\n                  />\r\n                  <label class=\"form-check-label\" for=\"isCurrent{{ i }}\">Current</label>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">RESPONSIBILITIES (one per line)</label>\r\n                <textarea\r\n                  rows=\"4\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [ngModel]=\"(tempJob()?.responsibilities || []).join('\\n')\"\r\n                  (ngModelChange)=\"updateTempResponsibilities($event)\"\r\n                  name=\"responsibilities{{ i }}\"\r\n                ></textarea>\r\n              </div>\r\n            </form>\r\n          </ng-template>\r\n        </div>\r\n\r\n        <div class=\"card-footer bg-light text-end\" *ngIf=\"editingJobIndex() === i\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditJob(); $event.stopPropagation()\">Cancel</button>\r\n          <button class=\"btn btn-sm btn-success px-4\" (click)=\"saveEditJob(); $event.stopPropagation()\">Save</button>\r\n        </div>\r\n        \r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <h5 class=\"fw-bold mb-0\">Certifications</h5>\r\n        <span *ngIf=\"certificationsSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n          Missing info\r\n        </span>\r\n      </div>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n        style=\"width: 32px; height: 32px; line-height: 1;\"\r\n        title=\"Add certification\"\r\n        (click)=\"addCertification()\"\r\n      >\r\n        <span class=\"fw-bold fs-5\">+</span>\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"certs().length === 0 && !isAddingCertification() && editingCertificationIndex() === null\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n      <div class=\"fw-semibold\">Missing required fields</div>\r\n      <div class=\"small\">Add at least one certification.</div>\r\n    </div>\r\n\r\n    <div class=\"list-group list-group-flush shadow-sm rounded border\">\r\n      <div *ngIf=\"isAddingCertification() && tempCertification()\" class=\"list-group-item py-3\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Name <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.name\"\r\n              (ngModelChange)=\"patchTempCertification({ name: $event })\"\r\n              name=\"newCertName\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempCertification()?.name)\">Certificate name is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issuing Organization</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.issuingOrganization || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ issuingOrganization: $event || null })\"\r\n              name=\"newCertOrg\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">State</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.state || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ state: $event || null })\"\r\n              name=\"newCertState\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Credential ID</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.credentialId || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ credentialId: $event || null })\"\r\n              name=\"newCertCredentialId\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issue Date</label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.issueDate || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ issueDate: $event || null })\"\r\n              name=\"newCertIssueDate\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Expiry Date</label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.expiryDate || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ expiryDate: $event || null })\"\r\n              name=\"newCertExpiryDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempCertification()?.issueDate || null, tempCertification()?.expiryDate || null)\">\r\n              Issued date must be less than expiry date\r\n            </div>\r\n          </div>\r\n        </form>\r\n\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditCertification()\">Cancel</button>\r\n          <button type=\"button\" class=\"btn btn-sm btn-success px-4\" (click)=\"saveCertificationEditor()\">Save</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let cert of certs(); let ci = index\" class=\"list-group-item py-3\">\r\n        <ng-container *ngIf=\"editingCertificationIndex() !== ci; else editCert\">\r\n          <div class=\"d-flex justify-content-between align-items-start gap-3\">\r\n            <div>\r\n              <div class=\"fw-semibold\">{{ cert.name }}</div>\r\n              <div *ngIf=\"(certIssuesByIndex()[ci] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (certIssuesByIndex()[ci] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n              <div class=\"small text-muted\">\r\n                {{ cert.issuingOrganization || '\u2014' }}\r\n                <span *ngIf=\"cert.state\"> \u2022 {{ cert.state }}</span>\r\n              </div>\r\n              <div class=\"small text-muted\">\r\n                Issue: {{ cert.issueDate ? formatMonthYear(cert.issueDate) : '\u2014' }}\r\n                <span class=\"mx-1\">|</span>\r\n                Expiry: {{ cert.expiryDate ? formatMonthYear(cert.expiryDate) : '\u2014' }}\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n               <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n              (click)=\"startEditCertification(ci)\"\r\n              title=\"Edit\"\r\n            >\r\n              <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n            </button>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-danger action-icon-btn\"\r\n              (click)=\"deleteCertification(ci)\"\r\n              title=\"Delete\"\r\n            >\r\n              <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-template #editCert>\r\n          <div *ngIf=\"(certIssuesByIndex()[ci] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ (certIssuesByIndex()[ci] || []).join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Name <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.name\"\r\n                (ngModelChange)=\"patchTempCertification({ name: $event })\"\r\n                name=\"certName{{ ci }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempCertification()?.name)\">Certificate name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issuing Organization</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.issuingOrganization || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ issuingOrganization: $event || null })\"\r\n                name=\"certOrg{{ ci }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">State</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.state || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ state: $event || null })\"\r\n                name=\"certState{{ ci }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Credential ID</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.credentialId || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ credentialId: $event || null })\"\r\n                name=\"certCredentialId{{ ci }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issue Date</label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.issueDate || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ issueDate: $event || null })\"\r\n                name=\"certIssue{{ ci }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Expiry Date</label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.expiryDate || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ expiryDate: $event || null })\"\r\n                name=\"certExpiry{{ ci }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempCertification()?.issueDate || null, tempCertification()?.expiryDate || null)\">\r\n                Issued date must be less than expiry date\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditCertification()\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-sm btn-success px-4\" (click)=\"saveCertificationEditor()\">Save</button>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <h5 class=\"fw-bold mb-0\">Licenses</h5>\r\n        <span *ngIf=\"licensesSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n          Missing info\r\n        </span>\r\n      </div>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n        style=\"width: 32px; height: 32px; line-height: 1;\"\r\n        title=\"Add license\"\r\n        (click)=\"addLicense()\"\r\n      >\r\n        <span class=\"fw-bold fs-5\">+</span>\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"licenses().length === 0 && !isAddingLicense() && editingLicenseIndex() === null\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n      <div class=\"fw-semibold\">Missing required fields</div>\r\n      <div class=\"small\">Add at least one license.</div>\r\n    </div>\r\n\r\n    <div class=\"list-group list-group-flush shadow-sm rounded border\">\r\n      <div *ngIf=\"isAddingLicense() && tempLicense()\" class=\"list-group-item py-3\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Name <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.name\"\r\n              (ngModelChange)=\"patchTempLicense({ name: $event })\"\r\n              name=\"newLicName\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempLicense()?.name)\">License name is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issuing Authority</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.issuingAuthority || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ issuingAuthority: $event || null })\"\r\n              name=\"newLicAuthority\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">License Number</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.licenseNumber || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ licenseNumber: $event || null })\"\r\n              name=\"newLicNumber\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">State</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.state || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ state: $event || null })\"\r\n              name=\"newLicState\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issue Date</label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.issueDate || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ issueDate: $event || null })\"\r\n              name=\"newLicIssueDate\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Expiry Date</label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.expiryDate || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ expiryDate: $event || null })\"\r\n              name=\"newLicExpiryDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempLicense()?.issueDate || null, tempLicense()?.expiryDate || null)\">\r\n              Issued date must be less than expiry date\r\n            </div>\r\n          </div>\r\n        </form>\r\n\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditLicense()\">Cancel</button>\r\n          <button type=\"button\" class=\"btn btn-sm btn-success px-4\" (click)=\"saveLicenseEditor()\">Save</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let lic of licenses(); let li = index\" class=\"list-group-item py-3\">\r\n        <ng-container *ngIf=\"editingLicenseIndex() !== li; else editLic\">\r\n          <div class=\"d-flex justify-content-between align-items-start gap-3\">\r\n            <div>\r\n              <div class=\"fw-semibold\">{{ lic.name }}</div>\r\n              <div *ngIf=\"(licenseIssuesByIndex()[li] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (licenseIssuesByIndex()[li] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n              <div class=\"small text-muted\">\r\n                {{ lic.issuingAuthority || '\u2014' }}\r\n                <span *ngIf=\"lic.state\"> \u2022 {{ lic.state }}</span>\r\n              </div>\r\n              <div class=\"small text-muted\">\r\n                Issue: {{ lic.issueDate ? formatMonthYear(lic.issueDate) : '\u2014' }}\r\n                <span class=\"mx-1\">|</span>\r\n                Expiry: {{ lic.expiryDate ? formatMonthYear(lic.expiryDate) : '\u2014' }}\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n\r\n              <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n              (click)=\"startEditLicense(li)\"\r\n              title=\"Edit\"\r\n            >\r\n              <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n            </button>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-danger action-icon-btn\"\r\n              (click)=\"deleteLicense(li)\"\r\n              title=\"Delete\"\r\n            >\r\n              <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-template #editLic>\r\n          <div *ngIf=\"(licenseIssuesByIndex()[li] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ (licenseIssuesByIndex()[li] || []).join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Name <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.name\"\r\n                (ngModelChange)=\"patchTempLicense({ name: $event })\"\r\n                name=\"licName{{ li }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempLicense()?.name)\">License name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issuing Authority</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.issuingAuthority || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ issuingAuthority: $event || null })\"\r\n                name=\"licAuthority{{ li }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">License Number</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.licenseNumber || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ licenseNumber: $event || null })\"\r\n                name=\"licNumber{{ li }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">State</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.state || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ state: $event || null })\"\r\n                name=\"licState{{ li }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issue Date</label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.issueDate || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ issueDate: $event || null })\"\r\n                name=\"licIssue{{ li }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Expiry Date</label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.expiryDate || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ expiryDate: $event || null })\"\r\n                name=\"licExpiry{{ li }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempLicense()?.issueDate || null, tempLicense()?.expiryDate || null)\">\r\n                Issued date must be less than expiry date\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditLicense()\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-sm btn-success px-4\" (click)=\"saveLicenseEditor()\">Save</button>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <h5 class=\"fw-bold mb-0\">Tools</h5>\r\n        <span *ngIf=\"toolsSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n          Missing info\r\n        </span>\r\n      </div>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n        style=\"width: 32px; height: 32px; line-height: 1;\"\r\n        title=\"Add tool\"\r\n        (click)=\"addTool()\"\r\n      >\r\n        <span class=\"fw-bold fs-5\">+</span>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"d-flex flex-wrap gap-2 p-3 bg-white border rounded shadow-sm\">\r\n      <div *ngFor=\"let tool of tools(); let ti = index\" class=\"d-flex align-items-center gap-2\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-light border rounded-pill d-inline-flex align-items-center gap-2 px-3 py-2\"\r\n          (click)=\"openToolEditor(ti)\"\r\n          title=\"Edit\"\r\n        >\r\n          <span class=\"fw-normal text-dark\">{{ tool }}</span>\r\n            <span\r\n              *ngIf=\"(toolIssuesByIndex()[ti] || []).length > 0\"\r\n              class=\"badge bg-warning-subtle text-warning border ms-1\"\r\n            >\r\n              Missing info\r\n            </span>\r\n          <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-sm btn-outline-danger rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\"\r\n          title=\"Delete tool\"\r\n          (click)=\"deleteTool(ti)\"\r\n        >\r\n          <span class=\"fw-bold\">\u00D7</span>\r\n        </button>\r\n      </div>\r\n\r\n      <span *ngIf=\"tools().length === 0\" class=\"text-muted small\">No tools added.</span>\r\n    </div>\r\n\r\n    <!-- Tool edit panel (overlay) -->\r\n    <div\r\n      *ngIf=\"isToolEditorOpen()\"\r\n      class=\"position-fixed top-0 start-0 w-100 h-100\"\r\n      style=\"background: rgba(0,0,0,0.35); z-index: 2000;\"\r\n      (click)=\"closeToolEditor()\"\r\n    >\r\n      <div class=\"container h-100 d-flex align-items-start justify-content-center pt-4\" (click)=\"$event.stopPropagation()\">\r\n        <div class=\"card shadow border-0 w-100\" style=\"max-width: 900px;\">\r\n          <div class=\"card-header bg-white d-flex align-items-center gap-3\">\r\n            <button type=\"button\" class=\"btn btn-link p-0 text-decoration-none\" (click)=\"closeToolEditor()\">\r\n              <i class=\"bi bi-arrow-left fs-5\"></i>\r\n            </button>\r\n            <div class=\"fw-bold\">{{ isAddingTool() ? 'Add Tool' : ('Edit ' + (toolForm()?.name || '') + ' Tool') }}</div>\r\n          </div>\r\n          <div class=\"card-body p-4\">\r\n            <div *ngIf=\"toolFormIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ toolFormIssues().join(' \u2022 ') }}</div>\r\n            </div>\r\n            <div class=\"row g-3\">\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Tool Name <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control\"\r\n                  [ngModel]=\"toolForm()?.name\"\r\n                  (ngModelChange)=\"patchToolForm({ name: $event })\"\r\n                  name=\"toolName\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(toolForm()?.name)\">Tool name is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Service Provider</label>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control\"\r\n                  [ngModel]=\"toolForm()?.providerName\"\r\n                  (ngModelChange)=\"patchToolForm({ providerName: $event })\"\r\n                  name=\"toolProvider\"\r\n                  placeholder=\"Service Provider\"\r\n                />\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span class=\"text-danger\">*</span></label>\r\n                <div class=\"d-flex align-items-center gap-2\">\r\n                  <button\r\n                    *ngFor=\"let s of [1,2,3,4,5]\"\r\n                    type=\"button\"\r\n                    class=\"btn btn-link p-0 text-decoration-none\"\r\n                    (click)=\"setTempToolStars(s)\"\r\n                    [attr.aria-label]=\"'Set rating ' + s\"\r\n                  >\r\n                    <span [class]=\"(toolForm()?.stars || 0) >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n                      {{ (toolForm()?.stars || 0) >= s ? '\u2605' : '\u2606' }}\r\n                    </span>\r\n                  </button>\r\n                  <span class=\"small text-muted\">{{ toolForm()?.stars || 0 }}/5</span>\r\n                </div>\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"(toolForm()?.stars || 0) <= 0\">Star rating is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"number\"\r\n                  class=\"form-control\"\r\n                  [ngModel]=\"toolForm()?.year\"\r\n                  (ngModelChange)=\"patchToolForm({ year: $event === '' ? null : +$event })\"\r\n                  name=\"toolYear\"\r\n                  min=\"1\"\r\n                  max=\"30\"\r\n                  placeholder=\"Years of Experience\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"toolForm()?.year === null || toolForm()?.year === undefined\">Years of experience is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n                <div class=\"form-check form-switch mt-2\">\r\n                  <input\r\n                    class=\"form-check-input\"\r\n                    type=\"checkbox\"\r\n                    [ngModel]=\"toolForm()?.profileVisibility\"\r\n                    (ngModelChange)=\"patchToolForm({ profileVisibility: $event })\"\r\n                    name=\"toolVisible\"\r\n                    id=\"toolVisible\"\r\n                  />\r\n                  <label class=\"form-check-label\" for=\"toolVisible\">Visible</label>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Comment</label>\r\n                <textarea\r\n                  rows=\"4\"\r\n                  class=\"form-control\"\r\n                  [ngModel]=\"toolForm()?.notes\"\r\n                  (ngModelChange)=\"patchToolForm({ notes: $event })\"\r\n                  name=\"toolNotes\"\r\n                  placeholder=\"Comment your tool here...\"\r\n                ></textarea>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"card-footer bg-white d-flex justify-content-end gap-2\">\r\n            <button\r\n              *ngIf=\"!isAddingTool() && editingToolIndex() !== null\"\r\n              type=\"button\"\r\n              class=\"btn btn-link text-danger me-auto\"\r\n              (click)=\"deleteTool(editingToolIndex()!)\"\r\n            >\r\n              Delete\r\n            </button>\r\n            <button type=\"button\" class=\"btn btn-link text-secondary\" (click)=\"closeToolEditor()\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary px-4\" (click)=\"saveToolEditor()\">\r\n              {{ isAddingTool() ? 'Save' : 'Update' }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"row g-4 mb-5\">\r\n    <div class=\"col-md-12\">\r\n      <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <h5 class=\"fw-bold mb-0\">Skills</h5>\r\n          <span *ngIf=\"skillsSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n            Missing info\r\n          </span>\r\n        </div>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\"\r\n          title=\"Add skill\"\r\n          (click)=\"addSkill()\"\r\n        >\r\n          <span class=\"fw-bold fs-5\">+</span>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"d-flex flex-wrap gap-2 p-3 bg-white border rounded shadow-sm\">\r\n        <div *ngFor=\"let skill of skills(); let si = index\" class=\"d-flex align-items-center gap-2\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn btn-light border rounded-pill d-inline-flex align-items-center gap-2 px-3 py-2\"\r\n            (click)=\"openSkillEditor(si)\"\r\n            title=\"Edit\"\r\n          >\r\n            <span class=\"fw-normal text-dark\">{{ skill }}</span>\r\n            <span\r\n              *ngIf=\"(skillIssuesByIndex()[si] || []).length > 0\"\r\n              class=\"badge bg-warning-subtle text-warning border ms-1\"\r\n            >\r\n              Missing info\r\n            </span>\r\n            <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n          </button>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn btn-sm btn-outline-danger rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n            style=\"width: 32px; height: 32px; line-height: 1;\"\r\n            title=\"Delete skill\"\r\n            (click)=\"deleteSkill(si); $event.stopPropagation()\"\r\n          >\r\n            <span class=\"fw-bold\">\u00D7</span>\r\n          </button>\r\n        </div>\r\n\r\n        <span *ngIf=\"skills().length === 0\" class=\"text-muted small\">No skills added.</span>\r\n      </div>\r\n\r\n      <!-- Skill edit panel (overlay) -->\r\n      <div\r\n        *ngIf=\"isSkillEditorOpen()\"\r\n        class=\"position-fixed top-0 start-0 w-100 h-100\"\r\n        style=\"background: rgba(0,0,0,0.35); z-index: 2000;\"\r\n        (click)=\"closeSkillEditor()\"\r\n      >\r\n        <div class=\"container h-100 d-flex align-items-start justify-content-center pt-4\" (click)=\"$event.stopPropagation()\">\r\n          <div class=\"card shadow border-0 w-100\" style=\"max-width: 900px;\">\r\n            <div class=\"card-header bg-white d-flex align-items-center gap-3\">\r\n              <button type=\"button\" class=\"btn btn-link p-0 text-decoration-none\" (click)=\"closeSkillEditor()\">\r\n                <i class=\"bi bi-arrow-left fs-5\"></i>\r\n              </button>\r\n              <div class=\"fw-bold\">{{ isAddingSkill() ? 'Add Skill' : ('Edit ' + (skillForm()?.name || '') + ' Skill') }}</div>\r\n            </div>\r\n            <div class=\"card-body p-4\">\r\n              <div *ngIf=\"skillFormIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n                <div class=\"fw-semibold\">Missing required fields</div>\r\n                <div class=\"small\">{{ skillFormIssues().join(' \u2022 ') }}</div>\r\n              </div>\r\n              <div class=\"row g-3\">\r\n                <div class=\"col-12\">\r\n                  <label class=\"small text-muted d-block\">Skills Name <span class=\"text-danger\">*</span></label>\r\n                  <input\r\n                    type=\"text\"\r\n                    class=\"form-control\"\r\n                    [ngModel]=\"skillForm()?.name\"\r\n                    (ngModelChange)=\"patchSkillForm({ name: $event })\"\r\n                    name=\"skillName\"\r\n                  />\r\n                  <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(skillForm()?.name)\">Skillset name is required</div>\r\n                </div>\r\n\r\n                <div class=\"col-12\">\r\n                  <label class=\"small text-muted d-block\">Service Provider</label>\r\n                  <input\r\n                    type=\"text\"\r\n                    class=\"form-control\"\r\n                    [ngModel]=\"skillForm()?.providerName\"\r\n                    (ngModelChange)=\"patchSkillForm({ providerName: $event })\"\r\n                    name=\"skillProvider\"\r\n                    placeholder=\"Service Provider\"\r\n                  />\r\n                </div>\r\n\r\n                <div class=\"col-md-4\">\r\n                  <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span class=\"text-danger\">*</span></label>\r\n                  <div class=\"d-flex align-items-center gap-2\">\r\n                    <button\r\n                      *ngFor=\"let s of [1,2,3,4,5]\"\r\n                      type=\"button\"\r\n                      class=\"btn btn-link p-0 text-decoration-none\"\r\n                      (click)=\"setTempSkillStars(s)\"\r\n                      [attr.aria-label]=\"'Set rating ' + s\"\r\n                    >\r\n                      <span [class]=\"(skillForm()?.stars || 0) >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n                        {{ (skillForm()?.stars || 0) >= s ? '\u2605' : '\u2606' }}\r\n                      </span>\r\n                    </button>\r\n                    <span class=\"small text-muted\">{{ skillForm()?.stars || 0 }}/5</span>\r\n                  </div>\r\n                  <div class=\"small text-danger mt-1\" *ngIf=\"(skillForm()?.stars || 0) <= 0\">Star rating is required</div>\r\n                </div>\r\n\r\n                <div class=\"col-md-4\">\r\n                  <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n                  <input\r\n                    type=\"number\"\r\n                    class=\"form-control\"\r\n                    [ngModel]=\"skillForm()?.year\"\r\n                    (ngModelChange)=\"patchSkillForm({ year: $event === '' ? null : +$event })\"\r\n                    name=\"skillYear\"\r\n                    min=\"1\"\r\n                    max=\"30\"\r\n                    placeholder=\"Years of Experience\"\r\n                  />\r\n                  <div class=\"small text-danger mt-1\" *ngIf=\"skillForm()?.year === null || skillForm()?.year === undefined\">Years of experience is required</div>\r\n                </div>\r\n\r\n                <div class=\"col-md-4\">\r\n                  <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n                  <div class=\"form-check form-switch mt-2\">\r\n                    <input\r\n                      class=\"form-check-input\"\r\n                      type=\"checkbox\"\r\n                      [ngModel]=\"skillForm()?.profileVisibility\"\r\n                      (ngModelChange)=\"patchSkillForm({ profileVisibility: $event })\"\r\n                      name=\"skillVisible\"\r\n                      id=\"skillVisible\"\r\n                    />\r\n                    <label class=\"form-check-label\" for=\"skillVisible\">Visible</label>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"col-12\">\r\n                  <label class=\"small text-muted d-block\">Comment</label>\r\n                  <textarea\r\n                    rows=\"4\"\r\n                    class=\"form-control\"\r\n                    [ngModel]=\"skillForm()?.notes\"\r\n                    (ngModelChange)=\"patchSkillForm({ notes: $event })\"\r\n                    name=\"skillNotes\"\r\n                    placeholder=\"Comment your skill here...\"\r\n                  ></textarea>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"card-footer bg-white d-flex justify-content-end gap-2\">\r\n              <button\r\n                *ngIf=\"!isAddingSkill() && editingSkillIndex() !== null\"\r\n                type=\"button\"\r\n                class=\"btn btn-link text-danger me-auto\"\r\n                (click)=\"deleteSkill(editingSkillIndex()!)\"\r\n              >\r\n                Delete\r\n              </button>\r\n              <button type=\"button\" class=\"btn btn-link text-secondary\" (click)=\"closeSkillEditor()\">Cancel</button>\r\n              <button type=\"button\" class=\"btn btn-primary px-4\" (click)=\"saveSkillEditor()\">\r\n                {{ isAddingSkill() ? 'Save' : 'Update' }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n</div>\r\n  <div class=\"row g-4 mb-5\">\r\n    <div class=\"col-md-12\">\r\n      <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <h5 class=\"fw-bold mb-0\">Education</h5>\r\n          <span *ngIf=\"educationSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n            Missing info\r\n          </span>\r\n        </div>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\"\r\n          title=\"Add education\"\r\n          (click)=\"addEducation()\"\r\n        >\r\n          <span class=\"fw-bold fs-5\">+</span>\r\n        </button>\r\n      </div>\r\n\r\n      <div *ngIf=\"educationList().length === 0 && !isAddingEducation() && editingEducationIndex() === null\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n        <div class=\"fw-semibold\">Missing required fields</div>\r\n        <div class=\"small\">Add at least one education.</div>\r\n      </div>\r\n\r\n      <div *ngIf=\"isAddingEducation() && tempEducation()\" class=\"p-3 bg-white border rounded shadow-sm mb-2\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">DEGREE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempEducation()?.degree\"\r\n              (ngModelChange)=\"patchTempEducation({ degree: $event })\"\r\n              name=\"newEduDegree\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degree)\">Degree / Course name is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">INSTITUTION <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempEducation()?.institution\"\r\n              (ngModelChange)=\"patchTempEducation({ institution: $event })\"\r\n              name=\"newEduInstitution\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">DEGREE / COURSE TYPE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempEducation()?.degreeType\"\r\n              (ngModelChange)=\"patchTempEducation({ degreeType: $event })\"\r\n              name=\"newEduDegreeType\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degreeType)\">Degree / Course type is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempEducation()?.startDate\"\r\n              (ngModelChange)=\"patchTempEducation({ startDate: $event })\"\r\n              name=\"newEduStartDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.startDate)\">Start date is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempEducation()?.endDate\"\r\n              (ngModelChange)=\"patchTempEducation({ endDate: $event })\"\r\n              name=\"newEduEndDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.endDate)\">End date is required</div>\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempEducation()?.startDate, tempEducation()?.endDate)\">\r\n              Start date must be less than end date\r\n            </div>\r\n          </div>\r\n        </form>\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditEducation()\">Cancel</button>\r\n          <button type=\"button\" class=\"btn btn-sm btn-success px-4\" (click)=\"saveEducation()\">Save</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let edu of educationList(); let ei = index\" class=\"p-3 bg-white border rounded shadow-sm mb-2\">\r\n        <div class=\"d-flex justify-content-between align-items-start\">\r\n          <div>\r\n            <h6 class=\"fw-bold mb-1\">{{ edu.degree }}</h6>\r\n            <p class=\"small text-primary mb-0\">{{ edu.institution }}</p>\r\n            <div *ngIf=\"(educationIssuesByIndex()[ei] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n              <div class=\"fw-semibold small\">Missing required fields</div>\r\n              <div class=\"small\">{{ (educationIssuesByIndex()[ei] || []).join(' \u2022 ') }}</div>\r\n            </div>\r\n          </div>\r\n          <div class=\"d-flex align-items-center gap-2\" *ngIf=\"editingEducationIndex() !== ei\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n              (click)=\"startEditEducation(ei)\"\r\n              title=\"Edit\"\r\n            >\r\n              <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-danger action-icon-btn\"\r\n              (click)=\"deleteEducation(ei)\"\r\n              title=\"Delete\"\r\n            >\r\n              <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"editingEducationIndex() === ei\" class=\"mt-3\">\r\n          <div *ngIf=\"(educationIssuesByIndex()[ei] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ (educationIssuesByIndex()[ei] || []).join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">DEGREE <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.degree\"\r\n                (ngModelChange)=\"patchTempEducation({ degree: $event })\"\r\n                name=\"eduDegree{{ ei }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degree)\">Degree / Course name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">INSTITUTION <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.institution\"\r\n                (ngModelChange)=\"patchTempEducation({ institution: $event })\"\r\n                name=\"eduInstitution{{ ei }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.institution)\">Institution name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">DEGREE / COURSE TYPE <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.degreeType\"\r\n                (ngModelChange)=\"patchTempEducation({ degreeType: $event })\"\r\n                name=\"eduDegreeType{{ ei }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degreeType)\">Degree / Course type is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">City</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.city\"\r\n                (ngModelChange)=\"patchTempEducation({ city: $event })\"\r\n                name=\"eduCity{{ ei }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.startDate\"\r\n                (ngModelChange)=\"patchTempEducation({ startDate: $event })\"\r\n                name=\"eduStartDate{{ ei }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.startDate)\">Start date is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.endDate\"\r\n                (ngModelChange)=\"patchTempEducation({ endDate: $event })\"\r\n                name=\"eduEndDate{{ ei }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.endDate)\">End date is required</div>\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempEducation()?.startDate, tempEducation()?.endDate)\">\r\n                Start date must be less than end date\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditEducation()\">Cancel</button>\r\n            <button class=\"btn btn-sm btn-success px-4\" (click)=\"saveEducation()\">Save</button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"educationList().length === 0\" class=\"text-muted small\">No education added.</div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"d-flex gap-2 justify-content-center mt-5\">\r\n    <button class=\"btn btn-outline-secondary px-5\" (click)=\"onBackClick()\">Back</button>\r\n    <button\r\n      class=\"btn btn-primary px-5 shadow\"\r\n      [disabled]=\"!canConfirmAndContinue()\"\r\n      [title]=\"canConfirmAndContinue() ? '' : 'Please fill all required fields in all mandatory sections.'\"\r\n      (click)=\"saveResumedetails()\"\r\n    >\r\n      Confirm & Continue\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #loading>\r\n  <div class=\"text-center p-5\">\r\n    <div class=\"spinner-border text-primary\"></div>\r\n    <p class=\"text-muted mt-2\">Loading data...</p>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showPopup\" (click)=\"closeSavePopup()\">\r\n  <div class=\"status-modal-card\" (click)=\"$event.stopPropagation()\">\r\n    <div class=\"status-modal-header\">\r\n      <h3 class=\"mb-1\">Saving Resume Details</h3>\r\n      <p class=\"text-muted mb-0\">Please wait while we process each section.</p>\r\n    </div>\r\n\r\n    <div class=\"status-modal-body\">\r\n      <div class=\"status-modal-row\" *ngFor=\"let item of statusList\">\r\n        <div class=\"status-modal-name\">{{ item.name }}</div>\r\n\r\n        <div class=\"status-modal-state pending\" *ngIf=\"item.status === 'pending'\">\r\n          <span class=\"spinner-border spinner-border-sm me-2\"></span> In progress\r\n        </div>\r\n\r\n        <div class=\"status-modal-state success\" *ngIf=\"item.status === 'success'\">\r\n          <span class=\"me-1\">\u2713</span> Success\r\n        </div>\r\n\r\n        <div class=\"status-modal-state partial\" *ngIf=\"item.status === 'partial'\">\r\n          <span class=\"me-1\">!</span> {{ item.successCount }} Success / {{ item.failCount }} Failed\r\n        </div>\r\n\r\n        <div class=\"status-modal-state error\" *ngIf=\"item.status === 'error'\">\r\n          <span class=\"me-1\">\u2716</span> {{ item.error || 'Failed' }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"status-modal-footer\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"closeSavePopup()\">Back to Preview</button>\r\n      <div class=\"d-flex justify-content-end\">\r\n        <button\r\n        [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\"\r\n          *ngIf=\"allSaveStepsSucceeded()\"\r\n          type=\"button\"\r\n          class=\"btn btn-primary\"\r\n          (click)=\"goToDashboard()\"\r\n        >\r\n          Go to Dashboard\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showBackConfirmPopup\">\r\n  <div class=\"confirm-modal-card\">\r\n    <h4 class=\"mb-2\">Leave this page?</h4>\r\n    <p class=\"text-muted mb-4\">Your data might be lost if you go back now.</p>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"stayOnPreview()\">Stay</button>\r\n      <button type=\"button\" class=\"btn btn-danger\" (click)=\"proceedBack()\">Proceed Back</button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".container{max-width:900px;margin:30px auto;font-family:Arial,sans-serif;color:#333}.preview-page-header{max-width:900px;margin:50px auto 10px;padding:0 12px}.preview-title{font-weight:600;margin:0}.preview-subtitle{margin-top:7px;font-size:16px}.section{margin-bottom:25px}.section-title{font-weight:600;display:block;margin-bottom:8px}.section-title .sub{font-weight:400;color:#777;font-size:13px}.dropdown-box{border:1px solid #ddd;border-radius:8px;padding:12px 15px;display:flex;justify-content:space-between;align-items:center}.icons{display:flex;gap:10px}.icon{cursor:pointer;font-size:14px;color:#777}.card{border:1px solid #ddd;border-radius:10px;padding:20px;background:#fff}.category{border-bottom:1px solid #eee;padding:15px 0}.category:last-child{border-bottom:none}.category-header{display:flex;justify-content:space-between;font-weight:600;margin-bottom:10px}.tags{display:flex;flex-wrap:wrap;gap:10px}.tag{background:#f2f4f7;padding:6px 12px;border-radius:6px;font-size:13px}.footer{text-align:center;margin-top:15px;color:#777;cursor:pointer}.actions{display:flex;justify-content:space-between;margin:50px 0 27px}.text-secondary{white-space:pre-line;font-size:.95rem}.extra-small{font-size:.8rem}.card{transition:transform .2s ease,box-shadow .2s ease}.card:hover{transform:translateY(-3px);box-shadow:0 .5rem 1rem #0000001a!important}.achievement-section .badge{font-size:.75rem;white-space:normal;text-align:left}.skill-tag .badge{font-weight:500;font-size:.9rem;transition:all .2s ease;cursor:default}.skill-tag .badge:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.skill-tag .btn-close{opacity:.5}.skill-tag .btn-close:hover{opacity:1}.bg-light.text-dark.border{background-color:#f8f9fa!important;border-color:#dee2e6!important}.card{transition:all .3s cubic-bezier(.25,.8,.25,1)}.card:hover{box-shadow:0 10px 20px #0000001a!important}.card:hover .bg-light{background-color:#e8f5e9!important}.position-fixed .card:hover{transform:none!important}code{background-color:#f8f9fa;padding:2px 6px;border-radius:4px}.list-group-item{transition:all .2s ease-in-out}.list-group-item:hover{background-color:#fcfcfc;transform:translate(5px);box-shadow:-5px 0 15px #0000000d}.border-dashed{border-style:dashed!important}.tool-card{transition:all .2s ease-in-out;border-radius:12px}.tool-card:hover{transform:translateY(-5px);border-color:var(--bs-primary)!important;box-shadow:0 10px 15px #0000001a!important}.tool-card:hover .icon-box{background-color:var(--bs-primary-subtle)!important}.tool-card .icon-box{width:60px;height:60px;transition:background-color .2s ease}.border-dashed{border:2px dashed #dee2e6!important}.border-dashed:hover{border-color:var(--bs-primary)!important;background-color:#fff!important}.popup{position:fixed;top:20%;right:20px;width:320px;background:#fff;border-radius:10px;padding:16px;box-shadow:0 4px 12px #0003}.status-row{display:flex;justify-content:space-between;margin:10px 0}.success{color:#2e7d32;font-weight:700}.error{color:#d32f2f}.pending{color:#f9a825}.section-flag{font-weight:600}button.btn.btn-sm.btn-outline-primary{background-color:#4077ad;border-color:#4077ad;color:#fff;border-radius:10px}button.btn.btn-sm.btn-outline-primary:hover{background-color:#356895;border-color:#356895;color:#fff}button.btn.btn-sm.btn-outline-danger{border-color:#dc3545;color:#dc3545;border-radius:10px}button.btn.btn-sm.btn-outline-danger:hover{background-color:#bb2d3b;border-color:#bb2d3b;color:#fff}button.btn.btn-sm.btn-outline-primary.rounded-circle{background-color:#4077ad;border-color:#4077ad;color:#fff;border-radius:50%!important}button.action-icon-btn{min-width:22px;width:22px;height:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:0!important;background:transparent!important;border:none!important;box-shadow:none!important;line-height:1}button.action-icon-btn.btn-outline-primary{color:#4077ad!important;border-color:#4077ad!important}button.action-icon-btn.btn-outline-danger{color:#dc3545!important}.action-icon-image{width:20px;height:20px;object-fit:contain;display:inline-block}.action-icon-image.edit-icon{filter:brightness(0) saturate(100%) invert(41%) sepia(39%) saturate(774%) hue-rotate(170deg) brightness(91%) contrast(89%)}.action-icon-image.delete-icon{filter:brightness(0) saturate(100%) invert(24%) sepia(79%) saturate(4008%) hue-rotate(344deg) brightness(91%) contrast(90%)}.modal-overlay{position:fixed;inset:0;background:#11182773;display:flex;align-items:center;justify-content:center;z-index:2500;padding:20px}.status-modal-card{width:min(760px,96vw);max-height:85vh;overflow:auto;background:#fff;border-radius:16px;box-shadow:0 20px 40px #0f172a40;border:1px solid #e5e7eb}.status-modal-header{padding:20px 24px 14px;border-bottom:1px solid #eef2f7}.status-modal-body{padding:12px 20px 20px}.status-modal-footer{padding:12px 20px 20px;border-top:1px solid #eef2f7;display:flex;justify-content:space-between;align-items:center;gap:12px}.status-modal-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 10px;border-bottom:1px solid #f1f5f9}.status-modal-row:last-child{border-bottom:0}.status-modal-name{font-weight:600;color:#1f2937}.status-modal-state{font-size:.92rem;font-weight:600}.status-modal-state.pending{color:#a16207}.status-modal-state.success{color:#166534}.status-modal-state.partial{color:#b45309}.status-modal-state.error{color:#b91c1c}.confirm-modal-card{width:min(520px,96vw);background:#fff;border-radius:14px;box-shadow:0 20px 35px #0f172a38;border:1px solid #e5e7eb;padding:24px}.year-experience-select{max-height:150px}\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: i10.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10.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: i10.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i10.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i10.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i10.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i10.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i10.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i10.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i10.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i10.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PreviewComponent, deps: [{ token: CredentialingStore }, { token: FileService }, { token: UserSkillSetService }, { token: UserToolService }, { token: UserDocumentService }, { token: UserEducationService }, { token: UserDetailService }, { token: UserExperienceService }, { token: i6.TokenService }, { token: LIBRARY_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: PreviewComponent, isStandalone: false, selector: "app-preview", inputs: { providerId: "providerId", providerName: "providerName", roleData: "roleData", cloudfrontUrl: "cloudfrontUrl" }, outputs: { backToParent: "backToParent" }, ngImport: i0, template: "\r\n<div class=\"preview-page-header\">\r\n  <h2 class=\"preview-title\">Confirm based on your resume</h2>\r\n  <p class=\"preview-subtitle\">Please confirm everything is accurate. It is based on your resume</p>\r\n</div>\r\n\r\n\r\n<div class=\"container py-4\">\r\n  <div class=\"section mb-5\">\r\n    <div *ngIf=\"details() as data; else loading\">\r\n      <div class=\"card shadow-sm border-0\" *ngIf=\"!isEditMode()\">\r\n        <div class=\"card-body p-4\">\r\n          <div class=\"d-flex justify-content-between align-items-start mb-4\">\r\n            <div>\r\n              <div class=\"d-flex align-items-center gap-2\">\r\n                <h2 class=\"fw-bold mb-1\">{{ data.firstName }} {{ data.lastName }}</h2>\r\n                <span *ngIf=\"basicSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n                  Missing info\r\n                </span>\r\n              </div>\r\n              <p class=\"text-muted\">{{ data.jobTitle }} \u2022 {{ data.yearsOfExperience }} Years Exp.</p>\r\n              <div *ngIf=\"basicIssues().length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ basicIssues().join(' \u2022 ') }}</div>\r\n              </div>\r\n            </div>\r\n            <span class=\"badge bg-primary-subtle text-primary border p-2\">ID: Verified</span>\r\n          </div>\r\n\r\n          <div class=\"row g-4\">\r\n            <div class=\"col-12 border-bottom pb-2\">\r\n              <h6 class=\"text-uppercase small fw-bold text-muted\">Summary</h6>\r\n              <p class=\"text-secondary small mb-0\">{{ data.summary }}</p>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <label class=\"small text-muted d-block\">EMAIL</label>\r\n              <span class=\"fw-bold small\">{{ data.email }}</span>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <label class=\"small text-muted d-block\">PHONE</label>\r\n              <span class=\"fw-bold small\">{{ data.phone }}</span>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <label class=\"small text-muted d-block\">LOCATION</label>\r\n              <span class=\"small\">{{ data.address }},{{ data.city }},{{ data.state }},{{ data.zipCode }}, {{\r\n                data.country }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"card-footer bg-light text-end\">\r\n          <button class=\"btn btn-sm btn-primary px-4\" (click)=\"toggleEdit()\">Edit Details</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"card shadow-sm border-0\" *ngIf=\"isEditMode()\">\r\n        <div class=\"card-header bg-white fw-bold\">Update Profile</div>\r\n        <div class=\"card-body p-4\">\r\n          <form class=\"row g-3\" #basicForm=\"ngForm\" novalidate>\r\n            <div *ngIf=\"basicIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ basicIssues().join(' \u2022 ') }}</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">First Name <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.firstName\"\r\n                name=\"fName\"\r\n                placeholder=\"First Name\"\r\n                required\r\n                #fName=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"fName.invalid && (fName.dirty || fName.touched)\">First name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Last Name <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.lastName\"\r\n                name=\"lName\"\r\n                placeholder=\"Last Name\"\r\n                required\r\n                #lName=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"lName.invalid && (lName.dirty || lName.touched)\">Last name is required</div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">Summary</label>\r\n              <textarea class=\"form-control\" rows=\"3\" [(ngModel)]=\"tempProfile.summary\" name=\"sum\"\r\n                placeholder=\"Summary\"></textarea>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Email <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"email\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.email\"\r\n                name=\"email\"\r\n                placeholder=\"Email\"\r\n                required\r\n                email\r\n                #email=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"email.invalid && (email.dirty || email.touched)\">\r\n                <span *ngIf=\"email.errors?.['required']\">Email is required</span>\r\n                <span *ngIf=\"email.errors?.['email']\">Email format is invalid</span>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Phone Number <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [ngModel]=\"tempProfile.phone\"\r\n                (ngModelChange)=\"tempProfile.phone = sanitizePhone($event)\"\r\n                name=\"phone\"\r\n                placeholder=\"Phone (10 digits)\"\r\n                required\r\n                pattern=\"^\\d{10}$\"\r\n                maxlength=\"10\"\r\n                inputmode=\"numeric\"\r\n                #phone=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"phone.invalid && (phone.dirty || phone.touched)\">\r\n                <span *ngIf=\"phone.errors?.['required']\">Phone number is required</span>\r\n                <span *ngIf=\"phone.errors?.['pattern']\">Phone number must be 10 digits</span>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-md-3\">\r\n              <label class=\"small text-muted d-block\">Home Address <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.address\"\r\n                name=\"address\"\r\n                placeholder=\"Home Address\"\r\n                required\r\n                #address=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"address.invalid && (address.dirty || address.touched)\">Home address is required</div>\r\n            </div>\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.city\"\r\n                name=\"city\"\r\n                placeholder=\"City\"\r\n                required\r\n                #city=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"city.invalid && (city.dirty || city.touched)\">City is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.state\"\r\n                name=\"state\"\r\n                placeholder=\"State\"\r\n                required\r\n                #state=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"state.invalid && (state.dirty || state.touched)\">State is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">Zip Code <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.zipCode\"\r\n                name=\"zipCode\"\r\n                placeholder=\"Zip Code\"\r\n                required\r\n                #zipCode=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"zipCode.invalid && (zipCode.dirty || zipCode.touched)\">Zip code is required</div>\r\n            </div>\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.country\"\r\n                name=\"country\"\r\n                placeholder=\"Country\"\r\n                required\r\n                #country=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"country.invalid && (country.dirty || country.touched)\">Country is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Job Title <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.jobTitle\"\r\n                name=\"jobTitle\"\r\n                placeholder=\"Job Title\"\r\n                required\r\n                #jobTitle=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"jobTitle.invalid && (jobTitle.dirty || jobTitle.touched)\">Job title is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"number\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.yearsOfExperience\"\r\n                name=\"yearsOfExperience\"\r\n                placeholder=\"Years of Experience\"\r\n                required\r\n                min=\"0\"\r\n                #yearsOfExperience=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"yearsOfExperience.invalid && (yearsOfExperience.dirty || yearsOfExperience.touched)\">\r\n                Years of experience is required\r\n              </div>\r\n            </div>\r\n\r\n\r\n          </form>\r\n        </div>\r\n        <div class=\"card-footer bg-light text-end gap-2 d-flex justify-content-end\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancel()\">Cancel</button>\r\n          <button class=\"btn btn-sm btn-success px-4\" (click)=\"save()\">Save Changes</button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <h5 class=\"fw-bold mb-0\">Work Experience</h5>\r\n        <span *ngIf=\"workSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n          Missing info\r\n        </span>\r\n      </div>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n        style=\"width: 32px; height: 32px; line-height: 1;\"\r\n        title=\"Add work experience\"\r\n        (click)=\"addJob()\"\r\n      >\r\n        <span class=\"fw-bold fs-5\">+</span>\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"experience().length === 0 && !isAddingJob()\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n      <div class=\"fw-semibold\">Missing required fields</div>\r\n      <div class=\"small\">Add at least one work experience.</div>\r\n    </div>\r\n    <div class=\"list-group list-group-flush shadow-sm rounded\">\r\n      <div *ngIf=\"isAddingJob() && tempJob()\" class=\"list-group-item p-3\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">JOB TITLE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempJob()?.jobTitle\"\r\n              (ngModelChange)=\"patchTempJob({ jobTitle: $event })\"\r\n              name=\"newJobTitle\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">COMPANY <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempJob()?.company\"\r\n              (ngModelChange)=\"patchTempJob({ company: $event })\"\r\n              name=\"newCompany\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">CITY <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempJob()?.city\"\r\n              (ngModelChange)=\"patchTempJob({ city: $event })\"\r\n              name=\"newCity\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.city)\">City is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempJob()?.startDate\"\r\n              (ngModelChange)=\"patchTempJob({ startDate: $event })\"\r\n              name=\"newStartDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.startDate)\">Start date is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [disabled]=\"tempJob()?.isCurrent\"\r\n              [ngModel]=\"tempJob()?.endDate\"\r\n              (ngModelChange)=\"patchTempJob({ endDate: $event })\"\r\n              name=\"newEndDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"!tempJob()?.isCurrent && isBlank(tempJob()?.endDate)\">End date is required</div>\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"!tempJob()?.isCurrent && isMonthRangeInvalid(tempJob()?.startDate, tempJob()?.endDate)\">\r\n              Start date must be less than end date\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-4 d-flex align-items-end\">\r\n            <div class=\"form-check\">\r\n              <input\r\n                class=\"form-check-input\"\r\n                type=\"checkbox\"\r\n                [ngModel]=\"tempJob()?.isCurrent\"\r\n                (ngModelChange)=\"setTempJobIsCurrent($event)\"\r\n                name=\"newIsCurrent\"\r\n                id=\"newIsCurrent\"\r\n              />\r\n              <label class=\"form-check-label\" for=\"newIsCurrent\">Current</label>\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">RESPONSIBILITIES (one per line)</label>\r\n            <textarea\r\n              rows=\"4\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"(tempJob()?.responsibilities || []).join('\\n')\"\r\n              (ngModelChange)=\"updateTempResponsibilities($event)\"\r\n              name=\"newResponsibilities\"\r\n            ></textarea>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n            <input\r\n              type=\"file\"\r\n              accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\"\r\n              class=\"form-control form-control-sm\"\r\n              (change)=\"onWorkExperienceFileSelected($event)\"\r\n              name=\"newWorkAttachment\"\r\n            />\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempJob()?.fileName\">\r\n              <span>{{ tempJob()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"previewSelectedFile(tempJob())\">Preview</button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n        <div class=\"card-footer bg-light text-end mt-3\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditJob(); $event.stopPropagation()\">Cancel</button>\r\n          <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingWork\" (click)=\"saveEditJob(); $event.stopPropagation()\">\r\n            <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingWork ? 'Uploading...' : 'Save' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let job of experience(); let i = index\" class=\"list-group-item p-3\">\r\n\r\n        <div class=\"d-flex justify-content-between align-items-center\">\r\n          <div class=\"d-flex align-items-center cursor-pointer flex-grow-1\" (click)=\"toggleJob(i)\">\r\n            <i class=\"bi bi-briefcase text-primary me-3 fs-4\"></i>\r\n            <div>\r\n              <h6 class=\"mb-0 fw-bold\">{{ job.jobTitle }}</h6>\r\n              <small class=\"text-muted\">\r\n                {{ job.company }} \u2022 {{ formatMonthYear(job.startDate) }} - {{ job.isCurrent ? 'Present' : formatMonthYear(job.endDate) }}\r\n              </small>\r\n              <div\r\n                *ngIf=\"editingJobIndex() !== i && (workIssuesByIndex()[i] || []).length > 0\"\r\n                class=\"alert alert-warning py-1 px-2 mt-2\"\r\n              >\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (workIssuesByIndex()[i] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"d-flex align-items-center gap-2\">\r\n            \r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n              (click)=\"startEditJob(i)\"\r\n              title=\"Edit\"\r\n            >\r\n              <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n            </button>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-danger action-icon-btn\"\r\n              (click)=\"deleteJob(i);\"\r\n              title=\"Delete\"\r\n            >\r\n              <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n            \r\n\r\n            <!-- <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-light p-0\"\r\n              style=\"width: 34px; height: 34px;\"\r\n              (click)=\"toggleJob(i)\"\r\n              title=\"Expand\"\r\n            >\r\n              <i class=\"bi cursor-pointer\" [ngClass]=\"expandedIndex() === i ? 'bi-chevron-up' : 'bi-chevron-down'\"></i>\r\n            </button> -->\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"mt-3 bg-light p-3 rounded small\" *ngIf=\"expandedIndex() === i\">\r\n          <ng-container *ngIf=\"editingJobIndex() !== i; else editJobForm\">\r\n            <ul class=\"mb-0\">\r\n              <li *ngFor=\"let res of job.responsibilities\">{{ res }}</li>\r\n            </ul>\r\n          </ng-container>\r\n\r\n          <ng-template #editJobForm>\r\n            <div *ngIf=\"(workIssuesByIndex()[i] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ (workIssuesByIndex()[i] || []).join(' \u2022 ') }}</div>\r\n            </div>\r\n            <form class=\"row g-2\">\r\n              <div class=\"col-md-6\">\r\n                <label class=\"small text-muted d-block\">JOB TITLE <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [ngModel]=\"tempJob()?.jobTitle\"\r\n                  (ngModelChange)=\"patchTempJob({ jobTitle: $event })\"\r\n                  name=\"jobTitle{{ i }}\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.jobTitle)\">Job title is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-6\">\r\n                <label class=\"small text-muted d-block\">COMPANY <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [ngModel]=\"tempJob()?.company\"\r\n                  (ngModelChange)=\"patchTempJob({ company: $event })\"\r\n                  name=\"company{{ i }}\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.company)\">Company name is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">CITY <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [ngModel]=\"tempJob()?.city\"\r\n                  (ngModelChange)=\"patchTempJob({ city: $event })\"\r\n                  name=\"city{{ i }}\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.city)\">City is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"month\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [ngModel]=\"tempJob()?.startDate\"\r\n                  (ngModelChange)=\"patchTempJob({ startDate: $event })\"\r\n                  name=\"startDate{{ i }}\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.startDate)\">Start date is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"month\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [disabled]=\"tempJob()?.isCurrent\"\r\n                  [ngModel]=\"tempJob()?.endDate\"\r\n                  (ngModelChange)=\"patchTempJob({ endDate: $event })\"\r\n                  name=\"endDate{{ i }}\"\r\n                />\r\n                <div\r\n                  class=\"small text-danger mt-1\"\r\n                  *ngIf=\"!tempJob()?.isCurrent && isBlank(tempJob()?.endDate)\"\r\n                >\r\n                  End date is required\r\n                </div>\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"!tempJob()?.isCurrent && isMonthRangeInvalid(tempJob()?.startDate, tempJob()?.endDate)\">\r\n                  Start date must be less than end date\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4 d-flex align-items-end\">\r\n                <div class=\"form-check\">\r\n                  <input\r\n                    class=\"form-check-input\"\r\n                    type=\"checkbox\"\r\n                    [ngModel]=\"tempJob()?.isCurrent\"\r\n                    (ngModelChange)=\"setTempJobIsCurrent($event)\"\r\n                    name=\"isCurrent{{ i }}\"\r\n                    id=\"isCurrent{{ i }}\"\r\n                  />\r\n                  <label class=\"form-check-label\" for=\"isCurrent{{ i }}\">Current</label>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">RESPONSIBILITIES (one per line)</label>\r\n                <textarea\r\n                  rows=\"4\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [ngModel]=\"(tempJob()?.responsibilities || []).join('\\n')\"\r\n                  (ngModelChange)=\"updateTempResponsibilities($event)\"\r\n                  name=\"responsibilities{{ i }}\"\r\n                ></textarea>\r\n              </div>\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n                <input\r\n                  type=\"file\"\r\n                  accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\"\r\n                  class=\"form-control form-control-sm\"\r\n                  (change)=\"onWorkExperienceFileSelected($event)\"\r\n                  name=\"workAttachment{{ i }}\"\r\n                />\r\n                <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempJob()?.fileName\">\r\n                  <span>{{ tempJob()?.fileName }}</span>\r\n                  <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"previewSelectedFile(tempJob())\">Preview</button>\r\n                </div>\r\n              </div>\r\n            </form>\r\n          </ng-template>\r\n        </div>\r\n\r\n        <div class=\"card-footer bg-light text-end\" *ngIf=\"editingJobIndex() === i\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditJob(); $event.stopPropagation()\">Cancel</button>\r\n         <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingWork\" (click)=\"saveEditJob(); $event.stopPropagation()\">\r\n            <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingWork ? 'Uploading...' : 'Save' }}\r\n          </button>\r\n        </div>      \r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <h5 class=\"fw-bold mb-0\">Certifications</h5>\r\n        <span *ngIf=\"certificationsSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n          Missing info\r\n        </span>\r\n      </div>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n        style=\"width: 32px; height: 32px; line-height: 1;\"\r\n        title=\"Add certification\"\r\n        (click)=\"addCertification()\"\r\n      >\r\n        <span class=\"fw-bold fs-5\">+</span>\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"certs().length === 0 && !isAddingCertification() && editingCertificationIndex() === null\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n      <div class=\"fw-semibold\">Missing required fields</div>\r\n      <div class=\"small\">Add at least one certification.</div>\r\n    </div>\r\n\r\n    <div class=\"list-group list-group-flush shadow-sm rounded border\">\r\n      <div *ngIf=\"isAddingCertification() && tempCertification()\" class=\"list-group-item py-3\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Name <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.name\"\r\n              (ngModelChange)=\"patchTempCertification({ name: $event })\"\r\n              name=\"newCertName\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempCertification()?.name)\">Certificate name is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issuing Organization</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.issuingOrganization || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ issuingOrganization: $event || null })\"\r\n              name=\"newCertOrg\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">State</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.state || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ state: $event || null })\"\r\n              name=\"newCertState\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Credential ID</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.credentialId || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ credentialId: $event || null })\"\r\n              name=\"newCertCredentialId\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issue Date</label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.issueDate || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ issueDate: $event || null })\"\r\n              name=\"newCertIssueDate\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Expiry Date</label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.expiryDate || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ expiryDate: $event || null })\"\r\n              name=\"newCertExpiryDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempCertification()?.issueDate || null, tempCertification()?.expiryDate || null)\">\r\n              Issued date must be less than expiry date\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n            <input\r\n              type=\"file\"\r\n              accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\"\r\n              class=\"form-control form-control-sm\"\r\n              (change)=\"onCertificationFileSelected($event)\"\r\n              name=\"newCertAttachment\"\r\n            />\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempCertification()?.fileName\">\r\n              <span>{{ tempCertification()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"previewSelectedFile(tempCertification())\">Preview</button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditCertification()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCertification\" (click)=\"saveCertificationEditor()\">\r\n            <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingCertification ? 'Uploading...' : 'Save' }}\r\n          </button>        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let cert of certs(); let ci = index\" class=\"list-group-item py-3\">\r\n        <ng-container *ngIf=\"editingCertificationIndex() !== ci; else editCert\">\r\n          <div class=\"d-flex justify-content-between align-items-start gap-3\">\r\n            <div>\r\n              <div class=\"fw-semibold\">{{ cert.name }}</div>\r\n              <div *ngIf=\"(certIssuesByIndex()[ci] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (certIssuesByIndex()[ci] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n              <div class=\"small text-muted\">\r\n                {{ cert.issuingOrganization || '\u2014' }}\r\n                <span *ngIf=\"cert.state\"> \u2022 {{ cert.state }}</span>\r\n              </div>\r\n              <div class=\"small text-muted\">\r\n                Issue: {{ cert.issueDate ? formatMonthYear(cert.issueDate) : '\u2014' }}\r\n                <span class=\"mx-1\">|</span>\r\n                Expiry: {{ cert.expiryDate ? formatMonthYear(cert.expiryDate) : '\u2014' }}\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n               <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n              (click)=\"startEditCertification(ci)\"\r\n              title=\"Edit\"\r\n            >\r\n              <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n            </button>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-danger action-icon-btn\"\r\n              (click)=\"deleteCertification(ci)\"\r\n              title=\"Delete\"\r\n            >\r\n              <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-template #editCert>\r\n          <div *ngIf=\"(certIssuesByIndex()[ci] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ (certIssuesByIndex()[ci] || []).join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Name <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.name\"\r\n                (ngModelChange)=\"patchTempCertification({ name: $event })\"\r\n                name=\"certName{{ ci }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempCertification()?.name)\">Certificate name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issuing Organization</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.issuingOrganization || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ issuingOrganization: $event || null })\"\r\n                name=\"certOrg{{ ci }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">State</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.state || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ state: $event || null })\"\r\n                name=\"certState{{ ci }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Credential ID</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.credentialId || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ credentialId: $event || null })\"\r\n                name=\"certCredentialId{{ ci }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issue Date</label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.issueDate || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ issueDate: $event || null })\"\r\n                name=\"certIssue{{ ci }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Expiry Date</label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.expiryDate || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ expiryDate: $event || null })\"\r\n                name=\"certExpiry{{ ci }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempCertification()?.issueDate || null, tempCertification()?.expiryDate || null)\">\r\n                Issued date must be less than expiry date\r\n              </div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n              <input\r\n                type=\"file\"\r\n                accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\"\r\n                class=\"form-control form-control-sm\"\r\n                (change)=\"onCertificationFileSelected($event)\"\r\n                name=\"certAttachment{{ ci }}\"\r\n              />\r\n              <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempCertification()?.fileName\">\r\n                <span>{{ tempCertification()?.fileName }}</span>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"previewSelectedFile(tempCertification())\">Preview</button>\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditCertification()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCertification\" (click)=\"saveCertificationEditor()\">\r\n              <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              {{ isSavingCertification ? 'Uploading...' : 'Save' }}\r\n            </button>          </div>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <h5 class=\"fw-bold mb-0\">Licenses</h5>\r\n        <span *ngIf=\"licensesSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n          Missing info\r\n        </span>\r\n      </div>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n        style=\"width: 32px; height: 32px; line-height: 1;\"\r\n        title=\"Add license\"\r\n        (click)=\"addLicense()\"\r\n      >\r\n        <span class=\"fw-bold fs-5\">+</span>\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"licenses().length === 0 && !isAddingLicense() && editingLicenseIndex() === null\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n      <div class=\"fw-semibold\">Missing required fields</div>\r\n      <div class=\"small\">Add at least one license.</div>\r\n    </div>\r\n\r\n    <div class=\"list-group list-group-flush shadow-sm rounded border\">\r\n      <div *ngIf=\"isAddingLicense() && tempLicense()\" class=\"list-group-item py-3\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Name <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.name\"\r\n              (ngModelChange)=\"patchTempLicense({ name: $event })\"\r\n              name=\"newLicName\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempLicense()?.name)\">License name is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issuing Authority</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.issuingAuthority || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ issuingAuthority: $event || null })\"\r\n              name=\"newLicAuthority\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">License Number</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.licenseNumber || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ licenseNumber: $event || null })\"\r\n              name=\"newLicNumber\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">State</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.state || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ state: $event || null })\"\r\n              name=\"newLicState\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issue Date</label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.issueDate || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ issueDate: $event || null })\"\r\n              name=\"newLicIssueDate\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Expiry Date</label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.expiryDate || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ expiryDate: $event || null })\"\r\n              name=\"newLicExpiryDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempLicense()?.issueDate || null, tempLicense()?.expiryDate || null)\">\r\n              Issued date must be less than expiry date\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">LICENSE FILE</label>\r\n            <input\r\n              type=\"file\"\r\n              accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\"\r\n              class=\"form-control form-control-sm\"\r\n              (change)=\"onLicenseFileSelected($event)\"\r\n              name=\"newLicenseAttachment\"\r\n            />\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempLicense()?.fileName\">\r\n              <span>{{ tempLicense()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"previewSelectedFile(tempLicense())\">Preview</button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditLicense()\">Cancel</button>\r\n        <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingLicense\" (click)=\"saveLicenseEditor()\">\r\n            <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingLicense ? 'Uploading...' : 'Save' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let lic of licenses(); let li = index\" class=\"list-group-item py-3\">\r\n        <ng-container *ngIf=\"editingLicenseIndex() !== li; else editLic\">\r\n          <div class=\"d-flex justify-content-between align-items-start gap-3\">\r\n            <div>\r\n              <div class=\"fw-semibold\">{{ lic.name }}</div>\r\n              <div *ngIf=\"(licenseIssuesByIndex()[li] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (licenseIssuesByIndex()[li] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n              <div class=\"small text-muted\">\r\n                {{ lic.issuingAuthority || '\u2014' }}\r\n                <span *ngIf=\"lic.state\"> \u2022 {{ lic.state }}</span>\r\n              </div>\r\n              <div class=\"small text-muted\">\r\n                Issue: {{ lic.issueDate ? formatMonthYear(lic.issueDate) : '\u2014' }}\r\n                <span class=\"mx-1\">|</span>\r\n                Expiry: {{ lic.expiryDate ? formatMonthYear(lic.expiryDate) : '\u2014' }}\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n\r\n              <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n              (click)=\"startEditLicense(li)\"\r\n              title=\"Edit\"\r\n            >\r\n              <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n            </button>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-danger action-icon-btn\"\r\n              (click)=\"deleteLicense(li)\"\r\n              title=\"Delete\"\r\n            >\r\n              <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-template #editLic>\r\n          <div *ngIf=\"(licenseIssuesByIndex()[li] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ (licenseIssuesByIndex()[li] || []).join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Name <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.name\"\r\n                (ngModelChange)=\"patchTempLicense({ name: $event })\"\r\n                name=\"licName{{ li }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempLicense()?.name)\">License name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issuing Authority</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.issuingAuthority || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ issuingAuthority: $event || null })\"\r\n                name=\"licAuthority{{ li }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">License Number</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.licenseNumber || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ licenseNumber: $event || null })\"\r\n                name=\"licNumber{{ li }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">State</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.state || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ state: $event || null })\"\r\n                name=\"licState{{ li }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issue Date</label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.issueDate || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ issueDate: $event || null })\"\r\n                name=\"licIssue{{ li }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Expiry Date</label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.expiryDate || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ expiryDate: $event || null })\"\r\n                name=\"licExpiry{{ li }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempLicense()?.issueDate || null, tempLicense()?.expiryDate || null)\">\r\n                Issued date must be less than expiry date\r\n              </div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">LICENSE FILE</label>\r\n              <input\r\n                type=\"file\"\r\n                accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\"\r\n                class=\"form-control form-control-sm\"\r\n                (change)=\"onLicenseFileSelected($event)\"\r\n                name=\"licenseAttachment{{ li }}\"\r\n              />\r\n              <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempLicense()?.fileName\">\r\n                <span>{{ tempLicense()?.fileName }}</span>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"previewSelectedFile(tempLicense())\">Preview</button>\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditLicense()\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingLicense\" (click)=\"saveLicenseEditor()\">\r\n              <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              {{ isSavingLicense ? 'Uploading...' : 'Save' }}\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <h5 class=\"fw-bold mb-0\">Tools</h5>\r\n        <span *ngIf=\"toolsSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n          Missing info\r\n        </span>\r\n      </div>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n        style=\"width: 32px; height: 32px; line-height: 1;\"\r\n        title=\"Add tool\"\r\n        (click)=\"addTool()\"\r\n      >\r\n        <span class=\"fw-bold fs-5\">+</span>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"d-flex flex-wrap gap-2 p-3 bg-white border rounded shadow-sm\">\r\n      <div *ngFor=\"let tool of tools(); let ti = index\" class=\"d-flex align-items-center gap-2\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-light border rounded-pill d-inline-flex align-items-center gap-2 px-3 py-2\"\r\n          (click)=\"openToolEditor(ti)\"\r\n          title=\"Edit\"\r\n        >\r\n          <span class=\"fw-normal text-dark\">{{ tool }}</span>\r\n            <span\r\n              *ngIf=\"(toolIssuesByIndex()[ti] || []).length > 0\"\r\n              class=\"badge bg-warning-subtle text-warning border ms-1\"\r\n            >\r\n              Missing info\r\n            </span>\r\n          <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-sm btn-outline-danger rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\"\r\n          title=\"Delete tool\"\r\n          (click)=\"deleteTool(ti)\"\r\n        >\r\n          <span class=\"fw-bold\">\u00D7</span>\r\n        </button>\r\n      </div>\r\n\r\n      <span *ngIf=\"tools().length === 0\" class=\"text-muted small\">No tools added.</span>\r\n    </div>\r\n\r\n    <!-- Tool edit panel (overlay) -->\r\n    <div\r\n      *ngIf=\"isToolEditorOpen()\"\r\n      class=\"position-fixed top-0 start-0 w-100 h-100\"\r\n      style=\"background: rgba(0,0,0,0.35); z-index: 2000;\"\r\n      (click)=\"closeToolEditor()\"\r\n    >\r\n      <div class=\"container h-100 d-flex align-items-start justify-content-center pt-4\" (click)=\"$event.stopPropagation()\">\r\n        <div class=\"card shadow border-0 w-100\" style=\"max-width: 900px;\">\r\n          <div class=\"card-header bg-white d-flex align-items-center gap-3\">\r\n            <button type=\"button\" class=\"btn btn-link p-0 text-decoration-none\" (click)=\"closeToolEditor()\">\r\n              <i class=\"bi bi-arrow-left fs-5\"></i>\r\n            </button>\r\n            <div class=\"fw-bold\">{{ isAddingTool() ? 'Add Tool' : ('Edit ' + (toolForm()?.name || '') + ' Tool') }}</div>\r\n          </div>\r\n          <div class=\"card-body p-4\">\r\n            <div *ngIf=\"toolFormIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ toolFormIssues().join(' \u2022 ') }}</div>\r\n            </div>\r\n            <div class=\"row g-3\">\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Tool Name <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control\"\r\n                  [ngModel]=\"toolForm()?.name\"\r\n                  (ngModelChange)=\"patchToolForm({ name: $event })\"\r\n                  name=\"toolName\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(toolForm()?.name)\">Tool name is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Service Provider</label>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control\"\r\n                  [ngModel]=\"toolForm()?.providerName\"\r\n                  (ngModelChange)=\"patchToolForm({ providerName: $event })\"\r\n                  name=\"toolProvider\"\r\n                  placeholder=\"Service Provider\"\r\n                />\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span class=\"text-danger\">*</span></label>\r\n                <div class=\"d-flex align-items-center gap-2\">\r\n                  <button\r\n                    *ngFor=\"let s of [1,2,3,4,5]\"\r\n                    type=\"button\"\r\n                    class=\"btn btn-link p-0 text-decoration-none\"\r\n                    (click)=\"setTempToolStars(s)\"\r\n                    [attr.aria-label]=\"'Set rating ' + s\"\r\n                  >\r\n                    <span [class]=\"(toolForm()?.stars || 0) >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n                      {{ (toolForm()?.stars || 0) >= s ? '\u2605' : '\u2606' }}\r\n                    </span>\r\n                  </button>\r\n                  <span class=\"small text-muted\">{{ toolForm()?.stars || 0 }}/5</span>\r\n                </div>\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"(toolForm()?.stars || 0) <= 0\">Star rating is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"number\"\r\n                  class=\"form-control\"\r\n                  [ngModel]=\"toolForm()?.year\"\r\n                  (ngModelChange)=\"patchToolForm({ year: $event === '' ? null : +$event })\"\r\n                  name=\"toolYear\"\r\n                  min=\"1\"\r\n                  max=\"30\"\r\n                  placeholder=\"Years of Experience\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"toolForm()?.year === null || toolForm()?.year === undefined\">Years of experience is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n                <div class=\"form-check form-switch mt-2\">\r\n                  <input\r\n                    class=\"form-check-input\"\r\n                    type=\"checkbox\"\r\n                    [ngModel]=\"toolForm()?.profileVisibility\"\r\n                    (ngModelChange)=\"patchToolForm({ profileVisibility: $event })\"\r\n                    name=\"toolVisible\"\r\n                    id=\"toolVisible\"\r\n                  />\r\n                  <label class=\"form-check-label\" for=\"toolVisible\">Visible</label>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Comment</label>\r\n                <textarea\r\n                  rows=\"4\"\r\n                  class=\"form-control\"\r\n                  [ngModel]=\"toolForm()?.notes\"\r\n                  (ngModelChange)=\"patchToolForm({ notes: $event })\"\r\n                  name=\"toolNotes\"\r\n                  placeholder=\"Comment your tool here...\"\r\n                ></textarea>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"card-footer bg-white d-flex justify-content-end gap-2\">\r\n            <button\r\n              *ngIf=\"!isAddingTool() && editingToolIndex() !== null\"\r\n              type=\"button\"\r\n              class=\"btn btn-link text-danger me-auto\"\r\n              (click)=\"deleteTool(editingToolIndex()!)\"\r\n            >\r\n              Delete\r\n            </button>\r\n            <button type=\"button\" class=\"btn btn-link text-secondary\" (click)=\"closeToolEditor()\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary px-4\" (click)=\"saveToolEditor()\">\r\n              {{ isAddingTool() ? 'Save' : 'Update' }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"row g-4 mb-5\">\r\n    <div class=\"col-md-12\">\r\n      <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <h5 class=\"fw-bold mb-0\">Skills</h5>\r\n          <span *ngIf=\"skillsSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n            Missing info\r\n          </span>\r\n        </div>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\"\r\n          title=\"Add skill\"\r\n          (click)=\"addSkill()\"\r\n        >\r\n          <span class=\"fw-bold fs-5\">+</span>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"d-flex flex-wrap gap-2 p-3 bg-white border rounded shadow-sm\">\r\n        <div *ngFor=\"let skill of skills(); let si = index\" class=\"d-flex align-items-center gap-2\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn btn-light border rounded-pill d-inline-flex align-items-center gap-2 px-3 py-2\"\r\n            (click)=\"openSkillEditor(si)\"\r\n            title=\"Edit\"\r\n          >\r\n            <span class=\"fw-normal text-dark\">{{ skill }}</span>\r\n            <span\r\n              *ngIf=\"(skillIssuesByIndex()[si] || []).length > 0\"\r\n              class=\"badge bg-warning-subtle text-warning border ms-1\"\r\n            >\r\n              Missing info\r\n            </span>\r\n            <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n          </button>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn btn-sm btn-outline-danger rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n            style=\"width: 32px; height: 32px; line-height: 1;\"\r\n            title=\"Delete skill\"\r\n            (click)=\"deleteSkill(si); $event.stopPropagation()\"\r\n          >\r\n            <span class=\"fw-bold\">\u00D7</span>\r\n          </button>\r\n        </div>\r\n\r\n        <span *ngIf=\"skills().length === 0\" class=\"text-muted small\">No skills added.</span>\r\n      </div>\r\n\r\n      <!-- Skill edit panel (overlay) -->\r\n      <div\r\n        *ngIf=\"isSkillEditorOpen()\"\r\n        class=\"position-fixed top-0 start-0 w-100 h-100\"\r\n        style=\"background: rgba(0,0,0,0.35); z-index: 2000;\"\r\n        (click)=\"closeSkillEditor()\"\r\n      >\r\n        <div class=\"container h-100 d-flex align-items-start justify-content-center pt-4\" (click)=\"$event.stopPropagation()\">\r\n          <div class=\"card shadow border-0 w-100\" style=\"max-width: 900px;\">\r\n            <div class=\"card-header bg-white d-flex align-items-center gap-3\">\r\n              <button type=\"button\" class=\"btn btn-link p-0 text-decoration-none\" (click)=\"closeSkillEditor()\">\r\n                <i class=\"bi bi-arrow-left fs-5\"></i>\r\n              </button>\r\n              <div class=\"fw-bold\">{{ isAddingSkill() ? 'Add Skill' : ('Edit ' + (skillForm()?.name || '') + ' Skill') }}</div>\r\n            </div>\r\n            <div class=\"card-body p-4\">\r\n              <div *ngIf=\"skillFormIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n                <div class=\"fw-semibold\">Missing required fields</div>\r\n                <div class=\"small\">{{ skillFormIssues().join(' \u2022 ') }}</div>\r\n              </div>\r\n              <div class=\"row g-3\">\r\n                <div class=\"col-12\">\r\n                  <label class=\"small text-muted d-block\">Skills Name <span class=\"text-danger\">*</span></label>\r\n                  <input\r\n                    type=\"text\"\r\n                    class=\"form-control\"\r\n                    [ngModel]=\"skillForm()?.name\"\r\n                    (ngModelChange)=\"patchSkillForm({ name: $event })\"\r\n                    name=\"skillName\"\r\n                  />\r\n                  <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(skillForm()?.name)\">Skillset name is required</div>\r\n                </div>\r\n\r\n                <div class=\"col-12\">\r\n                  <label class=\"small text-muted d-block\">Service Provider</label>\r\n                  <input\r\n                    type=\"text\"\r\n                    class=\"form-control\"\r\n                    [ngModel]=\"skillForm()?.providerName\"\r\n                    (ngModelChange)=\"patchSkillForm({ providerName: $event })\"\r\n                    name=\"skillProvider\"\r\n                    placeholder=\"Service Provider\"\r\n                  />\r\n                </div>\r\n\r\n                <div class=\"col-md-4\">\r\n                  <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span class=\"text-danger\">*</span></label>\r\n                  <div class=\"d-flex align-items-center gap-2\">\r\n                    <button\r\n                      *ngFor=\"let s of [1,2,3,4,5]\"\r\n                      type=\"button\"\r\n                      class=\"btn btn-link p-0 text-decoration-none\"\r\n                      (click)=\"setTempSkillStars(s)\"\r\n                      [attr.aria-label]=\"'Set rating ' + s\"\r\n                    >\r\n                      <span [class]=\"(skillForm()?.stars || 0) >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n                        {{ (skillForm()?.stars || 0) >= s ? '\u2605' : '\u2606' }}\r\n                      </span>\r\n                    </button>\r\n                    <span class=\"small text-muted\">{{ skillForm()?.stars || 0 }}/5</span>\r\n                  </div>\r\n                  <div class=\"small text-danger mt-1\" *ngIf=\"(skillForm()?.stars || 0) <= 0\">Star rating is required</div>\r\n                </div>\r\n\r\n                <div class=\"col-md-4\">\r\n                  <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n                  <input\r\n                    type=\"number\"\r\n                    class=\"form-control\"\r\n                    [ngModel]=\"skillForm()?.year\"\r\n                    (ngModelChange)=\"patchSkillForm({ year: $event === '' ? null : +$event })\"\r\n                    name=\"skillYear\"\r\n                    min=\"1\"\r\n                    max=\"30\"\r\n                    placeholder=\"Years of Experience\"\r\n                  />\r\n                  <div class=\"small text-danger mt-1\" *ngIf=\"skillForm()?.year === null || skillForm()?.year === undefined\">Years of experience is required</div>\r\n                </div>\r\n\r\n                <div class=\"col-md-4\">\r\n                  <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n                  <div class=\"form-check form-switch mt-2\">\r\n                    <input\r\n                      class=\"form-check-input\"\r\n                      type=\"checkbox\"\r\n                      [ngModel]=\"skillForm()?.profileVisibility\"\r\n                      (ngModelChange)=\"patchSkillForm({ profileVisibility: $event })\"\r\n                      name=\"skillVisible\"\r\n                      id=\"skillVisible\"\r\n                    />\r\n                    <label class=\"form-check-label\" for=\"skillVisible\">Visible</label>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"col-12\">\r\n                  <label class=\"small text-muted d-block\">Comment</label>\r\n                  <textarea\r\n                    rows=\"4\"\r\n                    class=\"form-control\"\r\n                    [ngModel]=\"skillForm()?.notes\"\r\n                    (ngModelChange)=\"patchSkillForm({ notes: $event })\"\r\n                    name=\"skillNotes\"\r\n                    placeholder=\"Comment your skill here...\"\r\n                  ></textarea>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"card-footer bg-white d-flex justify-content-end gap-2\">\r\n              <button\r\n                *ngIf=\"!isAddingSkill() && editingSkillIndex() !== null\"\r\n                type=\"button\"\r\n                class=\"btn btn-link text-danger me-auto\"\r\n                (click)=\"deleteSkill(editingSkillIndex()!)\"\r\n              >\r\n                Delete\r\n              </button>\r\n              <button type=\"button\" class=\"btn btn-link text-secondary\" (click)=\"closeSkillEditor()\">Cancel</button>\r\n              <button type=\"button\" class=\"btn btn-primary px-4\" (click)=\"saveSkillEditor()\">\r\n                {{ isAddingSkill() ? 'Save' : 'Update' }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n</div>\r\n  <div class=\"row g-4 mb-5\">\r\n    <div class=\"col-md-12\">\r\n      <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <h5 class=\"fw-bold mb-0\">Education</h5>\r\n          <span *ngIf=\"educationSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n            Missing info\r\n          </span>\r\n        </div>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\"\r\n          title=\"Add education\"\r\n          (click)=\"addEducation()\"\r\n        >\r\n          <span class=\"fw-bold fs-5\">+</span>\r\n        </button>\r\n      </div>\r\n\r\n      <div *ngIf=\"educationList().length === 0 && !isAddingEducation() && editingEducationIndex() === null\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n        <div class=\"fw-semibold\">Missing required fields</div>\r\n        <div class=\"small\">Add at least one education.</div>\r\n      </div>\r\n\r\n      <div *ngIf=\"isAddingEducation() && tempEducation()\" class=\"p-3 bg-white border rounded shadow-sm mb-2\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">DEGREE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempEducation()?.degree\"\r\n              (ngModelChange)=\"patchTempEducation({ degree: $event })\"\r\n              name=\"newEduDegree\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degree)\">Degree / Course name is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">INSTITUTION <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempEducation()?.institution\"\r\n              (ngModelChange)=\"patchTempEducation({ institution: $event })\"\r\n              name=\"newEduInstitution\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">DEGREE / COURSE TYPE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempEducation()?.degreeType\"\r\n              (ngModelChange)=\"patchTempEducation({ degreeType: $event })\"\r\n              name=\"newEduDegreeType\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degreeType)\">Degree / Course type is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempEducation()?.startDate\"\r\n              (ngModelChange)=\"patchTempEducation({ startDate: $event })\"\r\n              name=\"newEduStartDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.startDate)\">Start date is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempEducation()?.endDate\"\r\n              (ngModelChange)=\"patchTempEducation({ endDate: $event })\"\r\n              name=\"newEduEndDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.endDate)\">End date is required</div>\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempEducation()?.startDate, tempEducation()?.endDate)\">\r\n              Start date must be less than end date\r\n            </div>\r\n          </div>\r\n        </form>\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditEducation()\">Cancel</button>\r\n          <button type=\"button\" class=\"btn btn-sm btn-success px-4\" (click)=\"saveEducation()\">Save</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let edu of educationList(); let ei = index\" class=\"p-3 bg-white border rounded shadow-sm mb-2\">\r\n        <div class=\"d-flex justify-content-between align-items-start\">\r\n          <div>\r\n            <h6 class=\"fw-bold mb-1\">{{ edu.degree }}</h6>\r\n            <p class=\"small text-primary mb-0\">{{ edu.institution }}</p>\r\n            <div *ngIf=\"(educationIssuesByIndex()[ei] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n              <div class=\"fw-semibold small\">Missing required fields</div>\r\n              <div class=\"small\">{{ (educationIssuesByIndex()[ei] || []).join(' \u2022 ') }}</div>\r\n            </div>\r\n          </div>\r\n          <div class=\"d-flex align-items-center gap-2\" *ngIf=\"editingEducationIndex() !== ei\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n              (click)=\"startEditEducation(ei)\"\r\n              title=\"Edit\"\r\n            >\r\n              <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-danger action-icon-btn\"\r\n              (click)=\"deleteEducation(ei)\"\r\n              title=\"Delete\"\r\n            >\r\n              <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"editingEducationIndex() === ei\" class=\"mt-3\">\r\n          <div *ngIf=\"(educationIssuesByIndex()[ei] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ (educationIssuesByIndex()[ei] || []).join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">DEGREE <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.degree\"\r\n                (ngModelChange)=\"patchTempEducation({ degree: $event })\"\r\n                name=\"eduDegree{{ ei }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degree)\">Degree / Course name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">INSTITUTION <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.institution\"\r\n                (ngModelChange)=\"patchTempEducation({ institution: $event })\"\r\n                name=\"eduInstitution{{ ei }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.institution)\">Institution name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">DEGREE / COURSE TYPE <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.degreeType\"\r\n                (ngModelChange)=\"patchTempEducation({ degreeType: $event })\"\r\n                name=\"eduDegreeType{{ ei }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degreeType)\">Degree / Course type is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">City</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.city\"\r\n                (ngModelChange)=\"patchTempEducation({ city: $event })\"\r\n                name=\"eduCity{{ ei }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.startDate\"\r\n                (ngModelChange)=\"patchTempEducation({ startDate: $event })\"\r\n                name=\"eduStartDate{{ ei }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.startDate)\">Start date is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.endDate\"\r\n                (ngModelChange)=\"patchTempEducation({ endDate: $event })\"\r\n                name=\"eduEndDate{{ ei }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.endDate)\">End date is required</div>\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempEducation()?.startDate, tempEducation()?.endDate)\">\r\n                Start date must be less than end date\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditEducation()\">Cancel</button>\r\n            <button class=\"btn btn-sm btn-success px-4\" (click)=\"saveEducation()\">Save</button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"educationList().length === 0\" class=\"text-muted small\">No education added.</div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"d-flex gap-2 justify-content-center mt-5\">\r\n    <button class=\"btn btn-outline-secondary px-5\" (click)=\"onBackClick()\">Back</button>\r\n    <button\r\n      class=\"btn btn-primary px-5 shadow\"\r\n      [disabled]=\"!canConfirmAndContinue()\"\r\n      [title]=\"canConfirmAndContinue() ? '' : 'Please fill all required fields in all mandatory sections.'\"\r\n      (click)=\"saveResumedetails()\"\r\n    >\r\n      Confirm All & Continue\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #loading>\r\n  <div class=\"text-center p-5\">\r\n    <div class=\"spinner-border text-primary\"></div>\r\n    <p class=\"text-muted mt-2\">Loading data...</p>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showPopup\" >\r\n  <div class=\"status-modal-card\" (click)=\"$event.stopPropagation()\">\r\n    <div class=\"status-modal-header\">\r\n      <h3 class=\"mb-1\">Saving Resume Details</h3>\r\n      <p class=\"text-muted mb-0\">Please wait while we process each section.</p>\r\n    </div>\r\n\r\n    <div class=\"status-modal-body\">\r\n      <div class=\"status-modal-row\" *ngFor=\"let item of statusList\">\r\n        <div class=\"status-modal-name\">{{ item.name }}</div>\r\n\r\n        <div class=\"status-modal-state pending\" *ngIf=\"item.status === 'pending'\">\r\n          <span class=\"spinner-border spinner-border-sm me-2\"></span> In progress\r\n        </div>\r\n\r\n        <div class=\"status-modal-state success\" *ngIf=\"item.status === 'success'\">\r\n          <span class=\"me-1\">\u2713</span> Saved\r\n        </div>\r\n\r\n        <div class=\"status-modal-state partial\" *ngIf=\"item.status === 'partial'\">\r\n          <span class=\"me-1\">!</span> {{ item.successCount }} Success / {{ item.failCount }} Failed\r\n        </div>\r\n\r\n        <div class=\"status-modal-state error\" *ngIf=\"item.status === 'error'\">\r\n          <span class=\"me-1\">\u2716</span> {{ item.error || 'Failed' }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"status-modal-footer\">\r\n      <!-- <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"closeSavePopup()\">Back to Preview</button> -->\r\n      <div class=\"d-flex justify-content-end\">\r\n        <button\r\n        [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\"\r\n          *ngIf=\"allSaveStepsSucceeded()\"\r\n          type=\"button\"\r\n          class=\"btn btn-primary\"\r\n          (click)=\"goToDashboard()\"\r\n        >\r\n          Go to Dashboard\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showBackConfirmPopup\">\r\n  <div class=\"confirm-modal-card\">\r\n    <h4 class=\"mb-2\">Leave this page?</h4>\r\n    <p class=\"text-muted mb-4\">Your data might be lost if you go back now.</p>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"stayOnPreview()\">Stay</button>\r\n      <button type=\"button\" class=\"btn btn-danger\" (click)=\"proceedBack()\">Proceed Back</button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".container{max-width:900px;margin:30px auto;font-family:Arial,sans-serif;color:#333}.preview-page-header{max-width:900px;margin:50px auto 10px;padding:0 12px}.preview-title{font-weight:600;margin:0}.preview-subtitle{margin-top:7px;font-size:16px}.section{margin-bottom:25px}.section-title{font-weight:600;display:block;margin-bottom:8px}.section-title .sub{font-weight:400;color:#777;font-size:13px}.dropdown-box{border:1px solid #ddd;border-radius:8px;padding:12px 15px;display:flex;justify-content:space-between;align-items:center}.icons{display:flex;gap:10px}.icon{cursor:pointer;font-size:14px;color:#777}.card{border:1px solid #ddd;border-radius:10px;padding:20px;background:#fff}.category{border-bottom:1px solid #eee;padding:15px 0}.category:last-child{border-bottom:none}.category-header{display:flex;justify-content:space-between;font-weight:600;margin-bottom:10px}.tags{display:flex;flex-wrap:wrap;gap:10px}.tag{background:#f2f4f7;padding:6px 12px;border-radius:6px;font-size:13px}.footer{text-align:center;margin-top:15px;color:#777;cursor:pointer}.actions{display:flex;justify-content:space-between;margin:50px 0 27px}.text-secondary{white-space:pre-line;font-size:.95rem}.extra-small{font-size:.8rem}.card{transition:transform .2s ease,box-shadow .2s ease}.card:hover{transform:translateY(-3px);box-shadow:0 .5rem 1rem #0000001a!important}.achievement-section .badge{font-size:.75rem;white-space:normal;text-align:left}.skill-tag .badge{font-weight:500;font-size:.9rem;transition:all .2s ease;cursor:default}.skill-tag .badge:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.skill-tag .btn-close{opacity:.5}.skill-tag .btn-close:hover{opacity:1}.bg-light.text-dark.border{background-color:#f8f9fa!important;border-color:#dee2e6!important}.card{transition:all .3s cubic-bezier(.25,.8,.25,1)}.card:hover{box-shadow:0 10px 20px #0000001a!important}.card:hover .bg-light{background-color:#e8f5e9!important}.position-fixed .card:hover{transform:none!important}code{background-color:#f8f9fa;padding:2px 6px;border-radius:4px}.list-group-item{transition:all .2s ease-in-out}.list-group-item:hover{background-color:#fcfcfc;transform:translate(5px);box-shadow:-5px 0 15px #0000000d}.border-dashed{border-style:dashed!important}.tool-card{transition:all .2s ease-in-out;border-radius:12px}.tool-card:hover{transform:translateY(-5px);border-color:var(--bs-primary)!important;box-shadow:0 10px 15px #0000001a!important}.tool-card:hover .icon-box{background-color:var(--bs-primary-subtle)!important}.tool-card .icon-box{width:60px;height:60px;transition:background-color .2s ease}.border-dashed{border:2px dashed #dee2e6!important}.border-dashed:hover{border-color:var(--bs-primary)!important;background-color:#fff!important}.popup{position:fixed;top:20%;right:20px;width:320px;background:#fff;border-radius:10px;padding:16px;box-shadow:0 4px 12px #0003}.status-row{display:flex;justify-content:space-between;margin:10px 0}.success{color:#2e7d32;font-weight:700}.error{color:#d32f2f}.pending{color:#f9a825}.section-flag{font-weight:600}button.btn.btn-sm.btn-outline-primary{background-color:#4077ad;border-color:#4077ad;color:#fff;border-radius:10px}button.btn.btn-sm.btn-outline-primary:hover{background-color:#356895;border-color:#356895;color:#fff}button.btn.btn-sm.btn-outline-danger{border-color:#dc3545;color:#dc3545;border-radius:10px}button.btn.btn-sm.btn-outline-danger:hover{background-color:#bb2d3b;border-color:#bb2d3b;color:#fff}button.btn.btn-sm.btn-outline-primary.rounded-circle{background-color:#4077ad;border-color:#4077ad;color:#fff;border-radius:50%!important}button.action-icon-btn{min-width:22px;width:22px;height:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:0!important;background:transparent!important;border:none!important;box-shadow:none!important;line-height:1}button.action-icon-btn.btn-outline-primary{color:#4077ad!important;border-color:#4077ad!important}button.action-icon-btn.btn-outline-danger{color:#dc3545!important}.action-icon-image{width:20px;height:20px;object-fit:contain;display:inline-block}.action-icon-image.edit-icon{filter:brightness(0) saturate(100%) invert(41%) sepia(39%) saturate(774%) hue-rotate(170deg) brightness(91%) contrast(89%)}.action-icon-image.delete-icon{filter:brightness(0) saturate(100%) invert(24%) sepia(79%) saturate(4008%) hue-rotate(344deg) brightness(91%) contrast(90%)}.modal-overlay{position:fixed;inset:0;background:#11182773;display:flex;align-items:center;justify-content:center;z-index:2500;padding:20px}.status-modal-card{width:min(760px,96vw);max-height:85vh;overflow:auto;background:#fff;border-radius:16px;box-shadow:0 20px 40px #0f172a40;border:1px solid #e5e7eb}.status-modal-header{padding:20px 24px 14px;border-bottom:1px solid #eef2f7}.status-modal-body{padding:12px 20px 20px}.status-modal-footer{padding:12px 20px 20px;border-top:1px solid #eef2f7;display:flex;justify-content:end;align-items:center;gap:12px}.status-modal-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 10px;border-bottom:1px solid #f1f5f9}.status-modal-row:last-child{border-bottom:0}.status-modal-name{font-weight:600;color:#1f2937}.status-modal-state{font-size:.92rem;font-weight:600}.status-modal-state.pending{color:#a16207}.status-modal-state.success{color:#166534}.status-modal-state.partial{color:#b45309}.status-modal-state.error{color:#b91c1c}.confirm-modal-card{width:min(520px,96vw);background:#fff;border-radius:14px;box-shadow:0 20px 35px #0f172a38;border:1px solid #e5e7eb;padding:24px}.year-experience-select{max-height:150px}\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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i8.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i8.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-preview', standalone: false, template: "\r\n<div class=\"preview-page-header\">\r\n  <h2 class=\"preview-title\">Confirm based on your resume</h2>\r\n  <p class=\"preview-subtitle\">Please confirm everything is accurate. It is based on your resume</p>\r\n</div>\r\n\r\n\r\n<div class=\"container py-4\">\r\n  <div class=\"section mb-5\">\r\n    <div *ngIf=\"details() as data; else loading\">\r\n      <div class=\"card shadow-sm border-0\" *ngIf=\"!isEditMode()\">\r\n        <div class=\"card-body p-4\">\r\n          <div class=\"d-flex justify-content-between align-items-start mb-4\">\r\n            <div>\r\n              <div class=\"d-flex align-items-center gap-2\">\r\n                <h2 class=\"fw-bold mb-1\">{{ data.firstName }} {{ data.lastName }}</h2>\r\n                <span *ngIf=\"basicSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n                  Missing info\r\n                </span>\r\n              </div>\r\n              <p class=\"text-muted\">{{ data.jobTitle }} \u2022 {{ data.yearsOfExperience }} Years Exp.</p>\r\n              <div *ngIf=\"basicIssues().length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ basicIssues().join(' \u2022 ') }}</div>\r\n              </div>\r\n            </div>\r\n            <span class=\"badge bg-primary-subtle text-primary border p-2\">ID: Verified</span>\r\n          </div>\r\n\r\n          <div class=\"row g-4\">\r\n            <div class=\"col-12 border-bottom pb-2\">\r\n              <h6 class=\"text-uppercase small fw-bold text-muted\">Summary</h6>\r\n              <p class=\"text-secondary small mb-0\">{{ data.summary }}</p>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <label class=\"small text-muted d-block\">EMAIL</label>\r\n              <span class=\"fw-bold small\">{{ data.email }}</span>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <label class=\"small text-muted d-block\">PHONE</label>\r\n              <span class=\"fw-bold small\">{{ data.phone }}</span>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <label class=\"small text-muted d-block\">LOCATION</label>\r\n              <span class=\"small\">{{ data.address }},{{ data.city }},{{ data.state }},{{ data.zipCode }}, {{\r\n                data.country }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"card-footer bg-light text-end\">\r\n          <button class=\"btn btn-sm btn-primary px-4\" (click)=\"toggleEdit()\">Edit Details</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"card shadow-sm border-0\" *ngIf=\"isEditMode()\">\r\n        <div class=\"card-header bg-white fw-bold\">Update Profile</div>\r\n        <div class=\"card-body p-4\">\r\n          <form class=\"row g-3\" #basicForm=\"ngForm\" novalidate>\r\n            <div *ngIf=\"basicIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ basicIssues().join(' \u2022 ') }}</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">First Name <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.firstName\"\r\n                name=\"fName\"\r\n                placeholder=\"First Name\"\r\n                required\r\n                #fName=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"fName.invalid && (fName.dirty || fName.touched)\">First name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Last Name <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.lastName\"\r\n                name=\"lName\"\r\n                placeholder=\"Last Name\"\r\n                required\r\n                #lName=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"lName.invalid && (lName.dirty || lName.touched)\">Last name is required</div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">Summary</label>\r\n              <textarea class=\"form-control\" rows=\"3\" [(ngModel)]=\"tempProfile.summary\" name=\"sum\"\r\n                placeholder=\"Summary\"></textarea>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Email <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"email\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.email\"\r\n                name=\"email\"\r\n                placeholder=\"Email\"\r\n                required\r\n                email\r\n                #email=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"email.invalid && (email.dirty || email.touched)\">\r\n                <span *ngIf=\"email.errors?.['required']\">Email is required</span>\r\n                <span *ngIf=\"email.errors?.['email']\">Email format is invalid</span>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Phone Number <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [ngModel]=\"tempProfile.phone\"\r\n                (ngModelChange)=\"tempProfile.phone = sanitizePhone($event)\"\r\n                name=\"phone\"\r\n                placeholder=\"Phone (10 digits)\"\r\n                required\r\n                pattern=\"^\\d{10}$\"\r\n                maxlength=\"10\"\r\n                inputmode=\"numeric\"\r\n                #phone=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"phone.invalid && (phone.dirty || phone.touched)\">\r\n                <span *ngIf=\"phone.errors?.['required']\">Phone number is required</span>\r\n                <span *ngIf=\"phone.errors?.['pattern']\">Phone number must be 10 digits</span>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-md-3\">\r\n              <label class=\"small text-muted d-block\">Home Address <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.address\"\r\n                name=\"address\"\r\n                placeholder=\"Home Address\"\r\n                required\r\n                #address=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"address.invalid && (address.dirty || address.touched)\">Home address is required</div>\r\n            </div>\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.city\"\r\n                name=\"city\"\r\n                placeholder=\"City\"\r\n                required\r\n                #city=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"city.invalid && (city.dirty || city.touched)\">City is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.state\"\r\n                name=\"state\"\r\n                placeholder=\"State\"\r\n                required\r\n                #state=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"state.invalid && (state.dirty || state.touched)\">State is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">Zip Code <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.zipCode\"\r\n                name=\"zipCode\"\r\n                placeholder=\"Zip Code\"\r\n                required\r\n                #zipCode=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"zipCode.invalid && (zipCode.dirty || zipCode.touched)\">Zip code is required</div>\r\n            </div>\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.country\"\r\n                name=\"country\"\r\n                placeholder=\"Country\"\r\n                required\r\n                #country=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"country.invalid && (country.dirty || country.touched)\">Country is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Job Title <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.jobTitle\"\r\n                name=\"jobTitle\"\r\n                placeholder=\"Job Title\"\r\n                required\r\n                #jobTitle=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"jobTitle.invalid && (jobTitle.dirty || jobTitle.touched)\">Job title is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"number\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.yearsOfExperience\"\r\n                name=\"yearsOfExperience\"\r\n                placeholder=\"Years of Experience\"\r\n                required\r\n                min=\"0\"\r\n                #yearsOfExperience=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"yearsOfExperience.invalid && (yearsOfExperience.dirty || yearsOfExperience.touched)\">\r\n                Years of experience is required\r\n              </div>\r\n            </div>\r\n\r\n\r\n          </form>\r\n        </div>\r\n        <div class=\"card-footer bg-light text-end gap-2 d-flex justify-content-end\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancel()\">Cancel</button>\r\n          <button class=\"btn btn-sm btn-success px-4\" (click)=\"save()\">Save Changes</button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <h5 class=\"fw-bold mb-0\">Work Experience</h5>\r\n        <span *ngIf=\"workSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n          Missing info\r\n        </span>\r\n      </div>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n        style=\"width: 32px; height: 32px; line-height: 1;\"\r\n        title=\"Add work experience\"\r\n        (click)=\"addJob()\"\r\n      >\r\n        <span class=\"fw-bold fs-5\">+</span>\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"experience().length === 0 && !isAddingJob()\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n      <div class=\"fw-semibold\">Missing required fields</div>\r\n      <div class=\"small\">Add at least one work experience.</div>\r\n    </div>\r\n    <div class=\"list-group list-group-flush shadow-sm rounded\">\r\n      <div *ngIf=\"isAddingJob() && tempJob()\" class=\"list-group-item p-3\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">JOB TITLE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempJob()?.jobTitle\"\r\n              (ngModelChange)=\"patchTempJob({ jobTitle: $event })\"\r\n              name=\"newJobTitle\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">COMPANY <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempJob()?.company\"\r\n              (ngModelChange)=\"patchTempJob({ company: $event })\"\r\n              name=\"newCompany\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">CITY <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempJob()?.city\"\r\n              (ngModelChange)=\"patchTempJob({ city: $event })\"\r\n              name=\"newCity\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.city)\">City is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempJob()?.startDate\"\r\n              (ngModelChange)=\"patchTempJob({ startDate: $event })\"\r\n              name=\"newStartDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.startDate)\">Start date is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [disabled]=\"tempJob()?.isCurrent\"\r\n              [ngModel]=\"tempJob()?.endDate\"\r\n              (ngModelChange)=\"patchTempJob({ endDate: $event })\"\r\n              name=\"newEndDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"!tempJob()?.isCurrent && isBlank(tempJob()?.endDate)\">End date is required</div>\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"!tempJob()?.isCurrent && isMonthRangeInvalid(tempJob()?.startDate, tempJob()?.endDate)\">\r\n              Start date must be less than end date\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-4 d-flex align-items-end\">\r\n            <div class=\"form-check\">\r\n              <input\r\n                class=\"form-check-input\"\r\n                type=\"checkbox\"\r\n                [ngModel]=\"tempJob()?.isCurrent\"\r\n                (ngModelChange)=\"setTempJobIsCurrent($event)\"\r\n                name=\"newIsCurrent\"\r\n                id=\"newIsCurrent\"\r\n              />\r\n              <label class=\"form-check-label\" for=\"newIsCurrent\">Current</label>\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">RESPONSIBILITIES (one per line)</label>\r\n            <textarea\r\n              rows=\"4\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"(tempJob()?.responsibilities || []).join('\\n')\"\r\n              (ngModelChange)=\"updateTempResponsibilities($event)\"\r\n              name=\"newResponsibilities\"\r\n            ></textarea>\r\n          </div>\r\n        </form>\r\n        <div class=\"card-footer bg-light text-end mt-3\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditJob(); $event.stopPropagation()\">Cancel</button>\r\n          <button class=\"btn btn-sm btn-success px-4\" (click)=\"saveEditJob(); $event.stopPropagation()\">Save</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let job of experience(); let i = index\" class=\"list-group-item p-3\">\r\n\r\n        <div class=\"d-flex justify-content-between align-items-center\">\r\n          <div class=\"d-flex align-items-center cursor-pointer flex-grow-1\" (click)=\"toggleJob(i)\">\r\n            <i class=\"bi bi-briefcase text-primary me-3 fs-4\"></i>\r\n            <div>\r\n              <h6 class=\"mb-0 fw-bold\">{{ job.jobTitle }}</h6>\r\n              <small class=\"text-muted\">\r\n                {{ job.company }} \u2022 {{ formatMonthYear(job.startDate) }} - {{ job.isCurrent ? 'Present' : formatMonthYear(job.endDate) }}\r\n              </small>\r\n              <div\r\n                *ngIf=\"editingJobIndex() !== i && (workIssuesByIndex()[i] || []).length > 0\"\r\n                class=\"alert alert-warning py-1 px-2 mt-2\"\r\n              >\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (workIssuesByIndex()[i] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"d-flex align-items-center gap-2\">\r\n            \r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n              (click)=\"startEditJob(i)\"\r\n              title=\"Edit\"\r\n            >\r\n              <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n            </button>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-danger action-icon-btn\"\r\n              (click)=\"deleteJob(i);\"\r\n              title=\"Delete\"\r\n            >\r\n              <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n            \r\n\r\n            <!-- <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-light p-0\"\r\n              style=\"width: 34px; height: 34px;\"\r\n              (click)=\"toggleJob(i)\"\r\n              title=\"Expand\"\r\n            >\r\n              <i class=\"bi cursor-pointer\" [ngClass]=\"expandedIndex() === i ? 'bi-chevron-up' : 'bi-chevron-down'\"></i>\r\n            </button> -->\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"mt-3 bg-light p-3 rounded small\" *ngIf=\"expandedIndex() === i\">\r\n          <ng-container *ngIf=\"editingJobIndex() !== i; else editJobForm\">\r\n            <ul class=\"mb-0\">\r\n              <li *ngFor=\"let res of job.responsibilities\">{{ res }}</li>\r\n            </ul>\r\n          </ng-container>\r\n\r\n          <ng-template #editJobForm>\r\n            <div *ngIf=\"(workIssuesByIndex()[i] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ (workIssuesByIndex()[i] || []).join(' \u2022 ') }}</div>\r\n            </div>\r\n            <form class=\"row g-2\">\r\n              <div class=\"col-md-6\">\r\n                <label class=\"small text-muted d-block\">JOB TITLE <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [ngModel]=\"tempJob()?.jobTitle\"\r\n                  (ngModelChange)=\"patchTempJob({ jobTitle: $event })\"\r\n                  name=\"jobTitle{{ i }}\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.jobTitle)\">Job title is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-6\">\r\n                <label class=\"small text-muted d-block\">COMPANY <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [ngModel]=\"tempJob()?.company\"\r\n                  (ngModelChange)=\"patchTempJob({ company: $event })\"\r\n                  name=\"company{{ i }}\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.company)\">Company name is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">CITY <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [ngModel]=\"tempJob()?.city\"\r\n                  (ngModelChange)=\"patchTempJob({ city: $event })\"\r\n                  name=\"city{{ i }}\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.city)\">City is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"month\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [ngModel]=\"tempJob()?.startDate\"\r\n                  (ngModelChange)=\"patchTempJob({ startDate: $event })\"\r\n                  name=\"startDate{{ i }}\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.startDate)\">Start date is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"month\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [disabled]=\"tempJob()?.isCurrent\"\r\n                  [ngModel]=\"tempJob()?.endDate\"\r\n                  (ngModelChange)=\"patchTempJob({ endDate: $event })\"\r\n                  name=\"endDate{{ i }}\"\r\n                />\r\n                <div\r\n                  class=\"small text-danger mt-1\"\r\n                  *ngIf=\"!tempJob()?.isCurrent && isBlank(tempJob()?.endDate)\"\r\n                >\r\n                  End date is required\r\n                </div>\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"!tempJob()?.isCurrent && isMonthRangeInvalid(tempJob()?.startDate, tempJob()?.endDate)\">\r\n                  Start date must be less than end date\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4 d-flex align-items-end\">\r\n                <div class=\"form-check\">\r\n                  <input\r\n                    class=\"form-check-input\"\r\n                    type=\"checkbox\"\r\n                    [ngModel]=\"tempJob()?.isCurrent\"\r\n                    (ngModelChange)=\"setTempJobIsCurrent($event)\"\r\n                    name=\"isCurrent{{ i }}\"\r\n                    id=\"isCurrent{{ i }}\"\r\n                  />\r\n                  <label class=\"form-check-label\" for=\"isCurrent{{ i }}\">Current</label>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">RESPONSIBILITIES (one per line)</label>\r\n                <textarea\r\n                  rows=\"4\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [ngModel]=\"(tempJob()?.responsibilities || []).join('\\n')\"\r\n                  (ngModelChange)=\"updateTempResponsibilities($event)\"\r\n                  name=\"responsibilities{{ i }}\"\r\n                ></textarea>\r\n              </div>\r\n            </form>\r\n          </ng-template>\r\n        </div>\r\n\r\n        <div class=\"card-footer bg-light text-end\" *ngIf=\"editingJobIndex() === i\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditJob(); $event.stopPropagation()\">Cancel</button>\r\n          <button class=\"btn btn-sm btn-success px-4\" (click)=\"saveEditJob(); $event.stopPropagation()\">Save</button>\r\n        </div>\r\n        \r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <h5 class=\"fw-bold mb-0\">Certifications</h5>\r\n        <span *ngIf=\"certificationsSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n          Missing info\r\n        </span>\r\n      </div>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n        style=\"width: 32px; height: 32px; line-height: 1;\"\r\n        title=\"Add certification\"\r\n        (click)=\"addCertification()\"\r\n      >\r\n        <span class=\"fw-bold fs-5\">+</span>\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"certs().length === 0 && !isAddingCertification() && editingCertificationIndex() === null\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n      <div class=\"fw-semibold\">Missing required fields</div>\r\n      <div class=\"small\">Add at least one certification.</div>\r\n    </div>\r\n\r\n    <div class=\"list-group list-group-flush shadow-sm rounded border\">\r\n      <div *ngIf=\"isAddingCertification() && tempCertification()\" class=\"list-group-item py-3\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Name <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.name\"\r\n              (ngModelChange)=\"patchTempCertification({ name: $event })\"\r\n              name=\"newCertName\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempCertification()?.name)\">Certificate name is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issuing Organization</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.issuingOrganization || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ issuingOrganization: $event || null })\"\r\n              name=\"newCertOrg\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">State</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.state || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ state: $event || null })\"\r\n              name=\"newCertState\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Credential ID</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.credentialId || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ credentialId: $event || null })\"\r\n              name=\"newCertCredentialId\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issue Date</label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.issueDate || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ issueDate: $event || null })\"\r\n              name=\"newCertIssueDate\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Expiry Date</label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.expiryDate || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ expiryDate: $event || null })\"\r\n              name=\"newCertExpiryDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempCertification()?.issueDate || null, tempCertification()?.expiryDate || null)\">\r\n              Issued date must be less than expiry date\r\n            </div>\r\n          </div>\r\n        </form>\r\n\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditCertification()\">Cancel</button>\r\n          <button type=\"button\" class=\"btn btn-sm btn-success px-4\" (click)=\"saveCertificationEditor()\">Save</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let cert of certs(); let ci = index\" class=\"list-group-item py-3\">\r\n        <ng-container *ngIf=\"editingCertificationIndex() !== ci; else editCert\">\r\n          <div class=\"d-flex justify-content-between align-items-start gap-3\">\r\n            <div>\r\n              <div class=\"fw-semibold\">{{ cert.name }}</div>\r\n              <div *ngIf=\"(certIssuesByIndex()[ci] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (certIssuesByIndex()[ci] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n              <div class=\"small text-muted\">\r\n                {{ cert.issuingOrganization || '\u2014' }}\r\n                <span *ngIf=\"cert.state\"> \u2022 {{ cert.state }}</span>\r\n              </div>\r\n              <div class=\"small text-muted\">\r\n                Issue: {{ cert.issueDate ? formatMonthYear(cert.issueDate) : '\u2014' }}\r\n                <span class=\"mx-1\">|</span>\r\n                Expiry: {{ cert.expiryDate ? formatMonthYear(cert.expiryDate) : '\u2014' }}\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n               <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n              (click)=\"startEditCertification(ci)\"\r\n              title=\"Edit\"\r\n            >\r\n              <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n            </button>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-danger action-icon-btn\"\r\n              (click)=\"deleteCertification(ci)\"\r\n              title=\"Delete\"\r\n            >\r\n              <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-template #editCert>\r\n          <div *ngIf=\"(certIssuesByIndex()[ci] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ (certIssuesByIndex()[ci] || []).join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Name <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.name\"\r\n                (ngModelChange)=\"patchTempCertification({ name: $event })\"\r\n                name=\"certName{{ ci }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempCertification()?.name)\">Certificate name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issuing Organization</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.issuingOrganization || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ issuingOrganization: $event || null })\"\r\n                name=\"certOrg{{ ci }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">State</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.state || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ state: $event || null })\"\r\n                name=\"certState{{ ci }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Credential ID</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.credentialId || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ credentialId: $event || null })\"\r\n                name=\"certCredentialId{{ ci }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issue Date</label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.issueDate || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ issueDate: $event || null })\"\r\n                name=\"certIssue{{ ci }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Expiry Date</label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.expiryDate || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ expiryDate: $event || null })\"\r\n                name=\"certExpiry{{ ci }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempCertification()?.issueDate || null, tempCertification()?.expiryDate || null)\">\r\n                Issued date must be less than expiry date\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditCertification()\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-sm btn-success px-4\" (click)=\"saveCertificationEditor()\">Save</button>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <h5 class=\"fw-bold mb-0\">Licenses</h5>\r\n        <span *ngIf=\"licensesSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n          Missing info\r\n        </span>\r\n      </div>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n        style=\"width: 32px; height: 32px; line-height: 1;\"\r\n        title=\"Add license\"\r\n        (click)=\"addLicense()\"\r\n      >\r\n        <span class=\"fw-bold fs-5\">+</span>\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"licenses().length === 0 && !isAddingLicense() && editingLicenseIndex() === null\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n      <div class=\"fw-semibold\">Missing required fields</div>\r\n      <div class=\"small\">Add at least one license.</div>\r\n    </div>\r\n\r\n    <div class=\"list-group list-group-flush shadow-sm rounded border\">\r\n      <div *ngIf=\"isAddingLicense() && tempLicense()\" class=\"list-group-item py-3\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Name <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.name\"\r\n              (ngModelChange)=\"patchTempLicense({ name: $event })\"\r\n              name=\"newLicName\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempLicense()?.name)\">License name is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issuing Authority</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.issuingAuthority || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ issuingAuthority: $event || null })\"\r\n              name=\"newLicAuthority\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">License Number</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.licenseNumber || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ licenseNumber: $event || null })\"\r\n              name=\"newLicNumber\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">State</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.state || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ state: $event || null })\"\r\n              name=\"newLicState\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issue Date</label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.issueDate || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ issueDate: $event || null })\"\r\n              name=\"newLicIssueDate\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Expiry Date</label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.expiryDate || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ expiryDate: $event || null })\"\r\n              name=\"newLicExpiryDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempLicense()?.issueDate || null, tempLicense()?.expiryDate || null)\">\r\n              Issued date must be less than expiry date\r\n            </div>\r\n          </div>\r\n        </form>\r\n\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditLicense()\">Cancel</button>\r\n          <button type=\"button\" class=\"btn btn-sm btn-success px-4\" (click)=\"saveLicenseEditor()\">Save</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let lic of licenses(); let li = index\" class=\"list-group-item py-3\">\r\n        <ng-container *ngIf=\"editingLicenseIndex() !== li; else editLic\">\r\n          <div class=\"d-flex justify-content-between align-items-start gap-3\">\r\n            <div>\r\n              <div class=\"fw-semibold\">{{ lic.name }}</div>\r\n              <div *ngIf=\"(licenseIssuesByIndex()[li] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (licenseIssuesByIndex()[li] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n              <div class=\"small text-muted\">\r\n                {{ lic.issuingAuthority || '\u2014' }}\r\n                <span *ngIf=\"lic.state\"> \u2022 {{ lic.state }}</span>\r\n              </div>\r\n              <div class=\"small text-muted\">\r\n                Issue: {{ lic.issueDate ? formatMonthYear(lic.issueDate) : '\u2014' }}\r\n                <span class=\"mx-1\">|</span>\r\n                Expiry: {{ lic.expiryDate ? formatMonthYear(lic.expiryDate) : '\u2014' }}\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n\r\n              <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n              (click)=\"startEditLicense(li)\"\r\n              title=\"Edit\"\r\n            >\r\n              <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n            </button>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-danger action-icon-btn\"\r\n              (click)=\"deleteLicense(li)\"\r\n              title=\"Delete\"\r\n            >\r\n              <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-template #editLic>\r\n          <div *ngIf=\"(licenseIssuesByIndex()[li] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ (licenseIssuesByIndex()[li] || []).join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Name <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.name\"\r\n                (ngModelChange)=\"patchTempLicense({ name: $event })\"\r\n                name=\"licName{{ li }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempLicense()?.name)\">License name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issuing Authority</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.issuingAuthority || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ issuingAuthority: $event || null })\"\r\n                name=\"licAuthority{{ li }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">License Number</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.licenseNumber || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ licenseNumber: $event || null })\"\r\n                name=\"licNumber{{ li }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">State</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.state || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ state: $event || null })\"\r\n                name=\"licState{{ li }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issue Date</label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.issueDate || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ issueDate: $event || null })\"\r\n                name=\"licIssue{{ li }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Expiry Date</label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.expiryDate || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ expiryDate: $event || null })\"\r\n                name=\"licExpiry{{ li }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempLicense()?.issueDate || null, tempLicense()?.expiryDate || null)\">\r\n                Issued date must be less than expiry date\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditLicense()\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-sm btn-success px-4\" (click)=\"saveLicenseEditor()\">Save</button>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <h5 class=\"fw-bold mb-0\">Tools</h5>\r\n        <span *ngIf=\"toolsSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n          Missing info\r\n        </span>\r\n      </div>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n        style=\"width: 32px; height: 32px; line-height: 1;\"\r\n        title=\"Add tool\"\r\n        (click)=\"addTool()\"\r\n      >\r\n        <span class=\"fw-bold fs-5\">+</span>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"d-flex flex-wrap gap-2 p-3 bg-white border rounded shadow-sm\">\r\n      <div *ngFor=\"let tool of tools(); let ti = index\" class=\"d-flex align-items-center gap-2\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-light border rounded-pill d-inline-flex align-items-center gap-2 px-3 py-2\"\r\n          (click)=\"openToolEditor(ti)\"\r\n          title=\"Edit\"\r\n        >\r\n          <span class=\"fw-normal text-dark\">{{ tool }}</span>\r\n            <span\r\n              *ngIf=\"(toolIssuesByIndex()[ti] || []).length > 0\"\r\n              class=\"badge bg-warning-subtle text-warning border ms-1\"\r\n            >\r\n              Missing info\r\n            </span>\r\n          <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-sm btn-outline-danger rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\"\r\n          title=\"Delete tool\"\r\n          (click)=\"deleteTool(ti)\"\r\n        >\r\n          <span class=\"fw-bold\">\u00D7</span>\r\n        </button>\r\n      </div>\r\n\r\n      <span *ngIf=\"tools().length === 0\" class=\"text-muted small\">No tools added.</span>\r\n    </div>\r\n\r\n    <!-- Tool edit panel (overlay) -->\r\n    <div\r\n      *ngIf=\"isToolEditorOpen()\"\r\n      class=\"position-fixed top-0 start-0 w-100 h-100\"\r\n      style=\"background: rgba(0,0,0,0.35); z-index: 2000;\"\r\n      (click)=\"closeToolEditor()\"\r\n    >\r\n      <div class=\"container h-100 d-flex align-items-start justify-content-center pt-4\" (click)=\"$event.stopPropagation()\">\r\n        <div class=\"card shadow border-0 w-100\" style=\"max-width: 900px;\">\r\n          <div class=\"card-header bg-white d-flex align-items-center gap-3\">\r\n            <button type=\"button\" class=\"btn btn-link p-0 text-decoration-none\" (click)=\"closeToolEditor()\">\r\n              <i class=\"bi bi-arrow-left fs-5\"></i>\r\n            </button>\r\n            <div class=\"fw-bold\">{{ isAddingTool() ? 'Add Tool' : ('Edit ' + (toolForm()?.name || '') + ' Tool') }}</div>\r\n          </div>\r\n          <div class=\"card-body p-4\">\r\n            <div *ngIf=\"toolFormIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ toolFormIssues().join(' \u2022 ') }}</div>\r\n            </div>\r\n            <div class=\"row g-3\">\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Tool Name <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control\"\r\n                  [ngModel]=\"toolForm()?.name\"\r\n                  (ngModelChange)=\"patchToolForm({ name: $event })\"\r\n                  name=\"toolName\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(toolForm()?.name)\">Tool name is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Service Provider</label>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control\"\r\n                  [ngModel]=\"toolForm()?.providerName\"\r\n                  (ngModelChange)=\"patchToolForm({ providerName: $event })\"\r\n                  name=\"toolProvider\"\r\n                  placeholder=\"Service Provider\"\r\n                />\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span class=\"text-danger\">*</span></label>\r\n                <div class=\"d-flex align-items-center gap-2\">\r\n                  <button\r\n                    *ngFor=\"let s of [1,2,3,4,5]\"\r\n                    type=\"button\"\r\n                    class=\"btn btn-link p-0 text-decoration-none\"\r\n                    (click)=\"setTempToolStars(s)\"\r\n                    [attr.aria-label]=\"'Set rating ' + s\"\r\n                  >\r\n                    <span [class]=\"(toolForm()?.stars || 0) >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n                      {{ (toolForm()?.stars || 0) >= s ? '\u2605' : '\u2606' }}\r\n                    </span>\r\n                  </button>\r\n                  <span class=\"small text-muted\">{{ toolForm()?.stars || 0 }}/5</span>\r\n                </div>\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"(toolForm()?.stars || 0) <= 0\">Star rating is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"number\"\r\n                  class=\"form-control\"\r\n                  [ngModel]=\"toolForm()?.year\"\r\n                  (ngModelChange)=\"patchToolForm({ year: $event === '' ? null : +$event })\"\r\n                  name=\"toolYear\"\r\n                  min=\"1\"\r\n                  max=\"30\"\r\n                  placeholder=\"Years of Experience\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"toolForm()?.year === null || toolForm()?.year === undefined\">Years of experience is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n                <div class=\"form-check form-switch mt-2\">\r\n                  <input\r\n                    class=\"form-check-input\"\r\n                    type=\"checkbox\"\r\n                    [ngModel]=\"toolForm()?.profileVisibility\"\r\n                    (ngModelChange)=\"patchToolForm({ profileVisibility: $event })\"\r\n                    name=\"toolVisible\"\r\n                    id=\"toolVisible\"\r\n                  />\r\n                  <label class=\"form-check-label\" for=\"toolVisible\">Visible</label>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Comment</label>\r\n                <textarea\r\n                  rows=\"4\"\r\n                  class=\"form-control\"\r\n                  [ngModel]=\"toolForm()?.notes\"\r\n                  (ngModelChange)=\"patchToolForm({ notes: $event })\"\r\n                  name=\"toolNotes\"\r\n                  placeholder=\"Comment your tool here...\"\r\n                ></textarea>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"card-footer bg-white d-flex justify-content-end gap-2\">\r\n            <button\r\n              *ngIf=\"!isAddingTool() && editingToolIndex() !== null\"\r\n              type=\"button\"\r\n              class=\"btn btn-link text-danger me-auto\"\r\n              (click)=\"deleteTool(editingToolIndex()!)\"\r\n            >\r\n              Delete\r\n            </button>\r\n            <button type=\"button\" class=\"btn btn-link text-secondary\" (click)=\"closeToolEditor()\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary px-4\" (click)=\"saveToolEditor()\">\r\n              {{ isAddingTool() ? 'Save' : 'Update' }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"row g-4 mb-5\">\r\n    <div class=\"col-md-12\">\r\n      <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <h5 class=\"fw-bold mb-0\">Skills</h5>\r\n          <span *ngIf=\"skillsSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n            Missing info\r\n          </span>\r\n        </div>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\"\r\n          title=\"Add skill\"\r\n          (click)=\"addSkill()\"\r\n        >\r\n          <span class=\"fw-bold fs-5\">+</span>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"d-flex flex-wrap gap-2 p-3 bg-white border rounded shadow-sm\">\r\n        <div *ngFor=\"let skill of skills(); let si = index\" class=\"d-flex align-items-center gap-2\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn btn-light border rounded-pill d-inline-flex align-items-center gap-2 px-3 py-2\"\r\n            (click)=\"openSkillEditor(si)\"\r\n            title=\"Edit\"\r\n          >\r\n            <span class=\"fw-normal text-dark\">{{ skill }}</span>\r\n            <span\r\n              *ngIf=\"(skillIssuesByIndex()[si] || []).length > 0\"\r\n              class=\"badge bg-warning-subtle text-warning border ms-1\"\r\n            >\r\n              Missing info\r\n            </span>\r\n            <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n          </button>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn btn-sm btn-outline-danger rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n            style=\"width: 32px; height: 32px; line-height: 1;\"\r\n            title=\"Delete skill\"\r\n            (click)=\"deleteSkill(si); $event.stopPropagation()\"\r\n          >\r\n            <span class=\"fw-bold\">\u00D7</span>\r\n          </button>\r\n        </div>\r\n\r\n        <span *ngIf=\"skills().length === 0\" class=\"text-muted small\">No skills added.</span>\r\n      </div>\r\n\r\n      <!-- Skill edit panel (overlay) -->\r\n      <div\r\n        *ngIf=\"isSkillEditorOpen()\"\r\n        class=\"position-fixed top-0 start-0 w-100 h-100\"\r\n        style=\"background: rgba(0,0,0,0.35); z-index: 2000;\"\r\n        (click)=\"closeSkillEditor()\"\r\n      >\r\n        <div class=\"container h-100 d-flex align-items-start justify-content-center pt-4\" (click)=\"$event.stopPropagation()\">\r\n          <div class=\"card shadow border-0 w-100\" style=\"max-width: 900px;\">\r\n            <div class=\"card-header bg-white d-flex align-items-center gap-3\">\r\n              <button type=\"button\" class=\"btn btn-link p-0 text-decoration-none\" (click)=\"closeSkillEditor()\">\r\n                <i class=\"bi bi-arrow-left fs-5\"></i>\r\n              </button>\r\n              <div class=\"fw-bold\">{{ isAddingSkill() ? 'Add Skill' : ('Edit ' + (skillForm()?.name || '') + ' Skill') }}</div>\r\n            </div>\r\n            <div class=\"card-body p-4\">\r\n              <div *ngIf=\"skillFormIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n                <div class=\"fw-semibold\">Missing required fields</div>\r\n                <div class=\"small\">{{ skillFormIssues().join(' \u2022 ') }}</div>\r\n              </div>\r\n              <div class=\"row g-3\">\r\n                <div class=\"col-12\">\r\n                  <label class=\"small text-muted d-block\">Skills Name <span class=\"text-danger\">*</span></label>\r\n                  <input\r\n                    type=\"text\"\r\n                    class=\"form-control\"\r\n                    [ngModel]=\"skillForm()?.name\"\r\n                    (ngModelChange)=\"patchSkillForm({ name: $event })\"\r\n                    name=\"skillName\"\r\n                  />\r\n                  <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(skillForm()?.name)\">Skillset name is required</div>\r\n                </div>\r\n\r\n                <div class=\"col-12\">\r\n                  <label class=\"small text-muted d-block\">Service Provider</label>\r\n                  <input\r\n                    type=\"text\"\r\n                    class=\"form-control\"\r\n                    [ngModel]=\"skillForm()?.providerName\"\r\n                    (ngModelChange)=\"patchSkillForm({ providerName: $event })\"\r\n                    name=\"skillProvider\"\r\n                    placeholder=\"Service Provider\"\r\n                  />\r\n                </div>\r\n\r\n                <div class=\"col-md-4\">\r\n                  <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span class=\"text-danger\">*</span></label>\r\n                  <div class=\"d-flex align-items-center gap-2\">\r\n                    <button\r\n                      *ngFor=\"let s of [1,2,3,4,5]\"\r\n                      type=\"button\"\r\n                      class=\"btn btn-link p-0 text-decoration-none\"\r\n                      (click)=\"setTempSkillStars(s)\"\r\n                      [attr.aria-label]=\"'Set rating ' + s\"\r\n                    >\r\n                      <span [class]=\"(skillForm()?.stars || 0) >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n                        {{ (skillForm()?.stars || 0) >= s ? '\u2605' : '\u2606' }}\r\n                      </span>\r\n                    </button>\r\n                    <span class=\"small text-muted\">{{ skillForm()?.stars || 0 }}/5</span>\r\n                  </div>\r\n                  <div class=\"small text-danger mt-1\" *ngIf=\"(skillForm()?.stars || 0) <= 0\">Star rating is required</div>\r\n                </div>\r\n\r\n                <div class=\"col-md-4\">\r\n                  <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n                  <input\r\n                    type=\"number\"\r\n                    class=\"form-control\"\r\n                    [ngModel]=\"skillForm()?.year\"\r\n                    (ngModelChange)=\"patchSkillForm({ year: $event === '' ? null : +$event })\"\r\n                    name=\"skillYear\"\r\n                    min=\"1\"\r\n                    max=\"30\"\r\n                    placeholder=\"Years of Experience\"\r\n                  />\r\n                  <div class=\"small text-danger mt-1\" *ngIf=\"skillForm()?.year === null || skillForm()?.year === undefined\">Years of experience is required</div>\r\n                </div>\r\n\r\n                <div class=\"col-md-4\">\r\n                  <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n                  <div class=\"form-check form-switch mt-2\">\r\n                    <input\r\n                      class=\"form-check-input\"\r\n                      type=\"checkbox\"\r\n                      [ngModel]=\"skillForm()?.profileVisibility\"\r\n                      (ngModelChange)=\"patchSkillForm({ profileVisibility: $event })\"\r\n                      name=\"skillVisible\"\r\n                      id=\"skillVisible\"\r\n                    />\r\n                    <label class=\"form-check-label\" for=\"skillVisible\">Visible</label>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"col-12\">\r\n                  <label class=\"small text-muted d-block\">Comment</label>\r\n                  <textarea\r\n                    rows=\"4\"\r\n                    class=\"form-control\"\r\n                    [ngModel]=\"skillForm()?.notes\"\r\n                    (ngModelChange)=\"patchSkillForm({ notes: $event })\"\r\n                    name=\"skillNotes\"\r\n                    placeholder=\"Comment your skill here...\"\r\n                  ></textarea>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"card-footer bg-white d-flex justify-content-end gap-2\">\r\n              <button\r\n                *ngIf=\"!isAddingSkill() && editingSkillIndex() !== null\"\r\n                type=\"button\"\r\n                class=\"btn btn-link text-danger me-auto\"\r\n                (click)=\"deleteSkill(editingSkillIndex()!)\"\r\n              >\r\n                Delete\r\n              </button>\r\n              <button type=\"button\" class=\"btn btn-link text-secondary\" (click)=\"closeSkillEditor()\">Cancel</button>\r\n              <button type=\"button\" class=\"btn btn-primary px-4\" (click)=\"saveSkillEditor()\">\r\n                {{ isAddingSkill() ? 'Save' : 'Update' }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n</div>\r\n  <div class=\"row g-4 mb-5\">\r\n    <div class=\"col-md-12\">\r\n      <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <h5 class=\"fw-bold mb-0\">Education</h5>\r\n          <span *ngIf=\"educationSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n            Missing info\r\n          </span>\r\n        </div>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\"\r\n          title=\"Add education\"\r\n          (click)=\"addEducation()\"\r\n        >\r\n          <span class=\"fw-bold fs-5\">+</span>\r\n        </button>\r\n      </div>\r\n\r\n      <div *ngIf=\"educationList().length === 0 && !isAddingEducation() && editingEducationIndex() === null\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n        <div class=\"fw-semibold\">Missing required fields</div>\r\n        <div class=\"small\">Add at least one education.</div>\r\n      </div>\r\n\r\n      <div *ngIf=\"isAddingEducation() && tempEducation()\" class=\"p-3 bg-white border rounded shadow-sm mb-2\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">DEGREE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempEducation()?.degree\"\r\n              (ngModelChange)=\"patchTempEducation({ degree: $event })\"\r\n              name=\"newEduDegree\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degree)\">Degree / Course name is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">INSTITUTION <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempEducation()?.institution\"\r\n              (ngModelChange)=\"patchTempEducation({ institution: $event })\"\r\n              name=\"newEduInstitution\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">DEGREE / COURSE TYPE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempEducation()?.degreeType\"\r\n              (ngModelChange)=\"patchTempEducation({ degreeType: $event })\"\r\n              name=\"newEduDegreeType\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degreeType)\">Degree / Course type is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempEducation()?.startDate\"\r\n              (ngModelChange)=\"patchTempEducation({ startDate: $event })\"\r\n              name=\"newEduStartDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.startDate)\">Start date is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempEducation()?.endDate\"\r\n              (ngModelChange)=\"patchTempEducation({ endDate: $event })\"\r\n              name=\"newEduEndDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.endDate)\">End date is required</div>\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempEducation()?.startDate, tempEducation()?.endDate)\">\r\n              Start date must be less than end date\r\n            </div>\r\n          </div>\r\n        </form>\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditEducation()\">Cancel</button>\r\n          <button type=\"button\" class=\"btn btn-sm btn-success px-4\" (click)=\"saveEducation()\">Save</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let edu of educationList(); let ei = index\" class=\"p-3 bg-white border rounded shadow-sm mb-2\">\r\n        <div class=\"d-flex justify-content-between align-items-start\">\r\n          <div>\r\n            <h6 class=\"fw-bold mb-1\">{{ edu.degree }}</h6>\r\n            <p class=\"small text-primary mb-0\">{{ edu.institution }}</p>\r\n            <div *ngIf=\"(educationIssuesByIndex()[ei] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n              <div class=\"fw-semibold small\">Missing required fields</div>\r\n              <div class=\"small\">{{ (educationIssuesByIndex()[ei] || []).join(' \u2022 ') }}</div>\r\n            </div>\r\n          </div>\r\n          <div class=\"d-flex align-items-center gap-2\" *ngIf=\"editingEducationIndex() !== ei\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n              (click)=\"startEditEducation(ei)\"\r\n              title=\"Edit\"\r\n            >\r\n              <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-danger action-icon-btn\"\r\n              (click)=\"deleteEducation(ei)\"\r\n              title=\"Delete\"\r\n            >\r\n              <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"editingEducationIndex() === ei\" class=\"mt-3\">\r\n          <div *ngIf=\"(educationIssuesByIndex()[ei] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ (educationIssuesByIndex()[ei] || []).join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">DEGREE <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.degree\"\r\n                (ngModelChange)=\"patchTempEducation({ degree: $event })\"\r\n                name=\"eduDegree{{ ei }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degree)\">Degree / Course name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">INSTITUTION <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.institution\"\r\n                (ngModelChange)=\"patchTempEducation({ institution: $event })\"\r\n                name=\"eduInstitution{{ ei }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.institution)\">Institution name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">DEGREE / COURSE TYPE <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.degreeType\"\r\n                (ngModelChange)=\"patchTempEducation({ degreeType: $event })\"\r\n                name=\"eduDegreeType{{ ei }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degreeType)\">Degree / Course type is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">City</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.city\"\r\n                (ngModelChange)=\"patchTempEducation({ city: $event })\"\r\n                name=\"eduCity{{ ei }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.startDate\"\r\n                (ngModelChange)=\"patchTempEducation({ startDate: $event })\"\r\n                name=\"eduStartDate{{ ei }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.startDate)\">Start date is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.endDate\"\r\n                (ngModelChange)=\"patchTempEducation({ endDate: $event })\"\r\n                name=\"eduEndDate{{ ei }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.endDate)\">End date is required</div>\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempEducation()?.startDate, tempEducation()?.endDate)\">\r\n                Start date must be less than end date\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditEducation()\">Cancel</button>\r\n            <button class=\"btn btn-sm btn-success px-4\" (click)=\"saveEducation()\">Save</button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"educationList().length === 0\" class=\"text-muted small\">No education added.</div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"d-flex gap-2 justify-content-center mt-5\">\r\n    <button class=\"btn btn-outline-secondary px-5\" (click)=\"onBackClick()\">Back</button>\r\n    <button\r\n      class=\"btn btn-primary px-5 shadow\"\r\n      [disabled]=\"!canConfirmAndContinue()\"\r\n      [title]=\"canConfirmAndContinue() ? '' : 'Please fill all required fields in all mandatory sections.'\"\r\n      (click)=\"saveResumedetails()\"\r\n    >\r\n      Confirm & Continue\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #loading>\r\n  <div class=\"text-center p-5\">\r\n    <div class=\"spinner-border text-primary\"></div>\r\n    <p class=\"text-muted mt-2\">Loading data...</p>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showPopup\" (click)=\"closeSavePopup()\">\r\n  <div class=\"status-modal-card\" (click)=\"$event.stopPropagation()\">\r\n    <div class=\"status-modal-header\">\r\n      <h3 class=\"mb-1\">Saving Resume Details</h3>\r\n      <p class=\"text-muted mb-0\">Please wait while we process each section.</p>\r\n    </div>\r\n\r\n    <div class=\"status-modal-body\">\r\n      <div class=\"status-modal-row\" *ngFor=\"let item of statusList\">\r\n        <div class=\"status-modal-name\">{{ item.name }}</div>\r\n\r\n        <div class=\"status-modal-state pending\" *ngIf=\"item.status === 'pending'\">\r\n          <span class=\"spinner-border spinner-border-sm me-2\"></span> In progress\r\n        </div>\r\n\r\n        <div class=\"status-modal-state success\" *ngIf=\"item.status === 'success'\">\r\n          <span class=\"me-1\">\u2713</span> Success\r\n        </div>\r\n\r\n        <div class=\"status-modal-state partial\" *ngIf=\"item.status === 'partial'\">\r\n          <span class=\"me-1\">!</span> {{ item.successCount }} Success / {{ item.failCount }} Failed\r\n        </div>\r\n\r\n        <div class=\"status-modal-state error\" *ngIf=\"item.status === 'error'\">\r\n          <span class=\"me-1\">\u2716</span> {{ item.error || 'Failed' }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"status-modal-footer\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"closeSavePopup()\">Back to Preview</button>\r\n      <div class=\"d-flex justify-content-end\">\r\n        <button\r\n        [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\"\r\n          *ngIf=\"allSaveStepsSucceeded()\"\r\n          type=\"button\"\r\n          class=\"btn btn-primary\"\r\n          (click)=\"goToDashboard()\"\r\n        >\r\n          Go to Dashboard\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showBackConfirmPopup\">\r\n  <div class=\"confirm-modal-card\">\r\n    <h4 class=\"mb-2\">Leave this page?</h4>\r\n    <p class=\"text-muted mb-4\">Your data might be lost if you go back now.</p>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"stayOnPreview()\">Stay</button>\r\n      <button type=\"button\" class=\"btn btn-danger\" (click)=\"proceedBack()\">Proceed Back</button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".container{max-width:900px;margin:30px auto;font-family:Arial,sans-serif;color:#333}.preview-page-header{max-width:900px;margin:50px auto 10px;padding:0 12px}.preview-title{font-weight:600;margin:0}.preview-subtitle{margin-top:7px;font-size:16px}.section{margin-bottom:25px}.section-title{font-weight:600;display:block;margin-bottom:8px}.section-title .sub{font-weight:400;color:#777;font-size:13px}.dropdown-box{border:1px solid #ddd;border-radius:8px;padding:12px 15px;display:flex;justify-content:space-between;align-items:center}.icons{display:flex;gap:10px}.icon{cursor:pointer;font-size:14px;color:#777}.card{border:1px solid #ddd;border-radius:10px;padding:20px;background:#fff}.category{border-bottom:1px solid #eee;padding:15px 0}.category:last-child{border-bottom:none}.category-header{display:flex;justify-content:space-between;font-weight:600;margin-bottom:10px}.tags{display:flex;flex-wrap:wrap;gap:10px}.tag{background:#f2f4f7;padding:6px 12px;border-radius:6px;font-size:13px}.footer{text-align:center;margin-top:15px;color:#777;cursor:pointer}.actions{display:flex;justify-content:space-between;margin:50px 0 27px}.text-secondary{white-space:pre-line;font-size:.95rem}.extra-small{font-size:.8rem}.card{transition:transform .2s ease,box-shadow .2s ease}.card:hover{transform:translateY(-3px);box-shadow:0 .5rem 1rem #0000001a!important}.achievement-section .badge{font-size:.75rem;white-space:normal;text-align:left}.skill-tag .badge{font-weight:500;font-size:.9rem;transition:all .2s ease;cursor:default}.skill-tag .badge:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.skill-tag .btn-close{opacity:.5}.skill-tag .btn-close:hover{opacity:1}.bg-light.text-dark.border{background-color:#f8f9fa!important;border-color:#dee2e6!important}.card{transition:all .3s cubic-bezier(.25,.8,.25,1)}.card:hover{box-shadow:0 10px 20px #0000001a!important}.card:hover .bg-light{background-color:#e8f5e9!important}.position-fixed .card:hover{transform:none!important}code{background-color:#f8f9fa;padding:2px 6px;border-radius:4px}.list-group-item{transition:all .2s ease-in-out}.list-group-item:hover{background-color:#fcfcfc;transform:translate(5px);box-shadow:-5px 0 15px #0000000d}.border-dashed{border-style:dashed!important}.tool-card{transition:all .2s ease-in-out;border-radius:12px}.tool-card:hover{transform:translateY(-5px);border-color:var(--bs-primary)!important;box-shadow:0 10px 15px #0000001a!important}.tool-card:hover .icon-box{background-color:var(--bs-primary-subtle)!important}.tool-card .icon-box{width:60px;height:60px;transition:background-color .2s ease}.border-dashed{border:2px dashed #dee2e6!important}.border-dashed:hover{border-color:var(--bs-primary)!important;background-color:#fff!important}.popup{position:fixed;top:20%;right:20px;width:320px;background:#fff;border-radius:10px;padding:16px;box-shadow:0 4px 12px #0003}.status-row{display:flex;justify-content:space-between;margin:10px 0}.success{color:#2e7d32;font-weight:700}.error{color:#d32f2f}.pending{color:#f9a825}.section-flag{font-weight:600}button.btn.btn-sm.btn-outline-primary{background-color:#4077ad;border-color:#4077ad;color:#fff;border-radius:10px}button.btn.btn-sm.btn-outline-primary:hover{background-color:#356895;border-color:#356895;color:#fff}button.btn.btn-sm.btn-outline-danger{border-color:#dc3545;color:#dc3545;border-radius:10px}button.btn.btn-sm.btn-outline-danger:hover{background-color:#bb2d3b;border-color:#bb2d3b;color:#fff}button.btn.btn-sm.btn-outline-primary.rounded-circle{background-color:#4077ad;border-color:#4077ad;color:#fff;border-radius:50%!important}button.action-icon-btn{min-width:22px;width:22px;height:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:0!important;background:transparent!important;border:none!important;box-shadow:none!important;line-height:1}button.action-icon-btn.btn-outline-primary{color:#4077ad!important;border-color:#4077ad!important}button.action-icon-btn.btn-outline-danger{color:#dc3545!important}.action-icon-image{width:20px;height:20px;object-fit:contain;display:inline-block}.action-icon-image.edit-icon{filter:brightness(0) saturate(100%) invert(41%) sepia(39%) saturate(774%) hue-rotate(170deg) brightness(91%) contrast(89%)}.action-icon-image.delete-icon{filter:brightness(0) saturate(100%) invert(24%) sepia(79%) saturate(4008%) hue-rotate(344deg) brightness(91%) contrast(90%)}.modal-overlay{position:fixed;inset:0;background:#11182773;display:flex;align-items:center;justify-content:center;z-index:2500;padding:20px}.status-modal-card{width:min(760px,96vw);max-height:85vh;overflow:auto;background:#fff;border-radius:16px;box-shadow:0 20px 40px #0f172a40;border:1px solid #e5e7eb}.status-modal-header{padding:20px 24px 14px;border-bottom:1px solid #eef2f7}.status-modal-body{padding:12px 20px 20px}.status-modal-footer{padding:12px 20px 20px;border-top:1px solid #eef2f7;display:flex;justify-content:space-between;align-items:center;gap:12px}.status-modal-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 10px;border-bottom:1px solid #f1f5f9}.status-modal-row:last-child{border-bottom:0}.status-modal-name{font-weight:600;color:#1f2937}.status-modal-state{font-size:.92rem;font-weight:600}.status-modal-state.pending{color:#a16207}.status-modal-state.success{color:#166534}.status-modal-state.partial{color:#b45309}.status-modal-state.error{color:#b91c1c}.confirm-modal-card{width:min(520px,96vw);background:#fff;border-radius:14px;box-shadow:0 20px 35px #0f172a38;border:1px solid #e5e7eb;padding:24px}.year-experience-select{max-height:150px}\n"] }]
-        }], ctorParameters: () => [{ type: CredentialingStore }, { type: UserSkillSetService }, { type: UserToolService }, { type: UserDocumentService }, { type: UserEducationService }, { type: UserDetailService }, { type: UserExperienceService }, { type: i6.TokenService }, { type: undefined, decorators: [{
+            args: [{ selector: 'app-preview', standalone: false, template: "\r\n<div class=\"preview-page-header\">\r\n  <h2 class=\"preview-title\">Confirm based on your resume</h2>\r\n  <p class=\"preview-subtitle\">Please confirm everything is accurate. It is based on your resume</p>\r\n</div>\r\n\r\n\r\n<div class=\"container py-4\">\r\n  <div class=\"section mb-5\">\r\n    <div *ngIf=\"details() as data; else loading\">\r\n      <div class=\"card shadow-sm border-0\" *ngIf=\"!isEditMode()\">\r\n        <div class=\"card-body p-4\">\r\n          <div class=\"d-flex justify-content-between align-items-start mb-4\">\r\n            <div>\r\n              <div class=\"d-flex align-items-center gap-2\">\r\n                <h2 class=\"fw-bold mb-1\">{{ data.firstName }} {{ data.lastName }}</h2>\r\n                <span *ngIf=\"basicSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n                  Missing info\r\n                </span>\r\n              </div>\r\n              <p class=\"text-muted\">{{ data.jobTitle }} \u2022 {{ data.yearsOfExperience }} Years Exp.</p>\r\n              <div *ngIf=\"basicIssues().length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ basicIssues().join(' \u2022 ') }}</div>\r\n              </div>\r\n            </div>\r\n            <span class=\"badge bg-primary-subtle text-primary border p-2\">ID: Verified</span>\r\n          </div>\r\n\r\n          <div class=\"row g-4\">\r\n            <div class=\"col-12 border-bottom pb-2\">\r\n              <h6 class=\"text-uppercase small fw-bold text-muted\">Summary</h6>\r\n              <p class=\"text-secondary small mb-0\">{{ data.summary }}</p>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <label class=\"small text-muted d-block\">EMAIL</label>\r\n              <span class=\"fw-bold small\">{{ data.email }}</span>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <label class=\"small text-muted d-block\">PHONE</label>\r\n              <span class=\"fw-bold small\">{{ data.phone }}</span>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <label class=\"small text-muted d-block\">LOCATION</label>\r\n              <span class=\"small\">{{ data.address }},{{ data.city }},{{ data.state }},{{ data.zipCode }}, {{\r\n                data.country }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"card-footer bg-light text-end\">\r\n          <button class=\"btn btn-sm btn-primary px-4\" (click)=\"toggleEdit()\">Edit Details</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"card shadow-sm border-0\" *ngIf=\"isEditMode()\">\r\n        <div class=\"card-header bg-white fw-bold\">Update Profile</div>\r\n        <div class=\"card-body p-4\">\r\n          <form class=\"row g-3\" #basicForm=\"ngForm\" novalidate>\r\n            <div *ngIf=\"basicIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ basicIssues().join(' \u2022 ') }}</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">First Name <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.firstName\"\r\n                name=\"fName\"\r\n                placeholder=\"First Name\"\r\n                required\r\n                #fName=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"fName.invalid && (fName.dirty || fName.touched)\">First name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Last Name <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.lastName\"\r\n                name=\"lName\"\r\n                placeholder=\"Last Name\"\r\n                required\r\n                #lName=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"lName.invalid && (lName.dirty || lName.touched)\">Last name is required</div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">Summary</label>\r\n              <textarea class=\"form-control\" rows=\"3\" [(ngModel)]=\"tempProfile.summary\" name=\"sum\"\r\n                placeholder=\"Summary\"></textarea>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Email <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"email\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.email\"\r\n                name=\"email\"\r\n                placeholder=\"Email\"\r\n                required\r\n                email\r\n                #email=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"email.invalid && (email.dirty || email.touched)\">\r\n                <span *ngIf=\"email.errors?.['required']\">Email is required</span>\r\n                <span *ngIf=\"email.errors?.['email']\">Email format is invalid</span>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Phone Number <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [ngModel]=\"tempProfile.phone\"\r\n                (ngModelChange)=\"tempProfile.phone = sanitizePhone($event)\"\r\n                name=\"phone\"\r\n                placeholder=\"Phone (10 digits)\"\r\n                required\r\n                pattern=\"^\\d{10}$\"\r\n                maxlength=\"10\"\r\n                inputmode=\"numeric\"\r\n                #phone=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"phone.invalid && (phone.dirty || phone.touched)\">\r\n                <span *ngIf=\"phone.errors?.['required']\">Phone number is required</span>\r\n                <span *ngIf=\"phone.errors?.['pattern']\">Phone number must be 10 digits</span>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-md-3\">\r\n              <label class=\"small text-muted d-block\">Home Address <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.address\"\r\n                name=\"address\"\r\n                placeholder=\"Home Address\"\r\n                required\r\n                #address=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"address.invalid && (address.dirty || address.touched)\">Home address is required</div>\r\n            </div>\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.city\"\r\n                name=\"city\"\r\n                placeholder=\"City\"\r\n                required\r\n                #city=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"city.invalid && (city.dirty || city.touched)\">City is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.state\"\r\n                name=\"state\"\r\n                placeholder=\"State\"\r\n                required\r\n                #state=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"state.invalid && (state.dirty || state.touched)\">State is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">Zip Code <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.zipCode\"\r\n                name=\"zipCode\"\r\n                placeholder=\"Zip Code\"\r\n                required\r\n                #zipCode=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"zipCode.invalid && (zipCode.dirty || zipCode.touched)\">Zip code is required</div>\r\n            </div>\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.country\"\r\n                name=\"country\"\r\n                placeholder=\"Country\"\r\n                required\r\n                #country=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"country.invalid && (country.dirty || country.touched)\">Country is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Job Title <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.jobTitle\"\r\n                name=\"jobTitle\"\r\n                placeholder=\"Job Title\"\r\n                required\r\n                #jobTitle=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"jobTitle.invalid && (jobTitle.dirty || jobTitle.touched)\">Job title is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"number\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.yearsOfExperience\"\r\n                name=\"yearsOfExperience\"\r\n                placeholder=\"Years of Experience\"\r\n                required\r\n                min=\"0\"\r\n                #yearsOfExperience=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"yearsOfExperience.invalid && (yearsOfExperience.dirty || yearsOfExperience.touched)\">\r\n                Years of experience is required\r\n              </div>\r\n            </div>\r\n\r\n\r\n          </form>\r\n        </div>\r\n        <div class=\"card-footer bg-light text-end gap-2 d-flex justify-content-end\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancel()\">Cancel</button>\r\n          <button class=\"btn btn-sm btn-success px-4\" (click)=\"save()\">Save Changes</button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <h5 class=\"fw-bold mb-0\">Work Experience</h5>\r\n        <span *ngIf=\"workSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n          Missing info\r\n        </span>\r\n      </div>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n        style=\"width: 32px; height: 32px; line-height: 1;\"\r\n        title=\"Add work experience\"\r\n        (click)=\"addJob()\"\r\n      >\r\n        <span class=\"fw-bold fs-5\">+</span>\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"experience().length === 0 && !isAddingJob()\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n      <div class=\"fw-semibold\">Missing required fields</div>\r\n      <div class=\"small\">Add at least one work experience.</div>\r\n    </div>\r\n    <div class=\"list-group list-group-flush shadow-sm rounded\">\r\n      <div *ngIf=\"isAddingJob() && tempJob()\" class=\"list-group-item p-3\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">JOB TITLE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempJob()?.jobTitle\"\r\n              (ngModelChange)=\"patchTempJob({ jobTitle: $event })\"\r\n              name=\"newJobTitle\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">COMPANY <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempJob()?.company\"\r\n              (ngModelChange)=\"patchTempJob({ company: $event })\"\r\n              name=\"newCompany\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">CITY <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempJob()?.city\"\r\n              (ngModelChange)=\"patchTempJob({ city: $event })\"\r\n              name=\"newCity\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.city)\">City is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempJob()?.startDate\"\r\n              (ngModelChange)=\"patchTempJob({ startDate: $event })\"\r\n              name=\"newStartDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.startDate)\">Start date is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [disabled]=\"tempJob()?.isCurrent\"\r\n              [ngModel]=\"tempJob()?.endDate\"\r\n              (ngModelChange)=\"patchTempJob({ endDate: $event })\"\r\n              name=\"newEndDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"!tempJob()?.isCurrent && isBlank(tempJob()?.endDate)\">End date is required</div>\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"!tempJob()?.isCurrent && isMonthRangeInvalid(tempJob()?.startDate, tempJob()?.endDate)\">\r\n              Start date must be less than end date\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-4 d-flex align-items-end\">\r\n            <div class=\"form-check\">\r\n              <input\r\n                class=\"form-check-input\"\r\n                type=\"checkbox\"\r\n                [ngModel]=\"tempJob()?.isCurrent\"\r\n                (ngModelChange)=\"setTempJobIsCurrent($event)\"\r\n                name=\"newIsCurrent\"\r\n                id=\"newIsCurrent\"\r\n              />\r\n              <label class=\"form-check-label\" for=\"newIsCurrent\">Current</label>\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">RESPONSIBILITIES (one per line)</label>\r\n            <textarea\r\n              rows=\"4\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"(tempJob()?.responsibilities || []).join('\\n')\"\r\n              (ngModelChange)=\"updateTempResponsibilities($event)\"\r\n              name=\"newResponsibilities\"\r\n            ></textarea>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n            <input\r\n              type=\"file\"\r\n              accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\"\r\n              class=\"form-control form-control-sm\"\r\n              (change)=\"onWorkExperienceFileSelected($event)\"\r\n              name=\"newWorkAttachment\"\r\n            />\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempJob()?.fileName\">\r\n              <span>{{ tempJob()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"previewSelectedFile(tempJob())\">Preview</button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n        <div class=\"card-footer bg-light text-end mt-3\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditJob(); $event.stopPropagation()\">Cancel</button>\r\n          <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingWork\" (click)=\"saveEditJob(); $event.stopPropagation()\">\r\n            <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingWork ? 'Uploading...' : 'Save' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let job of experience(); let i = index\" class=\"list-group-item p-3\">\r\n\r\n        <div class=\"d-flex justify-content-between align-items-center\">\r\n          <div class=\"d-flex align-items-center cursor-pointer flex-grow-1\" (click)=\"toggleJob(i)\">\r\n            <i class=\"bi bi-briefcase text-primary me-3 fs-4\"></i>\r\n            <div>\r\n              <h6 class=\"mb-0 fw-bold\">{{ job.jobTitle }}</h6>\r\n              <small class=\"text-muted\">\r\n                {{ job.company }} \u2022 {{ formatMonthYear(job.startDate) }} - {{ job.isCurrent ? 'Present' : formatMonthYear(job.endDate) }}\r\n              </small>\r\n              <div\r\n                *ngIf=\"editingJobIndex() !== i && (workIssuesByIndex()[i] || []).length > 0\"\r\n                class=\"alert alert-warning py-1 px-2 mt-2\"\r\n              >\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (workIssuesByIndex()[i] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"d-flex align-items-center gap-2\">\r\n            \r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n              (click)=\"startEditJob(i)\"\r\n              title=\"Edit\"\r\n            >\r\n              <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n            </button>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-danger action-icon-btn\"\r\n              (click)=\"deleteJob(i);\"\r\n              title=\"Delete\"\r\n            >\r\n              <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n            \r\n\r\n            <!-- <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-light p-0\"\r\n              style=\"width: 34px; height: 34px;\"\r\n              (click)=\"toggleJob(i)\"\r\n              title=\"Expand\"\r\n            >\r\n              <i class=\"bi cursor-pointer\" [ngClass]=\"expandedIndex() === i ? 'bi-chevron-up' : 'bi-chevron-down'\"></i>\r\n            </button> -->\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"mt-3 bg-light p-3 rounded small\" *ngIf=\"expandedIndex() === i\">\r\n          <ng-container *ngIf=\"editingJobIndex() !== i; else editJobForm\">\r\n            <ul class=\"mb-0\">\r\n              <li *ngFor=\"let res of job.responsibilities\">{{ res }}</li>\r\n            </ul>\r\n          </ng-container>\r\n\r\n          <ng-template #editJobForm>\r\n            <div *ngIf=\"(workIssuesByIndex()[i] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ (workIssuesByIndex()[i] || []).join(' \u2022 ') }}</div>\r\n            </div>\r\n            <form class=\"row g-2\">\r\n              <div class=\"col-md-6\">\r\n                <label class=\"small text-muted d-block\">JOB TITLE <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [ngModel]=\"tempJob()?.jobTitle\"\r\n                  (ngModelChange)=\"patchTempJob({ jobTitle: $event })\"\r\n                  name=\"jobTitle{{ i }}\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.jobTitle)\">Job title is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-6\">\r\n                <label class=\"small text-muted d-block\">COMPANY <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [ngModel]=\"tempJob()?.company\"\r\n                  (ngModelChange)=\"patchTempJob({ company: $event })\"\r\n                  name=\"company{{ i }}\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.company)\">Company name is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">CITY <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [ngModel]=\"tempJob()?.city\"\r\n                  (ngModelChange)=\"patchTempJob({ city: $event })\"\r\n                  name=\"city{{ i }}\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.city)\">City is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"month\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [ngModel]=\"tempJob()?.startDate\"\r\n                  (ngModelChange)=\"patchTempJob({ startDate: $event })\"\r\n                  name=\"startDate{{ i }}\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.startDate)\">Start date is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"month\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [disabled]=\"tempJob()?.isCurrent\"\r\n                  [ngModel]=\"tempJob()?.endDate\"\r\n                  (ngModelChange)=\"patchTempJob({ endDate: $event })\"\r\n                  name=\"endDate{{ i }}\"\r\n                />\r\n                <div\r\n                  class=\"small text-danger mt-1\"\r\n                  *ngIf=\"!tempJob()?.isCurrent && isBlank(tempJob()?.endDate)\"\r\n                >\r\n                  End date is required\r\n                </div>\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"!tempJob()?.isCurrent && isMonthRangeInvalid(tempJob()?.startDate, tempJob()?.endDate)\">\r\n                  Start date must be less than end date\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4 d-flex align-items-end\">\r\n                <div class=\"form-check\">\r\n                  <input\r\n                    class=\"form-check-input\"\r\n                    type=\"checkbox\"\r\n                    [ngModel]=\"tempJob()?.isCurrent\"\r\n                    (ngModelChange)=\"setTempJobIsCurrent($event)\"\r\n                    name=\"isCurrent{{ i }}\"\r\n                    id=\"isCurrent{{ i }}\"\r\n                  />\r\n                  <label class=\"form-check-label\" for=\"isCurrent{{ i }}\">Current</label>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">RESPONSIBILITIES (one per line)</label>\r\n                <textarea\r\n                  rows=\"4\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [ngModel]=\"(tempJob()?.responsibilities || []).join('\\n')\"\r\n                  (ngModelChange)=\"updateTempResponsibilities($event)\"\r\n                  name=\"responsibilities{{ i }}\"\r\n                ></textarea>\r\n              </div>\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n                <input\r\n                  type=\"file\"\r\n                  accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\"\r\n                  class=\"form-control form-control-sm\"\r\n                  (change)=\"onWorkExperienceFileSelected($event)\"\r\n                  name=\"workAttachment{{ i }}\"\r\n                />\r\n                <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempJob()?.fileName\">\r\n                  <span>{{ tempJob()?.fileName }}</span>\r\n                  <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"previewSelectedFile(tempJob())\">Preview</button>\r\n                </div>\r\n              </div>\r\n            </form>\r\n          </ng-template>\r\n        </div>\r\n\r\n        <div class=\"card-footer bg-light text-end\" *ngIf=\"editingJobIndex() === i\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditJob(); $event.stopPropagation()\">Cancel</button>\r\n         <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingWork\" (click)=\"saveEditJob(); $event.stopPropagation()\">\r\n            <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingWork ? 'Uploading...' : 'Save' }}\r\n          </button>\r\n        </div>      \r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <h5 class=\"fw-bold mb-0\">Certifications</h5>\r\n        <span *ngIf=\"certificationsSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n          Missing info\r\n        </span>\r\n      </div>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n        style=\"width: 32px; height: 32px; line-height: 1;\"\r\n        title=\"Add certification\"\r\n        (click)=\"addCertification()\"\r\n      >\r\n        <span class=\"fw-bold fs-5\">+</span>\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"certs().length === 0 && !isAddingCertification() && editingCertificationIndex() === null\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n      <div class=\"fw-semibold\">Missing required fields</div>\r\n      <div class=\"small\">Add at least one certification.</div>\r\n    </div>\r\n\r\n    <div class=\"list-group list-group-flush shadow-sm rounded border\">\r\n      <div *ngIf=\"isAddingCertification() && tempCertification()\" class=\"list-group-item py-3\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Name <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.name\"\r\n              (ngModelChange)=\"patchTempCertification({ name: $event })\"\r\n              name=\"newCertName\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempCertification()?.name)\">Certificate name is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issuing Organization</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.issuingOrganization || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ issuingOrganization: $event || null })\"\r\n              name=\"newCertOrg\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">State</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.state || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ state: $event || null })\"\r\n              name=\"newCertState\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Credential ID</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.credentialId || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ credentialId: $event || null })\"\r\n              name=\"newCertCredentialId\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issue Date</label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.issueDate || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ issueDate: $event || null })\"\r\n              name=\"newCertIssueDate\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Expiry Date</label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.expiryDate || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ expiryDate: $event || null })\"\r\n              name=\"newCertExpiryDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempCertification()?.issueDate || null, tempCertification()?.expiryDate || null)\">\r\n              Issued date must be less than expiry date\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n            <input\r\n              type=\"file\"\r\n              accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\"\r\n              class=\"form-control form-control-sm\"\r\n              (change)=\"onCertificationFileSelected($event)\"\r\n              name=\"newCertAttachment\"\r\n            />\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempCertification()?.fileName\">\r\n              <span>{{ tempCertification()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"previewSelectedFile(tempCertification())\">Preview</button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditCertification()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCertification\" (click)=\"saveCertificationEditor()\">\r\n            <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingCertification ? 'Uploading...' : 'Save' }}\r\n          </button>        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let cert of certs(); let ci = index\" class=\"list-group-item py-3\">\r\n        <ng-container *ngIf=\"editingCertificationIndex() !== ci; else editCert\">\r\n          <div class=\"d-flex justify-content-between align-items-start gap-3\">\r\n            <div>\r\n              <div class=\"fw-semibold\">{{ cert.name }}</div>\r\n              <div *ngIf=\"(certIssuesByIndex()[ci] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (certIssuesByIndex()[ci] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n              <div class=\"small text-muted\">\r\n                {{ cert.issuingOrganization || '\u2014' }}\r\n                <span *ngIf=\"cert.state\"> \u2022 {{ cert.state }}</span>\r\n              </div>\r\n              <div class=\"small text-muted\">\r\n                Issue: {{ cert.issueDate ? formatMonthYear(cert.issueDate) : '\u2014' }}\r\n                <span class=\"mx-1\">|</span>\r\n                Expiry: {{ cert.expiryDate ? formatMonthYear(cert.expiryDate) : '\u2014' }}\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n               <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n              (click)=\"startEditCertification(ci)\"\r\n              title=\"Edit\"\r\n            >\r\n              <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n            </button>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-danger action-icon-btn\"\r\n              (click)=\"deleteCertification(ci)\"\r\n              title=\"Delete\"\r\n            >\r\n              <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-template #editCert>\r\n          <div *ngIf=\"(certIssuesByIndex()[ci] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ (certIssuesByIndex()[ci] || []).join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Name <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.name\"\r\n                (ngModelChange)=\"patchTempCertification({ name: $event })\"\r\n                name=\"certName{{ ci }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempCertification()?.name)\">Certificate name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issuing Organization</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.issuingOrganization || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ issuingOrganization: $event || null })\"\r\n                name=\"certOrg{{ ci }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">State</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.state || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ state: $event || null })\"\r\n                name=\"certState{{ ci }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Credential ID</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.credentialId || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ credentialId: $event || null })\"\r\n                name=\"certCredentialId{{ ci }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issue Date</label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.issueDate || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ issueDate: $event || null })\"\r\n                name=\"certIssue{{ ci }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Expiry Date</label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.expiryDate || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ expiryDate: $event || null })\"\r\n                name=\"certExpiry{{ ci }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempCertification()?.issueDate || null, tempCertification()?.expiryDate || null)\">\r\n                Issued date must be less than expiry date\r\n              </div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n              <input\r\n                type=\"file\"\r\n                accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\"\r\n                class=\"form-control form-control-sm\"\r\n                (change)=\"onCertificationFileSelected($event)\"\r\n                name=\"certAttachment{{ ci }}\"\r\n              />\r\n              <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempCertification()?.fileName\">\r\n                <span>{{ tempCertification()?.fileName }}</span>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"previewSelectedFile(tempCertification())\">Preview</button>\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditCertification()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCertification\" (click)=\"saveCertificationEditor()\">\r\n              <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              {{ isSavingCertification ? 'Uploading...' : 'Save' }}\r\n            </button>          </div>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <h5 class=\"fw-bold mb-0\">Licenses</h5>\r\n        <span *ngIf=\"licensesSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n          Missing info\r\n        </span>\r\n      </div>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n        style=\"width: 32px; height: 32px; line-height: 1;\"\r\n        title=\"Add license\"\r\n        (click)=\"addLicense()\"\r\n      >\r\n        <span class=\"fw-bold fs-5\">+</span>\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"licenses().length === 0 && !isAddingLicense() && editingLicenseIndex() === null\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n      <div class=\"fw-semibold\">Missing required fields</div>\r\n      <div class=\"small\">Add at least one license.</div>\r\n    </div>\r\n\r\n    <div class=\"list-group list-group-flush shadow-sm rounded border\">\r\n      <div *ngIf=\"isAddingLicense() && tempLicense()\" class=\"list-group-item py-3\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Name <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.name\"\r\n              (ngModelChange)=\"patchTempLicense({ name: $event })\"\r\n              name=\"newLicName\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempLicense()?.name)\">License name is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issuing Authority</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.issuingAuthority || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ issuingAuthority: $event || null })\"\r\n              name=\"newLicAuthority\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">License Number</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.licenseNumber || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ licenseNumber: $event || null })\"\r\n              name=\"newLicNumber\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">State</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.state || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ state: $event || null })\"\r\n              name=\"newLicState\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issue Date</label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.issueDate || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ issueDate: $event || null })\"\r\n              name=\"newLicIssueDate\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Expiry Date</label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.expiryDate || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ expiryDate: $event || null })\"\r\n              name=\"newLicExpiryDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempLicense()?.issueDate || null, tempLicense()?.expiryDate || null)\">\r\n              Issued date must be less than expiry date\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">LICENSE FILE</label>\r\n            <input\r\n              type=\"file\"\r\n              accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\"\r\n              class=\"form-control form-control-sm\"\r\n              (change)=\"onLicenseFileSelected($event)\"\r\n              name=\"newLicenseAttachment\"\r\n            />\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempLicense()?.fileName\">\r\n              <span>{{ tempLicense()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"previewSelectedFile(tempLicense())\">Preview</button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditLicense()\">Cancel</button>\r\n        <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingLicense\" (click)=\"saveLicenseEditor()\">\r\n            <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingLicense ? 'Uploading...' : 'Save' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let lic of licenses(); let li = index\" class=\"list-group-item py-3\">\r\n        <ng-container *ngIf=\"editingLicenseIndex() !== li; else editLic\">\r\n          <div class=\"d-flex justify-content-between align-items-start gap-3\">\r\n            <div>\r\n              <div class=\"fw-semibold\">{{ lic.name }}</div>\r\n              <div *ngIf=\"(licenseIssuesByIndex()[li] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (licenseIssuesByIndex()[li] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n              <div class=\"small text-muted\">\r\n                {{ lic.issuingAuthority || '\u2014' }}\r\n                <span *ngIf=\"lic.state\"> \u2022 {{ lic.state }}</span>\r\n              </div>\r\n              <div class=\"small text-muted\">\r\n                Issue: {{ lic.issueDate ? formatMonthYear(lic.issueDate) : '\u2014' }}\r\n                <span class=\"mx-1\">|</span>\r\n                Expiry: {{ lic.expiryDate ? formatMonthYear(lic.expiryDate) : '\u2014' }}\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n\r\n              <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n              (click)=\"startEditLicense(li)\"\r\n              title=\"Edit\"\r\n            >\r\n              <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n            </button>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-danger action-icon-btn\"\r\n              (click)=\"deleteLicense(li)\"\r\n              title=\"Delete\"\r\n            >\r\n              <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-template #editLic>\r\n          <div *ngIf=\"(licenseIssuesByIndex()[li] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ (licenseIssuesByIndex()[li] || []).join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Name <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.name\"\r\n                (ngModelChange)=\"patchTempLicense({ name: $event })\"\r\n                name=\"licName{{ li }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempLicense()?.name)\">License name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issuing Authority</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.issuingAuthority || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ issuingAuthority: $event || null })\"\r\n                name=\"licAuthority{{ li }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">License Number</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.licenseNumber || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ licenseNumber: $event || null })\"\r\n                name=\"licNumber{{ li }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">State</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.state || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ state: $event || null })\"\r\n                name=\"licState{{ li }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issue Date</label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.issueDate || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ issueDate: $event || null })\"\r\n                name=\"licIssue{{ li }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Expiry Date</label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.expiryDate || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ expiryDate: $event || null })\"\r\n                name=\"licExpiry{{ li }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempLicense()?.issueDate || null, tempLicense()?.expiryDate || null)\">\r\n                Issued date must be less than expiry date\r\n              </div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">LICENSE FILE</label>\r\n              <input\r\n                type=\"file\"\r\n                accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\"\r\n                class=\"form-control form-control-sm\"\r\n                (change)=\"onLicenseFileSelected($event)\"\r\n                name=\"licenseAttachment{{ li }}\"\r\n              />\r\n              <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempLicense()?.fileName\">\r\n                <span>{{ tempLicense()?.fileName }}</span>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"previewSelectedFile(tempLicense())\">Preview</button>\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditLicense()\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingLicense\" (click)=\"saveLicenseEditor()\">\r\n              <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              {{ isSavingLicense ? 'Uploading...' : 'Save' }}\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <h5 class=\"fw-bold mb-0\">Tools</h5>\r\n        <span *ngIf=\"toolsSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n          Missing info\r\n        </span>\r\n      </div>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n        style=\"width: 32px; height: 32px; line-height: 1;\"\r\n        title=\"Add tool\"\r\n        (click)=\"addTool()\"\r\n      >\r\n        <span class=\"fw-bold fs-5\">+</span>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"d-flex flex-wrap gap-2 p-3 bg-white border rounded shadow-sm\">\r\n      <div *ngFor=\"let tool of tools(); let ti = index\" class=\"d-flex align-items-center gap-2\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-light border rounded-pill d-inline-flex align-items-center gap-2 px-3 py-2\"\r\n          (click)=\"openToolEditor(ti)\"\r\n          title=\"Edit\"\r\n        >\r\n          <span class=\"fw-normal text-dark\">{{ tool }}</span>\r\n            <span\r\n              *ngIf=\"(toolIssuesByIndex()[ti] || []).length > 0\"\r\n              class=\"badge bg-warning-subtle text-warning border ms-1\"\r\n            >\r\n              Missing info\r\n            </span>\r\n          <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-sm btn-outline-danger rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\"\r\n          title=\"Delete tool\"\r\n          (click)=\"deleteTool(ti)\"\r\n        >\r\n          <span class=\"fw-bold\">\u00D7</span>\r\n        </button>\r\n      </div>\r\n\r\n      <span *ngIf=\"tools().length === 0\" class=\"text-muted small\">No tools added.</span>\r\n    </div>\r\n\r\n    <!-- Tool edit panel (overlay) -->\r\n    <div\r\n      *ngIf=\"isToolEditorOpen()\"\r\n      class=\"position-fixed top-0 start-0 w-100 h-100\"\r\n      style=\"background: rgba(0,0,0,0.35); z-index: 2000;\"\r\n      (click)=\"closeToolEditor()\"\r\n    >\r\n      <div class=\"container h-100 d-flex align-items-start justify-content-center pt-4\" (click)=\"$event.stopPropagation()\">\r\n        <div class=\"card shadow border-0 w-100\" style=\"max-width: 900px;\">\r\n          <div class=\"card-header bg-white d-flex align-items-center gap-3\">\r\n            <button type=\"button\" class=\"btn btn-link p-0 text-decoration-none\" (click)=\"closeToolEditor()\">\r\n              <i class=\"bi bi-arrow-left fs-5\"></i>\r\n            </button>\r\n            <div class=\"fw-bold\">{{ isAddingTool() ? 'Add Tool' : ('Edit ' + (toolForm()?.name || '') + ' Tool') }}</div>\r\n          </div>\r\n          <div class=\"card-body p-4\">\r\n            <div *ngIf=\"toolFormIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ toolFormIssues().join(' \u2022 ') }}</div>\r\n            </div>\r\n            <div class=\"row g-3\">\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Tool Name <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control\"\r\n                  [ngModel]=\"toolForm()?.name\"\r\n                  (ngModelChange)=\"patchToolForm({ name: $event })\"\r\n                  name=\"toolName\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(toolForm()?.name)\">Tool name is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Service Provider</label>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control\"\r\n                  [ngModel]=\"toolForm()?.providerName\"\r\n                  (ngModelChange)=\"patchToolForm({ providerName: $event })\"\r\n                  name=\"toolProvider\"\r\n                  placeholder=\"Service Provider\"\r\n                />\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span class=\"text-danger\">*</span></label>\r\n                <div class=\"d-flex align-items-center gap-2\">\r\n                  <button\r\n                    *ngFor=\"let s of [1,2,3,4,5]\"\r\n                    type=\"button\"\r\n                    class=\"btn btn-link p-0 text-decoration-none\"\r\n                    (click)=\"setTempToolStars(s)\"\r\n                    [attr.aria-label]=\"'Set rating ' + s\"\r\n                  >\r\n                    <span [class]=\"(toolForm()?.stars || 0) >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n                      {{ (toolForm()?.stars || 0) >= s ? '\u2605' : '\u2606' }}\r\n                    </span>\r\n                  </button>\r\n                  <span class=\"small text-muted\">{{ toolForm()?.stars || 0 }}/5</span>\r\n                </div>\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"(toolForm()?.stars || 0) <= 0\">Star rating is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"number\"\r\n                  class=\"form-control\"\r\n                  [ngModel]=\"toolForm()?.year\"\r\n                  (ngModelChange)=\"patchToolForm({ year: $event === '' ? null : +$event })\"\r\n                  name=\"toolYear\"\r\n                  min=\"1\"\r\n                  max=\"30\"\r\n                  placeholder=\"Years of Experience\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"toolForm()?.year === null || toolForm()?.year === undefined\">Years of experience is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n                <div class=\"form-check form-switch mt-2\">\r\n                  <input\r\n                    class=\"form-check-input\"\r\n                    type=\"checkbox\"\r\n                    [ngModel]=\"toolForm()?.profileVisibility\"\r\n                    (ngModelChange)=\"patchToolForm({ profileVisibility: $event })\"\r\n                    name=\"toolVisible\"\r\n                    id=\"toolVisible\"\r\n                  />\r\n                  <label class=\"form-check-label\" for=\"toolVisible\">Visible</label>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Comment</label>\r\n                <textarea\r\n                  rows=\"4\"\r\n                  class=\"form-control\"\r\n                  [ngModel]=\"toolForm()?.notes\"\r\n                  (ngModelChange)=\"patchToolForm({ notes: $event })\"\r\n                  name=\"toolNotes\"\r\n                  placeholder=\"Comment your tool here...\"\r\n                ></textarea>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"card-footer bg-white d-flex justify-content-end gap-2\">\r\n            <button\r\n              *ngIf=\"!isAddingTool() && editingToolIndex() !== null\"\r\n              type=\"button\"\r\n              class=\"btn btn-link text-danger me-auto\"\r\n              (click)=\"deleteTool(editingToolIndex()!)\"\r\n            >\r\n              Delete\r\n            </button>\r\n            <button type=\"button\" class=\"btn btn-link text-secondary\" (click)=\"closeToolEditor()\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary px-4\" (click)=\"saveToolEditor()\">\r\n              {{ isAddingTool() ? 'Save' : 'Update' }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"row g-4 mb-5\">\r\n    <div class=\"col-md-12\">\r\n      <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <h5 class=\"fw-bold mb-0\">Skills</h5>\r\n          <span *ngIf=\"skillsSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n            Missing info\r\n          </span>\r\n        </div>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\"\r\n          title=\"Add skill\"\r\n          (click)=\"addSkill()\"\r\n        >\r\n          <span class=\"fw-bold fs-5\">+</span>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"d-flex flex-wrap gap-2 p-3 bg-white border rounded shadow-sm\">\r\n        <div *ngFor=\"let skill of skills(); let si = index\" class=\"d-flex align-items-center gap-2\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn btn-light border rounded-pill d-inline-flex align-items-center gap-2 px-3 py-2\"\r\n            (click)=\"openSkillEditor(si)\"\r\n            title=\"Edit\"\r\n          >\r\n            <span class=\"fw-normal text-dark\">{{ skill }}</span>\r\n            <span\r\n              *ngIf=\"(skillIssuesByIndex()[si] || []).length > 0\"\r\n              class=\"badge bg-warning-subtle text-warning border ms-1\"\r\n            >\r\n              Missing info\r\n            </span>\r\n            <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n          </button>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn btn-sm btn-outline-danger rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n            style=\"width: 32px; height: 32px; line-height: 1;\"\r\n            title=\"Delete skill\"\r\n            (click)=\"deleteSkill(si); $event.stopPropagation()\"\r\n          >\r\n            <span class=\"fw-bold\">\u00D7</span>\r\n          </button>\r\n        </div>\r\n\r\n        <span *ngIf=\"skills().length === 0\" class=\"text-muted small\">No skills added.</span>\r\n      </div>\r\n\r\n      <!-- Skill edit panel (overlay) -->\r\n      <div\r\n        *ngIf=\"isSkillEditorOpen()\"\r\n        class=\"position-fixed top-0 start-0 w-100 h-100\"\r\n        style=\"background: rgba(0,0,0,0.35); z-index: 2000;\"\r\n        (click)=\"closeSkillEditor()\"\r\n      >\r\n        <div class=\"container h-100 d-flex align-items-start justify-content-center pt-4\" (click)=\"$event.stopPropagation()\">\r\n          <div class=\"card shadow border-0 w-100\" style=\"max-width: 900px;\">\r\n            <div class=\"card-header bg-white d-flex align-items-center gap-3\">\r\n              <button type=\"button\" class=\"btn btn-link p-0 text-decoration-none\" (click)=\"closeSkillEditor()\">\r\n                <i class=\"bi bi-arrow-left fs-5\"></i>\r\n              </button>\r\n              <div class=\"fw-bold\">{{ isAddingSkill() ? 'Add Skill' : ('Edit ' + (skillForm()?.name || '') + ' Skill') }}</div>\r\n            </div>\r\n            <div class=\"card-body p-4\">\r\n              <div *ngIf=\"skillFormIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n                <div class=\"fw-semibold\">Missing required fields</div>\r\n                <div class=\"small\">{{ skillFormIssues().join(' \u2022 ') }}</div>\r\n              </div>\r\n              <div class=\"row g-3\">\r\n                <div class=\"col-12\">\r\n                  <label class=\"small text-muted d-block\">Skills Name <span class=\"text-danger\">*</span></label>\r\n                  <input\r\n                    type=\"text\"\r\n                    class=\"form-control\"\r\n                    [ngModel]=\"skillForm()?.name\"\r\n                    (ngModelChange)=\"patchSkillForm({ name: $event })\"\r\n                    name=\"skillName\"\r\n                  />\r\n                  <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(skillForm()?.name)\">Skillset name is required</div>\r\n                </div>\r\n\r\n                <div class=\"col-12\">\r\n                  <label class=\"small text-muted d-block\">Service Provider</label>\r\n                  <input\r\n                    type=\"text\"\r\n                    class=\"form-control\"\r\n                    [ngModel]=\"skillForm()?.providerName\"\r\n                    (ngModelChange)=\"patchSkillForm({ providerName: $event })\"\r\n                    name=\"skillProvider\"\r\n                    placeholder=\"Service Provider\"\r\n                  />\r\n                </div>\r\n\r\n                <div class=\"col-md-4\">\r\n                  <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span class=\"text-danger\">*</span></label>\r\n                  <div class=\"d-flex align-items-center gap-2\">\r\n                    <button\r\n                      *ngFor=\"let s of [1,2,3,4,5]\"\r\n                      type=\"button\"\r\n                      class=\"btn btn-link p-0 text-decoration-none\"\r\n                      (click)=\"setTempSkillStars(s)\"\r\n                      [attr.aria-label]=\"'Set rating ' + s\"\r\n                    >\r\n                      <span [class]=\"(skillForm()?.stars || 0) >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n                        {{ (skillForm()?.stars || 0) >= s ? '\u2605' : '\u2606' }}\r\n                      </span>\r\n                    </button>\r\n                    <span class=\"small text-muted\">{{ skillForm()?.stars || 0 }}/5</span>\r\n                  </div>\r\n                  <div class=\"small text-danger mt-1\" *ngIf=\"(skillForm()?.stars || 0) <= 0\">Star rating is required</div>\r\n                </div>\r\n\r\n                <div class=\"col-md-4\">\r\n                  <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n                  <input\r\n                    type=\"number\"\r\n                    class=\"form-control\"\r\n                    [ngModel]=\"skillForm()?.year\"\r\n                    (ngModelChange)=\"patchSkillForm({ year: $event === '' ? null : +$event })\"\r\n                    name=\"skillYear\"\r\n                    min=\"1\"\r\n                    max=\"30\"\r\n                    placeholder=\"Years of Experience\"\r\n                  />\r\n                  <div class=\"small text-danger mt-1\" *ngIf=\"skillForm()?.year === null || skillForm()?.year === undefined\">Years of experience is required</div>\r\n                </div>\r\n\r\n                <div class=\"col-md-4\">\r\n                  <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n                  <div class=\"form-check form-switch mt-2\">\r\n                    <input\r\n                      class=\"form-check-input\"\r\n                      type=\"checkbox\"\r\n                      [ngModel]=\"skillForm()?.profileVisibility\"\r\n                      (ngModelChange)=\"patchSkillForm({ profileVisibility: $event })\"\r\n                      name=\"skillVisible\"\r\n                      id=\"skillVisible\"\r\n                    />\r\n                    <label class=\"form-check-label\" for=\"skillVisible\">Visible</label>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"col-12\">\r\n                  <label class=\"small text-muted d-block\">Comment</label>\r\n                  <textarea\r\n                    rows=\"4\"\r\n                    class=\"form-control\"\r\n                    [ngModel]=\"skillForm()?.notes\"\r\n                    (ngModelChange)=\"patchSkillForm({ notes: $event })\"\r\n                    name=\"skillNotes\"\r\n                    placeholder=\"Comment your skill here...\"\r\n                  ></textarea>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"card-footer bg-white d-flex justify-content-end gap-2\">\r\n              <button\r\n                *ngIf=\"!isAddingSkill() && editingSkillIndex() !== null\"\r\n                type=\"button\"\r\n                class=\"btn btn-link text-danger me-auto\"\r\n                (click)=\"deleteSkill(editingSkillIndex()!)\"\r\n              >\r\n                Delete\r\n              </button>\r\n              <button type=\"button\" class=\"btn btn-link text-secondary\" (click)=\"closeSkillEditor()\">Cancel</button>\r\n              <button type=\"button\" class=\"btn btn-primary px-4\" (click)=\"saveSkillEditor()\">\r\n                {{ isAddingSkill() ? 'Save' : 'Update' }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n</div>\r\n  <div class=\"row g-4 mb-5\">\r\n    <div class=\"col-md-12\">\r\n      <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <h5 class=\"fw-bold mb-0\">Education</h5>\r\n          <span *ngIf=\"educationSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n            Missing info\r\n          </span>\r\n        </div>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\"\r\n          title=\"Add education\"\r\n          (click)=\"addEducation()\"\r\n        >\r\n          <span class=\"fw-bold fs-5\">+</span>\r\n        </button>\r\n      </div>\r\n\r\n      <div *ngIf=\"educationList().length === 0 && !isAddingEducation() && editingEducationIndex() === null\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n        <div class=\"fw-semibold\">Missing required fields</div>\r\n        <div class=\"small\">Add at least one education.</div>\r\n      </div>\r\n\r\n      <div *ngIf=\"isAddingEducation() && tempEducation()\" class=\"p-3 bg-white border rounded shadow-sm mb-2\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">DEGREE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempEducation()?.degree\"\r\n              (ngModelChange)=\"patchTempEducation({ degree: $event })\"\r\n              name=\"newEduDegree\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degree)\">Degree / Course name is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">INSTITUTION <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempEducation()?.institution\"\r\n              (ngModelChange)=\"patchTempEducation({ institution: $event })\"\r\n              name=\"newEduInstitution\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">DEGREE / COURSE TYPE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempEducation()?.degreeType\"\r\n              (ngModelChange)=\"patchTempEducation({ degreeType: $event })\"\r\n              name=\"newEduDegreeType\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degreeType)\">Degree / Course type is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempEducation()?.startDate\"\r\n              (ngModelChange)=\"patchTempEducation({ startDate: $event })\"\r\n              name=\"newEduStartDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.startDate)\">Start date is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempEducation()?.endDate\"\r\n              (ngModelChange)=\"patchTempEducation({ endDate: $event })\"\r\n              name=\"newEduEndDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.endDate)\">End date is required</div>\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempEducation()?.startDate, tempEducation()?.endDate)\">\r\n              Start date must be less than end date\r\n            </div>\r\n          </div>\r\n        </form>\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditEducation()\">Cancel</button>\r\n          <button type=\"button\" class=\"btn btn-sm btn-success px-4\" (click)=\"saveEducation()\">Save</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let edu of educationList(); let ei = index\" class=\"p-3 bg-white border rounded shadow-sm mb-2\">\r\n        <div class=\"d-flex justify-content-between align-items-start\">\r\n          <div>\r\n            <h6 class=\"fw-bold mb-1\">{{ edu.degree }}</h6>\r\n            <p class=\"small text-primary mb-0\">{{ edu.institution }}</p>\r\n            <div *ngIf=\"(educationIssuesByIndex()[ei] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n              <div class=\"fw-semibold small\">Missing required fields</div>\r\n              <div class=\"small\">{{ (educationIssuesByIndex()[ei] || []).join(' \u2022 ') }}</div>\r\n            </div>\r\n          </div>\r\n          <div class=\"d-flex align-items-center gap-2\" *ngIf=\"editingEducationIndex() !== ei\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n              (click)=\"startEditEducation(ei)\"\r\n              title=\"Edit\"\r\n            >\r\n              <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-danger action-icon-btn\"\r\n              (click)=\"deleteEducation(ei)\"\r\n              title=\"Delete\"\r\n            >\r\n              <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"editingEducationIndex() === ei\" class=\"mt-3\">\r\n          <div *ngIf=\"(educationIssuesByIndex()[ei] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ (educationIssuesByIndex()[ei] || []).join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">DEGREE <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.degree\"\r\n                (ngModelChange)=\"patchTempEducation({ degree: $event })\"\r\n                name=\"eduDegree{{ ei }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degree)\">Degree / Course name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">INSTITUTION <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.institution\"\r\n                (ngModelChange)=\"patchTempEducation({ institution: $event })\"\r\n                name=\"eduInstitution{{ ei }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.institution)\">Institution name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">DEGREE / COURSE TYPE <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.degreeType\"\r\n                (ngModelChange)=\"patchTempEducation({ degreeType: $event })\"\r\n                name=\"eduDegreeType{{ ei }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degreeType)\">Degree / Course type is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">City</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.city\"\r\n                (ngModelChange)=\"patchTempEducation({ city: $event })\"\r\n                name=\"eduCity{{ ei }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.startDate\"\r\n                (ngModelChange)=\"patchTempEducation({ startDate: $event })\"\r\n                name=\"eduStartDate{{ ei }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.startDate)\">Start date is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.endDate\"\r\n                (ngModelChange)=\"patchTempEducation({ endDate: $event })\"\r\n                name=\"eduEndDate{{ ei }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.endDate)\">End date is required</div>\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempEducation()?.startDate, tempEducation()?.endDate)\">\r\n                Start date must be less than end date\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditEducation()\">Cancel</button>\r\n            <button class=\"btn btn-sm btn-success px-4\" (click)=\"saveEducation()\">Save</button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"educationList().length === 0\" class=\"text-muted small\">No education added.</div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"d-flex gap-2 justify-content-center mt-5\">\r\n    <button class=\"btn btn-outline-secondary px-5\" (click)=\"onBackClick()\">Back</button>\r\n    <button\r\n      class=\"btn btn-primary px-5 shadow\"\r\n      [disabled]=\"!canConfirmAndContinue()\"\r\n      [title]=\"canConfirmAndContinue() ? '' : 'Please fill all required fields in all mandatory sections.'\"\r\n      (click)=\"saveResumedetails()\"\r\n    >\r\n      Confirm All & Continue\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #loading>\r\n  <div class=\"text-center p-5\">\r\n    <div class=\"spinner-border text-primary\"></div>\r\n    <p class=\"text-muted mt-2\">Loading data...</p>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showPopup\" >\r\n  <div class=\"status-modal-card\" (click)=\"$event.stopPropagation()\">\r\n    <div class=\"status-modal-header\">\r\n      <h3 class=\"mb-1\">Saving Resume Details</h3>\r\n      <p class=\"text-muted mb-0\">Please wait while we process each section.</p>\r\n    </div>\r\n\r\n    <div class=\"status-modal-body\">\r\n      <div class=\"status-modal-row\" *ngFor=\"let item of statusList\">\r\n        <div class=\"status-modal-name\">{{ item.name }}</div>\r\n\r\n        <div class=\"status-modal-state pending\" *ngIf=\"item.status === 'pending'\">\r\n          <span class=\"spinner-border spinner-border-sm me-2\"></span> In progress\r\n        </div>\r\n\r\n        <div class=\"status-modal-state success\" *ngIf=\"item.status === 'success'\">\r\n          <span class=\"me-1\">\u2713</span> Saved\r\n        </div>\r\n\r\n        <div class=\"status-modal-state partial\" *ngIf=\"item.status === 'partial'\">\r\n          <span class=\"me-1\">!</span> {{ item.successCount }} Success / {{ item.failCount }} Failed\r\n        </div>\r\n\r\n        <div class=\"status-modal-state error\" *ngIf=\"item.status === 'error'\">\r\n          <span class=\"me-1\">\u2716</span> {{ item.error || 'Failed' }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"status-modal-footer\">\r\n      <!-- <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"closeSavePopup()\">Back to Preview</button> -->\r\n      <div class=\"d-flex justify-content-end\">\r\n        <button\r\n        [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\"\r\n          *ngIf=\"allSaveStepsSucceeded()\"\r\n          type=\"button\"\r\n          class=\"btn btn-primary\"\r\n          (click)=\"goToDashboard()\"\r\n        >\r\n          Go to Dashboard\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showBackConfirmPopup\">\r\n  <div class=\"confirm-modal-card\">\r\n    <h4 class=\"mb-2\">Leave this page?</h4>\r\n    <p class=\"text-muted mb-4\">Your data might be lost if you go back now.</p>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"stayOnPreview()\">Stay</button>\r\n      <button type=\"button\" class=\"btn btn-danger\" (click)=\"proceedBack()\">Proceed Back</button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".container{max-width:900px;margin:30px auto;font-family:Arial,sans-serif;color:#333}.preview-page-header{max-width:900px;margin:50px auto 10px;padding:0 12px}.preview-title{font-weight:600;margin:0}.preview-subtitle{margin-top:7px;font-size:16px}.section{margin-bottom:25px}.section-title{font-weight:600;display:block;margin-bottom:8px}.section-title .sub{font-weight:400;color:#777;font-size:13px}.dropdown-box{border:1px solid #ddd;border-radius:8px;padding:12px 15px;display:flex;justify-content:space-between;align-items:center}.icons{display:flex;gap:10px}.icon{cursor:pointer;font-size:14px;color:#777}.card{border:1px solid #ddd;border-radius:10px;padding:20px;background:#fff}.category{border-bottom:1px solid #eee;padding:15px 0}.category:last-child{border-bottom:none}.category-header{display:flex;justify-content:space-between;font-weight:600;margin-bottom:10px}.tags{display:flex;flex-wrap:wrap;gap:10px}.tag{background:#f2f4f7;padding:6px 12px;border-radius:6px;font-size:13px}.footer{text-align:center;margin-top:15px;color:#777;cursor:pointer}.actions{display:flex;justify-content:space-between;margin:50px 0 27px}.text-secondary{white-space:pre-line;font-size:.95rem}.extra-small{font-size:.8rem}.card{transition:transform .2s ease,box-shadow .2s ease}.card:hover{transform:translateY(-3px);box-shadow:0 .5rem 1rem #0000001a!important}.achievement-section .badge{font-size:.75rem;white-space:normal;text-align:left}.skill-tag .badge{font-weight:500;font-size:.9rem;transition:all .2s ease;cursor:default}.skill-tag .badge:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.skill-tag .btn-close{opacity:.5}.skill-tag .btn-close:hover{opacity:1}.bg-light.text-dark.border{background-color:#f8f9fa!important;border-color:#dee2e6!important}.card{transition:all .3s cubic-bezier(.25,.8,.25,1)}.card:hover{box-shadow:0 10px 20px #0000001a!important}.card:hover .bg-light{background-color:#e8f5e9!important}.position-fixed .card:hover{transform:none!important}code{background-color:#f8f9fa;padding:2px 6px;border-radius:4px}.list-group-item{transition:all .2s ease-in-out}.list-group-item:hover{background-color:#fcfcfc;transform:translate(5px);box-shadow:-5px 0 15px #0000000d}.border-dashed{border-style:dashed!important}.tool-card{transition:all .2s ease-in-out;border-radius:12px}.tool-card:hover{transform:translateY(-5px);border-color:var(--bs-primary)!important;box-shadow:0 10px 15px #0000001a!important}.tool-card:hover .icon-box{background-color:var(--bs-primary-subtle)!important}.tool-card .icon-box{width:60px;height:60px;transition:background-color .2s ease}.border-dashed{border:2px dashed #dee2e6!important}.border-dashed:hover{border-color:var(--bs-primary)!important;background-color:#fff!important}.popup{position:fixed;top:20%;right:20px;width:320px;background:#fff;border-radius:10px;padding:16px;box-shadow:0 4px 12px #0003}.status-row{display:flex;justify-content:space-between;margin:10px 0}.success{color:#2e7d32;font-weight:700}.error{color:#d32f2f}.pending{color:#f9a825}.section-flag{font-weight:600}button.btn.btn-sm.btn-outline-primary{background-color:#4077ad;border-color:#4077ad;color:#fff;border-radius:10px}button.btn.btn-sm.btn-outline-primary:hover{background-color:#356895;border-color:#356895;color:#fff}button.btn.btn-sm.btn-outline-danger{border-color:#dc3545;color:#dc3545;border-radius:10px}button.btn.btn-sm.btn-outline-danger:hover{background-color:#bb2d3b;border-color:#bb2d3b;color:#fff}button.btn.btn-sm.btn-outline-primary.rounded-circle{background-color:#4077ad;border-color:#4077ad;color:#fff;border-radius:50%!important}button.action-icon-btn{min-width:22px;width:22px;height:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:0!important;background:transparent!important;border:none!important;box-shadow:none!important;line-height:1}button.action-icon-btn.btn-outline-primary{color:#4077ad!important;border-color:#4077ad!important}button.action-icon-btn.btn-outline-danger{color:#dc3545!important}.action-icon-image{width:20px;height:20px;object-fit:contain;display:inline-block}.action-icon-image.edit-icon{filter:brightness(0) saturate(100%) invert(41%) sepia(39%) saturate(774%) hue-rotate(170deg) brightness(91%) contrast(89%)}.action-icon-image.delete-icon{filter:brightness(0) saturate(100%) invert(24%) sepia(79%) saturate(4008%) hue-rotate(344deg) brightness(91%) contrast(90%)}.modal-overlay{position:fixed;inset:0;background:#11182773;display:flex;align-items:center;justify-content:center;z-index:2500;padding:20px}.status-modal-card{width:min(760px,96vw);max-height:85vh;overflow:auto;background:#fff;border-radius:16px;box-shadow:0 20px 40px #0f172a40;border:1px solid #e5e7eb}.status-modal-header{padding:20px 24px 14px;border-bottom:1px solid #eef2f7}.status-modal-body{padding:12px 20px 20px}.status-modal-footer{padding:12px 20px 20px;border-top:1px solid #eef2f7;display:flex;justify-content:end;align-items:center;gap:12px}.status-modal-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 10px;border-bottom:1px solid #f1f5f9}.status-modal-row:last-child{border-bottom:0}.status-modal-name{font-weight:600;color:#1f2937}.status-modal-state{font-size:.92rem;font-weight:600}.status-modal-state.pending{color:#a16207}.status-modal-state.success{color:#166534}.status-modal-state.partial{color:#b45309}.status-modal-state.error{color:#b91c1c}.confirm-modal-card{width:min(520px,96vw);background:#fff;border-radius:14px;box-shadow:0 20px 35px #0f172a38;border:1px solid #e5e7eb;padding:24px}.year-experience-select{max-height:150px}\n"] }]
+        }], ctorParameters: () => [{ type: CredentialingStore }, { type: FileService }, { type: UserSkillSetService }, { type: UserToolService }, { type: UserDocumentService }, { type: UserEducationService }, { type: UserDetailService }, { type: UserExperienceService }, { type: i6.TokenService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LIBRARY_CONFIG]
                 }] }], propDecorators: { providerId: [{
@@ -30656,6 +30881,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], roleData: [{
                 type: Input
+            }], cloudfrontUrl: [{
+                type: Input
             }], backToParent: [{
                 type: Output
             }] } });
@@ -30710,7 +30937,7 @@ class CredentialingComponent {
         console.log(this.states);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CredentialingComponent, deps: [{ token: CredentialingStore }, { token: PostalCodeServices }, { token: LIBRARY_CONFIG }, { token: i11.ViewportScroller }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CredentialingComponent, isStandalone: false, selector: "app-credentialing", inputs: { data: "data" }, outputs: { back: "back" }, ngImport: i0, template: "<div class=\"credentialing-container\">\r\n  <app-stepper *ngIf=\"!store.isUploadSuccess()\"></app-stepper>\r\n  <div class=\"step-content\" [@stepTransition]=\"store.currentStep()\">\r\n    <app-first  *ngIf=\"store.currentStep() === 1\" (backToParent)=\"goBackToInitialProcess()\" [roleData]=\"data\">\r\n    </app-first>\r\n    <ng-container *ngIf=\"store.isUploadSuccess()\">\r\n      <app-preview [providerName]=\"providerName\" [providerId]=\"providerId\" [roleData]=\"data\" *ngIf=\"store.currentStep() === 2\"></app-preview>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!store.isUploadSuccess()\">\r\n      <app-role-select  [providerName]=\"providerName\" [providerId]=\"providerId\"\r\n        [cloudfrontUrl]=\"cloudfrontUrl\" [roleData]=\"data\" *ngIf=\"store.currentStep() === 2\"></app-role-select>\r\n      <app-coverage [states]=\"states\" [providerName]=\"providerName\" [providerId]=\"providerId\"\r\n        *ngIf=\"store.currentStep() === 3\"></app-coverage>\r\n      <app-workexperience [states]=\"states\" [cloudfrontUrl]=\"cloudfrontUrl\" [providerName]=\"providerName\"\r\n        [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 4\"></app-workexperience>\r\n      <app-education [states]=\"states\" [cloudfrontUrl]=\"cloudfrontUrl\" [providerName]=\"providerName\"\r\n        [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 5\"></app-education>\r\n      <app-certification [states]=\"states\" [cloudfrontUrl]=\"cloudfrontUrl\" [providerName]=\"providerName\"\r\n        [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 6\"></app-certification>\r\n      <app-licenses [states]=\"states\" [cloudfrontUrl]=\"cloudfrontUrl\" [providerName]=\"providerName\"\r\n        [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 7\"></app-licenses>\r\n      <app-skills [providerName]=\"providerName\" [providerId]=\"providerId\"\r\n        *ngIf=\"store.currentStep() === 8\"></app-skills>\r\n      <app-tools [providerName]=\"providerName\" [providerId]=\"providerId\" [roleData]=\"data\"\r\n        *ngIf=\"store.currentStep() === 9\"></app-tools>\r\n    </ng-container>\r\n  </div>\r\n</div>", styles: ["::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px!important;border:1px solid #dee2e6}.step-content{position:relative;min-height:400px}\n"], dependencies: [{ kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: StepperComponent, selector: "app-stepper" }, { kind: "component", type: EducationComponent, selector: "app-education", inputs: ["providerId", "providerName", "cloudfrontUrl"] }, { kind: "component", type: CertificationComponent, selector: "app-certification", inputs: ["states", "providerId", "providerName", "cloudfrontUrl"] }, { kind: "component", type: SkillsComponent, selector: "app-skills", inputs: ["providerId", "providerName"] }, { kind: "component", type: LicensesComponent, selector: "app-licenses", inputs: ["providerId", "providerName", "cloudfrontUrl", "states"] }, { kind: "component", type: ToolsComponent, selector: "app-tools", inputs: ["roleData", "providerId", "providerName"] }, { kind: "component", type: RoleSelectComponent, selector: "app-role-select", inputs: ["roleData", "cloudfrontUrl", "providerId", "providerName"], outputs: ["backToParent"] }, { kind: "component", type: Step2CoverageComponent, selector: "app-coverage", inputs: ["providerId", "providerName", "states"] }, { kind: "component", type: WorkexperienceComponent, selector: "app-workexperience", inputs: ["providerId", "providerName", "cloudfrontUrl"] }, { kind: "component", type: FirstComponent, selector: "app-first", outputs: ["backToParent", "nextStep"] }, { kind: "component", type: PreviewComponent, selector: "app-preview", inputs: ["providerId", "providerName", "roleData"], outputs: ["backToParent"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CredentialingComponent, isStandalone: false, selector: "app-credentialing", inputs: { data: "data" }, outputs: { back: "back" }, ngImport: i0, template: "<div class=\"credentialing-container\">\r\n  <app-stepper *ngIf=\"!store.isUploadSuccess()\"></app-stepper>\r\n  <div class=\"step-content\" [@stepTransition]=\"store.currentStep()\">\r\n    <app-first  *ngIf=\"store.currentStep() === 1\" (backToParent)=\"goBackToInitialProcess()\" [roleData]=\"data\">\r\n    </app-first>\r\n    <ng-container *ngIf=\"store.isUploadSuccess()\">\r\n      <app-preview [providerName]=\"providerName\" [providerId]=\"providerId\" [roleData]=\"data\"  [cloudfrontUrl]=\"cloudfrontUrl\" *ngIf=\"store.currentStep() === 2\"></app-preview>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!store.isUploadSuccess()\">\r\n      <app-role-select  [providerName]=\"providerName\" [providerId]=\"providerId\"\r\n        [cloudfrontUrl]=\"cloudfrontUrl\" [roleData]=\"data\" *ngIf=\"store.currentStep() === 2\"></app-role-select>\r\n      <app-coverage [states]=\"states\" [providerName]=\"providerName\" [providerId]=\"providerId\"\r\n        *ngIf=\"store.currentStep() === 3\"></app-coverage>\r\n      <app-workexperience [states]=\"states\" [cloudfrontUrl]=\"cloudfrontUrl\" [providerName]=\"providerName\"\r\n        [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 4\"></app-workexperience>\r\n      <app-education [states]=\"states\" [cloudfrontUrl]=\"cloudfrontUrl\" [providerName]=\"providerName\"\r\n        [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 5\"></app-education>\r\n      <app-certification [states]=\"states\" [cloudfrontUrl]=\"cloudfrontUrl\" [providerName]=\"providerName\"\r\n        [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 6\"></app-certification>\r\n      <app-licenses [states]=\"states\" [cloudfrontUrl]=\"cloudfrontUrl\" [providerName]=\"providerName\"\r\n        [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 7\"></app-licenses>\r\n      <app-skills [providerName]=\"providerName\" [providerId]=\"providerId\"\r\n        *ngIf=\"store.currentStep() === 8\"></app-skills>\r\n      <app-tools [providerName]=\"providerName\" [providerId]=\"providerId\" [roleData]=\"data\"\r\n        *ngIf=\"store.currentStep() === 9\"></app-tools>\r\n    </ng-container>\r\n  </div>\r\n</div>", styles: ["::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px!important;border:1px solid #dee2e6}.step-content{position:relative;min-height:400px}\n"], dependencies: [{ kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: StepperComponent, selector: "app-stepper" }, { kind: "component", type: EducationComponent, selector: "app-education", inputs: ["providerId", "providerName", "cloudfrontUrl"] }, { kind: "component", type: CertificationComponent, selector: "app-certification", inputs: ["states", "providerId", "providerName", "cloudfrontUrl"] }, { kind: "component", type: SkillsComponent, selector: "app-skills", inputs: ["providerId", "providerName"] }, { kind: "component", type: LicensesComponent, selector: "app-licenses", inputs: ["providerId", "providerName", "cloudfrontUrl", "states"] }, { kind: "component", type: ToolsComponent, selector: "app-tools", inputs: ["roleData", "providerId", "providerName"] }, { kind: "component", type: RoleSelectComponent, selector: "app-role-select", inputs: ["roleData", "cloudfrontUrl", "providerId", "providerName"], outputs: ["backToParent"] }, { kind: "component", type: Step2CoverageComponent, selector: "app-coverage", inputs: ["providerId", "providerName", "states"] }, { kind: "component", type: WorkexperienceComponent, selector: "app-workexperience", inputs: ["providerId", "providerName", "cloudfrontUrl"] }, { kind: "component", type: FirstComponent, selector: "app-first", outputs: ["backToParent", "nextStep"] }, { kind: "component", type: PreviewComponent, selector: "app-preview", inputs: ["providerId", "providerName", "roleData", "cloudfrontUrl"], outputs: ["backToParent"] }], animations: [
             trigger('stepTransition', [
                 transition('* <=> *', [
                     style({
@@ -30740,7 +30967,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                                 }))
                             ])
                         ])
-                    ], template: "<div class=\"credentialing-container\">\r\n  <app-stepper *ngIf=\"!store.isUploadSuccess()\"></app-stepper>\r\n  <div class=\"step-content\" [@stepTransition]=\"store.currentStep()\">\r\n    <app-first  *ngIf=\"store.currentStep() === 1\" (backToParent)=\"goBackToInitialProcess()\" [roleData]=\"data\">\r\n    </app-first>\r\n    <ng-container *ngIf=\"store.isUploadSuccess()\">\r\n      <app-preview [providerName]=\"providerName\" [providerId]=\"providerId\" [roleData]=\"data\" *ngIf=\"store.currentStep() === 2\"></app-preview>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!store.isUploadSuccess()\">\r\n      <app-role-select  [providerName]=\"providerName\" [providerId]=\"providerId\"\r\n        [cloudfrontUrl]=\"cloudfrontUrl\" [roleData]=\"data\" *ngIf=\"store.currentStep() === 2\"></app-role-select>\r\n      <app-coverage [states]=\"states\" [providerName]=\"providerName\" [providerId]=\"providerId\"\r\n        *ngIf=\"store.currentStep() === 3\"></app-coverage>\r\n      <app-workexperience [states]=\"states\" [cloudfrontUrl]=\"cloudfrontUrl\" [providerName]=\"providerName\"\r\n        [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 4\"></app-workexperience>\r\n      <app-education [states]=\"states\" [cloudfrontUrl]=\"cloudfrontUrl\" [providerName]=\"providerName\"\r\n        [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 5\"></app-education>\r\n      <app-certification [states]=\"states\" [cloudfrontUrl]=\"cloudfrontUrl\" [providerName]=\"providerName\"\r\n        [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 6\"></app-certification>\r\n      <app-licenses [states]=\"states\" [cloudfrontUrl]=\"cloudfrontUrl\" [providerName]=\"providerName\"\r\n        [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 7\"></app-licenses>\r\n      <app-skills [providerName]=\"providerName\" [providerId]=\"providerId\"\r\n        *ngIf=\"store.currentStep() === 8\"></app-skills>\r\n      <app-tools [providerName]=\"providerName\" [providerId]=\"providerId\" [roleData]=\"data\"\r\n        *ngIf=\"store.currentStep() === 9\"></app-tools>\r\n    </ng-container>\r\n  </div>\r\n</div>", styles: ["::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px!important;border:1px solid #dee2e6}.step-content{position:relative;min-height:400px}\n"] }]
+                    ], template: "<div class=\"credentialing-container\">\r\n  <app-stepper *ngIf=\"!store.isUploadSuccess()\"></app-stepper>\r\n  <div class=\"step-content\" [@stepTransition]=\"store.currentStep()\">\r\n    <app-first  *ngIf=\"store.currentStep() === 1\" (backToParent)=\"goBackToInitialProcess()\" [roleData]=\"data\">\r\n    </app-first>\r\n    <ng-container *ngIf=\"store.isUploadSuccess()\">\r\n      <app-preview [providerName]=\"providerName\" [providerId]=\"providerId\" [roleData]=\"data\"  [cloudfrontUrl]=\"cloudfrontUrl\" *ngIf=\"store.currentStep() === 2\"></app-preview>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!store.isUploadSuccess()\">\r\n      <app-role-select  [providerName]=\"providerName\" [providerId]=\"providerId\"\r\n        [cloudfrontUrl]=\"cloudfrontUrl\" [roleData]=\"data\" *ngIf=\"store.currentStep() === 2\"></app-role-select>\r\n      <app-coverage [states]=\"states\" [providerName]=\"providerName\" [providerId]=\"providerId\"\r\n        *ngIf=\"store.currentStep() === 3\"></app-coverage>\r\n      <app-workexperience [states]=\"states\" [cloudfrontUrl]=\"cloudfrontUrl\" [providerName]=\"providerName\"\r\n        [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 4\"></app-workexperience>\r\n      <app-education [states]=\"states\" [cloudfrontUrl]=\"cloudfrontUrl\" [providerName]=\"providerName\"\r\n        [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 5\"></app-education>\r\n      <app-certification [states]=\"states\" [cloudfrontUrl]=\"cloudfrontUrl\" [providerName]=\"providerName\"\r\n        [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 6\"></app-certification>\r\n      <app-licenses [states]=\"states\" [cloudfrontUrl]=\"cloudfrontUrl\" [providerName]=\"providerName\"\r\n        [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 7\"></app-licenses>\r\n      <app-skills [providerName]=\"providerName\" [providerId]=\"providerId\"\r\n        *ngIf=\"store.currentStep() === 8\"></app-skills>\r\n      <app-tools [providerName]=\"providerName\" [providerId]=\"providerId\" [roleData]=\"data\"\r\n        *ngIf=\"store.currentStep() === 9\"></app-tools>\r\n    </ng-container>\r\n  </div>\r\n</div>", styles: ["::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px!important;border:1px solid #dee2e6}.step-content{position:relative;min-height:400px}\n"] }]
         }], ctorParameters: () => [{ type: CredentialingStore }, { type: PostalCodeServices }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LIBRARY_CONFIG]
@@ -32049,13 +32276,13 @@ class InitialProcessComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InitialProcessComponent, deps: [{ token: i2.Router }, { token: UserDetailService }, { token: i10.FormBuilder }, { token: FileService }, { token: ProvidersService$1 }, { token: RolesService }, { token: i7.BsModalService }, { token: ProviderContractorSubCategoryService }, { token: ProviderContractorSubCategoryService }, { token: i9.AuthService }, { token: i6.TokenService }, { token: i6.RoleContextService }, { token: i6.AuthLogoutService }, { token: LIBRARY_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
-    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            </button>&nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n      <ng-container>\r\n        <div class=\"term-signature col-md-6 col-lg-6 col-sm-12\" [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n          <h6 class=\"checkmark\">Signature</h6>\r\n          <div [ngClass]=\"{ 'd-none': signaturePadData?.publicUrl }\" class=\"sign-img mb-2\">\r\n            <canvas #canvas [width]=\"255\" [height]=\"90\"></canvas>\r\n          </div>\r\n          <div [ngClass]=\"{ 'd-none': !signaturePadData?.publicUrl }\" class=\"mb-2\">\r\n            <img [width]=\"255\" [height]=\"120\" [src]=\"signaturePadData?.publicUrl\" style=\"position: relative\" alt>\r\n          </div>\r\n          <h6 class=\"d-flex align-items-center gap-2\">\r\n            <button (click)=\"clearPad()\" class=\"btn-clear btn-sm\">\r\n              Clear\r\n            </button>\r\n\r\n            <!-- <button (click)=\"uploadImage.click()\" class=\"save-btn upload btn-sm\">\r\n              <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\">\r\n              Upload\r\n              <input #uploadImage type=\"file\" class=\"image-upload d-none\" accept=\"image/*\"\r\n                (change)=\"uploadSignImage($event)\">\r\n            </button> -->\r\n          </h6>\r\n\r\n          <div *ngIf=\"validatePage==1 && (!points || !points?.length || points.length ==0) && !fileData\"\r\n            class=\"invalid-feedback d-block\">\r\n            Signature is required\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 2\">\r\n      <div class=\"add-tab-view \">\r\n        <ul>\r\n          <h5>\r\n            <b>\r\n              Please choose the relevant sections in which you wish to\r\n              participate\r\n            </b>\r\n          </h5>\r\n          <br>\r\n          <b class=\"para-comma\">\r\n            Choose the areas you'd like to be part of \u2014 whether it's programs, services, events, or collaborations,\r\n            you're in control of your involvement.\r\n            <br>\r\n            connect your business to others and prospective clients.\r\n          </b>\r\n        </ul>\r\n\r\n        <div class=\"row mt-4\">\r\n          <ng-container *ngFor=\"let userType of userViewRoles\">\r\n            <div class=\"card card-design text-center user-card mx-2 my-2\"\r\n              [ngClass]=\"userType.value === selectedRoleValue ? 'user-cards-active' : ''\"\r\n              (click)=\"selectedUserRole(userType)\">\r\n              <img [src]=\"userType?.img\" class=\"mb-2 mt-2\" style=\"width: 70px;height: 70px;\">\r\n              <h6 class=\"m-0 mt-2\">{{userType.name}}</h6>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <!-- <h6 class=\"inspect-add\">\r\n          <button (click)=\"next(3);isBusiness=true;\" class=\"add-btn btn-sm\">\r\n            Yes\r\n          </button>\r\n          &nbsp; &nbsp;\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            &nbsp; &nbsp;\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            &nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 3\">\r\n      <form [formGroup]=\"companyForm\" class=\"form\">\r\n        <div class=\"term-list \">\r\n          <ul>\r\n            <h5>\r\n              <b>\r\n                Enter your business information here.\r\n              </b>\r\n            </h5>\r\n            <br>\r\n          </ul>\r\n          <div class=\"profile-field\">\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-6 col-sm-12  mt-3 mb-2\">\r\n                <input [ngClass]=\"{'is-invalid': ( f.companyName.errors && validatePage == 3) || providerError}\"\r\n                  type=\"text\" class=\"form-control\" id=\"companyName\" placeholder=\"Company Name\"\r\n                  formControlName=\"companyName\">\r\n                <div *ngIf=\" f.companyName.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.companyName.errors.required\">\r\n                    Company Name is required\r\n                  </div>\r\n                  <div *ngIf=\"f.companyName.errors.minlength\">\r\n                    Company Name must be at least 2 characters\r\n                  </div>\r\n                  <div *ngIf=\"f.companyName.errors.maxLength\">\r\n                    Company Name must be less than 100 characters\r\n                  </div>\r\n                </div>\r\n                <div *ngIf=\"providerError\" class=\"invalid-feedback\">\r\n                  <div>\r\n                    {{providerError}}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input class=\"form-control block fw-medium shadow-none\" type=\"text\" name=\"inputPhone\"\r\n                  placeholder=\"Company Phone Number\" id=\"inputPhone\" autocomplete=\"off\" formControlName=\"phoneNumber\"\r\n                  [maxLength]=\"14\" (input)=\"formatPhone($event,companyForm)\"\r\n                  [ngClass]=\"{'is-invalid': (f.phoneNumber.errors && validatePage == 3) || providerError}\" />\r\n                <div *ngIf=\"f.phoneNumber.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.phoneNumber.errors.required\">\r\n                    Phone Number is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.address1.errors&& validatePage == 3 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"businessAddress\" ngx-google-places-autocomplete [options]='options'\r\n                  (onAddressChange)=\"AddressChange($event)\" placeholder=\"Business Address 1\" formControlName=\"address1\">\r\n                <div *ngIf=\" f.address1.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.address1.errors.required\">\r\n                    Business Address 1 is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input type=\"text\" class=\"form-control\" id=\"businessAddress2\" placeholder=\"Business Address 2\">\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.city.errors&& validatePage == 3 }\" type=\"text\" class=\"form-control\"\r\n                  id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n                <div *ngIf=\" f.city.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.city.errors.required\">City is required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.state.errors&& validatePage == 3 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n                <div *ngIf=\" f.state.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.state.errors.required\">State is required</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [textMask]=\"{ mask: zipcodeMask }\"\r\n                  [ngClass]=\"{ 'is-invalid':  f.zipcode.errors&& validatePage == 3 }\" type=\"text\" class=\"form-control\"\r\n                  id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n                <div *ngIf=\" f.zipcode.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.zipcode.errors.required\">Zipcode is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.country.errors && validatePage == 3}\" type=\"text\"\r\n                  class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n                <div *ngIf=\" f.country.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.country.errors.required\">Country is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n      <div class=\"profile-field\">\r\n        <div class=\"form-group mb-2 form\" style=\"margin-left: 26px;margin-right: 52px;\">\r\n          <input #uploadLogoInput type=\"file\" accept=\".png,.jpg,.jpeg,.svg\" (change)=\"uploadLogo($event)\"\r\n            class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n\r\n          <input (click)=\"uploadImage2.click()\" [(ngModel)]=\"logoName\" readonly type=\"text\" class=\"form-control\"\r\n            placeholder=\"Upload Company Logo\">\r\n\r\n          <img #uploadImage2 class=\"upload-image\" (click)=\"uploadLogoInput.click()\" src=\"assets/images/icons/upload.svg\"\r\n            alt=\"Logo\">\r\n          <div *ngIf=\"isLogoRequired\" class=\"invalid-feedback d-block\">\r\n            <div class=\"ms-1\">\r\n              Please Upload Company Logo\r\n            </div>\r\n          </div>\r\n        </div>\r\n         <div *ngIf=\"isneeded\" style=\"margin-left: 47px;\r\n    margin-top: -20px;\" class=\"invalid-feedback\">\r\n          <div>Company Logo is\r\n            required</div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"selectedRole?.name == 'Contractor'\" style=\"padding: 0px 20px;border-radius: 5px;\">\r\n        <div class=\"term-list pt-0\">\r\n          <h5>\r\n            <b>\r\n              Contractor Category\r\n            </b>\r\n          </h5>\r\n          <div class=\"profile-field\">\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-12 col-sm-12  mb-2\">\r\n                <label></label>\r\n                <ng-select [items]=\"contractorSubCategories\" bindLabel=\"name\" [multiple]=\"true\" [closeOnSelect]=\"false\"\r\n                  placeholder=\"Select Contractor Category\" (ngModelChange)=\"changeContractor($event)\"\r\n                  [(ngModel)]=\"selectedContractorCategories\">\r\n                </ng-select>\r\n              </div>\r\n            </div>\r\n            <accordion [isAnimated]=\"false\">\r\n              <ng-container *ngFor=\"let item of selectedContractorCategories;let i=index\">\r\n                <accordion-group [isOpen]=\"true\">\r\n                  <button accordion-heading class=\"w-100\" style=\"font-size: 16px;font-weight: 600;\">\r\n                    <div class=\"w-100 mt-2\">\r\n                      <div class=\"backdrop\">\r\n                        <input type=\"checkbox\" [(ngModel)]=\"item.selectAll\" [name]=\"item?.id\" [id]=\"item?.id\"\r\n                          (change)=\"selectAll($event,item?.items)\">\r\n                        <label [for]=\"item?.id\">&nbsp;{{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\">&nbsp;{{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            &nbsp; &nbsp;\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            &nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 4\">\r\n\r\n      <div class=\"add-tab \">\r\n        <ul>\r\n          <h5 class=\"p-4 pb-2\">\r\n            <b>\r\n              We need basic information's and headshot for your profile\r\n            </b>\r\n            <div class=\"form-group form-check agree p-0 mt-3\" *ngIf=\"isBusiness\">\r\n              <input [(ngModel)]=\"isCopy\" type=\"checkbox\" name=\"isCopy\" id=\"isCopy\" class=\"form-check-input mt-2\"\r\n                (change)=\"changeAddressUser()\">\r\n              <label for=\"isCopy\" class=\"form-check-label checkmark\">\r\n                Copy From Provider Infromation\r\n              </label>\r\n            </div>\r\n          </h5>\r\n        </ul>\r\n        <div class=\"profile-field\">\r\n          <form [formGroup]=\"userForm\" class=\"form pb-0\">\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.firstName.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" placeholder=\"Fist Name\" formControlName=\"firstName\" id=\"firstName\">\r\n                <div *ngIf=\" u.firstName.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n                    First Name is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.lastName.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\">\r\n                <div *ngIf=\" u.lastName.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.lastName.errors.required\">\r\n                    Last Name is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.email.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\">\r\n                <div *ngIf=\" u.email.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.email.errors.required\">\r\n                    Emai is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-12 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.address1.errors && validatePage == 4 }\" [options]=\"options\"\r\n                  (onAddressChange)=\"AddressChangeUser($event)\" type=\"text\" class=\"form-control\"\r\n                  placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete>\r\n                <div *ngIf=\" u.address1.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.address1.errors.required\">\r\n                    Home Address 1 is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n                  placeholder=\"Home Address 2\">\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.city.errors && validatePage == 4}\" type=\"text\" class=\"form-control\"\r\n                  id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n                <div *ngIf=\" u.city.errors && validatePage ==4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.city.errors.required\">City is required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.state.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n                <div *ngIf=\" u.state.errors  && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.state.errors.required\">State is required</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [textMask]=\"{ mask: zipcodeMask }\"\r\n                  [ngClass]=\"{ 'is-invalid':  u.zipcode.errors  && validatePage == 4 }\" type=\"text\" class=\"form-control\"\r\n                  id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n                <div *ngIf=\" u.zipcode.errors  && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.zipcode.errors.required\">Zipcode is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.country.errors  && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n                <div *ngIf=\" u.country.errors  && validatePage ==4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.country.errors.required\">Country is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input class=\"form-control block shadow-none\" type=\"text\" (input)=\"formatPhone($event,userForm)\"\r\n                  name=\"inputPhone\" placeholder=\"Phone Number \" id=\"inputPhone\" autocomplete=\"off\"\r\n                  formControlName=\"phoneNumber\" [maxLength]=\"300\"\r\n                  [ngClass]=\"{'is-invalid': ( u.phoneNumber.errors && validatePage == 4)}\">\r\n                <div *ngIf=\"u.phoneNumber.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors.required\">\r\n                    Phone Number is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </form>\r\n          <div class=\"form-group mb-2 form\">\r\n            <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg,.svg\" (change)=\"uploadUserImage($event)\"\r\n              class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n            <input (click)=\"uploadImage1.click()\" [(ngModel)]=\"fileName\" readonly type=\"text\" class=\"form-control\"\r\n              id=\"upload\" accept=\".png,.jpg,.jpeg,.svg\" placeholder=\"Upload Profile Picture\">\r\n            <img #uploadImage1 class=\"upload-image\" (click)=\"uploadFile.click()\" type=\"file\"\r\n              src=\"assets/images/icons/upload.svg\" alt=\"Logo\">\r\n            <div *ngIf=\"isImageRequired\" class=\"invalid-feedback d-block\">\r\n              <div class=\"ms-1\">\r\n                Please Upload Profile Image\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n            <div>\r\n              {{userError}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n        <!-- <div class=\"col-md-3 col-sm-12 pt-3 slider-tab text-center\">\r\n          <img class=\"slider-view\" src=\"assets/images/icons/stepper-3.svg\" alt=\"Logo\">\r\n        </div> -->\r\n        <div class=\"col-5\"></div>\r\n        <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n          <h6>\r\n            <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n              Back\r\n            </button>\r\n            &nbsp; &nbsp;\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            &nbsp; &nbsp;\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          &nbsp; &nbsp;\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&nbsp;&nbsp;\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\"></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: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: i10.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10.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: i10.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i10.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i10.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i14.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i14.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }, { kind: "directive", type: GooglePlaceDirective, selector: "[ngx-google-places-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { kind: "component", type: TermsConditionsComponent, selector: "app-terms-conditions", inputs: ["title", "branding", "PrivacyAndTerms"] }, { kind: "component", type: PrivacyPolicyComponent, selector: "app-privacy-policy", inputs: ["title", "branding", "PrivacyAndTerms"] }, { kind: "component", type: CredentialingComponent, selector: "app-credentialing", inputs: ["data"], outputs: ["back"] }] });
+    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$1 }, { token: RolesService }, { token: i7.BsModalService }, { token: ProviderContractorSubCategoryService }, { token: ProviderContractorSubCategoryService }, { token: i9.AuthService }, { token: i6.TokenService }, { token: i6.RoleContextService }, { token: i6.AuthLogoutService }, { token: LIBRARY_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
+    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            </button>&nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n      <ng-container>\r\n        <div class=\"term-signature col-md-6 col-lg-6 col-sm-12\" [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n          <h6 class=\"checkmark\">Signature</h6>\r\n          <div [ngClass]=\"{ 'd-none': signaturePadData?.publicUrl }\" class=\"sign-img mb-2\">\r\n            <canvas #canvas [width]=\"255\" [height]=\"90\"></canvas>\r\n          </div>\r\n          <div [ngClass]=\"{ 'd-none': !signaturePadData?.publicUrl }\" class=\"mb-2\">\r\n            <img [width]=\"255\" [height]=\"120\" [src]=\"signaturePadData?.publicUrl\" style=\"position: relative\" alt>\r\n          </div>\r\n          <h6 class=\"d-flex align-items-center gap-2\">\r\n            <button (click)=\"clearPad()\" class=\"btn-clear btn-sm\">\r\n              Clear\r\n            </button>\r\n\r\n            <!-- <button (click)=\"uploadImage.click()\" class=\"save-btn upload btn-sm\">\r\n              <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\">\r\n              Upload\r\n              <input #uploadImage type=\"file\" class=\"image-upload d-none\" accept=\"image/*\"\r\n                (change)=\"uploadSignImage($event)\">\r\n            </button> -->\r\n          </h6>\r\n\r\n          <div *ngIf=\"validatePage==1 && (!points || !points?.length || points.length ==0) && !fileData\"\r\n            class=\"invalid-feedback d-block\">\r\n            Signature is required\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 2\">\r\n      <div class=\"add-tab-view \">\r\n        <ul>\r\n          <h5>\r\n            <b>\r\n              Please choose the relevant sections in which you wish to\r\n              participate\r\n            </b>\r\n          </h5>\r\n          <br>\r\n          <b class=\"para-comma\">\r\n            Choose the areas you'd like to be part of \u2014 whether it's programs, services, events, or collaborations,\r\n            you're in control of your involvement.\r\n            <br>\r\n            connect your business to others and prospective clients.\r\n          </b>\r\n        </ul>\r\n\r\n        <div class=\"row mt-4\">\r\n          <ng-container *ngFor=\"let userType of userViewRoles\">\r\n            <div class=\"card card-design text-center user-card mx-2 my-2\"\r\n              [ngClass]=\"userType.value === selectedRoleValue ? 'user-cards-active' : ''\"\r\n              (click)=\"selectedUserRole(userType)\">\r\n              <img [src]=\"userType?.img\" class=\"mb-2 mt-2\" style=\"width: 70px;height: 70px;\">\r\n              <h6 class=\"m-0 mt-2\">{{userType.name}}</h6>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <!-- <h6 class=\"inspect-add\">\r\n          <button (click)=\"next(3);isBusiness=true;\" class=\"add-btn btn-sm\">\r\n            Yes\r\n          </button>\r\n          &nbsp; &nbsp;\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            &nbsp; &nbsp;\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            &nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 3\">\r\n      <form [formGroup]=\"companyForm\" class=\"form\">\r\n        <div class=\"term-list \">\r\n          <ul>\r\n            <h5>\r\n              <b>\r\n                Enter your business information here.\r\n              </b>\r\n            </h5>\r\n            <br>\r\n          </ul>\r\n          <div class=\"profile-field\">\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-6 col-sm-12  mt-3 mb-2\">\r\n                <input [ngClass]=\"{'is-invalid': ( f.companyName.errors && validatePage == 3) || providerError}\"\r\n                  type=\"text\" class=\"form-control\" id=\"companyName\" placeholder=\"Company Name\"\r\n                  formControlName=\"companyName\">\r\n                <div *ngIf=\" f.companyName.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.companyName.errors.required\">\r\n                    Company Name is required\r\n                  </div>\r\n                  <div *ngIf=\"f.companyName.errors.minlength\">\r\n                    Company Name must be at least 2 characters\r\n                  </div>\r\n                  <div *ngIf=\"f.companyName.errors.maxLength\">\r\n                    Company Name must be less than 100 characters\r\n                  </div>\r\n                </div>\r\n                <div *ngIf=\"providerError\" class=\"invalid-feedback\">\r\n                  <div>\r\n                    {{providerError}}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input class=\"form-control block fw-medium shadow-none\" type=\"text\" name=\"inputPhone\"\r\n                  placeholder=\"Company Phone Number\" id=\"inputPhone\" autocomplete=\"off\" formControlName=\"phoneNumber\"\r\n                  [maxLength]=\"14\" (input)=\"formatPhone($event,companyForm)\"\r\n                  [ngClass]=\"{'is-invalid': (f.phoneNumber.errors && validatePage == 3) || providerError}\" />\r\n                <div *ngIf=\"f.phoneNumber.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.phoneNumber.errors.required\">\r\n                    Phone Number is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.address1.errors&& validatePage == 3 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"businessAddress\" ngx-google-places-autocomplete [options]='options'\r\n                  (onAddressChange)=\"AddressChange($event)\" placeholder=\"Business Address 1\" formControlName=\"address1\">\r\n                <div *ngIf=\" f.address1.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.address1.errors.required\">\r\n                    Business Address 1 is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input type=\"text\" class=\"form-control\" id=\"businessAddress2\" placeholder=\"Business Address 2\">\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.city.errors&& validatePage == 3 }\" type=\"text\" class=\"form-control\"\r\n                  id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n                <div *ngIf=\" f.city.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.city.errors.required\">City is required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.state.errors&& validatePage == 3 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n                <div *ngIf=\" f.state.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.state.errors.required\">State is required</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [textMask]=\"{ mask: zipcodeMask }\"\r\n                  [ngClass]=\"{ 'is-invalid':  f.zipcode.errors&& validatePage == 3 }\" type=\"text\" class=\"form-control\"\r\n                  id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n                <div *ngIf=\" f.zipcode.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.zipcode.errors.required\">Zipcode is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.country.errors && validatePage == 3}\" type=\"text\"\r\n                  class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n                <div *ngIf=\" f.country.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.country.errors.required\">Country is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n      <div class=\"profile-field\">\r\n        <div class=\"form-group mb-2 form\" style=\"margin-left: 26px;margin-right: 52px;\">\r\n          <input #uploadLogoInput type=\"file\" accept=\".png,.jpg,.jpeg,.svg\" (change)=\"uploadLogo($event)\"\r\n            class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n\r\n          <input (click)=\"uploadImage2.click()\" [(ngModel)]=\"logoName\" readonly type=\"text\" class=\"form-control\"\r\n            placeholder=\"Upload Company Logo\">\r\n\r\n          <img #uploadImage2 class=\"upload-image\" (click)=\"uploadLogoInput.click()\" src=\"assets/images/icons/upload.svg\"\r\n            alt=\"Logo\">\r\n          <div *ngIf=\"isLogoRequired\" class=\"invalid-feedback d-block\">\r\n            <div class=\"ms-1\">\r\n              Please Upload Company Logo\r\n            </div>\r\n          </div>\r\n        </div>\r\n         <div *ngIf=\"isneeded\" style=\"margin-left: 47px;\r\n    margin-top: -20px;\" class=\"invalid-feedback\">\r\n          <div>Company Logo is\r\n            required</div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"selectedRole?.name == 'Contractor'\" style=\"padding: 0px 20px;border-radius: 5px;\">\r\n        <div class=\"term-list pt-0\">\r\n          <h5>\r\n            <b>\r\n              Contractor Category\r\n            </b>\r\n          </h5>\r\n          <div class=\"profile-field\">\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-12 col-sm-12  mb-2\">\r\n                <label></label>\r\n                <ng-select [items]=\"contractorSubCategories\" bindLabel=\"name\" [multiple]=\"true\" [closeOnSelect]=\"false\"\r\n                  placeholder=\"Select Contractor Category\" (ngModelChange)=\"changeContractor($event)\"\r\n                  [(ngModel)]=\"selectedContractorCategories\">\r\n                </ng-select>\r\n              </div>\r\n            </div>\r\n            <accordion [isAnimated]=\"false\">\r\n              <ng-container *ngFor=\"let item of selectedContractorCategories;let i=index\">\r\n                <accordion-group [isOpen]=\"true\">\r\n                  <button accordion-heading class=\"w-100\" style=\"font-size: 16px;font-weight: 600;\">\r\n                    <div class=\"w-100 mt-2\">\r\n                      <div class=\"backdrop\">\r\n                        <input type=\"checkbox\" [(ngModel)]=\"item.selectAll\" [name]=\"item?.id\" [id]=\"item?.id\"\r\n                          (change)=\"selectAll($event,item?.items)\">\r\n                        <label [for]=\"item?.id\">&nbsp;{{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\">&nbsp;{{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            &nbsp; &nbsp;\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            &nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 4\">\r\n\r\n      <div class=\"add-tab \">\r\n        <ul>\r\n          <h5 class=\"p-4 pb-2\">\r\n            <b>\r\n              We need basic information's and headshot for your profile\r\n            </b>\r\n            <div class=\"form-group form-check agree p-0 mt-3\" *ngIf=\"isBusiness\">\r\n              <input [(ngModel)]=\"isCopy\" type=\"checkbox\" name=\"isCopy\" id=\"isCopy\" class=\"form-check-input mt-2\"\r\n                (change)=\"changeAddressUser()\">\r\n              <label for=\"isCopy\" class=\"form-check-label checkmark\">\r\n                Copy From Provider Infromation\r\n              </label>\r\n            </div>\r\n          </h5>\r\n        </ul>\r\n        <div class=\"profile-field\">\r\n          <form [formGroup]=\"userForm\" class=\"form pb-0\">\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.firstName.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" placeholder=\"Fist Name\" formControlName=\"firstName\" id=\"firstName\">\r\n                <div *ngIf=\" u.firstName.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n                    First Name is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.lastName.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\">\r\n                <div *ngIf=\" u.lastName.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.lastName.errors.required\">\r\n                    Last Name is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.email.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\">\r\n                <div *ngIf=\" u.email.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.email.errors.required\">\r\n                    Emai is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-12 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.address1.errors && validatePage == 4 }\" [options]=\"options\"\r\n                  (onAddressChange)=\"AddressChangeUser($event)\" type=\"text\" class=\"form-control\"\r\n                  placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete>\r\n                <div *ngIf=\" u.address1.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.address1.errors.required\">\r\n                    Home Address 1 is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n                  placeholder=\"Home Address 2\">\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.city.errors && validatePage == 4}\" type=\"text\" class=\"form-control\"\r\n                  id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n                <div *ngIf=\" u.city.errors && validatePage ==4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.city.errors.required\">City is required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.state.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n                <div *ngIf=\" u.state.errors  && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.state.errors.required\">State is required</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [textMask]=\"{ mask: zipcodeMask }\"\r\n                  [ngClass]=\"{ 'is-invalid':  u.zipcode.errors  && validatePage == 4 }\" type=\"text\" class=\"form-control\"\r\n                  id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n                <div *ngIf=\" u.zipcode.errors  && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.zipcode.errors.required\">Zipcode is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.country.errors  && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n                <div *ngIf=\" u.country.errors  && validatePage ==4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.country.errors.required\">Country is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input class=\"form-control block shadow-none\" type=\"text\" (input)=\"formatPhone($event,userForm)\"\r\n                  name=\"inputPhone\" placeholder=\"Phone Number \" id=\"inputPhone\" autocomplete=\"off\"\r\n                  formControlName=\"phoneNumber\" [maxLength]=\"300\"\r\n                  [ngClass]=\"{'is-invalid': ( u.phoneNumber.errors && validatePage == 4)}\">\r\n                <div *ngIf=\"u.phoneNumber.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors.required\">\r\n                    Phone Number is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </form>\r\n          <div class=\"form-group mb-2 form\">\r\n            <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg,.svg\" (change)=\"uploadUserImage($event)\"\r\n              class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n            <input (click)=\"uploadImage1.click()\" [(ngModel)]=\"fileName\" readonly type=\"text\" class=\"form-control\"\r\n              id=\"upload\" accept=\".png,.jpg,.jpeg,.svg\" placeholder=\"Upload Profile Picture\">\r\n            <img #uploadImage1 class=\"upload-image\" (click)=\"uploadFile.click()\" type=\"file\"\r\n              src=\"assets/images/icons/upload.svg\" alt=\"Logo\">\r\n            <div *ngIf=\"isImageRequired\" class=\"invalid-feedback d-block\">\r\n              <div class=\"ms-1\">\r\n                Please Upload Profile Image\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n            <div>\r\n              {{userError}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n        <!-- <div class=\"col-md-3 col-sm-12 pt-3 slider-tab text-center\">\r\n          <img class=\"slider-view\" src=\"assets/images/icons/stepper-3.svg\" alt=\"Logo\">\r\n        </div> -->\r\n        <div class=\"col-5\"></div>\r\n        <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n          <h6>\r\n            <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n              Back\r\n            </button>\r\n            &nbsp; &nbsp;\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            &nbsp; &nbsp;\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          &nbsp; &nbsp;\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&nbsp;&nbsp;\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\"></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:1.7s linear infinite;margin:-9px 0 0 -28px}@keyframes spin{to{transform:rotate(360deg)}}::ng-deep .backdrop{background-color:transparent!important}.filter-black{filter:brightness(.4)!important}.footer-view{margin-top:3rem;margin-left:0;margin-right:0}.footer-signature{margin-top:9rem}.slider-view{width:11rem;margin-left:1px}.container{margin-top:30px}.container .card{border-radius:1.25rem}.container .header{padding:33px 10px 0}.container .header .logo{width:15%;height:80%}.container .form-control{padding:.75rem 1rem;border-color:#a1a1a1}.container .form-control:focus{color:#000;box-shadow:none;border-color:#a1a1a1!important}.container .form-control::placeholder{font-weight:500;font-size:12px;color:#a1a1a1}.container .link{color:#4077ad}.container .link-signup{font-weight:bolder}.container .form-check-label{margin-bottom:0;padding-top:9px}.container .content-view{margin-top:10%}.container .content-description{margin-top:25%}.container .tag-content{color:#fff9e8;margin-left:9%}.container .tag-content p{color:#fff9e8}.container .form-check-input:checked{background-color:#000;border-color:#000}.container .img-tick{margin:-31px 12px 0 -35px}.container .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #000000}.container .form-check-input:focus{box-shadow:none}.container input[type=checkbox]{accent-color:#000000}.term-list{padding:48px 60px 6px 0;margin-left:30px;color:\"#1f1f1fdb\"}.add-tab{padding:75px 75px 6px 1px;margin-left:50px;color:\"#1f1f1fdb\"}.add-tab-view{padding:75px 75px 6px 1px;margin-left:80px;color:\"#1f1f1fdb\"}.inspect-add{margin-top:3rem}.add-btn{font-size:16px;border-radius:5px;transition:.2s;padding:.25rem .5rem;background:#fff;border:1px solid rgba(148,147,147,.1882352941);color:#444;line-height:48px;box-shadow:0 1px 9px #98a2b3;width:9rem}.add-btn:hover{border:1px solid rgba(148,147,147,.1882352941);box-shadow:none}.agree{padding:0 0 8px 47px}.agree .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #98A2B3;width:14px;height:14px;margin:5px 9px 0 -35px}.agree .form-check-input:focus{box-shadow:none}.agree .form-check-input:checked{background-color:#000;border-color:#000}.agree .invalid-feedback{font-size:10px!important;margin:0 0 0 21px}.checkmark{vertical-align:text-bottom;color:#98a2b3;font-weight:500;font-size:12px}.term-signature{padding-left:16rem;padding-right:65px;position:absolute;margin:150px 0 0 50%}.participate-tab{height:135px;width:142px}.card-design{height:147px;width:147px;padding-left:10px;margin-left:42px;background:#fff0;border:2px solid #98A2B3;box-shadow:0 0 4px #98a2b3;border-radius:27px;margin-bottom:42px}.upload{height:39px;margin-top:-4px;width:126px;font-size:12px}.participate-tab{margin-top:-25px}.slider{width:14rem;margin-left:69px}.btn-clear{background:#d3dae6;color:#98a2b3;font-size:12px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;width:46%;line-height:28px}.btn-close{background:#f1f4fa;color:#98a2b3;font-size:17px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;font-weight:500;width:116px;color:#737a87;line-height:28px}.view-logo{padding-top:1%;padding-bottom:4%;text-align:center}.back-btn{border-radius:45px;height:41px}.next{background:#4077ad;border-radius:30px;height:60px;width:60px;border:white}.profile-field{margin-top:-10px}.profile-field input{line-height:30px;margin:-10px 3px 3px}.load-page{padding:21px 49px 13px 34px}.sign-img{width:291px;height:95px;border-radius:8px;border:1px solid rgba(179,178,178,.33);margin-top:19px}.upload-image{height:16px;width:16px;position:absolute;margin-left:66rem;margin-top:-39px}.para-comma{font-weight:500}.go-btn{border-radius:45px;height:50px;padding:0 20px;background:#4077ad;border:1px solid #4077ad;color:#fff;line-height:28px;font-size:14px;font-weight:500}.text-label{color:#747b83;font-weight:500}.form{padding:20px;border-radius:5px}.form-control:focus{color:#000;box-shadow:none;border-color:#848484!important}.form-control::placeholder{font-weight:500;font-size:12px;color:#bec1be;padding-left:10px}.btn-primary:active{background-color:#50575e}@media screen and (min-width: 500px) and (max-width: 769px){.content-view{background:#0c1620;width:44rem;margin:31px 0 0!important;padding:28px 32px 17px 71px!important;border-radius:29px}.upload-image{margin-left:25rem!important}}@media screen and (min-width: 768px) and (max-width: 1024px){.back-btn{height:31px;width:82px;position:absolute;margin-left:-53px}.back-tab{position:absolute;margin-left:-87px;height:37px}.go-btn{width:175px;height:44px}.term-signature{padding-left:10px}.upload-image{margin-left:40rem}}@media screen and (min-width: 374px) and (max-width: 426px){.head-logo{width:216px;padding-bottom:16px}.slider{visibility:hidden}.back-btn{height:31px;width:82px;position:absolute;margin-left:73px;margin-top:23px}.go-btn{width:175px;height:44px}.upload-image{margin-left:16rem}.term-signature{margin:84% 0 7px 4%}}@media screen and (min-width: 320px) and (max-width: 426px){.footer-signature{margin-top:20rem}.login .head-logo{padding:16px 2px 0;width:38%!important;height:40%!important}.container{margin-top:5px!important}.card{padding:2px!important}.tag-content{margin:3% 0 0!important;background-color:#121b24;border-radius:13px}.img-tick{margin:3px!important}.slider{visibility:hidden}.load-page{padding:0}.head-logo{width:216px;padding-bottom:16px}.back-btn{height:26px;width:71px;position:absolute;margin-left:-17rem!important;font-size:10px;margin-top:23px}.go-btn{width:142px;height:36px;margin-right:-28px;font-size:10px}.add-tab,.add-tab-view{padding:30px 33px 2px 3px;margin-left:15px}.add-btn{width:6rem}.slider-tab{visibility:hidden}.back-tab{margin-left:-14rem;margin-top:1px;font-size:14px;height:39px}.participate-tab{height:96px;width:87px}.card-design{height:124px;width:125px;padding-left:17px;margin-left:30px}.term-signature{padding:22px 22px 13px 27px}.term-list{padding:43px 10px 10px 3px;margin-left:0;text-align:-webkit-center}}@media screen and (min-width: 320px) and (max-width: 376px){.agree{padding:0 0 8px 25px}.participate-tab{height:96px;width:87px}.card-design{height:109px;width:97px;padding-left:4px;margin-left:10px}.card-design h6{font-size:10px;padding-left:14px;font-weight:600}.sign-img{width:270px}.term-list{padding:20px 20px 6px 4px;margin-left:13px}}@media screen and (min-width: 320px) and (max-width: 350px){.upload-image{height:13px;width:11px;margin-left:10rem;margin-top:-35px}.btn-clear{width:92px}.term-signature{margin:84% 0 7px 4%}}.disabled-btn{cursor:not-allowed!important;background:#4077ad!important;color:#fff!important}.modal-dialog .modal-content{border-radius:12px;background:#fff!important;border:1px solid rgba(128,128,128,.3294117647)!important}.title-popup{font-size:18px;color:#0c1620}ul.term-list-data li{padding-bottom:5px;font-size:13px;font-weight:500;line-height:21px}ol,ul,dl{margin-top:0;margin-bottom:1rem}::ng-deep .modal-content{background:none!important;width:100%;border:none}.hidden-view{display:none}.header-container{position:relative;padding:20px}.view-logo{text-align:center}.logout-button{top:20px;right:20px;position:absolute}.logout-button button{background:none;border:none;font-size:16px;display:flex;align-items:center;cursor:pointer}.logout-button img{margin-right:5px;height:20px}.user-card{align-items:center;color:#4077ad;cursor:pointer}.user-cards-active{background:#4077ad;color:#fff}.save-btn.upload{border:1px solid #4077AD;background-color:#4077ad;color:#fff;border-radius:5px;background:#4077ad;padding:4px 10px;display:inline-flex;align-items:center;gap:6px}.save-btn.upload img{filter:brightness(0) invert(1)}.form-check.agree{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}.form-check.agree .form-check-input{margin-top:4px;flex-shrink:0}.form-check.agree .form-check-label{line-height:1.4;cursor:pointer;white-space:normal}.spinner-16{width:16px;height:16px}.h6-buttons{display:flex;align-items:center;gap:8px}.form-check.agree{display:flex;align-items:flex-start;margin-bottom:14px}.form-check-input{position:absolute;opacity:0;cursor:pointer}.form-check-label{position:relative;padding-left:28px;cursor:pointer;font-size:14px;line-height:20px;color:#212529;-webkit-user-select:none;user-select:none}.form-check-label:before{content:\"\";position:absolute;left:0;top:8px;width:18px;height:18px;border:2px solid #adb5bd;border-radius:4px;background:#fff;transition:all .2s ease}.form-check-label:after{content:\"\";position:absolute;left:5px;top:10px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .15s ease}.form-check-input:checked+.form-check-label:before{background-color:#4077ad;border-color:#4077ad}.form-check-input:checked+.form-check-label:after{transform:rotate(45deg) scale(1)}.form-check-label:hover:before{border-color:#4077ad}.form-check-input:focus+.form-check-label:before{box-shadow:0 0 0 3px #0d6efd40}.form-check-input.is-invalid+.form-check-label:before{border-color:#dc3545}.form-check-input.is-invalid:checked+.form-check-label:before{background-color:#dc3545}.invalid-feedback{display:block;font-size:12px;margin-left:7px;margin-top:4px}::ng-deep .modal-dialog{max-width:750px}.user-cards-active{background-color:#4077ad;color:#fff;border:2px solid #4077AD}.terms-fixed-modal{width:1080px;height:700px;display:flex;flex-direction:column}.terms-scroll-area{flex:1 1 auto;overflow-y:auto;padding:16px}body.modal-open{overflow:hidden!important}.modal{z-index:1055!important}.modal-backdrop{z-index:1050!important}.modal-dialog{margin:auto;pointer-events:auto}.modal-content{position:relative;z-index:1060}.logout-container{display:flex;justify-content:flex-end}.logout-wrapper{display:flex;align-items:center;cursor:pointer;gap:6px}.logout-icon{width:20px;height:20px;background:url(/assets/images/icons/logoutt.svg) no-repeat center;background-size:contain}@media screen and (max-width: 767px){.term-signature{padding-left:3rem;padding-right:0;position:unset;margin:0}.footer-signature{margin-top:0rem}.disabled-btn{position:absolute;bottom:13px;right:24px}.next{height:46px;width:46px;position:absolute;bottom:21px;right:35px}.mob{padding-bottom:4.5rem!important}.checkmark{width:85%}.terms-fixed-modal{width:unset}::ng-deep .privacy-policy-modal .logo-section{margin-bottom:0!important}.add-tab-view{padding:30px 25px 6px;margin-left:0}.user-card{width:96%}.footer .btn-mob{display:flex;align-items:center}.back-btn{position:absolute;bottom:21px;left:10px}.actions{margin:50px 34px 1px}}@media screen and (min-width: 768px) and (max-width: 1024px){.footer-signature{margin-top:3rem}}\n"], dependencies: [{ kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i14.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i14.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }, { kind: "directive", type: GooglePlaceDirective, selector: "[ngx-google-places-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { kind: "component", type: TermsConditionsComponent, selector: "app-terms-conditions", inputs: ["title", "branding", "PrivacyAndTerms"] }, { kind: "component", type: PrivacyPolicyComponent, selector: "app-privacy-policy", inputs: ["title", "branding", "PrivacyAndTerms"] }, { kind: "component", type: CredentialingComponent, selector: "app-credentialing", inputs: ["data"], outputs: ["back"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InitialProcessComponent, decorators: [{
             type: Component,
             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            </button>&nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n      <ng-container>\r\n        <div class=\"term-signature col-md-6 col-lg-6 col-sm-12\" [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n          <h6 class=\"checkmark\">Signature</h6>\r\n          <div [ngClass]=\"{ 'd-none': signaturePadData?.publicUrl }\" class=\"sign-img mb-2\">\r\n            <canvas #canvas [width]=\"255\" [height]=\"90\"></canvas>\r\n          </div>\r\n          <div [ngClass]=\"{ 'd-none': !signaturePadData?.publicUrl }\" class=\"mb-2\">\r\n            <img [width]=\"255\" [height]=\"120\" [src]=\"signaturePadData?.publicUrl\" style=\"position: relative\" alt>\r\n          </div>\r\n          <h6 class=\"d-flex align-items-center gap-2\">\r\n            <button (click)=\"clearPad()\" class=\"btn-clear btn-sm\">\r\n              Clear\r\n            </button>\r\n\r\n            <!-- <button (click)=\"uploadImage.click()\" class=\"save-btn upload btn-sm\">\r\n              <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\">\r\n              Upload\r\n              <input #uploadImage type=\"file\" class=\"image-upload d-none\" accept=\"image/*\"\r\n                (change)=\"uploadSignImage($event)\">\r\n            </button> -->\r\n          </h6>\r\n\r\n          <div *ngIf=\"validatePage==1 && (!points || !points?.length || points.length ==0) && !fileData\"\r\n            class=\"invalid-feedback d-block\">\r\n            Signature is required\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 2\">\r\n      <div class=\"add-tab-view \">\r\n        <ul>\r\n          <h5>\r\n            <b>\r\n              Please choose the relevant sections in which you wish to\r\n              participate\r\n            </b>\r\n          </h5>\r\n          <br>\r\n          <b class=\"para-comma\">\r\n            Choose the areas you'd like to be part of \u2014 whether it's programs, services, events, or collaborations,\r\n            you're in control of your involvement.\r\n            <br>\r\n            connect your business to others and prospective clients.\r\n          </b>\r\n        </ul>\r\n\r\n        <div class=\"row mt-4\">\r\n          <ng-container *ngFor=\"let userType of userViewRoles\">\r\n            <div class=\"card card-design text-center user-card mx-2 my-2\"\r\n              [ngClass]=\"userType.value === selectedRoleValue ? 'user-cards-active' : ''\"\r\n              (click)=\"selectedUserRole(userType)\">\r\n              <img [src]=\"userType?.img\" class=\"mb-2 mt-2\" style=\"width: 70px;height: 70px;\">\r\n              <h6 class=\"m-0 mt-2\">{{userType.name}}</h6>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <!-- <h6 class=\"inspect-add\">\r\n          <button (click)=\"next(3);isBusiness=true;\" class=\"add-btn btn-sm\">\r\n            Yes\r\n          </button>\r\n          &nbsp; &nbsp;\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            &nbsp; &nbsp;\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            &nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 3\">\r\n      <form [formGroup]=\"companyForm\" class=\"form\">\r\n        <div class=\"term-list \">\r\n          <ul>\r\n            <h5>\r\n              <b>\r\n                Enter your business information here.\r\n              </b>\r\n            </h5>\r\n            <br>\r\n          </ul>\r\n          <div class=\"profile-field\">\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-6 col-sm-12  mt-3 mb-2\">\r\n                <input [ngClass]=\"{'is-invalid': ( f.companyName.errors && validatePage == 3) || providerError}\"\r\n                  type=\"text\" class=\"form-control\" id=\"companyName\" placeholder=\"Company Name\"\r\n                  formControlName=\"companyName\">\r\n                <div *ngIf=\" f.companyName.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.companyName.errors.required\">\r\n                    Company Name is required\r\n                  </div>\r\n                  <div *ngIf=\"f.companyName.errors.minlength\">\r\n                    Company Name must be at least 2 characters\r\n                  </div>\r\n                  <div *ngIf=\"f.companyName.errors.maxLength\">\r\n                    Company Name must be less than 100 characters\r\n                  </div>\r\n                </div>\r\n                <div *ngIf=\"providerError\" class=\"invalid-feedback\">\r\n                  <div>\r\n                    {{providerError}}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input class=\"form-control block fw-medium shadow-none\" type=\"text\" name=\"inputPhone\"\r\n                  placeholder=\"Company Phone Number\" id=\"inputPhone\" autocomplete=\"off\" formControlName=\"phoneNumber\"\r\n                  [maxLength]=\"14\" (input)=\"formatPhone($event,companyForm)\"\r\n                  [ngClass]=\"{'is-invalid': (f.phoneNumber.errors && validatePage == 3) || providerError}\" />\r\n                <div *ngIf=\"f.phoneNumber.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.phoneNumber.errors.required\">\r\n                    Phone Number is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.address1.errors&& validatePage == 3 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"businessAddress\" ngx-google-places-autocomplete [options]='options'\r\n                  (onAddressChange)=\"AddressChange($event)\" placeholder=\"Business Address 1\" formControlName=\"address1\">\r\n                <div *ngIf=\" f.address1.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.address1.errors.required\">\r\n                    Business Address 1 is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input type=\"text\" class=\"form-control\" id=\"businessAddress2\" placeholder=\"Business Address 2\">\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.city.errors&& validatePage == 3 }\" type=\"text\" class=\"form-control\"\r\n                  id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n                <div *ngIf=\" f.city.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.city.errors.required\">City is required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.state.errors&& validatePage == 3 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n                <div *ngIf=\" f.state.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.state.errors.required\">State is required</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [textMask]=\"{ mask: zipcodeMask }\"\r\n                  [ngClass]=\"{ 'is-invalid':  f.zipcode.errors&& validatePage == 3 }\" type=\"text\" class=\"form-control\"\r\n                  id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n                <div *ngIf=\" f.zipcode.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.zipcode.errors.required\">Zipcode is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.country.errors && validatePage == 3}\" type=\"text\"\r\n                  class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n                <div *ngIf=\" f.country.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.country.errors.required\">Country is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n      <div class=\"profile-field\">\r\n        <div class=\"form-group mb-2 form\" style=\"margin-left: 26px;margin-right: 52px;\">\r\n          <input #uploadLogoInput type=\"file\" accept=\".png,.jpg,.jpeg,.svg\" (change)=\"uploadLogo($event)\"\r\n            class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n\r\n          <input (click)=\"uploadImage2.click()\" [(ngModel)]=\"logoName\" readonly type=\"text\" class=\"form-control\"\r\n            placeholder=\"Upload Company Logo\">\r\n\r\n          <img #uploadImage2 class=\"upload-image\" (click)=\"uploadLogoInput.click()\" src=\"assets/images/icons/upload.svg\"\r\n            alt=\"Logo\">\r\n          <div *ngIf=\"isLogoRequired\" class=\"invalid-feedback d-block\">\r\n            <div class=\"ms-1\">\r\n              Please Upload Company Logo\r\n            </div>\r\n          </div>\r\n        </div>\r\n         <div *ngIf=\"isneeded\" style=\"margin-left: 47px;\r\n    margin-top: -20px;\" class=\"invalid-feedback\">\r\n          <div>Company Logo is\r\n            required</div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"selectedRole?.name == 'Contractor'\" style=\"padding: 0px 20px;border-radius: 5px;\">\r\n        <div class=\"term-list pt-0\">\r\n          <h5>\r\n            <b>\r\n              Contractor Category\r\n            </b>\r\n          </h5>\r\n          <div class=\"profile-field\">\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-12 col-sm-12  mb-2\">\r\n                <label></label>\r\n                <ng-select [items]=\"contractorSubCategories\" bindLabel=\"name\" [multiple]=\"true\" [closeOnSelect]=\"false\"\r\n                  placeholder=\"Select Contractor Category\" (ngModelChange)=\"changeContractor($event)\"\r\n                  [(ngModel)]=\"selectedContractorCategories\">\r\n                </ng-select>\r\n              </div>\r\n            </div>\r\n            <accordion [isAnimated]=\"false\">\r\n              <ng-container *ngFor=\"let item of selectedContractorCategories;let i=index\">\r\n                <accordion-group [isOpen]=\"true\">\r\n                  <button accordion-heading class=\"w-100\" style=\"font-size: 16px;font-weight: 600;\">\r\n                    <div class=\"w-100 mt-2\">\r\n                      <div class=\"backdrop\">\r\n                        <input type=\"checkbox\" [(ngModel)]=\"item.selectAll\" [name]=\"item?.id\" [id]=\"item?.id\"\r\n                          (change)=\"selectAll($event,item?.items)\">\r\n                        <label [for]=\"item?.id\">&nbsp;{{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\">&nbsp;{{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            &nbsp; &nbsp;\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            &nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 4\">\r\n\r\n      <div class=\"add-tab \">\r\n        <ul>\r\n          <h5 class=\"p-4 pb-2\">\r\n            <b>\r\n              We need basic information's and headshot for your profile\r\n            </b>\r\n            <div class=\"form-group form-check agree p-0 mt-3\" *ngIf=\"isBusiness\">\r\n              <input [(ngModel)]=\"isCopy\" type=\"checkbox\" name=\"isCopy\" id=\"isCopy\" class=\"form-check-input mt-2\"\r\n                (change)=\"changeAddressUser()\">\r\n              <label for=\"isCopy\" class=\"form-check-label checkmark\">\r\n                Copy From Provider Infromation\r\n              </label>\r\n            </div>\r\n          </h5>\r\n        </ul>\r\n        <div class=\"profile-field\">\r\n          <form [formGroup]=\"userForm\" class=\"form pb-0\">\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.firstName.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" placeholder=\"Fist Name\" formControlName=\"firstName\" id=\"firstName\">\r\n                <div *ngIf=\" u.firstName.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n                    First Name is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.lastName.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\">\r\n                <div *ngIf=\" u.lastName.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.lastName.errors.required\">\r\n                    Last Name is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.email.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\">\r\n                <div *ngIf=\" u.email.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.email.errors.required\">\r\n                    Emai is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-12 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.address1.errors && validatePage == 4 }\" [options]=\"options\"\r\n                  (onAddressChange)=\"AddressChangeUser($event)\" type=\"text\" class=\"form-control\"\r\n                  placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete>\r\n                <div *ngIf=\" u.address1.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.address1.errors.required\">\r\n                    Home Address 1 is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n                  placeholder=\"Home Address 2\">\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.city.errors && validatePage == 4}\" type=\"text\" class=\"form-control\"\r\n                  id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n                <div *ngIf=\" u.city.errors && validatePage ==4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.city.errors.required\">City is required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.state.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n                <div *ngIf=\" u.state.errors  && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.state.errors.required\">State is required</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [textMask]=\"{ mask: zipcodeMask }\"\r\n                  [ngClass]=\"{ 'is-invalid':  u.zipcode.errors  && validatePage == 4 }\" type=\"text\" class=\"form-control\"\r\n                  id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n                <div *ngIf=\" u.zipcode.errors  && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.zipcode.errors.required\">Zipcode is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.country.errors  && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n                <div *ngIf=\" u.country.errors  && validatePage ==4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.country.errors.required\">Country is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input class=\"form-control block shadow-none\" type=\"text\" (input)=\"formatPhone($event,userForm)\"\r\n                  name=\"inputPhone\" placeholder=\"Phone Number \" id=\"inputPhone\" autocomplete=\"off\"\r\n                  formControlName=\"phoneNumber\" [maxLength]=\"300\"\r\n                  [ngClass]=\"{'is-invalid': ( u.phoneNumber.errors && validatePage == 4)}\">\r\n                <div *ngIf=\"u.phoneNumber.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors.required\">\r\n                    Phone Number is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </form>\r\n          <div class=\"form-group mb-2 form\">\r\n            <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg,.svg\" (change)=\"uploadUserImage($event)\"\r\n              class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n            <input (click)=\"uploadImage1.click()\" [(ngModel)]=\"fileName\" readonly type=\"text\" class=\"form-control\"\r\n              id=\"upload\" accept=\".png,.jpg,.jpeg,.svg\" placeholder=\"Upload Profile Picture\">\r\n            <img #uploadImage1 class=\"upload-image\" (click)=\"uploadFile.click()\" type=\"file\"\r\n              src=\"assets/images/icons/upload.svg\" alt=\"Logo\">\r\n            <div *ngIf=\"isImageRequired\" class=\"invalid-feedback d-block\">\r\n              <div class=\"ms-1\">\r\n                Please Upload Profile Image\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n            <div>\r\n              {{userError}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n        <!-- <div class=\"col-md-3 col-sm-12 pt-3 slider-tab text-center\">\r\n          <img class=\"slider-view\" src=\"assets/images/icons/stepper-3.svg\" alt=\"Logo\">\r\n        </div> -->\r\n        <div class=\"col-5\"></div>\r\n        <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n          <h6>\r\n            <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n              Back\r\n            </button>\r\n            &nbsp; &nbsp;\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            &nbsp; &nbsp;\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          &nbsp; &nbsp;\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&nbsp;&nbsp;\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\"></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: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"] }]
-        }], ctorParameters: () => [{ type: i2.Router }, { type: UserDetailService }, { type: i10.FormBuilder }, { type: FileService }, { type: ProvidersService$1 }, { type: RolesService }, { type: i7.BsModalService }, { type: ProviderContractorSubCategoryService }, { type: ProviderContractorSubCategoryService }, { type: i9.AuthService }, { type: i6.TokenService }, { type: i6.RoleContextService }, { type: i6.AuthLogoutService }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i2.Router }, { type: UserDetailService }, { type: i8.FormBuilder }, { type: FileService }, { type: ProvidersService$1 }, { type: RolesService }, { type: i7.BsModalService }, { type: ProviderContractorSubCategoryService }, { type: ProviderContractorSubCategoryService }, { type: i9.AuthService }, { type: i6.TokenService }, { type: i6.RoleContextService }, { type: i6.AuthLogoutService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LIBRARY_CONFIG]
                 }] }], propDecorators: { canvasRef: [{
@@ -32750,13 +32977,13 @@ class MustChangePasswordComponent {
         finally {
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MustChangePasswordComponent, deps: [{ token: i10.FormBuilder }, { token: i9.AuthService }, { token: UserDetailService }, { token: i6.TokenService }, { token: i6.AuthLogoutService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: MustChangePasswordComponent, isStandalone: true, selector: "app-must-change-password", ngImport: i0, template: "<div class=\"container\">\r\n  <div class=\"row justify-content-center align-items-center vh-100\">\r\n    <div class=\"col-md-6 col-lg-5\">\r\n      <div class=\"card shadow-lg border-0\">\r\n        <div class=\"card-body p-4\">\r\n          <div class=\"text-center mb-4\">\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            <h4 class=\"fw-bold\">Change Your Password</h4>\r\n            <p class=\"text-muted small\">\r\n              For security reasons, you must change your password before continuing.\r\n            </p>\r\n          </div>\r\n          <div *ngIf=\"errorMessage\" class=\"alert alert-danger\">\r\n            {{ errorMessage }}\r\n          </div>\r\n          <form [formGroup]=\"changePasswordForm\" (ngSubmit)=\"onSubmit()\">\r\n            <div class=\"mb-3\">\r\n              <label class=\"form-label\">New Password</label>\r\n              <input type=\"password\" class=\"form-control\" formControlName=\"newPassword\"\r\n                [ngClass]=\"{'is-invalid': submitted && f['newPassword'].errors}\">\r\n\r\n              <div *ngIf=\"submitted && f['newPassword'].errors\" class=\"invalid-feedback\">\r\n                <div *ngIf=\"f['newPassword'].errors['required']\">\r\n                  New password is required.\r\n                </div>\r\n                <div *ngIf=\"f['newPassword'].errors['minlength']\">\r\n                  Minimum 8 characters required.\r\n                </div>\r\n                <div *ngIf=\"f['newPassword'].errors['pattern']\">\r\n                  Must include uppercase, lowercase, number & symbol.\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"mb-3\">\r\n              <label class=\"form-label\">Confirm Password</label>\r\n              <input type=\"password\" class=\"form-control\" formControlName=\"confirmPassword\"\r\n                [ngClass]=\"{'is-invalid': submitted && changePasswordForm.errors?.['mismatch']}\">\r\n\r\n              <div *ngIf=\"submitted && changePasswordForm.errors?.['mismatch']\" class=\"invalid-feedback\">\r\n                Passwords do not match.\r\n              </div>\r\n            </div>\r\n            <div class=\"d-grid\">\r\n              <button type=\"submit\" class=\"btn btn-primary\" style=\"background: #4077AD;color: white;border-radius: 5px;\"\r\n                [disabled]=\"isLoading\">\r\n                <span *ngIf=\"isLoading\" class=\"spinner-border spinner-border-sm me-2\"></span>\r\n                Update Password\r\n              </button>\r\n            </div>\r\n          </form>\r\n        </div>\r\n      </div>\r\n      <div class=\"text-center mt-3\">\r\n        <small class=\"text-muted\">\r\n          If you face issues, contact your administrator.\r\n        </small>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".logout-wrapper{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:#212529bf;font-weight:500;font-size:18px}.logout-wrapper:hover{color:#4077ad}.logout-icon{width:20px;height:20px;background:url(/assets/images/icons/logoutt.svg) no-repeat center;background-size:contain}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i10.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10.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: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i10.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MustChangePasswordComponent, deps: [{ token: i8.FormBuilder }, { token: i9.AuthService }, { token: UserDetailService }, { token: i6.TokenService }, { token: i6.AuthLogoutService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: MustChangePasswordComponent, isStandalone: true, selector: "app-must-change-password", ngImport: i0, template: "<div class=\"container\">\r\n  <div class=\"row justify-content-center align-items-center vh-100\">\r\n    <div class=\"col-md-6 col-lg-5\">\r\n      <div class=\"card shadow-lg border-0\">\r\n        <div class=\"card-body p-4\">\r\n          <div class=\"text-center mb-4\">\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            <h4 class=\"fw-bold\">Change Your Password</h4>\r\n            <p class=\"text-muted small\">\r\n              For security reasons, you must change your password before continuing.\r\n            </p>\r\n          </div>\r\n          <div *ngIf=\"errorMessage\" class=\"alert alert-danger\">\r\n            {{ errorMessage }}\r\n          </div>\r\n          <form [formGroup]=\"changePasswordForm\" (ngSubmit)=\"onSubmit()\">\r\n            <div class=\"mb-3\">\r\n              <label class=\"form-label\">New Password</label>\r\n              <input type=\"password\" class=\"form-control\" formControlName=\"newPassword\"\r\n                [ngClass]=\"{'is-invalid': submitted && f['newPassword'].errors}\">\r\n\r\n              <div *ngIf=\"submitted && f['newPassword'].errors\" class=\"invalid-feedback\">\r\n                <div *ngIf=\"f['newPassword'].errors['required']\">\r\n                  New password is required.\r\n                </div>\r\n                <div *ngIf=\"f['newPassword'].errors['minlength']\">\r\n                  Minimum 8 characters required.\r\n                </div>\r\n                <div *ngIf=\"f['newPassword'].errors['pattern']\">\r\n                  Must include uppercase, lowercase, number & symbol.\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"mb-3\">\r\n              <label class=\"form-label\">Confirm Password</label>\r\n              <input type=\"password\" class=\"form-control\" formControlName=\"confirmPassword\"\r\n                [ngClass]=\"{'is-invalid': submitted && changePasswordForm.errors?.['mismatch']}\">\r\n\r\n              <div *ngIf=\"submitted && changePasswordForm.errors?.['mismatch']\" class=\"invalid-feedback\">\r\n                Passwords do not match.\r\n              </div>\r\n            </div>\r\n            <div class=\"d-grid\">\r\n              <button type=\"submit\" class=\"btn btn-primary\" style=\"background: #4077AD;color: white;border-radius: 5px;\"\r\n                [disabled]=\"isLoading\">\r\n                <span *ngIf=\"isLoading\" class=\"spinner-border spinner-border-sm me-2\"></span>\r\n                Update Password\r\n              </button>\r\n            </div>\r\n          </form>\r\n        </div>\r\n      </div>\r\n      <div class=\"text-center mt-3\">\r\n        <small class=\"text-muted\">\r\n          If you face issues, contact your administrator.\r\n        </small>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".logout-wrapper{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:#212529bf;font-weight:500;font-size:18px}.logout-wrapper:hover{color:#4077ad}.logout-icon{width:20px;height:20px;background:url(/assets/images/icons/logoutt.svg) no-repeat center;background-size:contain}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MustChangePasswordComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-must-change-password', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule], template: "<div class=\"container\">\r\n  <div class=\"row justify-content-center align-items-center vh-100\">\r\n    <div class=\"col-md-6 col-lg-5\">\r\n      <div class=\"card shadow-lg border-0\">\r\n        <div class=\"card-body p-4\">\r\n          <div class=\"text-center mb-4\">\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            <h4 class=\"fw-bold\">Change Your Password</h4>\r\n            <p class=\"text-muted small\">\r\n              For security reasons, you must change your password before continuing.\r\n            </p>\r\n          </div>\r\n          <div *ngIf=\"errorMessage\" class=\"alert alert-danger\">\r\n            {{ errorMessage }}\r\n          </div>\r\n          <form [formGroup]=\"changePasswordForm\" (ngSubmit)=\"onSubmit()\">\r\n            <div class=\"mb-3\">\r\n              <label class=\"form-label\">New Password</label>\r\n              <input type=\"password\" class=\"form-control\" formControlName=\"newPassword\"\r\n                [ngClass]=\"{'is-invalid': submitted && f['newPassword'].errors}\">\r\n\r\n              <div *ngIf=\"submitted && f['newPassword'].errors\" class=\"invalid-feedback\">\r\n                <div *ngIf=\"f['newPassword'].errors['required']\">\r\n                  New password is required.\r\n                </div>\r\n                <div *ngIf=\"f['newPassword'].errors['minlength']\">\r\n                  Minimum 8 characters required.\r\n                </div>\r\n                <div *ngIf=\"f['newPassword'].errors['pattern']\">\r\n                  Must include uppercase, lowercase, number & symbol.\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"mb-3\">\r\n              <label class=\"form-label\">Confirm Password</label>\r\n              <input type=\"password\" class=\"form-control\" formControlName=\"confirmPassword\"\r\n                [ngClass]=\"{'is-invalid': submitted && changePasswordForm.errors?.['mismatch']}\">\r\n\r\n              <div *ngIf=\"submitted && changePasswordForm.errors?.['mismatch']\" class=\"invalid-feedback\">\r\n                Passwords do not match.\r\n              </div>\r\n            </div>\r\n            <div class=\"d-grid\">\r\n              <button type=\"submit\" class=\"btn btn-primary\" style=\"background: #4077AD;color: white;border-radius: 5px;\"\r\n                [disabled]=\"isLoading\">\r\n                <span *ngIf=\"isLoading\" class=\"spinner-border spinner-border-sm me-2\"></span>\r\n                Update Password\r\n              </button>\r\n            </div>\r\n          </form>\r\n        </div>\r\n      </div>\r\n      <div class=\"text-center mt-3\">\r\n        <small class=\"text-muted\">\r\n          If you face issues, contact your administrator.\r\n        </small>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".logout-wrapper{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:#212529bf;font-weight:500;font-size:18px}.logout-wrapper:hover{color:#4077ad}.logout-icon{width:20px;height:20px;background:url(/assets/images/icons/logoutt.svg) no-repeat center;background-size:contain}\n"] }]
-        }], ctorParameters: () => [{ type: i10.FormBuilder }, { type: i9.AuthService }, { type: UserDetailService }, { type: i6.TokenService }, { type: i6.AuthLogoutService }] });
+        }], ctorParameters: () => [{ type: i8.FormBuilder }, { type: i9.AuthService }, { type: UserDetailService }, { type: i6.TokenService }, { type: i6.AuthLogoutService }] });
 
 class VerifyEmailComponent {
     libConfig;