@idsoftsource/initial-process 1.3.5 → 1.3.7

package/fesm2022/idsoftsource-initial-process.mjs

@@ -2457,11 +2457,11 @@ class EducationComponent {
         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: 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 collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#edu_' + i\">\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\" 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" }] });
+    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 collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#edu_' + i\">\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\" 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"] }]
+            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: i8.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
                 type: Input
             }], providerName: [{
@@ -2965,11 +2965,11 @@ class CertificationComponent {
         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: 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 collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#edu_' + i\">\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\" 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" }] });
+    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 collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#edu_' + i\">\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\" 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"] }]
+            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: i8.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { states: [{
                 type: Input
             }], providerId: [{
@@ -3886,8 +3886,8 @@ class SkillsComponent {
         if (this.tab.invalid)
             return;
         this.userSkillSetModels = this.tab.value;
-        if (this.model?.skillSetId) {
-            this.userSkillSetModels[0].id = this.model.skillSetId;
+        if (this.model?.id) {
+            this.userSkillSetModels[0].id = this.model.id;
         }
         this.nameError = null;
         this.showLoader = true;
@@ -3975,7 +3975,7 @@ class SkillsComponent {
         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: 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                (rate)=\"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: [
+    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: '*',
@@ -4013,7 +4013,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                (rate)=\"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"] }]
+                    ], 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: i8.UntypedFormBuilder }, { type: UtilsService }, { type: i6.RoleContextService }, { type: CredentialingStore }, { type: i6.TokenService }], propDecorators: { providerId: [{
                 type: Input
             }], providerName: [{
@@ -4459,11 +4459,11 @@ class LicensesComponent {
         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: 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 collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#edu_' + i\">\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\" 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" }] });
+    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 collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#edu_' + i\">\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\" 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"] }]
+            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: i8.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
                 type: Input
             }], providerName: [{
@@ -5145,7 +5145,7 @@ class ToolsComponent {
         });
     }
     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                (rate)=\"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: [
+    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: '*',
@@ -5183,7 +5183,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                (rate)=\"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"] }]
+                    ], 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: i8.UntypedFormBuilder }, { type: UserService }, { type: UtilsService }, { type: CredentialingStore }, { type: i6.TokenService }, { type: UserDetailService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LIBRARY_CONFIG]
@@ -5903,11 +5903,11 @@ class RoleSelectComponent {
         }
     }
     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\" 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)=\"onBackClick()\">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"] }] });
+    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)=\"onBackClick()\">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\" 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)=\"onBackClick()\">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"] }]
+            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)=\"onBackClick()\">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: i8.FormBuilder }], propDecorators: { backToParent: [{
                 type: Output
             }], roleData: [{