@idsoftsource/initial-process 1.8.1 → 1.8.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -5953,11 +5953,11 @@ class EducationComponent {
|
|
|
5953
5953
|
this.fileName = '';
|
|
5954
5954
|
}
|
|
5955
5955
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EducationComponent, deps: [{ token: i1$1.RoleContextService }, { token: UserEducationService }, { token: UserService }, { token: CredentialingStore }, { token: EducationStore }, { token: CountryServices }, { token: PostalCodeServices }, { token: i1$1.TokenService }, { token: i8.FormBuilder }, { token: FileService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
|
|
5956
|
-
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 {{ 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> \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 {{ item.stateName }}\r\n </ng-template>\r\n\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n\r\n </div>\r\n </div>\r\n <div class=\"row form-row\">\r\n <div class=\"field city\">\r\n <div class=\"head\">City</div>\r\n <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('city')?.touched &&\r\n educationForm.get('city')?.hasError('required')\">\r\n Enter City\r\n </small>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Start Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Start date\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !educationForm.get('startDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"startDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('startDate')?.touched &&\r\n educationForm.get('startDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !educationForm.get('endDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"endDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('endDate')?.touched &&\r\n educationForm.get('endDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"comments\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Upload</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Add documents below</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Documents\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"action\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n class=\"secondary\" (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3>Education Preview</h3>\r\n </div>\r\n <div class=\"accordion\">\r\n\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n class=\"accordion-item border-0\">\r\n\r\n <!-- HEADER (preview) -->\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#edu_' + i\"\r\n aria-expanded=\"true\">\r\n\r\n <!-- LEFT : TITLE -->\r\n <span class=\"accordion-title\">\r\n {{ exp.courseName }}\r\n </span>\r\n\r\n <!-- RIGHT : EDIT ICON -->\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n\r\n </button>\r\n </h2>\r\n\r\n\r\n <!-- BODY -->\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse show\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n\r\n <!-- GRID DATA (2 or 3 columns) -->\r\n <div class=\"detail-grid\">\r\n\r\n <div>\r\n <strong>Course Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.courseName }}</span>\r\n </div>\r\n <div>\r\n <strong>Course Type</strong><br />\r\n <span class=\"job-title\"> {{ exp.courseType }}</span>\r\n </div>\r\n <div>\r\n <strong>Institute Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.instituteName }}</span>\r\n </div>\r\n <div>\r\n <strong>From Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.startDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div>\r\n <strong>To Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.endDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div>\r\n <strong>State</strong><br />\r\n <span class=\"job-title\"> {{ exp.state | stateName }}</span>\r\n </div>\r\n <div>\r\n <strong>City</strong><br />\r\n <span class=\"job-title\"> {{ exp.city }}</span>\r\n </div>\r\n\r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"cloudfrontUrl+exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Comments</strong><br />\r\n <span class=\"job-title\"> {{ exp.comments }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\" style=\"background-color: #1f4d5f;\">\r\n Add More Educations\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:18px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input,select,textarea{padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin-top:24px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;font-weight:500;margin-bottom:5px}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;margin-top:20px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin:50px 100px 20px}.action{display:flex;justify-content:space-between;margin:50px 0 20px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:400px}.accordion-item{margin:20px 100px}.add-btn{width:200px}@media screen and (max-width: 767px){.row{flex-direction:column;gap:12px}.right-actions{gap:9px;flex-direction:column-reverse}.preview-header{margin-left:0}.accordion{margin:20px 0}.actions,.action{gap:8px;display:flex;flex-direction:column-reverse}.accordion-item{margin:20px 0}.add-btn{width:unset}.actions{margin:50px 0 20px}}.remove-file{margin-left:10px;cursor:pointer;color:red;font-weight:700}.file-icon{width:23px;height:23px}\n"], dependencies: [{ kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
|
|
5956
|
+
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 {{ 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> \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 {{ item.stateName }}\r\n </ng-template>\r\n\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n\r\n </div>\r\n </div>\r\n <div class=\"row form-row\">\r\n <div class=\"field city\">\r\n <div class=\"head\">City</div>\r\n <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('city')?.touched &&\r\n educationForm.get('city')?.hasError('required')\">\r\n Enter City\r\n </small>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Start Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Start date\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !educationForm.get('startDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"startDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('startDate')?.touched &&\r\n educationForm.get('startDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !educationForm.get('endDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"endDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('endDate')?.touched &&\r\n educationForm.get('endDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"comments\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Upload</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Add documents below</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Documents\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"action\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n class=\"secondary\" (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3>Education Preview</h3>\r\n </div>\r\n <div class=\"accordion\">\r\n\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n class=\"accordion-item border-0\">\r\n\r\n <!-- HEADER (preview) -->\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#edu_' + i\"\r\n aria-expanded=\"true\">\r\n\r\n <!-- LEFT : TITLE -->\r\n <span class=\"accordion-title\">\r\n {{ exp.courseName }}\r\n </span>\r\n\r\n <!-- RIGHT : EDIT ICON -->\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n\r\n </button>\r\n </h2>\r\n\r\n\r\n <!-- BODY -->\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse show\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n\r\n <!-- GRID DATA (2 or 3 columns) -->\r\n <div class=\"detail-grid\">\r\n\r\n <div>\r\n <strong>Course Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.courseName }}</span>\r\n </div>\r\n <div>\r\n <strong>Course Type</strong><br />\r\n <span class=\"job-title\"> {{ exp.courseType }}</span>\r\n </div>\r\n <div>\r\n <strong>Institute Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.instituteName }}</span>\r\n </div>\r\n <div>\r\n <strong>From Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.startDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div>\r\n <strong>To Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.endDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div>\r\n <strong>State</strong><br />\r\n <span class=\"job-title\"> {{ exp.state | stateName }}</span>\r\n </div>\r\n <div>\r\n <strong>City</strong><br />\r\n <span class=\"job-title\"> {{ exp.city }}</span>\r\n </div>\r\n\r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"cloudfrontUrl+exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Comments</strong><br />\r\n <span class=\"job-title\"> {{ exp.comments }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\" style=\"background-color: #1f4d5f;\">\r\n Add More Educations\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:18px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input,select,textarea{padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin-top:24px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;font-weight:500;margin-bottom:5px}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;margin-top:20px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin:50px 100px 20px}.action{display:flex;justify-content:space-between;margin:50px 0 20px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:400px}.accordion-item{margin:20px 100px}.add-btn{width:200px}@media screen and (max-width: 767px){.row{flex-direction:column;gap:12px}.right-actions{gap:9px;flex-direction:column-reverse}.preview-header{margin-left:0}.accordion{margin:20px 0}.actions,.action{gap:8px;display:flex;flex-direction:column-reverse}.accordion-item{margin:20px 0}.add-btn{width:unset}.actions{margin:50px 0 20px}}.remove-file{margin-left:10px;cursor:pointer;color:red;font-weight:700}.file-icon{width:23px;height:23px}\n"], dependencies: [{ kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
|
|
5957
5957
|
}
|
|
5958
5958
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EducationComponent, decorators: [{
|
|
5959
5959
|
type: Component,
|
|
5960
|
-
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 {{ 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> \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 {{ item.stateName }}\r\n </ng-template>\r\n\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n\r\n </div>\r\n </div>\r\n <div class=\"row form-row\">\r\n <div class=\"field city\">\r\n <div class=\"head\">City</div>\r\n <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('city')?.touched &&\r\n educationForm.get('city')?.hasError('required')\">\r\n Enter City\r\n </small>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Start Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Start date\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !educationForm.get('startDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"startDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('startDate')?.touched &&\r\n educationForm.get('startDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !educationForm.get('endDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"endDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('endDate')?.touched &&\r\n educationForm.get('endDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"comments\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Upload</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Add documents below</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Documents\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"action\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n class=\"secondary\" (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3>Education Preview</h3>\r\n </div>\r\n <div class=\"accordion\">\r\n\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n class=\"accordion-item border-0\">\r\n\r\n <!-- HEADER (preview) -->\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#edu_' + i\"\r\n aria-expanded=\"true\">\r\n\r\n <!-- LEFT : TITLE -->\r\n <span class=\"accordion-title\">\r\n {{ exp.courseName }}\r\n </span>\r\n\r\n <!-- RIGHT : EDIT ICON -->\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n\r\n </button>\r\n </h2>\r\n\r\n\r\n <!-- BODY -->\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse show\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n\r\n <!-- GRID DATA (2 or 3 columns) -->\r\n <div class=\"detail-grid\">\r\n\r\n <div>\r\n <strong>Course Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.courseName }}</span>\r\n </div>\r\n <div>\r\n <strong>Course Type</strong><br />\r\n <span class=\"job-title\"> {{ exp.courseType }}</span>\r\n </div>\r\n <div>\r\n <strong>Institute Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.instituteName }}</span>\r\n </div>\r\n <div>\r\n <strong>From Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.startDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div>\r\n <strong>To Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.endDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div>\r\n <strong>State</strong><br />\r\n <span class=\"job-title\"> {{ exp.state | stateName }}</span>\r\n </div>\r\n <div>\r\n <strong>City</strong><br />\r\n <span class=\"job-title\"> {{ exp.city }}</span>\r\n </div>\r\n\r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"cloudfrontUrl+exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Comments</strong><br />\r\n <span class=\"job-title\"> {{ exp.comments }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\" style=\"background-color: #1f4d5f;\">\r\n Add More Educations\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:18px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input,select,textarea{padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin-top:24px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;font-weight:500;margin-bottom:5px}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;margin-top:20px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin:50px 100px 20px}.action{display:flex;justify-content:space-between;margin:50px 0 20px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:400px}.accordion-item{margin:20px 100px}.add-btn{width:200px}@media screen and (max-width: 767px){.row{flex-direction:column;gap:12px}.right-actions{gap:9px;flex-direction:column-reverse}.preview-header{margin-left:0}.accordion{margin:20px 0}.actions,.action{gap:8px;display:flex;flex-direction:column-reverse}.accordion-item{margin:20px 0}.add-btn{width:unset}.actions{margin:50px 0 20px}}.remove-file{margin-left:10px;cursor:pointer;color:red;font-weight:700}.file-icon{width:23px;height:23px}\n"] }]
|
|
5960
|
+
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 {{ 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> \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 {{ item.stateName }}\r\n </ng-template>\r\n\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n\r\n </div>\r\n </div>\r\n <div class=\"row form-row\">\r\n <div class=\"field city\">\r\n <div class=\"head\">City</div>\r\n <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('city')?.touched &&\r\n educationForm.get('city')?.hasError('required')\">\r\n Enter City\r\n </small>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Start Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Start date\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !educationForm.get('startDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"startDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('startDate')?.touched &&\r\n educationForm.get('startDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !educationForm.get('endDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"endDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('endDate')?.touched &&\r\n educationForm.get('endDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"comments\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Upload</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Add documents below</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Documents\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"action\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n class=\"secondary\" (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3>Education Preview</h3>\r\n </div>\r\n <div class=\"accordion\">\r\n\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n class=\"accordion-item border-0\">\r\n\r\n <!-- HEADER (preview) -->\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#edu_' + i\"\r\n aria-expanded=\"true\">\r\n\r\n <!-- LEFT : TITLE -->\r\n <span class=\"accordion-title\">\r\n {{ exp.courseName }}\r\n </span>\r\n\r\n <!-- RIGHT : EDIT ICON -->\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n\r\n </button>\r\n </h2>\r\n\r\n\r\n <!-- BODY -->\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse show\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n\r\n <!-- GRID DATA (2 or 3 columns) -->\r\n <div class=\"detail-grid\">\r\n\r\n <div>\r\n <strong>Course Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.courseName }}</span>\r\n </div>\r\n <div>\r\n <strong>Course Type</strong><br />\r\n <span class=\"job-title\"> {{ exp.courseType }}</span>\r\n </div>\r\n <div>\r\n <strong>Institute Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.instituteName }}</span>\r\n </div>\r\n <div>\r\n <strong>From Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.startDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div>\r\n <strong>To Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.endDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div>\r\n <strong>State</strong><br />\r\n <span class=\"job-title\"> {{ exp.state | stateName }}</span>\r\n </div>\r\n <div>\r\n <strong>City</strong><br />\r\n <span class=\"job-title\"> {{ exp.city }}</span>\r\n </div>\r\n\r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"cloudfrontUrl+exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Comments</strong><br />\r\n <span class=\"job-title\"> {{ exp.comments }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\" style=\"background-color: #1f4d5f;\">\r\n Add More Educations\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:18px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input,select,textarea{padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin-top:24px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;font-weight:500;margin-bottom:5px}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;margin-top:20px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin:50px 100px 20px}.action{display:flex;justify-content:space-between;margin:50px 0 20px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:400px}.accordion-item{margin:20px 100px}.add-btn{width:200px}@media screen and (max-width: 767px){.row{flex-direction:column;gap:12px}.right-actions{gap:9px;flex-direction:column-reverse}.preview-header{margin-left:0}.accordion{margin:20px 0}.actions,.action{gap:8px;display:flex;flex-direction:column-reverse}.accordion-item{margin:20px 0}.add-btn{width:unset}.actions{margin:50px 0 20px}}.remove-file{margin-left:10px;cursor:pointer;color:red;font-weight:700}.file-icon{width:23px;height:23px}\n"] }]
|
|
5961
5961
|
}], ctorParameters: () => [{ type: i1$1.RoleContextService }, { type: UserEducationService }, { type: UserService }, { type: CredentialingStore }, { type: EducationStore }, { type: CountryServices }, { type: PostalCodeServices }, { type: i1$1.TokenService }, { type: i8.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
|
|
5962
5962
|
type: Input
|
|
5963
5963
|
}], providerName: [{
|
|
@@ -6409,11 +6409,11 @@ class CertificationComponent {
|
|
|
6409
6409
|
this.fileName = '';
|
|
6410
6410
|
}
|
|
6411
6411
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CertificationComponent, deps: [{ token: i1$1.RoleContextService }, { token: UserDocumentService }, { token: UserService }, { token: CredentialingStore }, { token: CertificationStore }, { token: i1$1.TokenService }, { token: PostalCodeServices }, { token: i8.FormBuilder }, { token: FileService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
|
|
6412
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CertificationComponent, isStandalone: false, selector: "app-certification", inputs: { states: "states", providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n <h3>Add Certificates</h3>\r\n <p class=\"hint\">\r\n Recommended for your role\r\n </p>\r\n <div class=\"document-container\">\r\n <input type=\"text\" class=\"search-input\" placeholder=\"Search documents here...\" [formControl]=\"searchControl\" />\r\n\r\n <div class=\"grid\">\r\n <div *ngFor=\"let item of documentTypes\">\r\n <label class=\"checkbox-row\">\r\n <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n <span class=\"title\">{{ item.type }}</span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <form [formGroup]=\"certificateForm\">\r\n <div class=\"row\" style=\"margin-top: 20px;\">\r\n <div class=\"field\">\r\n <div class=\"head\">Certificate Number</div>\r\n <input type=\"text\" placeholder=\"Enter your Certificate Number here\" formControlName=\"number\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n certificateForm.get('number')?.hasError('required')\">\r\n Certificate number is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">Certificate Issued By</div>\r\n <input type=\"text\" placeholder=\"Enter Certificate Issued By here\" formControlName=\"issuedBy\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n certificateForm.get('issuedBy')?.hasError('required')\">\r\n Certificate issued by is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Issued State</div>\r\n <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select Issued State here\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Issued Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n certificateForm.get('issueDate')?.hasError('required')\">\r\n Issued date is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Expiration Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n certificateForm.get('expiryDate')?.hasError('required')\">\r\n Expiry date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Upload</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Add documents below</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Documents\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n\r\n </div>\r\n <div class=\"action\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3>Certifications Preview</h3>\r\n </div>\r\n <div class=\"accordion\" style=\"margin: 20px 100px;\">\r\n\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n class=\"accordion-item border-0\">\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#edu_' + i\"\r\n aria-expanded=\"true\">\r\n <span class=\"accordion-title\">\r\n {{ exp.documentTypeName }}\r\n </span>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n\r\n\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse show\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n <div class=\"detail-grid\">\r\n <div>\r\n <strong>Certificate Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.documentTypeName }}</span>\r\n </div>\r\n <div>\r\n <strong>Certificate Number</strong><br />\r\n <span class=\"job-title\"> {{ exp.number }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued By</strong><br />\r\n <span class=\"job-title\"> {{ exp.issuedBy }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued State</strong><br />\r\n <span class=\"job-title\"> {{ exp.issuedState | stateName }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.issueDate | date:'MM/dd/yyyy' }} </span>\r\n </div>\r\n <div>\r\n <strong>Expiry Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n\r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"cloudfrontUrl+exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Description</strong><br />\r\n <span class=\"job-title\"> {{ exp.notes }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\" style=\"background-color: #1f4d5f;\">\r\n Add More Certifications\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:23px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;color:#374151}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;font-weight:500;margin-bottom:5px}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.document-container{max-width:1100px;margin:auto}.search-input{width:100%;max-width:400px;height:44px;margin-bottom:16px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer}.content .title{font-weight:600;font-size:14px}.checkbox-row input{margin:0}.title{font-size:14px;font-weight:600}.content .desc{font-size:12px;color:#666;margin-top:4px}.save-btn{margin-top:20px;padding:10px 18px;border-radius:6px;border:none;background:#4077ad;color:#fff;cursor:pointer}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.work-preview{max-width:1000px;padding:15px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin:50px 100px 20px}.action{display:flex;justify-content:space-between;margin:50px 0 20px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:350px}.accordion{margin:20px 100px}.add-btn{width:200px}@media screen and (max-width: 767px){.hint{margin-bottom:5px}.add-btn{width:unset}.date-time-filter{font-size:14px}.search-input{margin-bottom:0}.right-actions{gap:5px}.preview-header{margin-left:0}.accordion{margin:20px 0!important}.actions{flex-direction:column-reverse;gap:5px}.right-actions{gap:5px;flex-direction:column-reverse}.actions{margin:50px 0 20px}.action{flex-direction:column-reverse;gap:5px}}.remove-file{margin-left:10px;cursor:pointer;color:red;font-weight:700}.file-icon{width:23px;height:23px}\n"], dependencies: [{ kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
|
|
6412
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CertificationComponent, isStandalone: false, selector: "app-certification", inputs: { states: "states", providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n <h3>Add Certificates</h3>\r\n <p class=\"hint\">\r\n Recommended for your role\r\n </p>\r\n <div class=\"document-container\">\r\n <input type=\"text\" class=\"search-input\" placeholder=\"Search documents here...\" [formControl]=\"searchControl\" />\r\n\r\n <div class=\"grid\">\r\n <div *ngFor=\"let item of documentTypes\">\r\n <label class=\"checkbox-row\">\r\n <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n <span class=\"title\">{{ item.type }}</span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <form [formGroup]=\"certificateForm\">\r\n <div class=\"row\" style=\"margin-top: 20px;\">\r\n <div class=\"field\">\r\n <div class=\"head\">Certificate Number</div>\r\n <input type=\"text\" placeholder=\"Enter your Certificate Number here\" formControlName=\"number\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n certificateForm.get('number')?.hasError('required')\">\r\n Certificate number is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">Certificate Issued By</div>\r\n <input type=\"text\" placeholder=\"Enter Certificate Issued By here\" formControlName=\"issuedBy\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n certificateForm.get('issuedBy')?.hasError('required')\">\r\n Certificate issued by is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Issued State</div>\r\n <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select Issued State here\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Issued Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n certificateForm.get('issueDate')?.hasError('required')\">\r\n Issued date is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Expiration Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n certificateForm.get('expiryDate')?.hasError('required')\">\r\n Expiry date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Upload</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Add documents below</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Documents\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n\r\n </div>\r\n <div class=\"action\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3>Certifications Preview</h3>\r\n </div>\r\n <div class=\"accordion\" style=\"margin: 20px 100px;\">\r\n\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n class=\"accordion-item border-0\">\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#edu_' + i\"\r\n aria-expanded=\"true\">\r\n <span class=\"accordion-title\">\r\n {{ exp.documentTypeName }}\r\n </span>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n\r\n\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse show\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n <div class=\"detail-grid\">\r\n <div>\r\n <strong>Certificate Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.documentTypeName }}</span>\r\n </div>\r\n <div>\r\n <strong>Certificate Number</strong><br />\r\n <span class=\"job-title\"> {{ exp.number }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued By</strong><br />\r\n <span class=\"job-title\"> {{ exp.issuedBy }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued State</strong><br />\r\n <span class=\"job-title\"> {{ exp.issuedState | stateName }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.issueDate | date:'MM/dd/yyyy' }} </span>\r\n </div>\r\n <div>\r\n <strong>Expiry Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n\r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"cloudfrontUrl+exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Description</strong><br />\r\n <span class=\"job-title\"> {{ exp.notes }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\" style=\"background-color: #1f4d5f;\">\r\n Add More Certifications\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:23px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;color:#374151}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;font-weight:500;margin-bottom:5px}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.document-container{max-width:1100px;margin:auto}.search-input{width:100%;max-width:400px;height:44px;margin-bottom:16px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer}.content .title{font-weight:600;font-size:14px}.checkbox-row input{margin:0}.title{font-size:14px;font-weight:600}.content .desc{font-size:12px;color:#666;margin-top:4px}.save-btn{margin-top:20px;padding:10px 18px;border-radius:6px;border:none;background:#4077ad;color:#fff;cursor:pointer}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.work-preview{max-width:1000px;padding:15px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin:50px 100px 20px}.action{display:flex;justify-content:space-between;margin:50px 0 20px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:350px}.accordion{margin:20px 100px}.add-btn{width:200px}@media screen and (max-width: 767px){.hint{margin-bottom:5px}.add-btn{width:unset}.date-time-filter{font-size:14px}.search-input{margin-bottom:0}.right-actions{gap:5px}.preview-header{margin-left:0}.accordion{margin:20px 0!important}.actions{flex-direction:column-reverse;gap:5px}.right-actions{gap:5px;flex-direction:column-reverse}.actions{margin:50px 0 20px}.action{flex-direction:column-reverse;gap:5px}}.remove-file{margin-left:10px;cursor:pointer;color:red;font-weight:700}.file-icon{width:23px;height:23px}\n"], dependencies: [{ kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
|
|
6413
6413
|
}
|
|
6414
6414
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CertificationComponent, decorators: [{
|
|
6415
6415
|
type: Component,
|
|
6416
|
-
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 {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Issued Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n certificateForm.get('issueDate')?.hasError('required')\">\r\n Issued date is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Expiration Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n certificateForm.get('expiryDate')?.hasError('required')\">\r\n Expiry date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Upload</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Add documents below</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Documents\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n\r\n </div>\r\n <div class=\"action\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3>Certifications Preview</h3>\r\n </div>\r\n <div class=\"accordion\" style=\"margin: 20px 100px;\">\r\n\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n class=\"accordion-item border-0\">\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#edu_' + i\"\r\n aria-expanded=\"true\">\r\n <span class=\"accordion-title\">\r\n {{ exp.documentTypeName }}\r\n </span>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n\r\n\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse show\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n <div class=\"detail-grid\">\r\n <div>\r\n <strong>Certificate Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.documentTypeName }}</span>\r\n </div>\r\n <div>\r\n <strong>Certificate Number</strong><br />\r\n <span class=\"job-title\"> {{ exp.number }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued By</strong><br />\r\n <span class=\"job-title\"> {{ exp.issuedBy }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued State</strong><br />\r\n <span class=\"job-title\"> {{ exp.issuedState | stateName }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.issueDate | date:'MM/dd/yyyy' }} </span>\r\n </div>\r\n <div>\r\n <strong>Expiry Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n\r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"cloudfrontUrl+exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Description</strong><br />\r\n <span class=\"job-title\"> {{ exp.notes }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\" style=\"background-color: #1f4d5f;\">\r\n Add More Certifications\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:23px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;color:#374151}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;font-weight:500;margin-bottom:5px}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.document-container{max-width:1100px;margin:auto}.search-input{width:100%;max-width:400px;height:44px;margin-bottom:16px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer}.content .title{font-weight:600;font-size:14px}.checkbox-row input{margin:0}.title{font-size:14px;font-weight:600}.content .desc{font-size:12px;color:#666;margin-top:4px}.save-btn{margin-top:20px;padding:10px 18px;border-radius:6px;border:none;background:#4077ad;color:#fff;cursor:pointer}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.work-preview{max-width:1000px;padding:15px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin:50px 100px 20px}.action{display:flex;justify-content:space-between;margin:50px 0 20px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:350px}.accordion{margin:20px 100px}.add-btn{width:200px}@media screen and (max-width: 767px){.hint{margin-bottom:5px}.add-btn{width:unset}.date-time-filter{font-size:14px}.search-input{margin-bottom:0}.right-actions{gap:5px}.preview-header{margin-left:0}.accordion{margin:20px 0!important}.actions{flex-direction:column-reverse;gap:5px}.right-actions{gap:5px;flex-direction:column-reverse}.actions{margin:50px 0 20px}.action{flex-direction:column-reverse;gap:5px}}.remove-file{margin-left:10px;cursor:pointer;color:red;font-weight:700}.file-icon{width:23px;height:23px}\n"] }]
|
|
6416
|
+
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 {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Issued Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n certificateForm.get('issueDate')?.hasError('required')\">\r\n Issued date is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Expiration Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n certificateForm.get('expiryDate')?.hasError('required')\">\r\n Expiry date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Upload</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Add documents below</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Documents\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n\r\n </div>\r\n <div class=\"action\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3>Certifications Preview</h3>\r\n </div>\r\n <div class=\"accordion\" style=\"margin: 20px 100px;\">\r\n\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n class=\"accordion-item border-0\">\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#edu_' + i\"\r\n aria-expanded=\"true\">\r\n <span class=\"accordion-title\">\r\n {{ exp.documentTypeName }}\r\n </span>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n\r\n\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse show\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n <div class=\"detail-grid\">\r\n <div>\r\n <strong>Certificate Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.documentTypeName }}</span>\r\n </div>\r\n <div>\r\n <strong>Certificate Number</strong><br />\r\n <span class=\"job-title\"> {{ exp.number }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued By</strong><br />\r\n <span class=\"job-title\"> {{ exp.issuedBy }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued State</strong><br />\r\n <span class=\"job-title\"> {{ exp.issuedState | stateName }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.issueDate | date:'MM/dd/yyyy' }} </span>\r\n </div>\r\n <div>\r\n <strong>Expiry Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n\r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"cloudfrontUrl+exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Description</strong><br />\r\n <span class=\"job-title\"> {{ exp.notes }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\" style=\"background-color: #1f4d5f;\">\r\n Add More Certifications\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:23px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;color:#374151}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;font-weight:500;margin-bottom:5px}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.document-container{max-width:1100px;margin:auto}.search-input{width:100%;max-width:400px;height:44px;margin-bottom:16px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer}.content .title{font-weight:600;font-size:14px}.checkbox-row input{margin:0}.title{font-size:14px;font-weight:600}.content .desc{font-size:12px;color:#666;margin-top:4px}.save-btn{margin-top:20px;padding:10px 18px;border-radius:6px;border:none;background:#4077ad;color:#fff;cursor:pointer}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.work-preview{max-width:1000px;padding:15px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin:50px 100px 20px}.action{display:flex;justify-content:space-between;margin:50px 0 20px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:350px}.accordion{margin:20px 100px}.add-btn{width:200px}@media screen and (max-width: 767px){.hint{margin-bottom:5px}.add-btn{width:unset}.date-time-filter{font-size:14px}.search-input{margin-bottom:0}.right-actions{gap:5px}.preview-header{margin-left:0}.accordion{margin:20px 0!important}.actions{flex-direction:column-reverse;gap:5px}.right-actions{gap:5px;flex-direction:column-reverse}.actions{margin:50px 0 20px}.action{flex-direction:column-reverse;gap:5px}}.remove-file{margin-left:10px;cursor:pointer;color:red;font-weight:700}.file-icon{width:23px;height:23px}\n"] }]
|
|
6417
6417
|
}], ctorParameters: () => [{ type: i1$1.RoleContextService }, { type: UserDocumentService }, { type: UserService }, { type: CredentialingStore }, { type: CertificationStore }, { type: i1$1.TokenService }, { type: PostalCodeServices }, { type: i8.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { states: [{
|
|
6418
6418
|
type: Input
|
|
6419
6419
|
}], providerId: [{
|
|
@@ -7662,11 +7662,11 @@ class LicensesComponent {
|
|
|
7662
7662
|
this.fileName = '';
|
|
7663
7663
|
}
|
|
7664
7664
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LicensesComponent, deps: [{ token: UserDocumentService }, { token: UserService }, { token: i1$1.RoleContextService }, { token: CredentialingStore }, { token: LicenseStore }, { token: i1$1.TokenService }, { token: PostalCodeServices }, { token: i8.FormBuilder }, { token: FileService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
|
|
7665
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: LicensesComponent, isStandalone: false, selector: "app-licenses", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl", states: "states" }, ngImport: i0, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n\r\n <h3>Add Licenses</h3>\r\n <p class=\"hint\">\r\n Recommended for your role\r\n </p>\r\n <div class=\"document-container\">\r\n <input type=\"text\" class=\"search-input\" placeholder=\"Search documents here...\" [formControl]=\"searchControl\" />\r\n <div class=\"grid\">\r\n <div *ngFor=\"let item of documentTypes\">\r\n <label class=\"checkbox-row\">\r\n <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n <span class=\"title\">{{ item.type }}</span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <form [formGroup]=\"certificateForm\">\r\n <div class=\"row\" style=\"margin-top: 20px;\">\r\n <div class=\"field\">\r\n <div class=\"head\">License Number</div>\r\n <input type=\"text\" placeholder=\"Enter your License Number here\" formControlName=\"number\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n certificateForm.get('number')?.hasError('required')\">\r\n License number is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">License Issued By</div>\r\n <input type=\"text\" placeholder=\"Enter License Issued By here\" formControlName=\"issuedBy\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n certificateForm.get('issuedBy')?.hasError('required')\">\r\n License issued by is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Issued State</div>\r\n <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select Issued State\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Issued Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n certificateForm.get('issueDate')?.hasError('required')\">\r\n Issued date is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Expiration Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n certificateForm.get('expiryDate')?.hasError('required')\">\r\n Expiry date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Upload</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Add documents below</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Documents\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"action\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3>Licenses Preview</h3>\r\n </div>\r\n <div class=\"accordion\" style=\"margin: 20px 100px;\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n class=\"accordion-item border-0\">\r\n\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#edu_' + i\"\r\n aria-expanded=\"true\">\r\n <span class=\"accordion-title\">\r\n {{ exp.documentTypeName }}\r\n </span>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse show\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n <div class=\"detail-grid\">\r\n <div>\r\n <strong>License Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.documentTypeName }}</span>\r\n </div>\r\n <div>\r\n <strong>License Number</strong><br />\r\n <span class=\"job-title\"> {{ exp.number }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued By</strong><br />\r\n <span class=\"job-title\"> {{ exp.issuedBy }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued State</strong><br />\r\n <span class=\"job-title\"> {{ exp.issuedState | stateName }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.issueDate | date:'MM/dd/yyyy' }} </span>\r\n </div>\r\n <div>\r\n <strong>Expiry Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n\r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"cloudfrontUrl+exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Description</strong><br />\r\n <span class=\"job-title\"> {{ exp.notes }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\" style=\"background-color: #1f4d5f;\">\r\n Add More Licenses\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:23px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;color:#374151}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;font-weight:500;margin-bottom:5px}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.document-container{max-width:1100px;margin:auto}.search-input{width:100%;max-width:400px;height:44px;margin-bottom:16px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer}.content .title{font-weight:600;font-size:14px}.checkbox-row input{margin:0}.title{font-size:14px;font-weight:600}.content .desc{font-size:12px;color:#666;margin-top:4px}.save-btn{margin-top:20px;padding:10px 18px;border-radius:6px;border:none;background:#4077ad;color:#fff;cursor:pointer}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin:50px 100px 20px}.action{display:flex;justify-content:space-between;margin:50px 0 20px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:350px}.accordion{margin:20px 100px}.add-btn{width:200px}@media screen and (max-width: 767px){.hint{margin-bottom:7px}.date-time-filter{font-size:14px}.search-input{margin-bottom:0}.right-actions{gap:5px}.preview-header{margin-left:0}.accordion{margin:20px 0!important}.actions{flex-direction:column-reverse;gap:7px;margin:50px 0 20px}.right-actions{gap:5px;flex-direction:column-reverse}.add-btn{width:unset}.action{display:flex;flex-direction:column-reverse;gap:5px}}.remove-file{margin-left:10px;cursor:pointer;color:red;font-weight:700}.file-icon{width:23px;height:23px}\n"], dependencies: [{ kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
|
|
7665
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: LicensesComponent, isStandalone: false, selector: "app-licenses", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl", states: "states" }, ngImport: i0, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n\r\n <h3>Add Licenses</h3>\r\n <p class=\"hint\">\r\n Recommended for your role\r\n </p>\r\n <div class=\"document-container\">\r\n <input type=\"text\" class=\"search-input\" placeholder=\"Search documents here...\" [formControl]=\"searchControl\" />\r\n <div class=\"grid\">\r\n <div *ngFor=\"let item of documentTypes\">\r\n <label class=\"checkbox-row\">\r\n <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n <span class=\"title\">{{ item.type }}</span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <form [formGroup]=\"certificateForm\">\r\n <div class=\"row\" style=\"margin-top: 20px;\">\r\n <div class=\"field\">\r\n <div class=\"head\">License Number</div>\r\n <input type=\"text\" placeholder=\"Enter your License Number here\" formControlName=\"number\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n certificateForm.get('number')?.hasError('required')\">\r\n License number is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">License Issued By</div>\r\n <input type=\"text\" placeholder=\"Enter License Issued By here\" formControlName=\"issuedBy\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n certificateForm.get('issuedBy')?.hasError('required')\">\r\n License issued by is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Issued State</div>\r\n <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select Issued State\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Issued Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n certificateForm.get('issueDate')?.hasError('required')\">\r\n Issued date is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Expiration Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n certificateForm.get('expiryDate')?.hasError('required')\">\r\n Expiry date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Upload</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Add documents below</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Documents\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"action\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3>Licenses Preview</h3>\r\n </div>\r\n <div class=\"accordion\" style=\"margin: 20px 100px;\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n class=\"accordion-item border-0\">\r\n\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#edu_' + i\"\r\n aria-expanded=\"true\">\r\n <span class=\"accordion-title\">\r\n {{ exp.documentTypeName }}\r\n </span>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse show\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n <div class=\"detail-grid\">\r\n <div>\r\n <strong>License Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.documentTypeName }}</span>\r\n </div>\r\n <div>\r\n <strong>License Number</strong><br />\r\n <span class=\"job-title\"> {{ exp.number }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued By</strong><br />\r\n <span class=\"job-title\"> {{ exp.issuedBy }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued State</strong><br />\r\n <span class=\"job-title\"> {{ exp.issuedState | stateName }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.issueDate | date:'MM/dd/yyyy' }} </span>\r\n </div>\r\n <div>\r\n <strong>Expiry Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n\r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"cloudfrontUrl+exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Description</strong><br />\r\n <span class=\"job-title\"> {{ exp.notes }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\" style=\"background-color: #1f4d5f;\">\r\n Add More Licenses\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:23px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;color:#374151}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;font-weight:500;margin-bottom:5px}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.document-container{max-width:1100px;margin:auto}.search-input{width:100%;max-width:400px;height:44px;margin-bottom:16px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer}.content .title{font-weight:600;font-size:14px}.checkbox-row input{margin:0}.title{font-size:14px;font-weight:600}.content .desc{font-size:12px;color:#666;margin-top:4px}.save-btn{margin-top:20px;padding:10px 18px;border-radius:6px;border:none;background:#4077ad;color:#fff;cursor:pointer}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin:50px 100px 20px}.action{display:flex;justify-content:space-between;margin:50px 0 20px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:350px}.accordion{margin:20px 100px}.add-btn{width:200px}@media screen and (max-width: 767px){.hint{margin-bottom:7px}.date-time-filter{font-size:14px}.search-input{margin-bottom:0}.right-actions{gap:5px}.preview-header{margin-left:0}.accordion{margin:20px 0!important}.actions{flex-direction:column-reverse;gap:7px;margin:50px 0 20px}.right-actions{gap:5px;flex-direction:column-reverse}.add-btn{width:unset}.action{display:flex;flex-direction:column-reverse;gap:5px}}.remove-file{margin-left:10px;cursor:pointer;color:red;font-weight:700}.file-icon{width:23px;height:23px}\n"], dependencies: [{ kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
|
|
7666
7666
|
}
|
|
7667
7667
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LicensesComponent, decorators: [{
|
|
7668
7668
|
type: Component,
|
|
7669
|
-
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 {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Issued Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n certificateForm.get('issueDate')?.hasError('required')\">\r\n Issued date is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Expiration Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n certificateForm.get('expiryDate')?.hasError('required')\">\r\n Expiry date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Upload</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Add documents below</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Documents\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"action\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3>Licenses Preview</h3>\r\n </div>\r\n <div class=\"accordion\" style=\"margin: 20px 100px;\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n class=\"accordion-item border-0\">\r\n\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#edu_' + i\"\r\n aria-expanded=\"true\">\r\n <span class=\"accordion-title\">\r\n {{ exp.documentTypeName }}\r\n </span>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse show\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n <div class=\"detail-grid\">\r\n <div>\r\n <strong>License Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.documentTypeName }}</span>\r\n </div>\r\n <div>\r\n <strong>License Number</strong><br />\r\n <span class=\"job-title\"> {{ exp.number }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued By</strong><br />\r\n <span class=\"job-title\"> {{ exp.issuedBy }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued State</strong><br />\r\n <span class=\"job-title\"> {{ exp.issuedState | stateName }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.issueDate | date:'MM/dd/yyyy' }} </span>\r\n </div>\r\n <div>\r\n <strong>Expiry Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n\r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"cloudfrontUrl+exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Description</strong><br />\r\n <span class=\"job-title\"> {{ exp.notes }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\" style=\"background-color: #1f4d5f;\">\r\n Add More Licenses\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:23px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;color:#374151}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;font-weight:500;margin-bottom:5px}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.document-container{max-width:1100px;margin:auto}.search-input{width:100%;max-width:400px;height:44px;margin-bottom:16px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer}.content .title{font-weight:600;font-size:14px}.checkbox-row input{margin:0}.title{font-size:14px;font-weight:600}.content .desc{font-size:12px;color:#666;margin-top:4px}.save-btn{margin-top:20px;padding:10px 18px;border-radius:6px;border:none;background:#4077ad;color:#fff;cursor:pointer}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin:50px 100px 20px}.action{display:flex;justify-content:space-between;margin:50px 0 20px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:350px}.accordion{margin:20px 100px}.add-btn{width:200px}@media screen and (max-width: 767px){.hint{margin-bottom:7px}.date-time-filter{font-size:14px}.search-input{margin-bottom:0}.right-actions{gap:5px}.preview-header{margin-left:0}.accordion{margin:20px 0!important}.actions{flex-direction:column-reverse;gap:7px;margin:50px 0 20px}.right-actions{gap:5px;flex-direction:column-reverse}.add-btn{width:unset}.action{display:flex;flex-direction:column-reverse;gap:5px}}.remove-file{margin-left:10px;cursor:pointer;color:red;font-weight:700}.file-icon{width:23px;height:23px}\n"] }]
|
|
7669
|
+
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 {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Issued Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n certificateForm.get('issueDate')?.hasError('required')\">\r\n Issued date is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Expiration Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n certificateForm.get('expiryDate')?.hasError('required')\">\r\n Expiry date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Upload</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Add documents below</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Documents\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"action\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3>Licenses Preview</h3>\r\n </div>\r\n <div class=\"accordion\" style=\"margin: 20px 100px;\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n class=\"accordion-item border-0\">\r\n\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#edu_' + i\"\r\n aria-expanded=\"true\">\r\n <span class=\"accordion-title\">\r\n {{ exp.documentTypeName }}\r\n </span>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse show\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n <div class=\"detail-grid\">\r\n <div>\r\n <strong>License Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.documentTypeName }}</span>\r\n </div>\r\n <div>\r\n <strong>License Number</strong><br />\r\n <span class=\"job-title\"> {{ exp.number }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued By</strong><br />\r\n <span class=\"job-title\"> {{ exp.issuedBy }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued State</strong><br />\r\n <span class=\"job-title\"> {{ exp.issuedState | stateName }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.issueDate | date:'MM/dd/yyyy' }} </span>\r\n </div>\r\n <div>\r\n <strong>Expiry Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n\r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"cloudfrontUrl+exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Description</strong><br />\r\n <span class=\"job-title\"> {{ exp.notes }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\" style=\"background-color: #1f4d5f;\">\r\n Add More Licenses\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:23px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;color:#374151}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;font-weight:500;margin-bottom:5px}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.document-container{max-width:1100px;margin:auto}.search-input{width:100%;max-width:400px;height:44px;margin-bottom:16px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer}.content .title{font-weight:600;font-size:14px}.checkbox-row input{margin:0}.title{font-size:14px;font-weight:600}.content .desc{font-size:12px;color:#666;margin-top:4px}.save-btn{margin-top:20px;padding:10px 18px;border-radius:6px;border:none;background:#4077ad;color:#fff;cursor:pointer}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin:50px 100px 20px}.action{display:flex;justify-content:space-between;margin:50px 0 20px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:350px}.accordion{margin:20px 100px}.add-btn{width:200px}@media screen and (max-width: 767px){.hint{margin-bottom:7px}.date-time-filter{font-size:14px}.search-input{margin-bottom:0}.right-actions{gap:5px}.preview-header{margin-left:0}.accordion{margin:20px 0!important}.actions{flex-direction:column-reverse;gap:7px;margin:50px 0 20px}.right-actions{gap:5px;flex-direction:column-reverse}.add-btn{width:unset}.action{display:flex;flex-direction:column-reverse;gap:5px}}.remove-file{margin-left:10px;cursor:pointer;color:red;font-weight:700}.file-icon{width:23px;height:23px}\n"] }]
|
|
7670
7670
|
}], ctorParameters: () => [{ type: UserDocumentService }, { type: UserService }, { type: i1$1.RoleContextService }, { type: CredentialingStore }, { type: LicenseStore }, { type: i1$1.TokenService }, { type: PostalCodeServices }, { type: i8.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
|
|
7671
7671
|
type: Input
|
|
7672
7672
|
}], providerName: [{
|
|
@@ -32242,11 +32242,11 @@ class WorkexperienceComponent {
|
|
|
32242
32242
|
this.fileName = '';
|
|
32243
32243
|
}
|
|
32244
32244
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WorkexperienceComponent, deps: [{ token: UserExperienceService }, { token: UserService }, { token: WorkExperienceStore }, { token: CredentialingStore }, { token: CountryServices }, { token: PostalCodeServices }, { token: i1$1.TokenService }, { token: i1$1.RoleContextService }, { token: i8.FormBuilder }, { token: FileService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
|
|
32245
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: WorkexperienceComponent, isStandalone: false, selector: "app-workexperience", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div *ngIf=\"!showpreview()\">\r\n <div class=\"education-container\">\r\n <h3>Add Work Experience</h3>\r\n <p class=\"hint\">\r\n Add your prior and current work history below\r\n </p>\r\n <form [formGroup]=\"workexperienceForm\">\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Company Name</div>\r\n <input type=\"text\" placeholder=\"Enter your company name here\" formControlName=\"companyName\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('companyName')?.touched &&\r\n workexperienceForm.get('companyName')?.hasError('required')\">\r\n Company name is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">Job Title</div>\r\n <input type=\"text\" placeholder=\"Enter your job title here\" formControlName=\"jobTitle\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('jobTitle')?.touched &&\r\n workexperienceForm.get('jobTitle')?.hasError('required')\">\r\n Job title is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Country</div>\r\n <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n {{ item.country }}\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n <div class=\"field\">\r\n <div class=\"head\">State</div>\r\n <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select State\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n <div class=\"row form-row\">\r\n <div class=\"field\">\r\n <div class=\"head\">City</div>\r\n <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('city')?.touched &&\r\n workexperienceForm.get('city')?.hasError('required')\">\r\n City is required\r\n </small>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Start Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Start date\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"{ adaptivePosition: true, isAnimated: true, showWeekNumbers: false,\r\n customTodayClass: !workexperienceForm.get('fromDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"fromDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('fromDate')?.touched &&\r\n workexperienceForm.get('fromDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !workexperienceForm.get('toDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"toDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('toDate')?.touched &&\r\n workexperienceForm.get('toDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Job Description or duties</div>\r\n <textarea placeholder=\"Description\" formControlName=\"jobDescription\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Upload</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Add documents below</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Documents\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n <div class=\"actions\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n class=\"secondary\" (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3>Work Experiences Preview</h3>\r\n </div>\r\n <div class=\"accordion\">\r\n\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n class=\"accordion-item border-0\">\r\n\r\n <!-- HEADER (preview) -->\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button\" \r\n type=\"button\" \r\n data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#edu_' + i\"\r\n aria-expanded=\"true\">\r\n\r\n <!-- LEFT : TITLE -->\r\n <span class=\"accordion-title\">\r\n {{ exp.companyName }}\r\n </span>\r\n\r\n <!-- RIGHT : EDIT ICON -->\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n\r\n </button>\r\n </h2>\r\n\r\n\r\n <!-- BODY -->\r\n <div [id]=\"'edu_' + i\" \r\n class=\"accordion-collapse collapse show\"\r\n style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n\r\n <!-- GRID DATA (2 or 3 columns) -->\r\n <div class=\"detail-grid\">\r\n <div>\r\n <strong>Company Name</strong><br />\r\n <span class=\"job-title\">{{ exp.companyName }}</span>\r\n </div>\r\n <div>\r\n <strong>Job Title</strong><br />\r\n <span class=\"job-title\">{{ exp.jobTitle }}</span>\r\n </div>\r\n <div>\r\n <strong>From Date</strong><br />\r\n <span class=\"job-title\">{{ exp.fromDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div>\r\n <strong>To Date</strong><br />\r\n <span class=\"job-title\">{{ exp.toDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n\r\n <div>\r\n <strong>Country</strong><br />\r\n <span class=\"job-title\">{{ exp.country }}</span>\r\n </div>\r\n <div>\r\n <strong>State</strong><br />\r\n <span class=\"job-title\">{{ exp.state | stateName }}</span>\r\n </div>\r\n\r\n <div>\r\n <strong>City</strong><br />\r\n <span class=\"job-title\">{{ exp.city }}</span>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"cloudfrontUrl+exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Job Description</strong><br />\r\n <span class=\"job-title\"> {{ exp.jobDescription }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"action\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\" style=\"background-color: #1f4d5f;\">\r\n Add More Experiences\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:18px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input,select,textarea{padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:50px 0 20px}.action{display:flex;justify-content:space-between;margin:50px 100px 20px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;margin-bottom:5px;font-weight:500}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;margin-top:25px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:380px}.accordion{margin:20px 100px}.add-btn{width:200px}@media screen and (max-width: 767px){.preview-header{margin-left:0}.accordion{margin:20px 0}.actions,.action{flex-direction:column-reverse;gap:5px}.action{margin:50px 0 20px}.right-actions{justify-content:space-between;gap:5px;display:flex;flex-direction:column-reverse}.form-row{gap:14px;flex-direction:column}.pointer{display:none}.add-btn{width:unset}}.remove-file{margin-left:10px;cursor:pointer;color:red;font-weight:700}.file-icon{width:23px;height:23px}\n"], dependencies: [{ kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
|
|
32245
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: WorkexperienceComponent, isStandalone: false, selector: "app-workexperience", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div *ngIf=\"!showpreview()\">\r\n <div class=\"education-container\">\r\n <h3>Add Work Experience</h3>\r\n <p class=\"hint\">\r\n Add your prior and current work history below\r\n </p>\r\n <form [formGroup]=\"workexperienceForm\">\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Company Name</div>\r\n <input type=\"text\" placeholder=\"Enter your company name here\" formControlName=\"companyName\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('companyName')?.touched &&\r\n workexperienceForm.get('companyName')?.hasError('required')\">\r\n Company name is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">Job Title</div>\r\n <input type=\"text\" placeholder=\"Enter your job title here\" formControlName=\"jobTitle\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('jobTitle')?.touched &&\r\n workexperienceForm.get('jobTitle')?.hasError('required')\">\r\n Job title is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Country</div>\r\n <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n {{ item.country }}\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n <div class=\"field\">\r\n <div class=\"head\">State</div>\r\n <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select State\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n <div class=\"row form-row\">\r\n <div class=\"field\">\r\n <div class=\"head\">City</div>\r\n <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('city')?.touched &&\r\n workexperienceForm.get('city')?.hasError('required')\">\r\n City is required\r\n </small>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Start Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Start date\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"{ adaptivePosition: true, isAnimated: true, showWeekNumbers: false,\r\n customTodayClass: !workexperienceForm.get('fromDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"fromDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('fromDate')?.touched &&\r\n workexperienceForm.get('fromDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !workexperienceForm.get('toDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"toDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('toDate')?.touched &&\r\n workexperienceForm.get('toDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Job Description or duties</div>\r\n <textarea placeholder=\"Description\" formControlName=\"jobDescription\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Upload</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Add documents below</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Documents\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n <div class=\"actions\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n class=\"secondary\" (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3>Work Experiences Preview</h3>\r\n </div>\r\n <div class=\"accordion\">\r\n\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n class=\"accordion-item border-0\">\r\n\r\n <!-- HEADER (preview) -->\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button\" \r\n type=\"button\" \r\n data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#edu_' + i\"\r\n aria-expanded=\"true\">\r\n\r\n <!-- LEFT : TITLE -->\r\n <span class=\"accordion-title\">\r\n {{ exp.companyName }}\r\n </span>\r\n\r\n <!-- RIGHT : EDIT ICON -->\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n\r\n </button>\r\n </h2>\r\n\r\n\r\n <!-- BODY -->\r\n <div [id]=\"'edu_' + i\" \r\n class=\"accordion-collapse collapse show\"\r\n style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n\r\n <!-- GRID DATA (2 or 3 columns) -->\r\n <div class=\"detail-grid\">\r\n <div>\r\n <strong>Company Name</strong><br />\r\n <span class=\"job-title\">{{ exp.companyName }}</span>\r\n </div>\r\n <div>\r\n <strong>Job Title</strong><br />\r\n <span class=\"job-title\">{{ exp.jobTitle }}</span>\r\n </div>\r\n <div>\r\n <strong>From Date</strong><br />\r\n <span class=\"job-title\">{{ exp.fromDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div>\r\n <strong>To Date</strong><br />\r\n <span class=\"job-title\">{{ exp.toDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n\r\n <div>\r\n <strong>Country</strong><br />\r\n <span class=\"job-title\">{{ exp.country }}</span>\r\n </div>\r\n <div>\r\n <strong>State</strong><br />\r\n <span class=\"job-title\">{{ exp.state | stateName }}</span>\r\n </div>\r\n\r\n <div>\r\n <strong>City</strong><br />\r\n <span class=\"job-title\">{{ exp.city }}</span>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"cloudfrontUrl+exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Job Description</strong><br />\r\n <span class=\"job-title\"> {{ exp.jobDescription }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"action\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\" style=\"background-color: #1f4d5f;\">\r\n Add More Experiences\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:18px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input,select,textarea{padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:50px 0 20px}.action{display:flex;justify-content:space-between;margin:50px 100px 20px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;margin-bottom:5px;font-weight:500}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;margin-top:25px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:380px}.accordion{margin:20px 100px}.add-btn{width:200px}@media screen and (max-width: 767px){.preview-header{margin-left:0}.accordion{margin:20px 0}.actions,.action{flex-direction:column-reverse;gap:5px}.action{margin:50px 0 20px}.right-actions{justify-content:space-between;gap:5px;display:flex;flex-direction:column-reverse}.form-row{gap:14px;flex-direction:column}.pointer{display:none}.add-btn{width:unset}}.remove-file{margin-left:10px;cursor:pointer;color:red;font-weight:700}.file-icon{width:23px;height:23px}\n"], dependencies: [{ kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
|
|
32246
32246
|
}
|
|
32247
32247
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WorkexperienceComponent, decorators: [{
|
|
32248
32248
|
type: Component,
|
|
32249
|
-
args: [{ selector: 'app-workexperience', standalone: false, template: "<div *ngIf=\"!showpreview()\">\r\n <div class=\"education-container\">\r\n <h3>Add Work Experience</h3>\r\n <p class=\"hint\">\r\n Add your prior and current work history below\r\n </p>\r\n <form [formGroup]=\"workexperienceForm\">\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Company Name</div>\r\n <input type=\"text\" placeholder=\"Enter your company name here\" formControlName=\"companyName\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('companyName')?.touched &&\r\n workexperienceForm.get('companyName')?.hasError('required')\">\r\n Company name is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">Job Title</div>\r\n <input type=\"text\" placeholder=\"Enter your job title here\" formControlName=\"jobTitle\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('jobTitle')?.touched &&\r\n workexperienceForm.get('jobTitle')?.hasError('required')\">\r\n Job title is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Country</div>\r\n <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n {{ item.country }}\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n <div class=\"field\">\r\n <div class=\"head\">State</div>\r\n <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select State\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n <div class=\"row form-row\">\r\n <div class=\"field\">\r\n <div class=\"head\">City</div>\r\n <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('city')?.touched &&\r\n workexperienceForm.get('city')?.hasError('required')\">\r\n City is required\r\n </small>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Start Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Start date\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"{ adaptivePosition: true, isAnimated: true, showWeekNumbers: false,\r\n customTodayClass: !workexperienceForm.get('fromDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"fromDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('fromDate')?.touched &&\r\n workexperienceForm.get('fromDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !workexperienceForm.get('toDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"toDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('toDate')?.touched &&\r\n workexperienceForm.get('toDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Job Description or duties</div>\r\n <textarea placeholder=\"Description\" formControlName=\"jobDescription\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Upload</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Add documents below</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Documents\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n <div class=\"actions\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n class=\"secondary\" (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3>Work Experiences Preview</h3>\r\n </div>\r\n <div class=\"accordion\">\r\n\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n class=\"accordion-item border-0\">\r\n\r\n <!-- HEADER (preview) -->\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button\" \r\n type=\"button\" \r\n data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#edu_' + i\"\r\n aria-expanded=\"true\">\r\n\r\n <!-- LEFT : TITLE -->\r\n <span class=\"accordion-title\">\r\n {{ exp.companyName }}\r\n </span>\r\n\r\n <!-- RIGHT : EDIT ICON -->\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n\r\n </button>\r\n </h2>\r\n\r\n\r\n <!-- BODY -->\r\n <div [id]=\"'edu_' + i\" \r\n class=\"accordion-collapse collapse show\"\r\n style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n\r\n <!-- GRID DATA (2 or 3 columns) -->\r\n <div class=\"detail-grid\">\r\n <div>\r\n <strong>Company Name</strong><br />\r\n <span class=\"job-title\">{{ exp.companyName }}</span>\r\n </div>\r\n <div>\r\n <strong>Job Title</strong><br />\r\n <span class=\"job-title\">{{ exp.jobTitle }}</span>\r\n </div>\r\n <div>\r\n <strong>From Date</strong><br />\r\n <span class=\"job-title\">{{ exp.fromDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div>\r\n <strong>To Date</strong><br />\r\n <span class=\"job-title\">{{ exp.toDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n\r\n <div>\r\n <strong>Country</strong><br />\r\n <span class=\"job-title\">{{ exp.country }}</span>\r\n </div>\r\n <div>\r\n <strong>State</strong><br />\r\n <span class=\"job-title\">{{ exp.state | stateName }}</span>\r\n </div>\r\n\r\n <div>\r\n <strong>City</strong><br />\r\n <span class=\"job-title\">{{ exp.city }}</span>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"cloudfrontUrl+exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Job Description</strong><br />\r\n <span class=\"job-title\"> {{ exp.jobDescription }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"action\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\" style=\"background-color: #1f4d5f;\">\r\n Add More Experiences\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:18px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input,select,textarea{padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:50px 0 20px}.action{display:flex;justify-content:space-between;margin:50px 100px 20px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;margin-bottom:5px;font-weight:500}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;margin-top:25px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:380px}.accordion{margin:20px 100px}.add-btn{width:200px}@media screen and (max-width: 767px){.preview-header{margin-left:0}.accordion{margin:20px 0}.actions,.action{flex-direction:column-reverse;gap:5px}.action{margin:50px 0 20px}.right-actions{justify-content:space-between;gap:5px;display:flex;flex-direction:column-reverse}.form-row{gap:14px;flex-direction:column}.pointer{display:none}.add-btn{width:unset}}.remove-file{margin-left:10px;cursor:pointer;color:red;font-weight:700}.file-icon{width:23px;height:23px}\n"] }]
|
|
32249
|
+
args: [{ selector: 'app-workexperience', standalone: false, template: "<div *ngIf=\"!showpreview()\">\r\n <div class=\"education-container\">\r\n <h3>Add Work Experience</h3>\r\n <p class=\"hint\">\r\n Add your prior and current work history below\r\n </p>\r\n <form [formGroup]=\"workexperienceForm\">\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Company Name</div>\r\n <input type=\"text\" placeholder=\"Enter your company name here\" formControlName=\"companyName\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('companyName')?.touched &&\r\n workexperienceForm.get('companyName')?.hasError('required')\">\r\n Company name is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">Job Title</div>\r\n <input type=\"text\" placeholder=\"Enter your job title here\" formControlName=\"jobTitle\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('jobTitle')?.touched &&\r\n workexperienceForm.get('jobTitle')?.hasError('required')\">\r\n Job title is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Country</div>\r\n <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n {{ item.country }}\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n <div class=\"field\">\r\n <div class=\"head\">State</div>\r\n <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select State\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n <div class=\"row form-row\">\r\n <div class=\"field\">\r\n <div class=\"head\">City</div>\r\n <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('city')?.touched &&\r\n workexperienceForm.get('city')?.hasError('required')\">\r\n City is required\r\n </small>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Start Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Start date\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"{ adaptivePosition: true, isAnimated: true, showWeekNumbers: false,\r\n customTodayClass: !workexperienceForm.get('fromDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"fromDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('fromDate')?.touched &&\r\n workexperienceForm.get('fromDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !workexperienceForm.get('toDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"toDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('toDate')?.touched &&\r\n workexperienceForm.get('toDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Job Description or duties</div>\r\n <textarea placeholder=\"Description\" formControlName=\"jobDescription\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Upload</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Add documents below</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Documents\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n <div class=\"actions\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n class=\"secondary\" (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3>Work Experiences Preview</h3>\r\n </div>\r\n <div class=\"accordion\">\r\n\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n class=\"accordion-item border-0\">\r\n\r\n <!-- HEADER (preview) -->\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button\" \r\n type=\"button\" \r\n data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#edu_' + i\"\r\n aria-expanded=\"true\">\r\n\r\n <!-- LEFT : TITLE -->\r\n <span class=\"accordion-title\">\r\n {{ exp.companyName }}\r\n </span>\r\n\r\n <!-- RIGHT : EDIT ICON -->\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n\r\n </button>\r\n </h2>\r\n\r\n\r\n <!-- BODY -->\r\n <div [id]=\"'edu_' + i\" \r\n class=\"accordion-collapse collapse show\"\r\n style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n\r\n <!-- GRID DATA (2 or 3 columns) -->\r\n <div class=\"detail-grid\">\r\n <div>\r\n <strong>Company Name</strong><br />\r\n <span class=\"job-title\">{{ exp.companyName }}</span>\r\n </div>\r\n <div>\r\n <strong>Job Title</strong><br />\r\n <span class=\"job-title\">{{ exp.jobTitle }}</span>\r\n </div>\r\n <div>\r\n <strong>From Date</strong><br />\r\n <span class=\"job-title\">{{ exp.fromDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div>\r\n <strong>To Date</strong><br />\r\n <span class=\"job-title\">{{ exp.toDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n\r\n <div>\r\n <strong>Country</strong><br />\r\n <span class=\"job-title\">{{ exp.country }}</span>\r\n </div>\r\n <div>\r\n <strong>State</strong><br />\r\n <span class=\"job-title\">{{ exp.state | stateName }}</span>\r\n </div>\r\n\r\n <div>\r\n <strong>City</strong><br />\r\n <span class=\"job-title\">{{ exp.city }}</span>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"cloudfrontUrl+exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Job Description</strong><br />\r\n <span class=\"job-title\"> {{ exp.jobDescription }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"action\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\" style=\"background-color: #1f4d5f;\">\r\n Add More Experiences\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:18px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input,select,textarea{padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:50px 0 20px}.action{display:flex;justify-content:space-between;margin:50px 100px 20px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;margin-bottom:5px;font-weight:500}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;margin-top:25px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:380px}.accordion{margin:20px 100px}.add-btn{width:200px}@media screen and (max-width: 767px){.preview-header{margin-left:0}.accordion{margin:20px 0}.actions,.action{flex-direction:column-reverse;gap:5px}.action{margin:50px 0 20px}.right-actions{justify-content:space-between;gap:5px;display:flex;flex-direction:column-reverse}.form-row{gap:14px;flex-direction:column}.pointer{display:none}.add-btn{width:unset}}.remove-file{margin-left:10px;cursor:pointer;color:red;font-weight:700}.file-icon{width:23px;height:23px}\n"] }]
|
|
32250
32250
|
}], ctorParameters: () => [{ type: UserExperienceService }, { type: UserService }, { type: WorkExperienceStore }, { type: CredentialingStore }, { type: CountryServices }, { type: PostalCodeServices }, { type: i1$1.TokenService }, { type: i1$1.RoleContextService }, { type: i8.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
|
|
32251
32251
|
type: Input
|
|
32252
32252
|
}], providerName: [{
|