@idsoftsource/initial-process 1.2.3 → 1.2.4

package/fesm2022/idsoftsource-initial-process.mjs

@@ -2243,7 +2243,7 @@ class EducationComponent {
             comments: fullValue.comments,
             reviewComments: "N/A",
             fileId: this.model?.fileId || null,
-            fileUrl: this.cloudfrontUrl + this.model?.fileUrl || null,
+            fileUrl: this.model?.fileUrl || null,
             fileName: this.model?.fileName || null,
             reviewStatus: fullValue.reviewStatus,
             userHeadShotUrl: this.userdata.userDetail.headshotUrl,
@@ -2350,11 +2350,11 @@ class EducationComponent {
         this.store.nextStep();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EducationComponent, deps: [{ token: UserEducationService }, { token: CredentialingStore }, { token: EducationStore }, { token: CountryServices }, { token: PostalCodeServices }, { token: i6.TokenService }, { token: i3.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 [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 [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 class=\"upload-title\">Upload</p>\r\n        <p class=\"upload-subtitle\">Add documents such as Diploma, Degree</p>\r\n        <button 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          Selected: {{ fileName }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"action\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">  \r\n         <button type=\"button\" class=\"secondary\"  (click)=\"nextStep()\" >\r\n       Skip\r\n      </button>     \r\n        <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n          (click)=\"saveFile()\">\r\n          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> <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]=\"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}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.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: i10.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i10.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i11.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: i11.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i1$1.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 [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 [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 class=\"upload-title\">Upload</p>\r\n        <p class=\"upload-subtitle\">Add documents such as Diploma, Degree</p>\r\n        <button 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          Selected: {{ fileName }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"action\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">  \r\n         <button type=\"button\" class=\"secondary\"  (click)=\"nextStep()\" >\r\n       Skip\r\n      </button>     \r\n        <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n          (click)=\"saveFile()\">\r\n          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> <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}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.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: i10.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i10.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i11.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: i11.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i1$1.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 [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 [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 class=\"upload-title\">Upload</p>\r\n        <p class=\"upload-subtitle\">Add documents such as Diploma, Degree</p>\r\n        <button 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          Selected: {{ fileName }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"action\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">  \r\n         <button type=\"button\" class=\"secondary\"  (click)=\"nextStep()\" >\r\n       Skip\r\n      </button>     \r\n        <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n          (click)=\"saveFile()\">\r\n          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> <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]=\"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}}\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 [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 [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 class=\"upload-title\">Upload</p>\r\n        <p class=\"upload-subtitle\">Add documents such as Diploma, Degree</p>\r\n        <button 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          Selected: {{ fileName }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"action\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">  \r\n         <button type=\"button\" class=\"secondary\"  (click)=\"nextStep()\" >\r\n       Skip\r\n      </button>     \r\n        <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n          (click)=\"saveFile()\">\r\n          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> <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}}\n"] }]
         }], ctorParameters: () => [{ type: UserEducationService }, { type: CredentialingStore }, { type: EducationStore }, { type: CountryServices }, { type: PostalCodeServices }, { type: i6.TokenService }, { type: i3.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
                 type: Input
             }], providerName: [{
@@ -2660,7 +2660,7 @@ class CertificationComponent {
             expiryDate: fullValue.expiryDate ? fullValue.expiryDate.toISOString() : null,
             notes: fullValue.notes,
             fileId: this.model?.fileId || null,
-            fileUrl: this.cloudfrontUrl + this.model?.fileUrl || null,
+            fileUrl: this.model?.fileUrl || null,
             fileName: this.model?.fileName || null,
             documentTypeId: this.selectedDocumentId,
             documentTypeName: this.selectedDocumentName,
@@ -2762,11 +2762,11 @@ class CertificationComponent {
         this.store.nextStep();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CertificationComponent, deps: [{ token: UserDocumentService }, { token: CredentialingStore }, { token: CertificationStore }, { token: i6.TokenService }, { token: PostalCodeServices }, { token: i3.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: { 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 [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 [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\r\n      <p class=\"upload-title\">Upload</p>\r\n      <p class=\"upload-subtitle\">Add certificates below</p>\r\n\r\n      <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n        Upload Certifications\r\n      </button>\r\n\r\n      <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n\r\n      <p class=\"file-name\" *ngIf=\"fileName\">\r\n        Selected: {{ fileName }}\r\n      </p>\r\n\r\n    </div>\r\n\r\n  </div>\r\n  <div class=\"action\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\">\r\n        Skip\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n        (click)=\"saveFile()\">\r\n        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]=\"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}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.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: i10.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i10.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i11.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: i11.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i1$1.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: { 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 [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 [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\r\n      <p class=\"upload-title\">Upload</p>\r\n      <p class=\"upload-subtitle\">Add certificates below</p>\r\n\r\n      <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n        Upload Certifications\r\n      </button>\r\n\r\n      <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n\r\n      <p class=\"file-name\" *ngIf=\"fileName\">\r\n        Selected: {{ fileName }}\r\n      </p>\r\n\r\n    </div>\r\n\r\n  </div>\r\n  <div class=\"action\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\">\r\n        Skip\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n        (click)=\"saveFile()\">\r\n        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}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.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: i10.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i10.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i11.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: i11.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i1$1.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 [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 [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\r\n      <p class=\"upload-title\">Upload</p>\r\n      <p class=\"upload-subtitle\">Add certificates below</p>\r\n\r\n      <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n        Upload Certifications\r\n      </button>\r\n\r\n      <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n\r\n      <p class=\"file-name\" *ngIf=\"fileName\">\r\n        Selected: {{ fileName }}\r\n      </p>\r\n\r\n    </div>\r\n\r\n  </div>\r\n  <div class=\"action\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\">\r\n        Skip\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n        (click)=\"saveFile()\">\r\n        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]=\"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}}\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 [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 [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\r\n      <p class=\"upload-title\">Upload</p>\r\n      <p class=\"upload-subtitle\">Add certificates below</p>\r\n\r\n      <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n        Upload Certifications\r\n      </button>\r\n\r\n      <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n\r\n      <p class=\"file-name\" *ngIf=\"fileName\">\r\n        Selected: {{ fileName }}\r\n      </p>\r\n\r\n    </div>\r\n\r\n  </div>\r\n  <div class=\"action\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\">\r\n        Skip\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n        (click)=\"saveFile()\">\r\n        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}}\n"] }]
         }], ctorParameters: () => [{ type: UserDocumentService }, { type: CredentialingStore }, { type: CertificationStore }, { type: i6.TokenService }, { type: PostalCodeServices }, { type: i3.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
                 type: Input
             }], providerName: [{
@@ -4029,7 +4029,7 @@ class LicensesComponent {
             expiryDate: fullValue.expiryDate ? fullValue.expiryDate.toISOString() : null,
             notes: fullValue.notes,
             fileId: this.model?.fileId || null,
-            fileUrl: this.cloudfrontUrl + this.model?.fileUrl || null,
+            fileUrl: this.model?.fileUrl || null,
             fileName: this.model?.fileName || null,
             documentTypeId: this.selectedDocumentId,
             documentTypeName: this.selectedDocumentName,
@@ -4134,11 +4134,11 @@ class LicensesComponent {
         this.store.nextStep();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LicensesComponent, deps: [{ token: UserDocumentService }, { token: CredentialingStore }, { token: LicenseStore }, { token: i6.TokenService }, { token: PostalCodeServices }, { token: i3.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" }, 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 [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 [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 class=\"upload-title\">Upload</p>\r\n      <p class=\"upload-subtitle\">Add licenses below</p>\r\n      <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n        Upload Licenses\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        Selected: {{ fileName }}\r\n      </p>\r\n    </div>\r\n  </div>\r\n  <div class=\"action\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\">\r\n        Skip\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\"  [ng2-loading]=\"proposalLoader\"\r\n        (click)=\"saveFile()\">\r\n        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]=\"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}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.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: i10.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i10.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i11.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: i11.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i1$1.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" }, 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 [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 [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 class=\"upload-title\">Upload</p>\r\n      <p class=\"upload-subtitle\">Add licenses below</p>\r\n      <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n        Upload Licenses\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        Selected: {{ fileName }}\r\n      </p>\r\n    </div>\r\n  </div>\r\n  <div class=\"action\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\">\r\n        Skip\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\"  [ng2-loading]=\"proposalLoader\"\r\n        (click)=\"saveFile()\">\r\n        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}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.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: i10.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i10.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i11.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: i11.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i1$1.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 [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 [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 class=\"upload-title\">Upload</p>\r\n      <p class=\"upload-subtitle\">Add licenses below</p>\r\n      <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n        Upload Licenses\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        Selected: {{ fileName }}\r\n      </p>\r\n    </div>\r\n  </div>\r\n  <div class=\"action\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\">\r\n        Skip\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\"  [ng2-loading]=\"proposalLoader\"\r\n        (click)=\"saveFile()\">\r\n        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]=\"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}}\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 [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 [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 class=\"upload-title\">Upload</p>\r\n      <p class=\"upload-subtitle\">Add licenses below</p>\r\n      <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n        Upload Licenses\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        Selected: {{ fileName }}\r\n      </p>\r\n    </div>\r\n  </div>\r\n  <div class=\"action\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\">\r\n        Skip\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\"  [ng2-loading]=\"proposalLoader\"\r\n        (click)=\"saveFile()\">\r\n        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}}\n"] }]
         }], ctorParameters: () => [{ type: UserDocumentService }, { type: CredentialingStore }, { type: LicenseStore }, { type: i6.TokenService }, { type: PostalCodeServices }, { type: i3.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
                 type: Input
             }], providerName: [{
@@ -30108,36 +30108,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }] });
 
-class AssetUrlService {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetUrlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetUrlService, providedIn: 'root' });
+class AssetUrlsService {
+    roleContextService;
+    base;
+    constructor(roleContextService) {
+        this.roleContextService = roleContextService;
+        this.base = this.roleContextService.cloudFrontUrl()?.replace(/\/$/, '');
+    }
+    resolve(path) {
+        if (!path)
+            return '';
+        const LOCAL_MATCHES = ['assets/', 'base64', 'fa-solid'];
+        if (LOCAL_MATCHES.some(v => path.includes(v))) {
+            return path;
+        }
+        // Absolute URLs
+        if (/^https?:\/\//i.test(path)) {
+            return "asset/images/common/Image 5.png";
+        }
+        // CloudFront
+        return `${this.base}/${path.replace(/^\//, '')}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetUrlsService, deps: [{ token: i6.RoleContextService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetUrlsService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetUrlService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetUrlsService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }] });
+        }], ctorParameters: () => [{ type: i6.RoleContextService }] });
 
-class AssetUrlPipe {
+class AssetUrlsPipe {
     asset;
     constructor(asset) {
         this.asset = asset;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetUrlPipe, deps: [{ token: AssetUrlService }], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AssetUrlPipe, isStandalone: false, name: "assetUrl" });
+    transform(value) {
+        return this.asset.resolve(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetUrlsPipe, deps: [{ token: AssetUrlsService }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AssetUrlsPipe, isStandalone: false, name: "assetUrls" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetUrlPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetUrlsPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'assetUrl',
+                    name: 'assetUrls',
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: AssetUrlService }] });
+        }], ctorParameters: () => [{ type: AssetUrlsService }] });
 
 class CommonPipesModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CommonPipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: CommonPipesModule, declarations: [AssetUrlPipe,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: CommonPipesModule, declarations: [AssetUrlsPipe,
             StateNamePipe], imports: [CommonModule], exports: [CommonModule,
-            AssetUrlPipe,
+            AssetUrlsPipe,
             StateNamePipe] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CommonPipesModule, imports: [CommonModule, CommonModule] });
 }
@@ -30145,7 +30168,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             type: NgModule,
             args: [{
                     declarations: [
-                        AssetUrlPipe,
+                        AssetUrlsPipe,
                         StateNamePipe
                     ],
                     imports: [
@@ -30153,7 +30176,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     ],
                     exports: [
                         CommonModule,
-                        AssetUrlPipe,
+                        AssetUrlsPipe,
                         StateNamePipe
                     ],
                     // providers: [AssetUrlPipe]