@idsoftsource/initial-process 1.0.4 → 1.0.5
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.
|
@@ -2088,6 +2088,7 @@ class EducationComponent {
|
|
|
2088
2088
|
showpreview = computed(() => {
|
|
2089
2089
|
return this.workStore.experiences().length > 0 && !this.isEditing();
|
|
2090
2090
|
}, ...(ngDevMode ? [{ debugName: "showpreview" }] : []));
|
|
2091
|
+
maxDate = new Date();
|
|
2091
2092
|
userdata;
|
|
2092
2093
|
constructor(userEducation, store, workStore, countryService, postalCodeService, tokenService, fb, fileService, http) {
|
|
2093
2094
|
this.userEducation = userEducation;
|
|
@@ -2346,11 +2347,11 @@ class EducationComponent {
|
|
|
2346
2347
|
this.store.nextStep();
|
|
2347
2348
|
}
|
|
2348
2349
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EducationComponent, deps: [{ token: UserEducationService }, { token: CredentialingStore }, { token: EducationStore }, { token: CountryServices }, { token: PostalCodeServices }, { token: i6.TokenService }, { token: i3.FormBuilder }, { token: FileService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
|
|
2349
|
-
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('instituteName')?.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\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !educationForm.get('startDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"startDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('startDate')?.touched &&\r\n educationForm.get('startDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n \r\n </div>\r\n </div>\r\n\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !educationForm.get('endDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"endDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('endDate')?.touched &&\r\n educationForm.get('endDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"comments\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p class=\"upload-title\">Upload</p>\r\n <p class=\"upload-subtitle\">Add documents such as Diploma, Degree</p>\r\n <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Documents\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n Selected: {{ fileName }}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\"> \r\n <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\" >\r\n Skip\r\n </button> \r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\" style=\"margin-left: 400px;\">\r\n <h3>Education 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\r\n <!-- HEADER (preview) -->\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#edu_' + i\">\r\n\r\n <!-- LEFT : TITLE -->\r\n <span class=\"accordion-title\">\r\n {{ exp.courseName }}\r\n </span>\r\n\r\n <!-- RIGHT : EDIT ICON -->\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n\r\n </button>\r\n </h2>\r\n\r\n\r\n <!-- BODY -->\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n\r\n <!-- GRID DATA (2 or 3 columns) -->\r\n <div class=\"detail-grid\">\r\n\r\n <div>\r\n <strong>Course Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.courseName }}</span>\r\n </div>\r\n <div>\r\n <strong>Course Type</strong><br />\r\n <span class=\"job-title\"> {{ exp.courseType }}</span>\r\n </div>\r\n <div>\r\n <strong>Institute Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.instituteName }}</span>\r\n </div>\r\n <div>\r\n <strong>From Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.startDate | date:'yyyy/MM/dd' }}</span>\r\n </div>\r\n <div>\r\n <strong>To Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.endDate | date:'yyyy/MM/dd' }}</span>\r\n </div>\r\n <div>\r\n <strong>State</strong><br />\r\n <span class=\"job-title\"> {{ exp.state | stateName }}</span>\r\n </div> <div>\r\n <strong>City</strong><br />\r\n <span class=\"job-title\"> {{ exp.city }}</span>\r\n </div>\r\n \r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Comments</strong><br />\r\n <span class=\"job-title\"> {{ exp.comments }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary\" (click)=\"add()\" style=\"background-color: #1f4d5f;width: 200px;\">\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{width:100%;height:44px;padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;height:45px}::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-top:25px}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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i10.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i10.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i11.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i11.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
|
|
2350
|
+
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 [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !educationForm.get('startDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"startDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('startDate')?.touched &&\r\n educationForm.get('startDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n \r\n </div>\r\n </div>\r\n\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !educationForm.get('endDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"endDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('endDate')?.touched &&\r\n educationForm.get('endDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"comments\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p class=\"upload-title\">Upload</p>\r\n <p class=\"upload-subtitle\">Add documents such as Diploma, Degree</p>\r\n <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Documents\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n Selected: {{ fileName }}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\"> \r\n <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\" >\r\n Skip\r\n </button> \r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\" style=\"margin-left: 400px;\">\r\n <h3>Education 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\r\n <!-- HEADER (preview) -->\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#edu_' + i\">\r\n\r\n <!-- LEFT : TITLE -->\r\n <span class=\"accordion-title\">\r\n {{ exp.courseName }}\r\n </span>\r\n\r\n <!-- RIGHT : EDIT ICON -->\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n\r\n </button>\r\n </h2>\r\n\r\n\r\n <!-- BODY -->\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n\r\n <!-- GRID DATA (2 or 3 columns) -->\r\n <div class=\"detail-grid\">\r\n\r\n <div>\r\n <strong>Course Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.courseName }}</span>\r\n </div>\r\n <div>\r\n <strong>Course Type</strong><br />\r\n <span class=\"job-title\"> {{ exp.courseType }}</span>\r\n </div>\r\n <div>\r\n <strong>Institute Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.instituteName }}</span>\r\n </div>\r\n <div>\r\n <strong>From Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.startDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div>\r\n <strong>To Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.endDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div>\r\n <strong>State</strong><br />\r\n <span class=\"job-title\"> {{ exp.state | stateName }}</span>\r\n </div> <div>\r\n <strong>City</strong><br />\r\n <span class=\"job-title\"> {{ exp.city }}</span>\r\n </div>\r\n \r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Comments</strong><br />\r\n <span class=\"job-title\"> {{ exp.comments }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary\" (click)=\"add()\" style=\"background-color: #1f4d5f;width: 200px;\">\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{width:100%;height:44px;padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;height:45px}::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-top:25px}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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i10.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i10.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i11.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i11.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
|
|
2350
2351
|
}
|
|
2351
2352
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EducationComponent, decorators: [{
|
|
2352
2353
|
type: Component,
|
|
2353
|
-
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('instituteName')?.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\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !educationForm.get('startDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"startDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('startDate')?.touched &&\r\n educationForm.get('startDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n \r\n </div>\r\n </div>\r\n\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !educationForm.get('endDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"endDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('endDate')?.touched &&\r\n educationForm.get('endDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"comments\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p class=\"upload-title\">Upload</p>\r\n <p class=\"upload-subtitle\">Add documents such as Diploma, Degree</p>\r\n <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Documents\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n Selected: {{ fileName }}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\"> \r\n <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\" >\r\n Skip\r\n </button> \r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\" style=\"margin-left: 400px;\">\r\n <h3>Education 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\r\n <!-- HEADER (preview) -->\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#edu_' + i\">\r\n\r\n <!-- LEFT : TITLE -->\r\n <span class=\"accordion-title\">\r\n {{ exp.courseName }}\r\n </span>\r\n\r\n <!-- RIGHT : EDIT ICON -->\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n\r\n </button>\r\n </h2>\r\n\r\n\r\n <!-- BODY -->\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n\r\n <!-- GRID DATA (2 or 3 columns) -->\r\n <div class=\"detail-grid\">\r\n\r\n <div>\r\n <strong>Course Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.courseName }}</span>\r\n </div>\r\n <div>\r\n <strong>Course Type</strong><br />\r\n <span class=\"job-title\"> {{ exp.courseType }}</span>\r\n </div>\r\n <div>\r\n <strong>Institute Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.instituteName }}</span>\r\n </div>\r\n <div>\r\n <strong>From Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.startDate | date:'yyyy/MM/dd' }}</span>\r\n </div>\r\n <div>\r\n <strong>To Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.endDate | date:'yyyy/MM/dd' }}</span>\r\n </div>\r\n <div>\r\n <strong>State</strong><br />\r\n <span class=\"job-title\"> {{ exp.state | stateName }}</span>\r\n </div> <div>\r\n <strong>City</strong><br />\r\n <span class=\"job-title\"> {{ exp.city }}</span>\r\n </div>\r\n \r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Comments</strong><br />\r\n <span class=\"job-title\"> {{ exp.comments }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary\" (click)=\"add()\" style=\"background-color: #1f4d5f;width: 200px;\">\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{width:100%;height:44px;padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;height:45px}::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-top:25px}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}\n"] }]
|
|
2354
|
+
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 [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !educationForm.get('startDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"startDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('startDate')?.touched &&\r\n educationForm.get('startDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n \r\n </div>\r\n </div>\r\n\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !educationForm.get('endDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"endDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('endDate')?.touched &&\r\n educationForm.get('endDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"comments\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p class=\"upload-title\">Upload</p>\r\n <p class=\"upload-subtitle\">Add documents such as Diploma, Degree</p>\r\n <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Documents\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n Selected: {{ fileName }}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\"> \r\n <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\" >\r\n Skip\r\n </button> \r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\" style=\"margin-left: 400px;\">\r\n <h3>Education 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\r\n <!-- HEADER (preview) -->\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#edu_' + i\">\r\n\r\n <!-- LEFT : TITLE -->\r\n <span class=\"accordion-title\">\r\n {{ exp.courseName }}\r\n </span>\r\n\r\n <!-- RIGHT : EDIT ICON -->\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n\r\n </button>\r\n </h2>\r\n\r\n\r\n <!-- BODY -->\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n\r\n <!-- GRID DATA (2 or 3 columns) -->\r\n <div class=\"detail-grid\">\r\n\r\n <div>\r\n <strong>Course Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.courseName }}</span>\r\n </div>\r\n <div>\r\n <strong>Course Type</strong><br />\r\n <span class=\"job-title\"> {{ exp.courseType }}</span>\r\n </div>\r\n <div>\r\n <strong>Institute Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.instituteName }}</span>\r\n </div>\r\n <div>\r\n <strong>From Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.startDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div>\r\n <strong>To Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.endDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div>\r\n <strong>State</strong><br />\r\n <span class=\"job-title\"> {{ exp.state | stateName }}</span>\r\n </div> <div>\r\n <strong>City</strong><br />\r\n <span class=\"job-title\"> {{ exp.city }}</span>\r\n </div>\r\n \r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Comments</strong><br />\r\n <span class=\"job-title\"> {{ exp.comments }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary\" (click)=\"add()\" style=\"background-color: #1f4d5f;width: 200px;\">\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{width:100%;height:44px;padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;height:45px}::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-top:25px}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}\n"] }]
|
|
2354
2355
|
}], ctorParameters: () => [{ type: UserEducationService }, { type: CredentialingStore }, { type: EducationStore }, { type: CountryServices }, { type: PostalCodeServices }, { type: i6.TokenService }, { type: i3.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
|
|
2355
2356
|
type: Input
|
|
2356
2357
|
}], providerName: [{
|
|
@@ -2499,6 +2500,7 @@ class CertificationComponent {
|
|
|
2499
2500
|
return this.workStore.experiences().length > 0 && !this.isEditing();
|
|
2500
2501
|
}, ...(ngDevMode ? [{ debugName: "showpreview" }] : []));
|
|
2501
2502
|
userdata;
|
|
2503
|
+
maxDate = new Date();
|
|
2502
2504
|
constructor(userDocumentService, store, workStore, tokenService, postalCodeService, fb, fileService, http) {
|
|
2503
2505
|
this.userDocumentService = userDocumentService;
|
|
2504
2506
|
this.store = store;
|
|
@@ -2759,11 +2761,11 @@ class CertificationComponent {
|
|
|
2759
2761
|
this.store.nextStep();
|
|
2760
2762
|
}
|
|
2761
2763
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CertificationComponent, deps: [{ token: UserDocumentService }, { token: CredentialingStore }, { token: CertificationStore }, { token: i6.TokenService }, { token: PostalCodeServices }, { token: i3.FormBuilder }, { token: FileService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
|
|
2762
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CertificationComponent, isStandalone: false, selector: "app-certification", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n <h3>Add Certificates</h3>\r\n <p class=\"hint\">\r\n Recommended for your role\r\n </p>\r\n <div class=\"document-container\">\r\n <input type=\"text\" class=\"search-input\" placeholder=\"Search documents here...\" [formControl]=\"searchControl\" />\r\n\r\n <div class=\"grid\">\r\n <div *ngFor=\"let item of documentTypes\">\r\n <label class=\"checkbox-row\">\r\n <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n <span class=\"title\">{{ item.type }}</span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <form [formGroup]=\"certificateForm\">\r\n <div class=\"row\" style=\"margin-top: 20px;\">\r\n <div class=\"field\">\r\n <div class=\"head\">Certificate Number</div>\r\n <input type=\"text\" placeholder=\"Enter your Certificate Number here\" formControlName=\"number\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n certificateForm.get('number')?.hasError('required')\">\r\n Certificate number is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">Certificate Issued By</div>\r\n <input type=\"text\" placeholder=\"Enter Certificate Issued By here\" formControlName=\"issuedBy\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n certificateForm.get('issuedBy')?.hasError('required')\">\r\n Certificate issued by is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Issued State</div>\r\n <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select Issued State here\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ 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\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n certificateForm.get('issueDate')?.hasError('required')\">\r\n Issued date is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Expiration Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n certificateForm.get('expiryDate')?.hasError('required')\">\r\n Expiry date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n\r\n <p class=\"upload-title\">Upload</p>\r\n <p class=\"upload-subtitle\">Add certificates below</p>\r\n\r\n <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Certifications\r\n </button>\r\n\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n Selected: {{ fileName }}\r\n </p>\r\n\r\n </div>\r\n\r\n </div>\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\" style=\"margin-left: 350px;\">\r\n <h3>Certifications Preview</h3>\r\n </div>\r\n <div class=\"accordion\" style=\"margin: 20px 100px;\">\r\n\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n class=\"accordion-item border-0\">\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#edu_' + i\">\r\n <span class=\"accordion-title\">\r\n {{ exp.documentTypeName }}\r\n </span>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n\r\n\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n <div class=\"detail-grid\">\r\n <div>\r\n <strong>Certificate Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.documentTypeName }}</span>\r\n </div>\r\n <div>\r\n <strong>Certificate Number</strong><br />\r\n <span class=\"job-title\"> {{ exp.number }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued By</strong><br />\r\n <span class=\"job-title\"> {{ exp.issuedBy }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued State</strong><br />\r\n <span class=\"job-title\"> {{ exp.issuedState | stateName }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.issueDate | date:'yyyy/MM/dd' }} </span>\r\n </div>\r\n <div>\r\n <strong>Expiry Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.expiryDate | date:'yyyy/MM/dd' }}</span>\r\n </div>\r\n\r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Description</strong><br />\r\n <span class=\"job-title\"> {{ exp.notes }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary\" (click)=\"add()\" style=\"background-color: #1f4d5f;width: 200px;\">\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{width:100%;height:44px;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-top:25px}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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i10.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i10.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i11.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i11.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
|
|
2764
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CertificationComponent, isStandalone: false, selector: "app-certification", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n <h3>Add Certificates</h3>\r\n <p class=\"hint\">\r\n Recommended for your role\r\n </p>\r\n <div class=\"document-container\">\r\n <input type=\"text\" class=\"search-input\" placeholder=\"Search documents here...\" [formControl]=\"searchControl\" />\r\n\r\n <div class=\"grid\">\r\n <div *ngFor=\"let item of documentTypes\">\r\n <label class=\"checkbox-row\">\r\n <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n <span class=\"title\">{{ item.type }}</span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <form [formGroup]=\"certificateForm\">\r\n <div class=\"row\" style=\"margin-top: 20px;\">\r\n <div class=\"field\">\r\n <div class=\"head\">Certificate Number</div>\r\n <input type=\"text\" placeholder=\"Enter your Certificate Number here\" formControlName=\"number\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n certificateForm.get('number')?.hasError('required')\">\r\n Certificate number is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">Certificate Issued By</div>\r\n <input type=\"text\" placeholder=\"Enter Certificate Issued By here\" formControlName=\"issuedBy\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n certificateForm.get('issuedBy')?.hasError('required')\">\r\n Certificate issued by is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Issued State</div>\r\n <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select Issued State here\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Issued Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n certificateForm.get('issueDate')?.hasError('required')\">\r\n Issued date is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Expiration Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n certificateForm.get('expiryDate')?.hasError('required')\">\r\n Expiry date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n\r\n <p class=\"upload-title\">Upload</p>\r\n <p class=\"upload-subtitle\">Add certificates below</p>\r\n\r\n <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Certifications\r\n </button>\r\n\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n Selected: {{ fileName }}\r\n </p>\r\n\r\n </div>\r\n\r\n </div>\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\" style=\"margin-left: 350px;\">\r\n <h3>Certifications Preview</h3>\r\n </div>\r\n <div class=\"accordion\" style=\"margin: 20px 100px;\">\r\n\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n class=\"accordion-item border-0\">\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#edu_' + i\">\r\n <span class=\"accordion-title\">\r\n {{ exp.documentTypeName }}\r\n </span>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n\r\n\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n <div class=\"detail-grid\">\r\n <div>\r\n <strong>Certificate Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.documentTypeName }}</span>\r\n </div>\r\n <div>\r\n <strong>Certificate Number</strong><br />\r\n <span class=\"job-title\"> {{ exp.number }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued By</strong><br />\r\n <span class=\"job-title\"> {{ exp.issuedBy }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued State</strong><br />\r\n <span class=\"job-title\"> {{ exp.issuedState | stateName }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.issueDate | date:'MM/dd/yyyy' }} </span>\r\n </div>\r\n <div>\r\n <strong>Expiry Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n\r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Description</strong><br />\r\n <span class=\"job-title\"> {{ exp.notes }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary\" (click)=\"add()\" style=\"background-color: #1f4d5f;width: 200px;\">\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{width:100%;height:44px;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-top:25px}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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i10.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i10.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i11.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i11.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
|
|
2763
2765
|
}
|
|
2764
2766
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CertificationComponent, decorators: [{
|
|
2765
2767
|
type: Component,
|
|
2766
|
-
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\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n certificateForm.get('issueDate')?.hasError('required')\">\r\n Issued date is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Expiration Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n certificateForm.get('expiryDate')?.hasError('required')\">\r\n Expiry date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n\r\n <p class=\"upload-title\">Upload</p>\r\n <p class=\"upload-subtitle\">Add certificates below</p>\r\n\r\n <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Certifications\r\n </button>\r\n\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n Selected: {{ fileName }}\r\n </p>\r\n\r\n </div>\r\n\r\n </div>\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\" style=\"margin-left: 350px;\">\r\n <h3>Certifications Preview</h3>\r\n </div>\r\n <div class=\"accordion\" style=\"margin: 20px 100px;\">\r\n\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n class=\"accordion-item border-0\">\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#edu_' + i\">\r\n <span class=\"accordion-title\">\r\n {{ exp.documentTypeName }}\r\n </span>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n\r\n\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n <div class=\"detail-grid\">\r\n <div>\r\n <strong>Certificate Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.documentTypeName }}</span>\r\n </div>\r\n <div>\r\n <strong>Certificate Number</strong><br />\r\n <span class=\"job-title\"> {{ exp.number }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued By</strong><br />\r\n <span class=\"job-title\"> {{ exp.issuedBy }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued State</strong><br />\r\n <span class=\"job-title\"> {{ exp.issuedState | stateName }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.issueDate | date:'yyyy/MM/dd' }} </span>\r\n </div>\r\n <div>\r\n <strong>Expiry Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.expiryDate | date:'yyyy/MM/dd' }}</span>\r\n </div>\r\n\r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Description</strong><br />\r\n <span class=\"job-title\"> {{ exp.notes }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary\" (click)=\"add()\" style=\"background-color: #1f4d5f;width: 200px;\">\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{width:100%;height:44px;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-top:25px}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}\n"] }]
|
|
2768
|
+
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 [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n certificateForm.get('issueDate')?.hasError('required')\">\r\n Issued date is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Expiration Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n certificateForm.get('expiryDate')?.hasError('required')\">\r\n Expiry date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n\r\n <p class=\"upload-title\">Upload</p>\r\n <p class=\"upload-subtitle\">Add certificates below</p>\r\n\r\n <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Certifications\r\n </button>\r\n\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n Selected: {{ fileName }}\r\n </p>\r\n\r\n </div>\r\n\r\n </div>\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\" style=\"margin-left: 350px;\">\r\n <h3>Certifications Preview</h3>\r\n </div>\r\n <div class=\"accordion\" style=\"margin: 20px 100px;\">\r\n\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n class=\"accordion-item border-0\">\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#edu_' + i\">\r\n <span class=\"accordion-title\">\r\n {{ exp.documentTypeName }}\r\n </span>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n\r\n\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n <div class=\"detail-grid\">\r\n <div>\r\n <strong>Certificate Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.documentTypeName }}</span>\r\n </div>\r\n <div>\r\n <strong>Certificate Number</strong><br />\r\n <span class=\"job-title\"> {{ exp.number }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued By</strong><br />\r\n <span class=\"job-title\"> {{ exp.issuedBy }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued State</strong><br />\r\n <span class=\"job-title\"> {{ exp.issuedState | stateName }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.issueDate | date:'MM/dd/yyyy' }} </span>\r\n </div>\r\n <div>\r\n <strong>Expiry Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n\r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Description</strong><br />\r\n <span class=\"job-title\"> {{ exp.notes }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary\" (click)=\"add()\" style=\"background-color: #1f4d5f;width: 200px;\">\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{width:100%;height:44px;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-top:25px}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}\n"] }]
|
|
2767
2769
|
}], ctorParameters: () => [{ type: UserDocumentService }, { type: CredentialingStore }, { type: CertificationStore }, { type: i6.TokenService }, { type: PostalCodeServices }, { type: i3.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
|
|
2768
2770
|
type: Input
|
|
2769
2771
|
}], providerName: [{
|
|
@@ -3740,7 +3742,7 @@ class SkillsComponent {
|
|
|
3740
3742
|
this.userSkillsSub?.unsubscribe();
|
|
3741
3743
|
}
|
|
3742
3744
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SkillsComponent, deps: [{ token: SkillSetService }, { token: UserSkillSetService }, { token: i3.UntypedFormBuilder }, { token: UtilsService }, { token: i6.RoleContextService }, { token: CredentialingStore }, { token: i6.TokenService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3743
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SkillsComponent, isStandalone: false, selector: "app-skills", inputs: { providerId: "providerId", providerName: "providerName" }, ngImport: i0, template: "<!-- SKILL PREVIEW LIST -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'preview'\">\r\n <h5 class=\"title text-secondary\">Skills Preview</h5>\r\n <p class=\"subtitle\">First-time users should enter skillsets with Inspector Match, Once you setup skillsets in your\r\n business profile you can add skills under</p>\r\n <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n <accordion-group *ngFor=\"let skill of userSkillsPreview\" #accGroup\r\n (isOpenChange)=\"onSkillAccordionChange(skill, $event)\">\r\n <!-- HEADER -->\r\n <div accordion-heading class=\"skill-preview-header\">\r\n <span class=\"fw-semibold text-secondary\">\r\n {{ skill.skillSetName }}\r\n </span>\r\n <div class=\"actions\">\r\n <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n <button type=\"button\" class=\"me-3\" (click)=\"editSkillFromPreview(skill, accGroup, $event)\">\r\n <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" alt=\"icon\" />\r\n </button>\r\n <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n [class.rotate]=\"accGroup.isOpen\" />\r\n </ng-container>\r\n <ng-container *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\">\r\n <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backToSkill(accGroup)\">\r\n Cancel\r\n </button>\r\n <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserSkillset()\" \r\n [disabled]=\"showLoader\">\r\n Update\r\n </button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <!-- BODY -->\r\n <div class=\"skill-preview-body content-part\">\r\n <!-- DISPLAY MODE -->\r\n <div *ngIf=\"!isEditMode || model?.skillSetId !== skill.skillSetId\"\r\n class=\"d-flex justify-content-between align-items-center flex-wrap gap-3\">\r\n <div>\r\n <label>Service Provider</label> <br>\r\n {{ skill.providerName }}\r\n </div>\r\n <div>\r\n <label>Skill</label> <br>\r\n {{ skill.skillSetName }}\r\n </div>\r\n <div style=\"pointer-events: none;\">\r\n <label>Self Ability Rating</label> <br>\r\n <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n </div>\r\n <div>\r\n <label class=\"mb-0 pb-0 label\">Years of Experience</label> <br>\r\n {{ skill?.year }}\r\n </div>\r\n <div>\r\n <label>Visible</label> <br>\r\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"skill.profileVisibility\" disabled>\r\n </div>\r\n <div class=\"w-100 mt-3\">\r\n <label>Description</label> <br>\r\n {{ skill.notes }}\r\n </div>\r\n </div>\r\n <!-- EDIT MODE -->\r\n <div *ngIf=\"isEditMode && model?.skillSetId === skill.skillSetId\" [formGroup]=\"tab.at(0)\">\r\n <div class=\"d-flex justify-content-between align-items-center flex-wrap gap-3\">\r\n <div>\r\n <label>Service Provider</label> <br>\r\n {{ skill.providerName }}\r\n </div>\r\n <div>\r\n <label>Skill</label> <br>\r\n {{ skill.skillSetName }}\r\n </div>\r\n <div>\r\n <label>Self Ability Rating</label> <br>\r\n <ngx-stars *ngIf=\"tab.at(0)?.get('starRating')?.value !== null\" [key]=\"tab.at(0).get('starRating')?.value\"\r\n [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n (rate)=\"onEditRating($event)\">\r\n </ngx-stars>\r\n </div>\r\n <div style=\"width: 200px;\">\r\n <label class=\"mb-0 label pb-0\">Years of Experience</label> <br>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\" formControlName=\"year\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\" bindValue=\"value\"\r\n [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"></ng-select>\r\n </div>\r\n <div>\r\n <label>Visible</label> <br>\r\n <input class=\"form-check-input \" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n </div>\r\n <div class=\"mt-3\">\r\n <label>Description</label> <br>\r\n <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\" placeholder=\"Enter notes\"\r\n style=\"height: 80px;\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n </accordion-group>\r\n </accordion>\r\n</div>\r\n\r\n<!-- Add part -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'add'\">\r\n <h2 class=\"title text-secondary\">Add Skills</h2>\r\n <p class=\"subtitle\">A minimum of 5 skills is needed</p>\r\n <div class=\"content-part\">\r\n <h6 class=\"text-secondary\"> {{ form?.value?.id ? \"Update Skill Category\" : \"Create Skill Category\" }}</h6>\r\n <div class=\"sub-section\">\r\n <div class=\"row mt-2\">\r\n <div class=\"col-12 col-md-12 col-sm-12\">\r\n <div class=\"search-part\">\r\n <input type=\"text\" placeholder=\"Search / Add Skillsets here\" [(ngModel)]=\"searchSkillQry\"\r\n (input)=\"getSkillSets()\" />\r\n <button class=\"btn\" (click)=\"createNewSkills()\" tooltip=\"Add Skillset\">\r\n <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18\"\r\n height=\"18\" />\r\n </button>\r\n </div>\r\n <div *ngIf=\"errMsg\" class=\"invalid-feedback is-invalid d-block\">\r\n Please Enter Skillsets Name\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n {{nameError}}\r\n </div>\r\n <div class=\"col skills-section\" [ngClass]=\"showLoading && !isEditMode ? 'loader':''\">\r\n <div class=\"row mt-2\" [ngStyle]=\"showLoader && !isEditMode ? {'min-height': '150px'} : {}\">\r\n <div class=\"col-12 col-md-4\" *ngFor=\"let skill of skillSets\">\r\n <div class=\"mt-2 gap-1 d-flex align-items-start\">\r\n <input \r\n type=\"checkbox\"\r\n [checked]=\"skill.selected\"\r\n (change)=\"onSelectedSkillsets($event, skill)\"\r\n id=\"{{skill.id}}\"\r\n name=\"{{skill.id}}\">\r\n<label class=\"text-title\" for=\"{{skill.id}}\">\r\n {{ skill.name }}\r\n</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n [ngClass]=\"{ 'loader': showLoading && !isEditMode,'pt-3': !showLoading && !isEditMode,'edit-mode': isEditMode}\">\r\n <!-- <loader [show]=\"showLoading\" [small]=\"true\"></loader> -->\r\n <tabset #tabSet>\r\n <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab.controls; let index = index\"\r\n [label]=\"tabs[index]\" tab1 id={{tabs[index]}} #{{tabs[index]}}>\r\n <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n <span class=\"text-secondary\">{{tabs[index]}}</span>\r\n <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.skillSetId.value)\">\r\n <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n </button>\r\n </ng-template>\r\n <div [formGroup]=\"group\" class=\"tab-card\">\r\n <div class=\"card-body\">\r\n <div class=\"row\">\r\n <div class=\"col-12 col-md-2 mt-1\">\r\n <label class=\"label\">Self Ability Rating</label>\r\n <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\" [maxStars]=\"5\">\r\n </ngx-stars>\r\n <div *ngIf=\"userSkillSubmitted && k?.starRating?.errors\" class=\"invalid-feedback\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\">\r\n <div *ngIf=\"k?.starRating?.errors?.required\">Star\r\n Rating is\r\n required</div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label \">Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n formControlName=\"year\" [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"\r\n (change)=\"onYearChange(group)\"></ng-select>\r\n\r\n <div *ngIf=\"userSkillSubmitted && k?.year?.errors\" class=\"invalid-feedback\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\">\r\n <div *ngIf=\"k?.year?.errors?.required\">Year is\r\n required</div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1 text-center\">\r\n <label class=\"label\">Profile\r\n Visibility</label><br />\r\n <input class=\"form-check-input \" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n\r\n <div class=\"col-12 col-md-2 mt-1\" *ngIf=\"tab.controls.length>1 && index == copyOptionIndex\">\r\n <label class=\"mb-2 label\">Copy to All Tabs</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index,group.value)\"\r\n role=\"switch\">\r\n </div>\r\n </div>\r\n <div>\r\n <label class=\"label\">Description</label>\r\n <div class=\"col-12 col-md-12 mt-1\">\r\n <textarea placeholder=\"Description of your Skill here\" formControlName=\"notes\" class=\"form-control\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.notes?.errors }\" rows=\"5\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </tab>\r\n </tabset>\r\n </div>\r\n <!-- <div class=\"row pt-3\">\r\n <div class=\"pt-3 text-end\">\r\n <button class=\"back-btn\" (click)=\"reset()\">Reset</button>\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Footer buttons -->\r\n<div class=\"skills-container last footer-actions\">\r\n <button class=\"back-btn\" (click)=\"back()\">Back</button>\r\n <div>\r\n <button class=\"back-btn me-3\" *ngIf=\"store.stepView() === 'add'\" (click)=\"next()\">Skip</button>\r\n <button class=\"continue-btn add me-3\" *ngIf=\"store.stepView() === 'preview'\" (click)=\"store.goToAdd()\">\r\n Add More Skills\r\n </button>\r\n <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n Continue</button>\r\n </div>\r\n</div>", styles: ["@charset \"UTF-8\";.skills-container{max-width:1000px;margin:40px auto;min-height:300px}.skills-container.last{min-height:unset}.title{font-size:22px;margin-bottom:4px}.subtitle{font-size:13px;color:#777;margin-bottom:30px}.content-part{background:#fff}.content-part p,.content-part div{font-size:small}.content-part .card{margin-top:15px;background-color:#fff;border-radius:10px}.content-part .card .row{margin-top:-15px}.content-part .card .sub-section{padding:0 10px}.content-part .card .sub-section .title{font-size:16px;font-weight:400;color:var(--font-primary)}.content-part .card .sub-section .info-title{font-size:12px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .card .sub-section .content{font-size:12px}.content-part .card .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px}.content-part .card .sub-section .subsection input{width:30%}.content-part .card .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background-color:#fff;border-radius:5px;color:var(--font-primary);margin-top:15px}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;position:relative;border-radius:5px;border:1px solid #d3dae6;padding:10px 0 10px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;height:45px}.content-part .search-part input{width:auto;flex:1;color:var(--font-dark);font-size:var(--font12-input);font-weight:400;border:none;background:none;outline:none}.content-part .search-part .btn{background:#1e2541;border-radius:5px;padding:5px;width:41px;height:36px;margin-right:3px}.content-part .search-part .btn img{filter:brightness(0) invert(1)}.content-part textarea{width:100%;height:100px;background:none}.content-part .skills-section{margin-left:5px}.content-part .skills-section .category-title{margin-bottom:5px;font-size:13px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .skills-section .text-title{font-size:13px;margin-left:3px;color:var(--font-primary);display:contents}.content-part .skills-section input[type=checkbox]{border:2px solid #000!important;height:14px!important;width:15px!important;border-radius:2px!important;margin:2px}.content-part .skills-section input[type=checkbox]:checked{background-color:#000!important;border:2px solid #000!important}.content-part .skills-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#000;width:15px;display:flex;justify-content:center;border:2px solid #000;height:14px;align-items:center;border-radius:2px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#237b4b!important;border:1px solid #237b4b!important}::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#f1f4fa}::ng-deep .ng-select .ng-select-container{background:#f1f4fa;border:1px solid #ccc;border-radius:5px}.back-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background:#d3dae6;color:#fff;border-radius:5px;padding:6px 8px}.save-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px}.create-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px;height:40px;min-width:9rem}.form-control{color:#333;background:none!important;min-height:36px;font-size:small;height:43px}.form-control:focus{box-shadow:none!important}.close-popup{position:absolute;right:7px;top:4px;width:25px}.label{font-size:12px;font-weight:700;padding-bottom:8px}.form-control:focus{border:var(--bs-border-width) solid var(--bs-border-color)}::ng-deep .nav-link{color:#000!important}.loader{filter:blur(3px);height:40px}.edit-mode ::ng-deep .nav-tabs{display:none!important}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:100px}.skip-btn,.back-btn{background:#d3dae6;color:#6c757dc7;font-size:14px;border-radius:5px;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px}.skip-btn.edit,.back-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn{padding:7px 23px;background-color:#4077ad;color:#fff;border-radius:5px;min-width:8rem;min-height:45px;border:white}.continue-btn:disabled{background-color:#d1d5db;cursor:not-allowed}.continue-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn.add{background-color:#2e5b70}.skill-preview-wrapper{margin-bottom:24px}.skill-preview-card{border-radius:12px;margin-bottom:12px;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease;overflow:hidden}::ng-deep accordion-group+accordion-group{margin-top:20px}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:10px 0}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.rotate{transform:rotate(-180deg)}.skill-preview-body label{font-weight:500;font-size:13px;color:#6b7280}.skill-preview-body p{margin:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "component", type: NgxStarsComponent, selector: "ngx-stars", inputs: ["maxStars", "initialStars", "readonly", "size", "color", "animation", "animationSpeed", "customPadding", "wholeStars", "customStarIcons"], outputs: ["ratingOutput"] }, { kind: "directive", type: i11$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i12.TabDirective, selector: "tab, [tab]", inputs: ["heading", "id", "disabled", "removable", "tabOrder", "customClass", "active"], outputs: ["selectTab", "deselect", "removed"], exportAs: ["tab"] }, { kind: "component", type: i12.TabsetComponent, selector: "tabset", inputs: ["vertical", "justified", "type"] }, { kind: "directive", type: i12.TabHeadingDirective, selector: "[tabHeading]" }, { kind: "component", type: i13.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i13.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }], animations: [
|
|
3745
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SkillsComponent, isStandalone: false, selector: "app-skills", inputs: { providerId: "providerId", providerName: "providerName" }, ngImport: i0, template: "<!-- SKILL PREVIEW LIST -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'preview'\">\r\n <h5 class=\"title text-secondary\">Skills Preview</h5>\r\n <!-- <p class=\"subtitle\">First-time users should enter skillsets with Inspector Match, Once you setup skillsets in your\r\n business profile you can add skills under</p> -->\r\n <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n <accordion-group *ngFor=\"let skill of userSkillsPreview\" #accGroup\r\n (isOpenChange)=\"onSkillAccordionChange(skill, $event)\">\r\n <!-- HEADER -->\r\n <div accordion-heading class=\"skill-preview-header\">\r\n <span class=\"fw-semibold text-secondary\">\r\n {{ skill.skillSetName }}\r\n </span>\r\n <div class=\"actions\">\r\n <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n <button type=\"button\" class=\"me-3\" (click)=\"editSkillFromPreview(skill, accGroup, $event)\">\r\n <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" alt=\"icon\" />\r\n </button>\r\n <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n [class.rotate]=\"accGroup.isOpen\" />\r\n </ng-container>\r\n <ng-container *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\">\r\n <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backToSkill(accGroup)\">\r\n Cancel\r\n </button>\r\n <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserSkillset()\" \r\n [disabled]=\"showLoader\">\r\n Update\r\n </button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <!-- BODY -->\r\n <div class=\"skill-preview-body content-part\">\r\n <!-- DISPLAY MODE -->\r\n <div *ngIf=\"!isEditMode || model?.skillSetId !== skill.skillSetId\"\r\n class=\"d-flex justify-content-between align-items-center flex-wrap gap-3\">\r\n <div>\r\n <label>Service Provider</label> <br>\r\n {{ skill.providerName }}\r\n </div>\r\n <div>\r\n <label>Skill</label> <br>\r\n {{ skill.skillSetName }}\r\n </div>\r\n <div style=\"pointer-events: none;\">\r\n <label>Self Ability Rating</label> <br>\r\n <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n </div>\r\n <div>\r\n <label class=\"mb-0 pb-0 label\">Years of Experience</label> <br>\r\n {{ skill?.year }}\r\n </div>\r\n <div>\r\n <label>Visible</label> <br>\r\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"skill.profileVisibility\" disabled>\r\n </div>\r\n <div class=\"w-100 mt-3\">\r\n <label>Description</label> <br>\r\n {{ skill.notes }}\r\n </div>\r\n </div>\r\n <!-- EDIT MODE -->\r\n <div *ngIf=\"isEditMode && model?.skillSetId === skill.skillSetId\" [formGroup]=\"tab.at(0)\">\r\n <div class=\"d-flex justify-content-between align-items-center flex-wrap gap-3\">\r\n <div>\r\n <label>Service Provider</label> <br>\r\n {{ skill.providerName }}\r\n </div>\r\n <div>\r\n <label>Skill</label> <br>\r\n {{ skill.skillSetName }}\r\n </div>\r\n <div>\r\n <label>Self Ability Rating</label> <br>\r\n <ngx-stars *ngIf=\"tab.at(0)?.get('starRating')?.value !== null\" [key]=\"tab.at(0).get('starRating')?.value\"\r\n [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n (rate)=\"onEditRating($event)\">\r\n </ngx-stars>\r\n </div>\r\n <div style=\"width: 200px;\">\r\n <label class=\"mb-0 label pb-0\">Years of Experience</label> <br>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\" formControlName=\"year\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\" bindValue=\"value\"\r\n [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"></ng-select>\r\n </div>\r\n <div>\r\n <label>Visible</label> <br>\r\n <input class=\"form-check-input \" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n </div>\r\n <div class=\"mt-3\">\r\n <label>Description</label> <br>\r\n <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\" placeholder=\"Enter notes\"\r\n style=\"height: 80px;\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n </accordion-group>\r\n </accordion>\r\n</div>\r\n\r\n<!-- Add part -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'add'\">\r\n <h2 class=\"title text-secondary\">Add Skills</h2>\r\n <p class=\"subtitle\">A minimum of 5 skills is needed</p>\r\n <div class=\"content-part\">\r\n <h6 class=\"text-secondary\"> {{ form?.value?.id ? \"Update Skill Category\" : \"Create Skill Category\" }}</h6>\r\n <div class=\"sub-section\">\r\n <div class=\"row mt-2\">\r\n <div class=\"col-12 col-md-12 col-sm-12\">\r\n <div class=\"search-part\">\r\n <input type=\"text\" placeholder=\"Search / Add Skillsets here\" [(ngModel)]=\"searchSkillQry\"\r\n (input)=\"getSkillSets()\" />\r\n <button class=\"btn\" (click)=\"createNewSkills()\" tooltip=\"Add Skillset\">\r\n <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18\"\r\n height=\"18\" />\r\n </button>\r\n </div>\r\n <div *ngIf=\"errMsg\" class=\"invalid-feedback is-invalid d-block\">\r\n Please Enter Skillsets Name\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n {{nameError}}\r\n </div>\r\n <div class=\"col skills-section\" [ngClass]=\"showLoading && !isEditMode ? 'loader':''\">\r\n <div class=\"row mt-2\" [ngStyle]=\"showLoader && !isEditMode ? {'min-height': '150px'} : {}\">\r\n <div class=\"col-12 col-md-4\" *ngFor=\"let skill of skillSets\">\r\n <div class=\"mt-2 gap-1 d-flex align-items-start\">\r\n <input \r\n type=\"checkbox\"\r\n [checked]=\"skill.selected\"\r\n (change)=\"onSelectedSkillsets($event, skill)\"\r\n id=\"{{skill.id}}\"\r\n name=\"{{skill.id}}\">\r\n<label class=\"text-title\" for=\"{{skill.id}}\">\r\n {{ skill.name }}\r\n</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n [ngClass]=\"{ 'loader': showLoading && !isEditMode,'pt-3': !showLoading && !isEditMode,'edit-mode': isEditMode}\">\r\n <!-- <loader [show]=\"showLoading\" [small]=\"true\"></loader> -->\r\n <tabset #tabSet>\r\n <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab.controls; let index = index\"\r\n [label]=\"tabs[index]\" tab1 id={{tabs[index]}} #{{tabs[index]}}>\r\n <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n <span class=\"text-secondary\">{{tabs[index]}}</span>\r\n <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.skillSetId.value)\">\r\n <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n </button>\r\n </ng-template>\r\n <div [formGroup]=\"group\" class=\"tab-card\">\r\n <div class=\"card-body\">\r\n <div class=\"row\">\r\n <div class=\"col-12 col-md-2 mt-1\">\r\n <label class=\"label\">Self Ability Rating</label>\r\n <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\" [maxStars]=\"5\">\r\n </ngx-stars>\r\n <div *ngIf=\"userSkillSubmitted && k?.starRating?.errors\" class=\"invalid-feedback\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\">\r\n <div *ngIf=\"k?.starRating?.errors?.required\">Star\r\n Rating is\r\n required</div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label \">Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n formControlName=\"year\" [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"\r\n (change)=\"onYearChange(group)\"></ng-select>\r\n\r\n <div *ngIf=\"userSkillSubmitted && k?.year?.errors\" class=\"invalid-feedback\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\">\r\n <div *ngIf=\"k?.year?.errors?.required\">Year is\r\n required</div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1 text-center\">\r\n <label class=\"label\">Profile\r\n Visibility</label><br />\r\n <input class=\"form-check-input \" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n\r\n <div class=\"col-12 col-md-2 mt-1\" *ngIf=\"tab.controls.length>1 && index == copyOptionIndex\">\r\n <label class=\"mb-2 label\">Copy to All Tabs</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index,group.value)\"\r\n role=\"switch\">\r\n </div>\r\n </div>\r\n <div>\r\n <label class=\"label\">Description</label>\r\n <div class=\"col-12 col-md-12 mt-1\">\r\n <textarea placeholder=\"Description of your Skill here\" formControlName=\"notes\" class=\"form-control\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.notes?.errors }\" rows=\"5\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </tab>\r\n </tabset>\r\n </div>\r\n <!-- <div class=\"row pt-3\">\r\n <div class=\"pt-3 text-end\">\r\n <button class=\"back-btn\" (click)=\"reset()\">Reset</button>\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Footer buttons -->\r\n<div class=\"skills-container last footer-actions\">\r\n <button class=\"back-btn\" (click)=\"back()\">Back</button>\r\n <div>\r\n <button class=\"back-btn me-3\" *ngIf=\"store.stepView() === 'add'\" (click)=\"next()\">Skip</button>\r\n <button class=\"continue-btn add me-3\" *ngIf=\"store.stepView() === 'preview'\" (click)=\"store.goToAdd()\">\r\n Add More Skills\r\n </button>\r\n <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n Continue</button>\r\n </div>\r\n</div>", styles: ["@charset \"UTF-8\";.skills-container{max-width:1000px;margin:40px auto;min-height:300px}.skills-container.last{min-height:unset}.title{font-size:22px;margin-bottom:4px}.subtitle{font-size:13px;color:#777;margin-bottom:30px}.content-part{background:#fff}.content-part p,.content-part div{font-size:small}.content-part .card{margin-top:15px;background-color:#fff;border-radius:10px}.content-part .card .row{margin-top:-15px}.content-part .card .sub-section{padding:0 10px}.content-part .card .sub-section .title{font-size:16px;font-weight:400;color:var(--font-primary)}.content-part .card .sub-section .info-title{font-size:12px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .card .sub-section .content{font-size:12px}.content-part .card .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px}.content-part .card .sub-section .subsection input{width:30%}.content-part .card .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background-color:#fff;border-radius:5px;color:var(--font-primary);margin-top:15px}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;position:relative;border-radius:5px;border:1px solid #d3dae6;padding:10px 0 10px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;height:45px}.content-part .search-part input{width:auto;flex:1;color:var(--font-dark);font-size:var(--font12-input);font-weight:400;border:none;background:none;outline:none}.content-part .search-part .btn{background:#1e2541;border-radius:5px;padding:5px;width:41px;height:36px;margin-right:3px}.content-part .search-part .btn img{filter:brightness(0) invert(1)}.content-part textarea{width:100%;height:100px;background:none}.content-part .skills-section{margin-left:5px}.content-part .skills-section .category-title{margin-bottom:5px;font-size:13px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .skills-section .text-title{font-size:13px;margin-left:3px;color:var(--font-primary);display:contents}.content-part .skills-section input[type=checkbox]{border:2px solid #000!important;height:14px!important;width:15px!important;border-radius:2px!important;margin:2px}.content-part .skills-section input[type=checkbox]:checked{background-color:#000!important;border:2px solid #000!important}.content-part .skills-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#000;width:15px;display:flex;justify-content:center;border:2px solid #000;height:14px;align-items:center;border-radius:2px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#237b4b!important;border:1px solid #237b4b!important}::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#f1f4fa}::ng-deep .ng-select .ng-select-container{background:#f1f4fa;border:1px solid #ccc;border-radius:5px}.back-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background:#d3dae6;color:#fff;border-radius:5px;padding:6px 8px}.save-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px}.create-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px;height:40px;min-width:9rem}.form-control{color:#333;background:none!important;min-height:36px;font-size:small;height:43px}.form-control:focus{box-shadow:none!important}.close-popup{position:absolute;right:7px;top:4px;width:25px}.label{font-size:12px;font-weight:700;padding-bottom:8px}.form-control:focus{border:var(--bs-border-width) solid var(--bs-border-color)}::ng-deep .nav-link{color:#000!important}.loader{filter:blur(3px);height:40px}.edit-mode ::ng-deep .nav-tabs{display:none!important}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:100px}.skip-btn,.back-btn{background:#d3dae6;color:#6c757dc7;font-size:14px;border-radius:5px;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px}.skip-btn.edit,.back-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn{padding:7px 23px;background-color:#4077ad;color:#fff;border-radius:5px;min-width:8rem;min-height:45px;border:white}.continue-btn:disabled{background-color:#d1d5db;cursor:not-allowed}.continue-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn.add{background-color:#2e5b70}.skill-preview-wrapper{margin-bottom:24px}.skill-preview-card{border-radius:12px;margin-bottom:12px;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease;overflow:hidden}::ng-deep accordion-group+accordion-group{margin-top:20px}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:10px 0}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.rotate{transform:rotate(-180deg)}.skill-preview-body label{font-weight:500;font-size:13px;color:#6b7280}.skill-preview-body p{margin:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "component", type: NgxStarsComponent, selector: "ngx-stars", inputs: ["maxStars", "initialStars", "readonly", "size", "color", "animation", "animationSpeed", "customPadding", "wholeStars", "customStarIcons"], outputs: ["ratingOutput"] }, { kind: "directive", type: i11$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i12.TabDirective, selector: "tab, [tab]", inputs: ["heading", "id", "disabled", "removable", "tabOrder", "customClass", "active"], outputs: ["selectTab", "deselect", "removed"], exportAs: ["tab"] }, { kind: "component", type: i12.TabsetComponent, selector: "tabset", inputs: ["vertical", "justified", "type"] }, { kind: "directive", type: i12.TabHeadingDirective, selector: "[tabHeading]" }, { kind: "component", type: i13.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i13.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }], animations: [
|
|
3744
3746
|
trigger('expandCollapse', [
|
|
3745
3747
|
state('open', style({
|
|
3746
3748
|
height: '*',
|
|
@@ -3778,7 +3780,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
3778
3780
|
})),
|
|
3779
3781
|
transition('open <=> closed', animate('300ms ease'))
|
|
3780
3782
|
])
|
|
3781
|
-
], template: "<!-- SKILL PREVIEW LIST -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'preview'\">\r\n <h5 class=\"title text-secondary\">Skills Preview</h5>\r\n <p class=\"subtitle\">First-time users should enter skillsets with Inspector Match, Once you setup skillsets in your\r\n business profile you can add skills under</p>\r\n <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n <accordion-group *ngFor=\"let skill of userSkillsPreview\" #accGroup\r\n (isOpenChange)=\"onSkillAccordionChange(skill, $event)\">\r\n <!-- HEADER -->\r\n <div accordion-heading class=\"skill-preview-header\">\r\n <span class=\"fw-semibold text-secondary\">\r\n {{ skill.skillSetName }}\r\n </span>\r\n <div class=\"actions\">\r\n <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n <button type=\"button\" class=\"me-3\" (click)=\"editSkillFromPreview(skill, accGroup, $event)\">\r\n <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" alt=\"icon\" />\r\n </button>\r\n <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n [class.rotate]=\"accGroup.isOpen\" />\r\n </ng-container>\r\n <ng-container *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\">\r\n <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backToSkill(accGroup)\">\r\n Cancel\r\n </button>\r\n <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserSkillset()\" \r\n [disabled]=\"showLoader\">\r\n Update\r\n </button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <!-- BODY -->\r\n <div class=\"skill-preview-body content-part\">\r\n <!-- DISPLAY MODE -->\r\n <div *ngIf=\"!isEditMode || model?.skillSetId !== skill.skillSetId\"\r\n class=\"d-flex justify-content-between align-items-center flex-wrap gap-3\">\r\n <div>\r\n <label>Service Provider</label> <br>\r\n {{ skill.providerName }}\r\n </div>\r\n <div>\r\n <label>Skill</label> <br>\r\n {{ skill.skillSetName }}\r\n </div>\r\n <div style=\"pointer-events: none;\">\r\n <label>Self Ability Rating</label> <br>\r\n <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n </div>\r\n <div>\r\n <label class=\"mb-0 pb-0 label\">Years of Experience</label> <br>\r\n {{ skill?.year }}\r\n </div>\r\n <div>\r\n <label>Visible</label> <br>\r\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"skill.profileVisibility\" disabled>\r\n </div>\r\n <div class=\"w-100 mt-3\">\r\n <label>Description</label> <br>\r\n {{ skill.notes }}\r\n </div>\r\n </div>\r\n <!-- EDIT MODE -->\r\n <div *ngIf=\"isEditMode && model?.skillSetId === skill.skillSetId\" [formGroup]=\"tab.at(0)\">\r\n <div class=\"d-flex justify-content-between align-items-center flex-wrap gap-3\">\r\n <div>\r\n <label>Service Provider</label> <br>\r\n {{ skill.providerName }}\r\n </div>\r\n <div>\r\n <label>Skill</label> <br>\r\n {{ skill.skillSetName }}\r\n </div>\r\n <div>\r\n <label>Self Ability Rating</label> <br>\r\n <ngx-stars *ngIf=\"tab.at(0)?.get('starRating')?.value !== null\" [key]=\"tab.at(0).get('starRating')?.value\"\r\n [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n (rate)=\"onEditRating($event)\">\r\n </ngx-stars>\r\n </div>\r\n <div style=\"width: 200px;\">\r\n <label class=\"mb-0 label pb-0\">Years of Experience</label> <br>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\" formControlName=\"year\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\" bindValue=\"value\"\r\n [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"></ng-select>\r\n </div>\r\n <div>\r\n <label>Visible</label> <br>\r\n <input class=\"form-check-input \" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n </div>\r\n <div class=\"mt-3\">\r\n <label>Description</label> <br>\r\n <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\" placeholder=\"Enter notes\"\r\n style=\"height: 80px;\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n </accordion-group>\r\n </accordion>\r\n</div>\r\n\r\n<!-- Add part -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'add'\">\r\n <h2 class=\"title text-secondary\">Add Skills</h2>\r\n <p class=\"subtitle\">A minimum of 5 skills is needed</p>\r\n <div class=\"content-part\">\r\n <h6 class=\"text-secondary\"> {{ form?.value?.id ? \"Update Skill Category\" : \"Create Skill Category\" }}</h6>\r\n <div class=\"sub-section\">\r\n <div class=\"row mt-2\">\r\n <div class=\"col-12 col-md-12 col-sm-12\">\r\n <div class=\"search-part\">\r\n <input type=\"text\" placeholder=\"Search / Add Skillsets here\" [(ngModel)]=\"searchSkillQry\"\r\n (input)=\"getSkillSets()\" />\r\n <button class=\"btn\" (click)=\"createNewSkills()\" tooltip=\"Add Skillset\">\r\n <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18\"\r\n height=\"18\" />\r\n </button>\r\n </div>\r\n <div *ngIf=\"errMsg\" class=\"invalid-feedback is-invalid d-block\">\r\n Please Enter Skillsets Name\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n {{nameError}}\r\n </div>\r\n <div class=\"col skills-section\" [ngClass]=\"showLoading && !isEditMode ? 'loader':''\">\r\n <div class=\"row mt-2\" [ngStyle]=\"showLoader && !isEditMode ? {'min-height': '150px'} : {}\">\r\n <div class=\"col-12 col-md-4\" *ngFor=\"let skill of skillSets\">\r\n <div class=\"mt-2 gap-1 d-flex align-items-start\">\r\n <input \r\n type=\"checkbox\"\r\n [checked]=\"skill.selected\"\r\n (change)=\"onSelectedSkillsets($event, skill)\"\r\n id=\"{{skill.id}}\"\r\n name=\"{{skill.id}}\">\r\n<label class=\"text-title\" for=\"{{skill.id}}\">\r\n {{ skill.name }}\r\n</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n [ngClass]=\"{ 'loader': showLoading && !isEditMode,'pt-3': !showLoading && !isEditMode,'edit-mode': isEditMode}\">\r\n <!-- <loader [show]=\"showLoading\" [small]=\"true\"></loader> -->\r\n <tabset #tabSet>\r\n <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab.controls; let index = index\"\r\n [label]=\"tabs[index]\" tab1 id={{tabs[index]}} #{{tabs[index]}}>\r\n <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n <span class=\"text-secondary\">{{tabs[index]}}</span>\r\n <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.skillSetId.value)\">\r\n <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n </button>\r\n </ng-template>\r\n <div [formGroup]=\"group\" class=\"tab-card\">\r\n <div class=\"card-body\">\r\n <div class=\"row\">\r\n <div class=\"col-12 col-md-2 mt-1\">\r\n <label class=\"label\">Self Ability Rating</label>\r\n <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\" [maxStars]=\"5\">\r\n </ngx-stars>\r\n <div *ngIf=\"userSkillSubmitted && k?.starRating?.errors\" class=\"invalid-feedback\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\">\r\n <div *ngIf=\"k?.starRating?.errors?.required\">Star\r\n Rating is\r\n required</div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label \">Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n formControlName=\"year\" [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"\r\n (change)=\"onYearChange(group)\"></ng-select>\r\n\r\n <div *ngIf=\"userSkillSubmitted && k?.year?.errors\" class=\"invalid-feedback\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\">\r\n <div *ngIf=\"k?.year?.errors?.required\">Year is\r\n required</div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1 text-center\">\r\n <label class=\"label\">Profile\r\n Visibility</label><br />\r\n <input class=\"form-check-input \" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n\r\n <div class=\"col-12 col-md-2 mt-1\" *ngIf=\"tab.controls.length>1 && index == copyOptionIndex\">\r\n <label class=\"mb-2 label\">Copy to All Tabs</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index,group.value)\"\r\n role=\"switch\">\r\n </div>\r\n </div>\r\n <div>\r\n <label class=\"label\">Description</label>\r\n <div class=\"col-12 col-md-12 mt-1\">\r\n <textarea placeholder=\"Description of your Skill here\" formControlName=\"notes\" class=\"form-control\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.notes?.errors }\" rows=\"5\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </tab>\r\n </tabset>\r\n </div>\r\n <!-- <div class=\"row pt-3\">\r\n <div class=\"pt-3 text-end\">\r\n <button class=\"back-btn\" (click)=\"reset()\">Reset</button>\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Footer buttons -->\r\n<div class=\"skills-container last footer-actions\">\r\n <button class=\"back-btn\" (click)=\"back()\">Back</button>\r\n <div>\r\n <button class=\"back-btn me-3\" *ngIf=\"store.stepView() === 'add'\" (click)=\"next()\">Skip</button>\r\n <button class=\"continue-btn add me-3\" *ngIf=\"store.stepView() === 'preview'\" (click)=\"store.goToAdd()\">\r\n Add More Skills\r\n </button>\r\n <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n Continue</button>\r\n </div>\r\n</div>", styles: ["@charset \"UTF-8\";.skills-container{max-width:1000px;margin:40px auto;min-height:300px}.skills-container.last{min-height:unset}.title{font-size:22px;margin-bottom:4px}.subtitle{font-size:13px;color:#777;margin-bottom:30px}.content-part{background:#fff}.content-part p,.content-part div{font-size:small}.content-part .card{margin-top:15px;background-color:#fff;border-radius:10px}.content-part .card .row{margin-top:-15px}.content-part .card .sub-section{padding:0 10px}.content-part .card .sub-section .title{font-size:16px;font-weight:400;color:var(--font-primary)}.content-part .card .sub-section .info-title{font-size:12px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .card .sub-section .content{font-size:12px}.content-part .card .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px}.content-part .card .sub-section .subsection input{width:30%}.content-part .card .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background-color:#fff;border-radius:5px;color:var(--font-primary);margin-top:15px}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;position:relative;border-radius:5px;border:1px solid #d3dae6;padding:10px 0 10px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;height:45px}.content-part .search-part input{width:auto;flex:1;color:var(--font-dark);font-size:var(--font12-input);font-weight:400;border:none;background:none;outline:none}.content-part .search-part .btn{background:#1e2541;border-radius:5px;padding:5px;width:41px;height:36px;margin-right:3px}.content-part .search-part .btn img{filter:brightness(0) invert(1)}.content-part textarea{width:100%;height:100px;background:none}.content-part .skills-section{margin-left:5px}.content-part .skills-section .category-title{margin-bottom:5px;font-size:13px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .skills-section .text-title{font-size:13px;margin-left:3px;color:var(--font-primary);display:contents}.content-part .skills-section input[type=checkbox]{border:2px solid #000!important;height:14px!important;width:15px!important;border-radius:2px!important;margin:2px}.content-part .skills-section input[type=checkbox]:checked{background-color:#000!important;border:2px solid #000!important}.content-part .skills-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#000;width:15px;display:flex;justify-content:center;border:2px solid #000;height:14px;align-items:center;border-radius:2px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#237b4b!important;border:1px solid #237b4b!important}::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#f1f4fa}::ng-deep .ng-select .ng-select-container{background:#f1f4fa;border:1px solid #ccc;border-radius:5px}.back-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background:#d3dae6;color:#fff;border-radius:5px;padding:6px 8px}.save-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px}.create-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px;height:40px;min-width:9rem}.form-control{color:#333;background:none!important;min-height:36px;font-size:small;height:43px}.form-control:focus{box-shadow:none!important}.close-popup{position:absolute;right:7px;top:4px;width:25px}.label{font-size:12px;font-weight:700;padding-bottom:8px}.form-control:focus{border:var(--bs-border-width) solid var(--bs-border-color)}::ng-deep .nav-link{color:#000!important}.loader{filter:blur(3px);height:40px}.edit-mode ::ng-deep .nav-tabs{display:none!important}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:100px}.skip-btn,.back-btn{background:#d3dae6;color:#6c757dc7;font-size:14px;border-radius:5px;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px}.skip-btn.edit,.back-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn{padding:7px 23px;background-color:#4077ad;color:#fff;border-radius:5px;min-width:8rem;min-height:45px;border:white}.continue-btn:disabled{background-color:#d1d5db;cursor:not-allowed}.continue-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn.add{background-color:#2e5b70}.skill-preview-wrapper{margin-bottom:24px}.skill-preview-card{border-radius:12px;margin-bottom:12px;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease;overflow:hidden}::ng-deep accordion-group+accordion-group{margin-top:20px}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:10px 0}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.rotate{transform:rotate(-180deg)}.skill-preview-body label{font-weight:500;font-size:13px;color:#6b7280}.skill-preview-body p{margin:0}\n"] }]
|
|
3783
|
+
], template: "<!-- SKILL PREVIEW LIST -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'preview'\">\r\n <h5 class=\"title text-secondary\">Skills Preview</h5>\r\n <!-- <p class=\"subtitle\">First-time users should enter skillsets with Inspector Match, Once you setup skillsets in your\r\n business profile you can add skills under</p> -->\r\n <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n <accordion-group *ngFor=\"let skill of userSkillsPreview\" #accGroup\r\n (isOpenChange)=\"onSkillAccordionChange(skill, $event)\">\r\n <!-- HEADER -->\r\n <div accordion-heading class=\"skill-preview-header\">\r\n <span class=\"fw-semibold text-secondary\">\r\n {{ skill.skillSetName }}\r\n </span>\r\n <div class=\"actions\">\r\n <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n <button type=\"button\" class=\"me-3\" (click)=\"editSkillFromPreview(skill, accGroup, $event)\">\r\n <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" alt=\"icon\" />\r\n </button>\r\n <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n [class.rotate]=\"accGroup.isOpen\" />\r\n </ng-container>\r\n <ng-container *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\">\r\n <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backToSkill(accGroup)\">\r\n Cancel\r\n </button>\r\n <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserSkillset()\" \r\n [disabled]=\"showLoader\">\r\n Update\r\n </button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <!-- BODY -->\r\n <div class=\"skill-preview-body content-part\">\r\n <!-- DISPLAY MODE -->\r\n <div *ngIf=\"!isEditMode || model?.skillSetId !== skill.skillSetId\"\r\n class=\"d-flex justify-content-between align-items-center flex-wrap gap-3\">\r\n <div>\r\n <label>Service Provider</label> <br>\r\n {{ skill.providerName }}\r\n </div>\r\n <div>\r\n <label>Skill</label> <br>\r\n {{ skill.skillSetName }}\r\n </div>\r\n <div style=\"pointer-events: none;\">\r\n <label>Self Ability Rating</label> <br>\r\n <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n </div>\r\n <div>\r\n <label class=\"mb-0 pb-0 label\">Years of Experience</label> <br>\r\n {{ skill?.year }}\r\n </div>\r\n <div>\r\n <label>Visible</label> <br>\r\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"skill.profileVisibility\" disabled>\r\n </div>\r\n <div class=\"w-100 mt-3\">\r\n <label>Description</label> <br>\r\n {{ skill.notes }}\r\n </div>\r\n </div>\r\n <!-- EDIT MODE -->\r\n <div *ngIf=\"isEditMode && model?.skillSetId === skill.skillSetId\" [formGroup]=\"tab.at(0)\">\r\n <div class=\"d-flex justify-content-between align-items-center flex-wrap gap-3\">\r\n <div>\r\n <label>Service Provider</label> <br>\r\n {{ skill.providerName }}\r\n </div>\r\n <div>\r\n <label>Skill</label> <br>\r\n {{ skill.skillSetName }}\r\n </div>\r\n <div>\r\n <label>Self Ability Rating</label> <br>\r\n <ngx-stars *ngIf=\"tab.at(0)?.get('starRating')?.value !== null\" [key]=\"tab.at(0).get('starRating')?.value\"\r\n [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n (rate)=\"onEditRating($event)\">\r\n </ngx-stars>\r\n </div>\r\n <div style=\"width: 200px;\">\r\n <label class=\"mb-0 label pb-0\">Years of Experience</label> <br>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\" formControlName=\"year\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\" bindValue=\"value\"\r\n [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"></ng-select>\r\n </div>\r\n <div>\r\n <label>Visible</label> <br>\r\n <input class=\"form-check-input \" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n </div>\r\n <div class=\"mt-3\">\r\n <label>Description</label> <br>\r\n <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\" placeholder=\"Enter notes\"\r\n style=\"height: 80px;\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n </accordion-group>\r\n </accordion>\r\n</div>\r\n\r\n<!-- Add part -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'add'\">\r\n <h2 class=\"title text-secondary\">Add Skills</h2>\r\n <p class=\"subtitle\">A minimum of 5 skills is needed</p>\r\n <div class=\"content-part\">\r\n <h6 class=\"text-secondary\"> {{ form?.value?.id ? \"Update Skill Category\" : \"Create Skill Category\" }}</h6>\r\n <div class=\"sub-section\">\r\n <div class=\"row mt-2\">\r\n <div class=\"col-12 col-md-12 col-sm-12\">\r\n <div class=\"search-part\">\r\n <input type=\"text\" placeholder=\"Search / Add Skillsets here\" [(ngModel)]=\"searchSkillQry\"\r\n (input)=\"getSkillSets()\" />\r\n <button class=\"btn\" (click)=\"createNewSkills()\" tooltip=\"Add Skillset\">\r\n <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18\"\r\n height=\"18\" />\r\n </button>\r\n </div>\r\n <div *ngIf=\"errMsg\" class=\"invalid-feedback is-invalid d-block\">\r\n Please Enter Skillsets Name\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n {{nameError}}\r\n </div>\r\n <div class=\"col skills-section\" [ngClass]=\"showLoading && !isEditMode ? 'loader':''\">\r\n <div class=\"row mt-2\" [ngStyle]=\"showLoader && !isEditMode ? {'min-height': '150px'} : {}\">\r\n <div class=\"col-12 col-md-4\" *ngFor=\"let skill of skillSets\">\r\n <div class=\"mt-2 gap-1 d-flex align-items-start\">\r\n <input \r\n type=\"checkbox\"\r\n [checked]=\"skill.selected\"\r\n (change)=\"onSelectedSkillsets($event, skill)\"\r\n id=\"{{skill.id}}\"\r\n name=\"{{skill.id}}\">\r\n<label class=\"text-title\" for=\"{{skill.id}}\">\r\n {{ skill.name }}\r\n</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n [ngClass]=\"{ 'loader': showLoading && !isEditMode,'pt-3': !showLoading && !isEditMode,'edit-mode': isEditMode}\">\r\n <!-- <loader [show]=\"showLoading\" [small]=\"true\"></loader> -->\r\n <tabset #tabSet>\r\n <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab.controls; let index = index\"\r\n [label]=\"tabs[index]\" tab1 id={{tabs[index]}} #{{tabs[index]}}>\r\n <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n <span class=\"text-secondary\">{{tabs[index]}}</span>\r\n <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.skillSetId.value)\">\r\n <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n </button>\r\n </ng-template>\r\n <div [formGroup]=\"group\" class=\"tab-card\">\r\n <div class=\"card-body\">\r\n <div class=\"row\">\r\n <div class=\"col-12 col-md-2 mt-1\">\r\n <label class=\"label\">Self Ability Rating</label>\r\n <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\" [maxStars]=\"5\">\r\n </ngx-stars>\r\n <div *ngIf=\"userSkillSubmitted && k?.starRating?.errors\" class=\"invalid-feedback\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\">\r\n <div *ngIf=\"k?.starRating?.errors?.required\">Star\r\n Rating is\r\n required</div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label \">Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n formControlName=\"year\" [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"\r\n (change)=\"onYearChange(group)\"></ng-select>\r\n\r\n <div *ngIf=\"userSkillSubmitted && k?.year?.errors\" class=\"invalid-feedback\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\">\r\n <div *ngIf=\"k?.year?.errors?.required\">Year is\r\n required</div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1 text-center\">\r\n <label class=\"label\">Profile\r\n Visibility</label><br />\r\n <input class=\"form-check-input \" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n\r\n <div class=\"col-12 col-md-2 mt-1\" *ngIf=\"tab.controls.length>1 && index == copyOptionIndex\">\r\n <label class=\"mb-2 label\">Copy to All Tabs</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index,group.value)\"\r\n role=\"switch\">\r\n </div>\r\n </div>\r\n <div>\r\n <label class=\"label\">Description</label>\r\n <div class=\"col-12 col-md-12 mt-1\">\r\n <textarea placeholder=\"Description of your Skill here\" formControlName=\"notes\" class=\"form-control\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.notes?.errors }\" rows=\"5\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </tab>\r\n </tabset>\r\n </div>\r\n <!-- <div class=\"row pt-3\">\r\n <div class=\"pt-3 text-end\">\r\n <button class=\"back-btn\" (click)=\"reset()\">Reset</button>\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Footer buttons -->\r\n<div class=\"skills-container last footer-actions\">\r\n <button class=\"back-btn\" (click)=\"back()\">Back</button>\r\n <div>\r\n <button class=\"back-btn me-3\" *ngIf=\"store.stepView() === 'add'\" (click)=\"next()\">Skip</button>\r\n <button class=\"continue-btn add me-3\" *ngIf=\"store.stepView() === 'preview'\" (click)=\"store.goToAdd()\">\r\n Add More Skills\r\n </button>\r\n <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n Continue</button>\r\n </div>\r\n</div>", styles: ["@charset \"UTF-8\";.skills-container{max-width:1000px;margin:40px auto;min-height:300px}.skills-container.last{min-height:unset}.title{font-size:22px;margin-bottom:4px}.subtitle{font-size:13px;color:#777;margin-bottom:30px}.content-part{background:#fff}.content-part p,.content-part div{font-size:small}.content-part .card{margin-top:15px;background-color:#fff;border-radius:10px}.content-part .card .row{margin-top:-15px}.content-part .card .sub-section{padding:0 10px}.content-part .card .sub-section .title{font-size:16px;font-weight:400;color:var(--font-primary)}.content-part .card .sub-section .info-title{font-size:12px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .card .sub-section .content{font-size:12px}.content-part .card .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px}.content-part .card .sub-section .subsection input{width:30%}.content-part .card .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background-color:#fff;border-radius:5px;color:var(--font-primary);margin-top:15px}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;position:relative;border-radius:5px;border:1px solid #d3dae6;padding:10px 0 10px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;height:45px}.content-part .search-part input{width:auto;flex:1;color:var(--font-dark);font-size:var(--font12-input);font-weight:400;border:none;background:none;outline:none}.content-part .search-part .btn{background:#1e2541;border-radius:5px;padding:5px;width:41px;height:36px;margin-right:3px}.content-part .search-part .btn img{filter:brightness(0) invert(1)}.content-part textarea{width:100%;height:100px;background:none}.content-part .skills-section{margin-left:5px}.content-part .skills-section .category-title{margin-bottom:5px;font-size:13px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .skills-section .text-title{font-size:13px;margin-left:3px;color:var(--font-primary);display:contents}.content-part .skills-section input[type=checkbox]{border:2px solid #000!important;height:14px!important;width:15px!important;border-radius:2px!important;margin:2px}.content-part .skills-section input[type=checkbox]:checked{background-color:#000!important;border:2px solid #000!important}.content-part .skills-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#000;width:15px;display:flex;justify-content:center;border:2px solid #000;height:14px;align-items:center;border-radius:2px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#237b4b!important;border:1px solid #237b4b!important}::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#f1f4fa}::ng-deep .ng-select .ng-select-container{background:#f1f4fa;border:1px solid #ccc;border-radius:5px}.back-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background:#d3dae6;color:#fff;border-radius:5px;padding:6px 8px}.save-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px}.create-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px;height:40px;min-width:9rem}.form-control{color:#333;background:none!important;min-height:36px;font-size:small;height:43px}.form-control:focus{box-shadow:none!important}.close-popup{position:absolute;right:7px;top:4px;width:25px}.label{font-size:12px;font-weight:700;padding-bottom:8px}.form-control:focus{border:var(--bs-border-width) solid var(--bs-border-color)}::ng-deep .nav-link{color:#000!important}.loader{filter:blur(3px);height:40px}.edit-mode ::ng-deep .nav-tabs{display:none!important}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:100px}.skip-btn,.back-btn{background:#d3dae6;color:#6c757dc7;font-size:14px;border-radius:5px;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px}.skip-btn.edit,.back-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn{padding:7px 23px;background-color:#4077ad;color:#fff;border-radius:5px;min-width:8rem;min-height:45px;border:white}.continue-btn:disabled{background-color:#d1d5db;cursor:not-allowed}.continue-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn.add{background-color:#2e5b70}.skill-preview-wrapper{margin-bottom:24px}.skill-preview-card{border-radius:12px;margin-bottom:12px;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease;overflow:hidden}::ng-deep accordion-group+accordion-group{margin-top:20px}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:10px 0}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.rotate{transform:rotate(-180deg)}.skill-preview-body label{font-weight:500;font-size:13px;color:#6b7280}.skill-preview-body p{margin:0}\n"] }]
|
|
3782
3784
|
}], ctorParameters: () => [{ type: SkillSetService }, { type: UserSkillSetService }, { type: i3.UntypedFormBuilder }, { type: UtilsService }, { type: i6.RoleContextService }, { type: CredentialingStore }, { type: i6.TokenService }], propDecorators: { providerId: [{
|
|
3783
3785
|
type: Input
|
|
3784
3786
|
}], providerName: [{
|
|
@@ -3867,6 +3869,7 @@ class LicensesComponent {
|
|
|
3867
3869
|
return this.workStore.experiences().length > 0 && !this.isEditing();
|
|
3868
3870
|
}, ...(ngDevMode ? [{ debugName: "showpreview" }] : []));
|
|
3869
3871
|
userdata;
|
|
3872
|
+
maxDate = new Date();
|
|
3870
3873
|
constructor(userDocumentService, store, workStore, tokenService, postalCodeService, fb, fileService, http) {
|
|
3871
3874
|
this.userDocumentService = userDocumentService;
|
|
3872
3875
|
this.store = store;
|
|
@@ -3912,7 +3915,7 @@ class LicensesComponent {
|
|
|
3912
3915
|
loadDocumentTypesDefault(searchText = '') {
|
|
3913
3916
|
searchText = '=';
|
|
3914
3917
|
this.userDocumentService
|
|
3915
|
-
.getDocumentTypes('
|
|
3918
|
+
.getDocumentTypes('1', this.providerId, searchText)
|
|
3916
3919
|
.subscribe(res => {
|
|
3917
3920
|
this.documentTypes = res?.data || [];
|
|
3918
3921
|
});
|
|
@@ -4126,11 +4129,11 @@ class LicensesComponent {
|
|
|
4126
4129
|
this.store.nextStep();
|
|
4127
4130
|
}
|
|
4128
4131
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LicensesComponent, deps: [{ token: UserDocumentService }, { token: CredentialingStore }, { token: LicenseStore }, { token: i6.TokenService }, { token: PostalCodeServices }, { token: i3.FormBuilder }, { token: FileService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
|
|
4129
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: LicensesComponent, isStandalone: false, selector: "app-licenses", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n\r\n <h3>Add Licenses</h3>\r\n <p class=\"hint\">\r\n Recommended for your role\r\n </p>\r\n <div class=\"document-container\">\r\n <input type=\"text\" class=\"search-input\" placeholder=\"Search documents here...\" [formControl]=\"searchControl\" />\r\n <div class=\"grid\">\r\n <div *ngFor=\"let item of documentTypes\">\r\n <label class=\"checkbox-row\">\r\n <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n <span class=\"title\">{{ item.type }}</span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <form [formGroup]=\"certificateForm\">\r\n <div class=\"row\" style=\"margin-top: 20px;\">\r\n <div class=\"field\">\r\n <div class=\"head\">License Number</div>\r\n <input type=\"text\" placeholder=\"Enter your License Number here\" formControlName=\"number\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n certificateForm.get('number')?.hasError('required')\">\r\n License number is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">License Issued By</div>\r\n <input type=\"text\" placeholder=\"Enter License Issued By here\" formControlName=\"issuedBy\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n certificateForm.get('issuedBy')?.hasError('required')\">\r\n License issued by is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Issued State</div>\r\n <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select Issued State\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ 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\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n certificateForm.get('issueDate')?.hasError('required')\">\r\n Issued date is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Expiration Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n certificateForm.get('expiryDate')?.hasError('required')\">\r\n Expiry date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p class=\"upload-title\">Upload</p>\r\n <p class=\"upload-subtitle\">Add licenses below</p>\r\n <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Licenses\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n Selected: {{ fileName }}\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\" style=\"margin-left: 350px;\">\r\n <h3>Licenses Preview</h3>\r\n </div>\r\n <div class=\"accordion\" style=\"margin: 20px 100px;\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n class=\"accordion-item border-0\">\r\n\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#edu_' + i\">\r\n <span class=\"accordion-title\">\r\n {{ exp.documentTypeName }}\r\n </span>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n <div class=\"detail-grid\">\r\n <div>\r\n <strong>License Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.documentTypeName }}</span>\r\n </div>\r\n <div>\r\n <strong>License Number</strong><br />\r\n <span class=\"job-title\"> {{ exp.number }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued By</strong><br />\r\n <span class=\"job-title\"> {{ exp.issuedBy }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued State</strong><br />\r\n <span class=\"job-title\"> {{ exp.issuedState | stateName }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.issueDate | date:'yyyy/MM/dd' }} </span>\r\n </div>\r\n <div>\r\n <strong>Expiry Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.expiryDate | date:'yyyy/MM/dd' }}</span>\r\n </div>\r\n\r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Description</strong><br />\r\n <span class=\"job-title\"> {{ exp.notes }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary\" (click)=\"add()\" style=\"background-color: #1f4d5f;width: 200px;\">\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{width:100%;height:44px;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-top:25px}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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i10.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i10.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i11.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i11.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
|
|
4132
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: LicensesComponent, isStandalone: false, selector: "app-licenses", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n\r\n <h3>Add Licenses</h3>\r\n <p class=\"hint\">\r\n Recommended for your role\r\n </p>\r\n <div class=\"document-container\">\r\n <input type=\"text\" class=\"search-input\" placeholder=\"Search documents here...\" [formControl]=\"searchControl\" />\r\n <div class=\"grid\">\r\n <div *ngFor=\"let item of documentTypes\">\r\n <label class=\"checkbox-row\">\r\n <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n <span class=\"title\">{{ item.type }}</span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <form [formGroup]=\"certificateForm\">\r\n <div class=\"row\" style=\"margin-top: 20px;\">\r\n <div class=\"field\">\r\n <div class=\"head\">License Number</div>\r\n <input type=\"text\" placeholder=\"Enter your License Number here\" formControlName=\"number\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n certificateForm.get('number')?.hasError('required')\">\r\n License number is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">License Issued By</div>\r\n <input type=\"text\" placeholder=\"Enter License Issued By here\" formControlName=\"issuedBy\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n certificateForm.get('issuedBy')?.hasError('required')\">\r\n License issued by is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Issued State</div>\r\n <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select Issued State\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Issued Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n certificateForm.get('issueDate')?.hasError('required')\">\r\n Issued date is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Expiration Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n certificateForm.get('expiryDate')?.hasError('required')\">\r\n Expiry date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p class=\"upload-title\">Upload</p>\r\n <p class=\"upload-subtitle\">Add licenses below</p>\r\n <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Licenses\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n Selected: {{ fileName }}\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\" style=\"margin-left: 350px;\">\r\n <h3>Licenses Preview</h3>\r\n </div>\r\n <div class=\"accordion\" style=\"margin: 20px 100px;\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n class=\"accordion-item border-0\">\r\n\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#edu_' + i\">\r\n <span class=\"accordion-title\">\r\n {{ exp.documentTypeName }}\r\n </span>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n <div class=\"detail-grid\">\r\n <div>\r\n <strong>License Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.documentTypeName }}</span>\r\n </div>\r\n <div>\r\n <strong>License Number</strong><br />\r\n <span class=\"job-title\"> {{ exp.number }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued By</strong><br />\r\n <span class=\"job-title\"> {{ exp.issuedBy }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued State</strong><br />\r\n <span class=\"job-title\"> {{ exp.issuedState | stateName }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.issueDate | date:'MM/dd/yyyy' }} </span>\r\n </div>\r\n <div>\r\n <strong>Expiry Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n\r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Description</strong><br />\r\n <span class=\"job-title\"> {{ exp.notes }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary\" (click)=\"add()\" style=\"background-color: #1f4d5f;width: 200px;\">\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{width:100%;height:44px;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-top:25px}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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i10.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i10.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i11.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i11.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
|
|
4130
4133
|
}
|
|
4131
4134
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LicensesComponent, decorators: [{
|
|
4132
4135
|
type: Component,
|
|
4133
|
-
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\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n certificateForm.get('issueDate')?.hasError('required')\">\r\n Issued date is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Expiration Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n certificateForm.get('expiryDate')?.hasError('required')\">\r\n Expiry date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p class=\"upload-title\">Upload</p>\r\n <p class=\"upload-subtitle\">Add licenses below</p>\r\n <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Licenses\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n Selected: {{ fileName }}\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\" style=\"margin-left: 350px;\">\r\n <h3>Licenses Preview</h3>\r\n </div>\r\n <div class=\"accordion\" style=\"margin: 20px 100px;\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n class=\"accordion-item border-0\">\r\n\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#edu_' + i\">\r\n <span class=\"accordion-title\">\r\n {{ exp.documentTypeName }}\r\n </span>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n <div class=\"detail-grid\">\r\n <div>\r\n <strong>License Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.documentTypeName }}</span>\r\n </div>\r\n <div>\r\n <strong>License Number</strong><br />\r\n <span class=\"job-title\"> {{ exp.number }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued By</strong><br />\r\n <span class=\"job-title\"> {{ exp.issuedBy }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued State</strong><br />\r\n <span class=\"job-title\"> {{ exp.issuedState | stateName }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.issueDate | date:'yyyy/MM/dd' }} </span>\r\n </div>\r\n <div>\r\n <strong>Expiry Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.expiryDate | date:'yyyy/MM/dd' }}</span>\r\n </div>\r\n\r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Description</strong><br />\r\n <span class=\"job-title\"> {{ exp.notes }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary\" (click)=\"add()\" style=\"background-color: #1f4d5f;width: 200px;\">\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{width:100%;height:44px;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-top:25px}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}\n"] }]
|
|
4136
|
+
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 [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n certificateForm.get('issueDate')?.hasError('required')\">\r\n Issued date is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Expiration Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n certificateForm.get('expiryDate')?.hasError('required')\">\r\n Expiry date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p class=\"upload-title\">Upload</p>\r\n <p class=\"upload-subtitle\">Add licenses below</p>\r\n <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Licenses\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n Selected: {{ fileName }}\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\" style=\"margin-left: 350px;\">\r\n <h3>Licenses Preview</h3>\r\n </div>\r\n <div class=\"accordion\" style=\"margin: 20px 100px;\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n class=\"accordion-item border-0\">\r\n\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#edu_' + i\">\r\n <span class=\"accordion-title\">\r\n {{ exp.documentTypeName }}\r\n </span>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n <div class=\"detail-grid\">\r\n <div>\r\n <strong>License Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.documentTypeName }}</span>\r\n </div>\r\n <div>\r\n <strong>License Number</strong><br />\r\n <span class=\"job-title\"> {{ exp.number }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued By</strong><br />\r\n <span class=\"job-title\"> {{ exp.issuedBy }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued State</strong><br />\r\n <span class=\"job-title\"> {{ exp.issuedState | stateName }}</span>\r\n </div>\r\n <div>\r\n <strong>Issued Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.issueDate | date:'MM/dd/yyyy' }} </span>\r\n </div>\r\n <div>\r\n <strong>Expiry Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n\r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Description</strong><br />\r\n <span class=\"job-title\"> {{ exp.notes }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary\" (click)=\"add()\" style=\"background-color: #1f4d5f;width: 200px;\">\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{width:100%;height:44px;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-top:25px}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}\n"] }]
|
|
4134
4137
|
}], ctorParameters: () => [{ type: UserDocumentService }, { type: CredentialingStore }, { type: LicenseStore }, { type: i6.TokenService }, { type: PostalCodeServices }, { type: i3.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
|
|
4135
4138
|
type: Input
|
|
4136
4139
|
}], providerName: [{
|
|
@@ -4614,7 +4617,6 @@ class ToolsComponent {
|
|
|
4614
4617
|
else {
|
|
4615
4618
|
query.filter += ',name=*' + '=/i';
|
|
4616
4619
|
this.showCreate = false;
|
|
4617
|
-
return;
|
|
4618
4620
|
}
|
|
4619
4621
|
// if (!this.userContext?.tenantId) {
|
|
4620
4622
|
// query.filter += ',providerId='
|
|
@@ -4793,7 +4795,7 @@ class ToolsComponent {
|
|
|
4793
4795
|
});
|
|
4794
4796
|
}
|
|
4795
4797
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToolsComponent, deps: [{ token: ToolService }, { token: UserToolService }, { token: i3.UntypedFormBuilder }, { token: UtilsService }, { token: CredentialingStore }, { token: i6.TokenService }, { token: UserDetailService }, { token: LIBRARY_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
|
|
4796
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ToolsComponent, isStandalone: false, selector: "app-tools", inputs: { roleData: "roleData", providerId: "providerId", providerName: "providerName" }, ngImport: i0, template: "<!-- Tool PREVIEW LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n <h5 class=\"title text-secondary\">Tools</h5>\r\n <p class=\"subtitle\">First-time users should enter tools with Inspector Match, Once you setup tools in your\r\n business profile you can add skills under that!</p>\r\n <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n <accordion-group *ngFor=\"let tool of userToolsPreview\" #accGroup (isOpenChange)=\"onAccordionChange(tool, $event)\">\r\n <div accordion-heading class=\"skill-preview-header d-flex justify-content-between align-items-center\">\r\n <span class=\"fw-semibold text-secondary\">\r\n {{ tool.toolName }}\r\n </span>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <!-- EDIT MODE BUTTONS -->\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool); else viewActions\">\r\n <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backTool(accGroup)\">\r\n Cancel\r\n </button>\r\n <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserTools()\" \r\n [disabled]=\"showLoader\">\r\n Update\r\n </button>\r\n </ng-container>\r\n <!-- VIEW MODE ACTIONS -->\r\n <ng-template #viewActions>\r\n <button type=\"button\" class=\"me-3\" (click)=\"editToolFromPreview(tool, accGroup, $event)\">\r\n <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" />\r\n </button>\r\n <!-- Arrow (ngx controls click) -->\r\n <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n [class.rotate]=\"accGroup.isOpen\" />\r\n </ng-template>\r\n </div>\r\n </div>\r\n <!-- BODY -->\r\n <div class=\"skill-preview-body content-part mt-3\">\r\n <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n <div class=\"row g-3 row-gap-2\">\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Service Provider</label>\r\n <div class=\"value\">{{ tool.providerName }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Manufacturer</label>\r\n <div class=\"value\">{{ tool.make }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Years of Experience</label>\r\n <div class=\"value\">{{ tool.year }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Self Ability Rating</label>\r\n <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\" style=\"pointer-events: none\">\r\n </ngx-stars>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Active</label><br />\r\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"tool.profileVisibility\" disabled>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Tools / Equipment</label>\r\n <div class=\"value\">{{ tool.toolName }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Model</label>\r\n <div class=\"value\">{{ tool.model }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Serial Number</label>\r\n <div class=\"value\">{{ tool.serialNumber }}</div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label>Description</label>\r\n <div class=\"value\">{{ tool.notes }}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- Edit Mode -->\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\" [formGroup]=\"tab.at(0)\">\r\n <div class=\"row g-3\">\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Service Provider</label>\r\n <div class=\"value\">{{ tool.providerName }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Manufacturer</label> <br />\r\n <input class=\"form-control\" type=\"text\" formControlName=\"make\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" bindValue=\"value\" formControlName=\"year\"\r\n [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\">\r\n </ng-select>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Self Ability Rating</label>\r\n <ngx-stars [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n (rate)=\"onRatingSets($event)\">\r\n </ngx-stars>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Active</label><br />\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Tools / Equipment</label>\r\n <input class=\"form-control\" [value]=\"tool.toolName\" readonly>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Model</label>\r\n <input class=\"form-control\" formControlName=\"model\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Serial Number</label>\r\n <input class=\"form-control\" formControlName=\"serialNumber\">\r\n </div>\r\n <div class=\"col-12\">\r\n <label>Description</label>\r\n <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\"></textarea>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </accordion-group>\r\n </accordion>\r\n</div>\r\n\r\n<!-- Tool LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'add'\">\r\n <h3 class=\"text-secondary\">Add Tools</h3>\r\n <p class=\"info\">Manage specialty tools and equipment</p>\r\n <div class=\"content-part\">\r\n <h6 class=\"text-secondary\"> Add User Tool</h6>\r\n <div class=\"sub-section\">\r\n <div class=\"row mt-2\">\r\n <div class=\"col-12 col-md-12 col-sm-12 ps-lg-0\">\r\n <div class=\"search-part\" *ngIf=\"!isEditMode\">\r\n <input type=\"text\" placeholder=\"Search / Add Tools here\" [(ngModel)]=\"searchToolQry\" (input)=\"getTools()\" />\r\n <button class=\"btn\" (click)=\"createNewTools()\" tooltip=\"Add Tool\">\r\n <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18px\" height=\"18px\" />\r\n </button>\r\n </div>\r\n <div *ngIf=\"!searchToolQry && toolSubmittedValue\" class=\"invalid-feedback is-invalid d-block\">\r\n Please Enter Tools Name\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n {{ nameError }}\r\n </div>\r\n <div class=\"col tools-section\" [ngClass]=\"showLoading ? 'loader':''\">\r\n <div class=\"row mt-2\" [ngStyle]=\"showLoader ? {'min-height': '150px'} : {}\">\r\n <div class=\"col-12 col-md-4\" *ngFor=\"let Tool of tools\">\r\n <div class=\"mt-2 d-flex\">\r\n <input (change)=\"onSelectedTools($event, Tool)\" [checked]=\"Tool.selected == true\" id=\"{{ Tool.id }}\"\r\n name=\"{{ Tool.id }}\" type=\"checkbox\" />\r\n <label class=\"text-title\" for=\"{{ Tool.id }}\">\r\n {{ Tool.name }}</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{ 'loader': showLoading,'pt-3': !showLoading,'edit-mode': isEditMode}\">\r\n <tabset #tabSet>\r\n <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab?.controls; let index = index\"\r\n [label]=\"tabs[index]\" tab1 id=\"{{ tabs[index] }}\" #{{tabs[index]}}>\r\n <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n <span class=\"text-secondary\">{{ tabs[index] }}</span>\r\n <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.toolId.value)\">\r\n <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n </button>\r\n </ng-template>\r\n <div [formGroup]=\"group\" class=\"tab-card\">\r\n <div class=\"card-body mt-3 position-relative\">\r\n <div class=\"col-12 col-md-3 mt-1 copyAll\" *ngIf=\"\r\n tab.controls.length > 1 && index == copyOptionIndex\r\n \">\r\n <label class=\"label\">Copy to All Tabs</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index, group.value,viewTab)\"\r\n role=\"switch\" />\r\n </div>\r\n <div class=\"row\" [ngClass]=\"index == 0 && tab.controls.length > 1 ? 'mt-5' : '' \">\r\n <div class=\"col-12 col-md-2 mt-1\">\r\n <label class=\"label\">Self-ability Rating</label>\r\n <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.starRating.errors }\" [maxStars]=\"5\">\r\n </ngx-stars>\r\n <div *ngIf=\"userToolSubmitted && k.starRating.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid':\r\n userToolSubmitted && k.starRating.errors\r\n }\">\r\n <div *ngIf=\"k.starRating.errors.required\">\r\n Star Rating is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-2 mt-1\">\r\n <label class=\"label\">Profile Visibility</label><br />\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\" />\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" (change)=\"onYearChange(group)\"\r\n formControlName=\"year\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.year.errors\r\n }\" bindValue=\"value\" [closeOnSelect]=\"true\" [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\"\r\n id=\"reqStates\"></ng-select>\r\n\r\n <div *ngIf=\"userToolSubmitted && k.year.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.year.errors\r\n }\">\r\n <div *ngIf=\"k.year.errors.required\">\r\n Year is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Manufacturer</label>\r\n <input id=\"make\" formControlName=\"make\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Manufacturer here\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.make.errors\r\n }\" (change)=\"onYearChange(group)\" />\r\n <div *ngIf=\"userToolSubmitted && k.make.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.make.errors\r\n }\">\r\n <div *ngIf=\"k.make.errors.required\">\r\n Manufacturer is required\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row pt-2\">\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Model</label>\r\n <input id=\"model\" formControlName=\"model\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Model here\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.model.errors\r\n }\" (change)=\"onYearChange(group)\" />\r\n <div *ngIf=\"userToolSubmitted && k.model.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.model.errors\r\n }\">\r\n <div *ngIf=\"k.model.errors.required\">\r\n Model is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\" label\">Serial Number</label>\r\n <input id=\"serialNumber\" formControlName=\"serialNumber\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Serial Number here\" [ngClass]=\"{\r\n 'is-invalid':\r\n userToolSubmitted && k.serialNumber.errors\r\n }\" />\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Comment</label>\r\n <textarea placeholder=\"Enter your comment here\" formControlName=\"notes\" class=\"form-control\"\r\n [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.notes.errors\r\n }\" rows=\"2\"></textarea>\r\n <div *ngIf=\"userToolSubmitted && k.notes.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.notes.errors\r\n }\">\r\n <div *ngIf=\"k.notes.errors.required\">\r\n Description is required\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </tab>\r\n </tabset>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"tools-container last pt-5 mt-5\">\r\n <div class=\"d-flex justify-content-between pt-3\">\r\n <!-- (click)=\"reset()\" -->\r\n <button class=\"back-btn\" (click)=\"goBack()\">Back</button>\r\n <div>\r\n <button class=\"back-btn me-3 add\" *ngIf=\"store.toolStepView() === 'preview'\" (click)=\"store.goToToolAdd()\">\r\n Add More Tools\r\n </button>\r\n <button style=\"margin-left: 15px;\" [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\" (click)=\"saveFinal()\"\r\n class=\"float-end save-btn\">\r\n Go To Home\r\n </button>\r\n <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" class=\"float-end save-btn\">\r\n Add\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: ["@charset \"UTF-8\";.tools-container{max-width:1000px;margin:40px auto;min-height:300px}.tools-container.last{min-height:unset}.tools-container h3{margin-bottom:5px;font-size:22px;font-weight:500}.tools-container .info{font-size:13px;color:#666;margin-bottom:30px}.content-part{background:#fff}.content-part p,.content-part div{font-size:small}.content-part div .label{font-size:12px!important;font-weight:700!important;padding-bottom:5px!important}.content-part .row{margin-top:-15px}.content-part .sub-section{padding:0 10px}.content-part .sub-section .title{font-size:16px;font-weight:400;color:var(--font-primary)}.content-part .sub-section .info-title{font-size:12px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .sub-section .content{font-size:12px}.content-part .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px}.content-part .sub-section .subsection input{width:30%}.content-part .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background-color:#fff;border-radius:5px;color:var(--font-primary)}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;height:45px;position:relative;border-radius:5px;border:1px solid #d3dae6;padding:10px 0 10px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.content-part .search-part input{width:auto;flex:1;color:var(--font-dark);font-size:var(--font12-input);font-weight:400;border:none;background:none;outline:none}.content-part .search-part .btn{background:#1e2541;border-radius:5px;padding:5px;width:41px;height:36px;margin-right:3px}.content-part .search-part .btn img{filter:brightness(0) invert(1)}.content-part textarea{width:100%;background:none}.content-part .tools-section{margin-left:5px}.content-part .tools-section .category-title{margin-bottom:5px;font-size:13px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .tools-section .text-title{font-size:13px;margin-left:3px;color:var(--font-primary)}.content-part .tools-section input[type=checkbox]{border:2px solid #000!important;height:14px!important;width:15px!important;border-radius:2px!important;margin:2px}.content-part .tools-section input[type=checkbox]:checked{background-color:#000!important;border:2px solid #000!important}.content-part .tools-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#000;width:15px;display:flex;justify-content:center;border:2px solid #000;height:14px;align-items:center;border-radius:2px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#237b4b!important;border:1px solid #237b4b!important}.copyAll{position:absolute;right:0;text-align:end;top:-40px}.close-popup{position:absolute;right:7px;top:4px;width:25px}.form-control:focus{border:var(--bs-border-width) solid var(--bs-border-color)}::ng-deep .nav-link{color:#000!important}.back-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background:#d3dae6;color:#6c757dc7;border-radius:5px}.back-btn.edit{padding:5px 20px;min-height:20px;min-width:auto}.back-btn.add{background:#2e5b70;color:#fff}.save-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px}.create-btn{font-size:14px;transition:.2s;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px;height:40px;min-width:9rem}.form-control{color:#333;background:none!important;font-size:small;height:45px}.form-control:focus{box-shadow:none!important}@media only screen and (min-width: 300px) and (max-width: 450px){.modal-content .close-popup{width:16px}}.loader{filter:blur(3px)}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.skill-preview-body label{font-weight:500;font-size:14px;color:#6b7280;padding-bottom:5px}.skill-preview-body p{margin:0}.skill-preview-body .value{font-size:13px;color:#212529}.skill-preview-card{border-radius:12px;margin-bottom:12px;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease;overflow:hidden}.continue-btn{background-color:#4077ad;padding:5px 20px;min-height:20px;font-weight:500;color:#fff;border-radius:5px}.action-btns{display:flex;justify-content:space-between;align-items:center}.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:15px}.actions button{padding:10px 22px;border:none;border-radius:6px;font-size:14px;transition:all .2s ease;font-weight:500;min-width:8rem;min-height:45px}.actions .secondary{color:#6c757dc7;background-color:#e0e0e0}.actions .secondary:hover{background-color:#d5d5d5}.actions .primary{background-color:#2196f3;color:#fff}.actions .primary:hover{background-color:#1976d2}@media (max-width: 600px){.actions{flex-direction:column;align-items:stretch}.actions button{width:100%}}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .2s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.icon-color.rotate{transform:rotate(180deg)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "component", type: NgxStarsComponent, selector: "ngx-stars", inputs: ["maxStars", "initialStars", "readonly", "size", "color", "animation", "animationSpeed", "customPadding", "wholeStars", "customStarIcons"], outputs: ["ratingOutput"] }, { kind: "directive", type: i11$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i12.TabDirective, selector: "tab, [tab]", inputs: ["heading", "id", "disabled", "removable", "tabOrder", "customClass", "active"], outputs: ["selectTab", "deselect", "removed"], exportAs: ["tab"] }, { kind: "component", type: i12.TabsetComponent, selector: "tabset", inputs: ["vertical", "justified", "type"] }, { kind: "directive", type: i12.TabHeadingDirective, selector: "[tabHeading]" }, { kind: "component", type: i13.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i13.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }], animations: [
|
|
4798
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ToolsComponent, isStandalone: false, selector: "app-tools", inputs: { roleData: "roleData", providerId: "providerId", providerName: "providerName" }, ngImport: i0, template: "<!-- Tool PREVIEW LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n <h5 class=\"title text-secondary\">Tools Preview</h5>\r\n <!-- <p class=\"subtitle\">Add Tools</p> -->\r\n <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n <accordion-group *ngFor=\"let tool of userToolsPreview\" #accGroup (isOpenChange)=\"onAccordionChange(tool, $event)\">\r\n <div accordion-heading class=\"skill-preview-header d-flex justify-content-between align-items-center\">\r\n <span class=\"fw-semibold text-secondary\">\r\n {{ tool.toolName }}\r\n </span>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <!-- EDIT MODE BUTTONS -->\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool); else viewActions\">\r\n <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backTool(accGroup)\">\r\n Cancel\r\n </button>\r\n <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserTools()\" \r\n [disabled]=\"showLoader\">\r\n Update\r\n </button>\r\n </ng-container>\r\n <!-- VIEW MODE ACTIONS -->\r\n <ng-template #viewActions>\r\n <button type=\"button\" class=\"me-3\" (click)=\"editToolFromPreview(tool, accGroup, $event)\">\r\n <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" />\r\n </button>\r\n <!-- Arrow (ngx controls click) -->\r\n <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n [class.rotate]=\"accGroup.isOpen\" />\r\n </ng-template>\r\n </div>\r\n </div>\r\n <!-- BODY -->\r\n <div class=\"skill-preview-body content-part mt-3\">\r\n <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n <div class=\"row g-3 row-gap-2\">\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Service Provider</label>\r\n <div class=\"value\">{{ tool.providerName }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Manufacturer</label>\r\n <div class=\"value\">{{ tool.make }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Years of Experience</label>\r\n <div class=\"value\">{{ tool.year }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Self Ability Rating</label>\r\n <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\" style=\"pointer-events: none\">\r\n </ngx-stars>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Active</label><br />\r\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"tool.profileVisibility\" disabled>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Tools / Equipment</label>\r\n <div class=\"value\">{{ tool.toolName }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Model</label>\r\n <div class=\"value\">{{ tool.model }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Serial Number</label>\r\n <div class=\"value\">{{ tool.serialNumber }}</div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label>Description</label>\r\n <div class=\"value\">{{ tool.notes }}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- Edit Mode -->\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\" [formGroup]=\"tab.at(0)\">\r\n <div class=\"row g-3\">\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Service Provider</label>\r\n <div class=\"value\">{{ tool.providerName }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Manufacturer</label> <br />\r\n <input class=\"form-control\" type=\"text\" formControlName=\"make\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" bindValue=\"value\" formControlName=\"year\"\r\n [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\">\r\n </ng-select>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Self Ability Rating</label>\r\n <ngx-stars [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n (rate)=\"onRatingSets($event)\">\r\n </ngx-stars>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Active</label><br />\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Tools / Equipment</label>\r\n <input class=\"form-control\" [value]=\"tool.toolName\" readonly>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Model</label>\r\n <input class=\"form-control\" formControlName=\"model\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Serial Number</label>\r\n <input class=\"form-control\" formControlName=\"serialNumber\">\r\n </div>\r\n <div class=\"col-12\">\r\n <label>Description</label>\r\n <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\"></textarea>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </accordion-group>\r\n </accordion>\r\n</div>\r\n\r\n<!-- Tool LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'add'\">\r\n <h3 class=\"text-secondary\">Add Tools</h3>\r\n <p class=\"info\">Manage specialty tools and equipment</p>\r\n <div class=\"content-part\">\r\n <h6 class=\"text-secondary\"> Add User Tool</h6>\r\n <div class=\"sub-section\">\r\n <div class=\"row mt-2\">\r\n <div class=\"col-12 col-md-12 col-sm-12 ps-lg-0\">\r\n <div class=\"search-part\" *ngIf=\"!isEditMode\">\r\n <input type=\"text\" placeholder=\"Search / Add Tools here\" [(ngModel)]=\"searchToolQry\" (input)=\"getTools()\" />\r\n <button class=\"btn\" (click)=\"createNewTools()\" tooltip=\"Add Tool\">\r\n <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18px\" height=\"18px\" />\r\n </button>\r\n </div>\r\n <div *ngIf=\"!searchToolQry && toolSubmittedValue\" class=\"invalid-feedback is-invalid d-block\">\r\n Please Enter Tools Name\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n {{ nameError }}\r\n </div>\r\n <div class=\"col tools-section\" [ngClass]=\"showLoading ? 'loader':''\">\r\n <div class=\"row mt-2\" [ngStyle]=\"showLoader ? {'min-height': '150px'} : {}\">\r\n <div class=\"col-12 col-md-4\" *ngFor=\"let Tool of tools\">\r\n <div class=\"mt-2 d-flex\">\r\n <input (change)=\"onSelectedTools($event, Tool)\" [checked]=\"Tool.selected == true\" id=\"{{ Tool.id }}\"\r\n name=\"{{ Tool.id }}\" type=\"checkbox\" />\r\n <label class=\"text-title\" for=\"{{ Tool.id }}\">\r\n {{ Tool.name }}</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{ 'loader': showLoading,'pt-3': !showLoading,'edit-mode': isEditMode}\">\r\n <tabset #tabSet>\r\n <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab?.controls; let index = index\"\r\n [label]=\"tabs[index]\" tab1 id=\"{{ tabs[index] }}\" #{{tabs[index]}}>\r\n <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n <span class=\"text-secondary\">{{ tabs[index] }}</span>\r\n <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.toolId.value)\">\r\n <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n </button>\r\n </ng-template>\r\n <div [formGroup]=\"group\" class=\"tab-card\">\r\n <div class=\"card-body mt-3 position-relative\">\r\n <div class=\"col-12 col-md-3 mt-1 copyAll\" *ngIf=\"\r\n tab.controls.length > 1 && index == copyOptionIndex\r\n \">\r\n <label class=\"label\">Copy to All Tabs</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index, group.value,viewTab)\"\r\n role=\"switch\" />\r\n </div>\r\n <div class=\"row\" [ngClass]=\"index == 0 && tab.controls.length > 1 ? 'mt-5' : '' \">\r\n <div class=\"col-12 col-md-2 mt-1\">\r\n <label class=\"label\">Self-ability Rating</label>\r\n <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.starRating.errors }\" [maxStars]=\"5\">\r\n </ngx-stars>\r\n <div *ngIf=\"userToolSubmitted && k.starRating.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid':\r\n userToolSubmitted && k.starRating.errors\r\n }\">\r\n <div *ngIf=\"k.starRating.errors.required\">\r\n Star Rating is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-2 mt-1\">\r\n <label class=\"label\">Profile Visibility</label><br />\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\" />\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" (change)=\"onYearChange(group)\"\r\n formControlName=\"year\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.year.errors\r\n }\" bindValue=\"value\" [closeOnSelect]=\"true\" [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\"\r\n id=\"reqStates\"></ng-select>\r\n\r\n <div *ngIf=\"userToolSubmitted && k.year.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.year.errors\r\n }\">\r\n <div *ngIf=\"k.year.errors.required\">\r\n Year is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Manufacturer</label>\r\n <input id=\"make\" formControlName=\"make\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Manufacturer here\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.make.errors\r\n }\" (change)=\"onYearChange(group)\" />\r\n <div *ngIf=\"userToolSubmitted && k.make.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.make.errors\r\n }\">\r\n <div *ngIf=\"k.make.errors.required\">\r\n Manufacturer is required\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row pt-2\">\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Model</label>\r\n <input id=\"model\" formControlName=\"model\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Model here\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.model.errors\r\n }\" (change)=\"onYearChange(group)\" />\r\n <div *ngIf=\"userToolSubmitted && k.model.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.model.errors\r\n }\">\r\n <div *ngIf=\"k.model.errors.required\">\r\n Model is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\" label\">Serial Number</label>\r\n <input id=\"serialNumber\" formControlName=\"serialNumber\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Serial Number here\" [ngClass]=\"{\r\n 'is-invalid':\r\n userToolSubmitted && k.serialNumber.errors\r\n }\" />\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Comment</label>\r\n <textarea placeholder=\"Enter your comment here\" formControlName=\"notes\" class=\"form-control\"\r\n [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.notes.errors\r\n }\" rows=\"2\"></textarea>\r\n <div *ngIf=\"userToolSubmitted && k.notes.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.notes.errors\r\n }\">\r\n <div *ngIf=\"k.notes.errors.required\">\r\n Description is required\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </tab>\r\n </tabset>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"tools-container last pt-5 mt-5\">\r\n <div class=\"d-flex justify-content-between pt-3\">\r\n <!-- (click)=\"reset()\" -->\r\n <button class=\"back-btn\" (click)=\"goBack()\">Back</button>\r\n <div>\r\n <button class=\"back-btn me-3 add\" *ngIf=\"store.toolStepView() === 'preview'\" (click)=\"store.goToToolAdd()\">\r\n Add More Tools\r\n </button>\r\n <button style=\"margin-left: 15px;\" [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\" (click)=\"saveFinal()\"\r\n class=\"float-end save-btn\">\r\n Go To Home\r\n </button>\r\n <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" class=\"float-end save-btn\">\r\n Add\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: ["@charset \"UTF-8\";.tools-container{max-width:1000px;margin:40px auto;min-height:300px}.tools-container.last{min-height:unset}.tools-container h3{margin-bottom:5px;font-size:22px;font-weight:500}.tools-container .info{font-size:13px;color:#666;margin-bottom:30px}.content-part{background:#fff}.content-part p,.content-part div{font-size:small}.content-part div .label{font-size:12px!important;font-weight:700!important;padding-bottom:5px!important}.content-part .row{margin-top:-15px}.content-part .sub-section{padding:0 10px}.content-part .sub-section .title{font-size:16px;font-weight:400;color:var(--font-primary)}.content-part .sub-section .info-title{font-size:12px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .sub-section .content{font-size:12px}.content-part .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px}.content-part .sub-section .subsection input{width:30%}.content-part .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background-color:#fff;border-radius:5px;color:var(--font-primary)}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;height:45px;position:relative;border-radius:5px;border:1px solid #d3dae6;padding:10px 0 10px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.content-part .search-part input{width:auto;flex:1;color:var(--font-dark);font-size:var(--font12-input);font-weight:400;border:none;background:none;outline:none}.content-part .search-part .btn{background:#1e2541;border-radius:5px;padding:5px;width:41px;height:36px;margin-right:3px}.content-part .search-part .btn img{filter:brightness(0) invert(1)}.content-part textarea{width:100%;background:none}.content-part .tools-section{margin-left:5px}.content-part .tools-section .category-title{margin-bottom:5px;font-size:13px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .tools-section .text-title{font-size:13px;margin-left:3px;color:var(--font-primary)}.content-part .tools-section input[type=checkbox]{border:2px solid #000!important;height:14px!important;width:15px!important;border-radius:2px!important;margin:2px}.content-part .tools-section input[type=checkbox]:checked{background-color:#000!important;border:2px solid #000!important}.content-part .tools-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#000;width:15px;display:flex;justify-content:center;border:2px solid #000;height:14px;align-items:center;border-radius:2px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#237b4b!important;border:1px solid #237b4b!important}.copyAll{position:absolute;right:0;text-align:end;top:-40px}.close-popup{position:absolute;right:7px;top:4px;width:25px}.form-control:focus{border:var(--bs-border-width) solid var(--bs-border-color)}::ng-deep .nav-link{color:#000!important}.back-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background:#d3dae6;color:#6c757dc7;border-radius:5px}.back-btn.edit{padding:5px 20px;min-height:20px;min-width:auto}.back-btn.add{background:#2e5b70;color:#fff}.save-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px}.create-btn{font-size:14px;transition:.2s;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px;height:40px;min-width:9rem}.form-control{color:#333;background:none!important;font-size:small;height:45px}.form-control:focus{box-shadow:none!important}@media only screen and (min-width: 300px) and (max-width: 450px){.modal-content .close-popup{width:16px}}.loader{filter:blur(3px)}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.skill-preview-body label{font-weight:500;font-size:14px;color:#6b7280;padding-bottom:5px}.skill-preview-body p{margin:0}.skill-preview-body .value{font-size:13px;color:#212529}.skill-preview-card{border-radius:12px;margin-bottom:12px;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease;overflow:hidden}.continue-btn{background-color:#4077ad;padding:5px 20px;min-height:20px;font-weight:500;color:#fff;border-radius:5px}.action-btns{display:flex;justify-content:space-between;align-items:center}.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:15px}.actions button{padding:10px 22px;border:none;border-radius:6px;font-size:14px;transition:all .2s ease;font-weight:500;min-width:8rem;min-height:45px}.actions .secondary{color:#6c757dc7;background-color:#e0e0e0}.actions .secondary:hover{background-color:#d5d5d5}.actions .primary{background-color:#2196f3;color:#fff}.actions .primary:hover{background-color:#1976d2}@media (max-width: 600px){.actions{flex-direction:column;align-items:stretch}.actions button{width:100%}}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .2s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.icon-color.rotate{transform:rotate(180deg)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "component", type: NgxStarsComponent, selector: "ngx-stars", inputs: ["maxStars", "initialStars", "readonly", "size", "color", "animation", "animationSpeed", "customPadding", "wholeStars", "customStarIcons"], outputs: ["ratingOutput"] }, { kind: "directive", type: i11$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i12.TabDirective, selector: "tab, [tab]", inputs: ["heading", "id", "disabled", "removable", "tabOrder", "customClass", "active"], outputs: ["selectTab", "deselect", "removed"], exportAs: ["tab"] }, { kind: "component", type: i12.TabsetComponent, selector: "tabset", inputs: ["vertical", "justified", "type"] }, { kind: "directive", type: i12.TabHeadingDirective, selector: "[tabHeading]" }, { kind: "component", type: i13.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i13.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }], animations: [
|
|
4797
4799
|
trigger('expandCollapse', [
|
|
4798
4800
|
state('open', style({
|
|
4799
4801
|
height: '*',
|
|
@@ -4831,7 +4833,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
4831
4833
|
})),
|
|
4832
4834
|
transition('open <=> closed', animate('300ms ease'))
|
|
4833
4835
|
])
|
|
4834
|
-
], template: "<!-- Tool PREVIEW LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n <h5 class=\"title text-secondary\">Tools</h5>\r\n <p class=\"subtitle\">First-time users should enter tools with Inspector Match, Once you setup tools in your\r\n business profile you can add skills under that!</p>\r\n <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n <accordion-group *ngFor=\"let tool of userToolsPreview\" #accGroup (isOpenChange)=\"onAccordionChange(tool, $event)\">\r\n <div accordion-heading class=\"skill-preview-header d-flex justify-content-between align-items-center\">\r\n <span class=\"fw-semibold text-secondary\">\r\n {{ tool.toolName }}\r\n </span>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <!-- EDIT MODE BUTTONS -->\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool); else viewActions\">\r\n <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backTool(accGroup)\">\r\n Cancel\r\n </button>\r\n <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserTools()\" \r\n [disabled]=\"showLoader\">\r\n Update\r\n </button>\r\n </ng-container>\r\n <!-- VIEW MODE ACTIONS -->\r\n <ng-template #viewActions>\r\n <button type=\"button\" class=\"me-3\" (click)=\"editToolFromPreview(tool, accGroup, $event)\">\r\n <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" />\r\n </button>\r\n <!-- Arrow (ngx controls click) -->\r\n <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n [class.rotate]=\"accGroup.isOpen\" />\r\n </ng-template>\r\n </div>\r\n </div>\r\n <!-- BODY -->\r\n <div class=\"skill-preview-body content-part mt-3\">\r\n <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n <div class=\"row g-3 row-gap-2\">\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Service Provider</label>\r\n <div class=\"value\">{{ tool.providerName }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Manufacturer</label>\r\n <div class=\"value\">{{ tool.make }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Years of Experience</label>\r\n <div class=\"value\">{{ tool.year }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Self Ability Rating</label>\r\n <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\" style=\"pointer-events: none\">\r\n </ngx-stars>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Active</label><br />\r\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"tool.profileVisibility\" disabled>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Tools / Equipment</label>\r\n <div class=\"value\">{{ tool.toolName }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Model</label>\r\n <div class=\"value\">{{ tool.model }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Serial Number</label>\r\n <div class=\"value\">{{ tool.serialNumber }}</div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label>Description</label>\r\n <div class=\"value\">{{ tool.notes }}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- Edit Mode -->\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\" [formGroup]=\"tab.at(0)\">\r\n <div class=\"row g-3\">\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Service Provider</label>\r\n <div class=\"value\">{{ tool.providerName }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Manufacturer</label> <br />\r\n <input class=\"form-control\" type=\"text\" formControlName=\"make\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" bindValue=\"value\" formControlName=\"year\"\r\n [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\">\r\n </ng-select>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Self Ability Rating</label>\r\n <ngx-stars [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n (rate)=\"onRatingSets($event)\">\r\n </ngx-stars>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Active</label><br />\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Tools / Equipment</label>\r\n <input class=\"form-control\" [value]=\"tool.toolName\" readonly>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Model</label>\r\n <input class=\"form-control\" formControlName=\"model\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Serial Number</label>\r\n <input class=\"form-control\" formControlName=\"serialNumber\">\r\n </div>\r\n <div class=\"col-12\">\r\n <label>Description</label>\r\n <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\"></textarea>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </accordion-group>\r\n </accordion>\r\n</div>\r\n\r\n<!-- Tool LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'add'\">\r\n <h3 class=\"text-secondary\">Add Tools</h3>\r\n <p class=\"info\">Manage specialty tools and equipment</p>\r\n <div class=\"content-part\">\r\n <h6 class=\"text-secondary\"> Add User Tool</h6>\r\n <div class=\"sub-section\">\r\n <div class=\"row mt-2\">\r\n <div class=\"col-12 col-md-12 col-sm-12 ps-lg-0\">\r\n <div class=\"search-part\" *ngIf=\"!isEditMode\">\r\n <input type=\"text\" placeholder=\"Search / Add Tools here\" [(ngModel)]=\"searchToolQry\" (input)=\"getTools()\" />\r\n <button class=\"btn\" (click)=\"createNewTools()\" tooltip=\"Add Tool\">\r\n <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18px\" height=\"18px\" />\r\n </button>\r\n </div>\r\n <div *ngIf=\"!searchToolQry && toolSubmittedValue\" class=\"invalid-feedback is-invalid d-block\">\r\n Please Enter Tools Name\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n {{ nameError }}\r\n </div>\r\n <div class=\"col tools-section\" [ngClass]=\"showLoading ? 'loader':''\">\r\n <div class=\"row mt-2\" [ngStyle]=\"showLoader ? {'min-height': '150px'} : {}\">\r\n <div class=\"col-12 col-md-4\" *ngFor=\"let Tool of tools\">\r\n <div class=\"mt-2 d-flex\">\r\n <input (change)=\"onSelectedTools($event, Tool)\" [checked]=\"Tool.selected == true\" id=\"{{ Tool.id }}\"\r\n name=\"{{ Tool.id }}\" type=\"checkbox\" />\r\n <label class=\"text-title\" for=\"{{ Tool.id }}\">\r\n {{ Tool.name }}</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{ 'loader': showLoading,'pt-3': !showLoading,'edit-mode': isEditMode}\">\r\n <tabset #tabSet>\r\n <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab?.controls; let index = index\"\r\n [label]=\"tabs[index]\" tab1 id=\"{{ tabs[index] }}\" #{{tabs[index]}}>\r\n <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n <span class=\"text-secondary\">{{ tabs[index] }}</span>\r\n <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.toolId.value)\">\r\n <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n </button>\r\n </ng-template>\r\n <div [formGroup]=\"group\" class=\"tab-card\">\r\n <div class=\"card-body mt-3 position-relative\">\r\n <div class=\"col-12 col-md-3 mt-1 copyAll\" *ngIf=\"\r\n tab.controls.length > 1 && index == copyOptionIndex\r\n \">\r\n <label class=\"label\">Copy to All Tabs</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index, group.value,viewTab)\"\r\n role=\"switch\" />\r\n </div>\r\n <div class=\"row\" [ngClass]=\"index == 0 && tab.controls.length > 1 ? 'mt-5' : '' \">\r\n <div class=\"col-12 col-md-2 mt-1\">\r\n <label class=\"label\">Self-ability Rating</label>\r\n <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.starRating.errors }\" [maxStars]=\"5\">\r\n </ngx-stars>\r\n <div *ngIf=\"userToolSubmitted && k.starRating.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid':\r\n userToolSubmitted && k.starRating.errors\r\n }\">\r\n <div *ngIf=\"k.starRating.errors.required\">\r\n Star Rating is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-2 mt-1\">\r\n <label class=\"label\">Profile Visibility</label><br />\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\" />\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" (change)=\"onYearChange(group)\"\r\n formControlName=\"year\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.year.errors\r\n }\" bindValue=\"value\" [closeOnSelect]=\"true\" [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\"\r\n id=\"reqStates\"></ng-select>\r\n\r\n <div *ngIf=\"userToolSubmitted && k.year.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.year.errors\r\n }\">\r\n <div *ngIf=\"k.year.errors.required\">\r\n Year is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Manufacturer</label>\r\n <input id=\"make\" formControlName=\"make\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Manufacturer here\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.make.errors\r\n }\" (change)=\"onYearChange(group)\" />\r\n <div *ngIf=\"userToolSubmitted && k.make.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.make.errors\r\n }\">\r\n <div *ngIf=\"k.make.errors.required\">\r\n Manufacturer is required\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row pt-2\">\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Model</label>\r\n <input id=\"model\" formControlName=\"model\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Model here\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.model.errors\r\n }\" (change)=\"onYearChange(group)\" />\r\n <div *ngIf=\"userToolSubmitted && k.model.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.model.errors\r\n }\">\r\n <div *ngIf=\"k.model.errors.required\">\r\n Model is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\" label\">Serial Number</label>\r\n <input id=\"serialNumber\" formControlName=\"serialNumber\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Serial Number here\" [ngClass]=\"{\r\n 'is-invalid':\r\n userToolSubmitted && k.serialNumber.errors\r\n }\" />\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Comment</label>\r\n <textarea placeholder=\"Enter your comment here\" formControlName=\"notes\" class=\"form-control\"\r\n [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.notes.errors\r\n }\" rows=\"2\"></textarea>\r\n <div *ngIf=\"userToolSubmitted && k.notes.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.notes.errors\r\n }\">\r\n <div *ngIf=\"k.notes.errors.required\">\r\n Description is required\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </tab>\r\n </tabset>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"tools-container last pt-5 mt-5\">\r\n <div class=\"d-flex justify-content-between pt-3\">\r\n <!-- (click)=\"reset()\" -->\r\n <button class=\"back-btn\" (click)=\"goBack()\">Back</button>\r\n <div>\r\n <button class=\"back-btn me-3 add\" *ngIf=\"store.toolStepView() === 'preview'\" (click)=\"store.goToToolAdd()\">\r\n Add More Tools\r\n </button>\r\n <button style=\"margin-left: 15px;\" [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\" (click)=\"saveFinal()\"\r\n class=\"float-end save-btn\">\r\n Go To Home\r\n </button>\r\n <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" class=\"float-end save-btn\">\r\n Add\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: ["@charset \"UTF-8\";.tools-container{max-width:1000px;margin:40px auto;min-height:300px}.tools-container.last{min-height:unset}.tools-container h3{margin-bottom:5px;font-size:22px;font-weight:500}.tools-container .info{font-size:13px;color:#666;margin-bottom:30px}.content-part{background:#fff}.content-part p,.content-part div{font-size:small}.content-part div .label{font-size:12px!important;font-weight:700!important;padding-bottom:5px!important}.content-part .row{margin-top:-15px}.content-part .sub-section{padding:0 10px}.content-part .sub-section .title{font-size:16px;font-weight:400;color:var(--font-primary)}.content-part .sub-section .info-title{font-size:12px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .sub-section .content{font-size:12px}.content-part .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px}.content-part .sub-section .subsection input{width:30%}.content-part .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background-color:#fff;border-radius:5px;color:var(--font-primary)}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;height:45px;position:relative;border-radius:5px;border:1px solid #d3dae6;padding:10px 0 10px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.content-part .search-part input{width:auto;flex:1;color:var(--font-dark);font-size:var(--font12-input);font-weight:400;border:none;background:none;outline:none}.content-part .search-part .btn{background:#1e2541;border-radius:5px;padding:5px;width:41px;height:36px;margin-right:3px}.content-part .search-part .btn img{filter:brightness(0) invert(1)}.content-part textarea{width:100%;background:none}.content-part .tools-section{margin-left:5px}.content-part .tools-section .category-title{margin-bottom:5px;font-size:13px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .tools-section .text-title{font-size:13px;margin-left:3px;color:var(--font-primary)}.content-part .tools-section input[type=checkbox]{border:2px solid #000!important;height:14px!important;width:15px!important;border-radius:2px!important;margin:2px}.content-part .tools-section input[type=checkbox]:checked{background-color:#000!important;border:2px solid #000!important}.content-part .tools-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#000;width:15px;display:flex;justify-content:center;border:2px solid #000;height:14px;align-items:center;border-radius:2px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#237b4b!important;border:1px solid #237b4b!important}.copyAll{position:absolute;right:0;text-align:end;top:-40px}.close-popup{position:absolute;right:7px;top:4px;width:25px}.form-control:focus{border:var(--bs-border-width) solid var(--bs-border-color)}::ng-deep .nav-link{color:#000!important}.back-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background:#d3dae6;color:#6c757dc7;border-radius:5px}.back-btn.edit{padding:5px 20px;min-height:20px;min-width:auto}.back-btn.add{background:#2e5b70;color:#fff}.save-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px}.create-btn{font-size:14px;transition:.2s;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px;height:40px;min-width:9rem}.form-control{color:#333;background:none!important;font-size:small;height:45px}.form-control:focus{box-shadow:none!important}@media only screen and (min-width: 300px) and (max-width: 450px){.modal-content .close-popup{width:16px}}.loader{filter:blur(3px)}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.skill-preview-body label{font-weight:500;font-size:14px;color:#6b7280;padding-bottom:5px}.skill-preview-body p{margin:0}.skill-preview-body .value{font-size:13px;color:#212529}.skill-preview-card{border-radius:12px;margin-bottom:12px;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease;overflow:hidden}.continue-btn{background-color:#4077ad;padding:5px 20px;min-height:20px;font-weight:500;color:#fff;border-radius:5px}.action-btns{display:flex;justify-content:space-between;align-items:center}.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:15px}.actions button{padding:10px 22px;border:none;border-radius:6px;font-size:14px;transition:all .2s ease;font-weight:500;min-width:8rem;min-height:45px}.actions .secondary{color:#6c757dc7;background-color:#e0e0e0}.actions .secondary:hover{background-color:#d5d5d5}.actions .primary{background-color:#2196f3;color:#fff}.actions .primary:hover{background-color:#1976d2}@media (max-width: 600px){.actions{flex-direction:column;align-items:stretch}.actions button{width:100%}}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .2s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.icon-color.rotate{transform:rotate(180deg)}\n"] }]
|
|
4836
|
+
], template: "<!-- Tool PREVIEW LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n <h5 class=\"title text-secondary\">Tools Preview</h5>\r\n <!-- <p class=\"subtitle\">Add Tools</p> -->\r\n <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n <accordion-group *ngFor=\"let tool of userToolsPreview\" #accGroup (isOpenChange)=\"onAccordionChange(tool, $event)\">\r\n <div accordion-heading class=\"skill-preview-header d-flex justify-content-between align-items-center\">\r\n <span class=\"fw-semibold text-secondary\">\r\n {{ tool.toolName }}\r\n </span>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <!-- EDIT MODE BUTTONS -->\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool); else viewActions\">\r\n <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backTool(accGroup)\">\r\n Cancel\r\n </button>\r\n <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserTools()\" \r\n [disabled]=\"showLoader\">\r\n Update\r\n </button>\r\n </ng-container>\r\n <!-- VIEW MODE ACTIONS -->\r\n <ng-template #viewActions>\r\n <button type=\"button\" class=\"me-3\" (click)=\"editToolFromPreview(tool, accGroup, $event)\">\r\n <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" />\r\n </button>\r\n <!-- Arrow (ngx controls click) -->\r\n <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n [class.rotate]=\"accGroup.isOpen\" />\r\n </ng-template>\r\n </div>\r\n </div>\r\n <!-- BODY -->\r\n <div class=\"skill-preview-body content-part mt-3\">\r\n <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n <div class=\"row g-3 row-gap-2\">\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Service Provider</label>\r\n <div class=\"value\">{{ tool.providerName }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Manufacturer</label>\r\n <div class=\"value\">{{ tool.make }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Years of Experience</label>\r\n <div class=\"value\">{{ tool.year }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Self Ability Rating</label>\r\n <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\" style=\"pointer-events: none\">\r\n </ngx-stars>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Active</label><br />\r\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"tool.profileVisibility\" disabled>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Tools / Equipment</label>\r\n <div class=\"value\">{{ tool.toolName }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Model</label>\r\n <div class=\"value\">{{ tool.model }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Serial Number</label>\r\n <div class=\"value\">{{ tool.serialNumber }}</div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label>Description</label>\r\n <div class=\"value\">{{ tool.notes }}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- Edit Mode -->\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\" [formGroup]=\"tab.at(0)\">\r\n <div class=\"row g-3\">\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Service Provider</label>\r\n <div class=\"value\">{{ tool.providerName }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Manufacturer</label> <br />\r\n <input class=\"form-control\" type=\"text\" formControlName=\"make\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" bindValue=\"value\" formControlName=\"year\"\r\n [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\">\r\n </ng-select>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Self Ability Rating</label>\r\n <ngx-stars [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n (rate)=\"onRatingSets($event)\">\r\n </ngx-stars>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Active</label><br />\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Tools / Equipment</label>\r\n <input class=\"form-control\" [value]=\"tool.toolName\" readonly>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Model</label>\r\n <input class=\"form-control\" formControlName=\"model\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Serial Number</label>\r\n <input class=\"form-control\" formControlName=\"serialNumber\">\r\n </div>\r\n <div class=\"col-12\">\r\n <label>Description</label>\r\n <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\"></textarea>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </accordion-group>\r\n </accordion>\r\n</div>\r\n\r\n<!-- Tool LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'add'\">\r\n <h3 class=\"text-secondary\">Add Tools</h3>\r\n <p class=\"info\">Manage specialty tools and equipment</p>\r\n <div class=\"content-part\">\r\n <h6 class=\"text-secondary\"> Add User Tool</h6>\r\n <div class=\"sub-section\">\r\n <div class=\"row mt-2\">\r\n <div class=\"col-12 col-md-12 col-sm-12 ps-lg-0\">\r\n <div class=\"search-part\" *ngIf=\"!isEditMode\">\r\n <input type=\"text\" placeholder=\"Search / Add Tools here\" [(ngModel)]=\"searchToolQry\" (input)=\"getTools()\" />\r\n <button class=\"btn\" (click)=\"createNewTools()\" tooltip=\"Add Tool\">\r\n <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18px\" height=\"18px\" />\r\n </button>\r\n </div>\r\n <div *ngIf=\"!searchToolQry && toolSubmittedValue\" class=\"invalid-feedback is-invalid d-block\">\r\n Please Enter Tools Name\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n {{ nameError }}\r\n </div>\r\n <div class=\"col tools-section\" [ngClass]=\"showLoading ? 'loader':''\">\r\n <div class=\"row mt-2\" [ngStyle]=\"showLoader ? {'min-height': '150px'} : {}\">\r\n <div class=\"col-12 col-md-4\" *ngFor=\"let Tool of tools\">\r\n <div class=\"mt-2 d-flex\">\r\n <input (change)=\"onSelectedTools($event, Tool)\" [checked]=\"Tool.selected == true\" id=\"{{ Tool.id }}\"\r\n name=\"{{ Tool.id }}\" type=\"checkbox\" />\r\n <label class=\"text-title\" for=\"{{ Tool.id }}\">\r\n {{ Tool.name }}</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{ 'loader': showLoading,'pt-3': !showLoading,'edit-mode': isEditMode}\">\r\n <tabset #tabSet>\r\n <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab?.controls; let index = index\"\r\n [label]=\"tabs[index]\" tab1 id=\"{{ tabs[index] }}\" #{{tabs[index]}}>\r\n <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n <span class=\"text-secondary\">{{ tabs[index] }}</span>\r\n <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.toolId.value)\">\r\n <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n </button>\r\n </ng-template>\r\n <div [formGroup]=\"group\" class=\"tab-card\">\r\n <div class=\"card-body mt-3 position-relative\">\r\n <div class=\"col-12 col-md-3 mt-1 copyAll\" *ngIf=\"\r\n tab.controls.length > 1 && index == copyOptionIndex\r\n \">\r\n <label class=\"label\">Copy to All Tabs</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index, group.value,viewTab)\"\r\n role=\"switch\" />\r\n </div>\r\n <div class=\"row\" [ngClass]=\"index == 0 && tab.controls.length > 1 ? 'mt-5' : '' \">\r\n <div class=\"col-12 col-md-2 mt-1\">\r\n <label class=\"label\">Self-ability Rating</label>\r\n <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.starRating.errors }\" [maxStars]=\"5\">\r\n </ngx-stars>\r\n <div *ngIf=\"userToolSubmitted && k.starRating.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid':\r\n userToolSubmitted && k.starRating.errors\r\n }\">\r\n <div *ngIf=\"k.starRating.errors.required\">\r\n Star Rating is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-2 mt-1\">\r\n <label class=\"label\">Profile Visibility</label><br />\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\" />\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" (change)=\"onYearChange(group)\"\r\n formControlName=\"year\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.year.errors\r\n }\" bindValue=\"value\" [closeOnSelect]=\"true\" [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\"\r\n id=\"reqStates\"></ng-select>\r\n\r\n <div *ngIf=\"userToolSubmitted && k.year.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.year.errors\r\n }\">\r\n <div *ngIf=\"k.year.errors.required\">\r\n Year is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Manufacturer</label>\r\n <input id=\"make\" formControlName=\"make\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Manufacturer here\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.make.errors\r\n }\" (change)=\"onYearChange(group)\" />\r\n <div *ngIf=\"userToolSubmitted && k.make.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.make.errors\r\n }\">\r\n <div *ngIf=\"k.make.errors.required\">\r\n Manufacturer is required\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row pt-2\">\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Model</label>\r\n <input id=\"model\" formControlName=\"model\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Model here\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.model.errors\r\n }\" (change)=\"onYearChange(group)\" />\r\n <div *ngIf=\"userToolSubmitted && k.model.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.model.errors\r\n }\">\r\n <div *ngIf=\"k.model.errors.required\">\r\n Model is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\" label\">Serial Number</label>\r\n <input id=\"serialNumber\" formControlName=\"serialNumber\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Serial Number here\" [ngClass]=\"{\r\n 'is-invalid':\r\n userToolSubmitted && k.serialNumber.errors\r\n }\" />\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Comment</label>\r\n <textarea placeholder=\"Enter your comment here\" formControlName=\"notes\" class=\"form-control\"\r\n [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.notes.errors\r\n }\" rows=\"2\"></textarea>\r\n <div *ngIf=\"userToolSubmitted && k.notes.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.notes.errors\r\n }\">\r\n <div *ngIf=\"k.notes.errors.required\">\r\n Description is required\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </tab>\r\n </tabset>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"tools-container last pt-5 mt-5\">\r\n <div class=\"d-flex justify-content-between pt-3\">\r\n <!-- (click)=\"reset()\" -->\r\n <button class=\"back-btn\" (click)=\"goBack()\">Back</button>\r\n <div>\r\n <button class=\"back-btn me-3 add\" *ngIf=\"store.toolStepView() === 'preview'\" (click)=\"store.goToToolAdd()\">\r\n Add More Tools\r\n </button>\r\n <button style=\"margin-left: 15px;\" [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\" (click)=\"saveFinal()\"\r\n class=\"float-end save-btn\">\r\n Go To Home\r\n </button>\r\n <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" class=\"float-end save-btn\">\r\n Add\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: ["@charset \"UTF-8\";.tools-container{max-width:1000px;margin:40px auto;min-height:300px}.tools-container.last{min-height:unset}.tools-container h3{margin-bottom:5px;font-size:22px;font-weight:500}.tools-container .info{font-size:13px;color:#666;margin-bottom:30px}.content-part{background:#fff}.content-part p,.content-part div{font-size:small}.content-part div .label{font-size:12px!important;font-weight:700!important;padding-bottom:5px!important}.content-part .row{margin-top:-15px}.content-part .sub-section{padding:0 10px}.content-part .sub-section .title{font-size:16px;font-weight:400;color:var(--font-primary)}.content-part .sub-section .info-title{font-size:12px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .sub-section .content{font-size:12px}.content-part .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px}.content-part .sub-section .subsection input{width:30%}.content-part .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background-color:#fff;border-radius:5px;color:var(--font-primary)}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;height:45px;position:relative;border-radius:5px;border:1px solid #d3dae6;padding:10px 0 10px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.content-part .search-part input{width:auto;flex:1;color:var(--font-dark);font-size:var(--font12-input);font-weight:400;border:none;background:none;outline:none}.content-part .search-part .btn{background:#1e2541;border-radius:5px;padding:5px;width:41px;height:36px;margin-right:3px}.content-part .search-part .btn img{filter:brightness(0) invert(1)}.content-part textarea{width:100%;background:none}.content-part .tools-section{margin-left:5px}.content-part .tools-section .category-title{margin-bottom:5px;font-size:13px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .tools-section .text-title{font-size:13px;margin-left:3px;color:var(--font-primary)}.content-part .tools-section input[type=checkbox]{border:2px solid #000!important;height:14px!important;width:15px!important;border-radius:2px!important;margin:2px}.content-part .tools-section input[type=checkbox]:checked{background-color:#000!important;border:2px solid #000!important}.content-part .tools-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#000;width:15px;display:flex;justify-content:center;border:2px solid #000;height:14px;align-items:center;border-radius:2px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#237b4b!important;border:1px solid #237b4b!important}.copyAll{position:absolute;right:0;text-align:end;top:-40px}.close-popup{position:absolute;right:7px;top:4px;width:25px}.form-control:focus{border:var(--bs-border-width) solid var(--bs-border-color)}::ng-deep .nav-link{color:#000!important}.back-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background:#d3dae6;color:#6c757dc7;border-radius:5px}.back-btn.edit{padding:5px 20px;min-height:20px;min-width:auto}.back-btn.add{background:#2e5b70;color:#fff}.save-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px}.create-btn{font-size:14px;transition:.2s;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px;height:40px;min-width:9rem}.form-control{color:#333;background:none!important;font-size:small;height:45px}.form-control:focus{box-shadow:none!important}@media only screen and (min-width: 300px) and (max-width: 450px){.modal-content .close-popup{width:16px}}.loader{filter:blur(3px)}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.skill-preview-body label{font-weight:500;font-size:14px;color:#6b7280;padding-bottom:5px}.skill-preview-body p{margin:0}.skill-preview-body .value{font-size:13px;color:#212529}.skill-preview-card{border-radius:12px;margin-bottom:12px;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease;overflow:hidden}.continue-btn{background-color:#4077ad;padding:5px 20px;min-height:20px;font-weight:500;color:#fff;border-radius:5px}.action-btns{display:flex;justify-content:space-between;align-items:center}.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:15px}.actions button{padding:10px 22px;border:none;border-radius:6px;font-size:14px;transition:all .2s ease;font-weight:500;min-width:8rem;min-height:45px}.actions .secondary{color:#6c757dc7;background-color:#e0e0e0}.actions .secondary:hover{background-color:#d5d5d5}.actions .primary{background-color:#2196f3;color:#fff}.actions .primary:hover{background-color:#1976d2}@media (max-width: 600px){.actions{flex-direction:column;align-items:stretch}.actions button{width:100%}}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .2s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.icon-color.rotate{transform:rotate(180deg)}\n"] }]
|
|
4835
4837
|
}], ctorParameters: () => [{ type: ToolService }, { type: UserToolService }, { type: i3.UntypedFormBuilder }, { type: UtilsService }, { type: CredentialingStore }, { type: i6.TokenService }, { type: UserDetailService }, { type: undefined, decorators: [{
|
|
4836
4838
|
type: Inject,
|
|
4837
4839
|
args: [LIBRARY_CONFIG]
|
|
@@ -5203,7 +5205,6 @@ class RoleSelectComponent {
|
|
|
5203
5205
|
return this.userForm.controls;
|
|
5204
5206
|
}
|
|
5205
5207
|
uploadUserImage(event) {
|
|
5206
|
-
this.isImageLoading = true;
|
|
5207
5208
|
const file = event.target.files?.[0];
|
|
5208
5209
|
if (!file)
|
|
5209
5210
|
return;
|
|
@@ -5216,7 +5217,6 @@ class RoleSelectComponent {
|
|
|
5216
5217
|
this.saveAWSHeadShot();
|
|
5217
5218
|
}
|
|
5218
5219
|
selectFile(event) {
|
|
5219
|
-
this.isresumeLoading = true;
|
|
5220
5220
|
this.fileData = event.target.files[0];
|
|
5221
5221
|
if (this.fileData) {
|
|
5222
5222
|
this.resumeName = this.fileData.name;
|
|
@@ -5225,6 +5225,7 @@ class RoleSelectComponent {
|
|
|
5225
5225
|
this.saveAWSFile();
|
|
5226
5226
|
}
|
|
5227
5227
|
async saveAWSFile() {
|
|
5228
|
+
this.isresumeLoading = true;
|
|
5228
5229
|
const fileType = this.fileData.type;
|
|
5229
5230
|
const fileExtension = fileType.split('/')[1] || fileType.split('/')[0] || 'file';
|
|
5230
5231
|
const fileName = `${new uuid().newId()}.${fileExtension}`;
|
|
@@ -5323,6 +5324,7 @@ class RoleSelectComponent {
|
|
|
5323
5324
|
}
|
|
5324
5325
|
}
|
|
5325
5326
|
async saveAWSHeadShot() {
|
|
5327
|
+
this.isImageLoading = true;
|
|
5326
5328
|
const saved = profileSignal();
|
|
5327
5329
|
if (!this.fileDataUser) {
|
|
5328
5330
|
this.showLoader = false;
|
|
@@ -5534,11 +5536,11 @@ class RoleSelectComponent {
|
|
|
5534
5536
|
}
|
|
5535
5537
|
}
|
|
5536
5538
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RoleSelectComponent, deps: [{ token: CredentialingStore }, { token: UserDocumentService }, { token: i2.Router }, { token: IndustryService }, { token: UserDetailService }, { token: FileService }, { token: ProvidersService }, { token: i6.TokenService }, { token: i3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
5537
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: RoleSelectComponent, isStandalone: false, selector: "app-role-select", inputs: { roleData: "roleData", cloudfrontUrl: "cloudfrontUrl", providerId: "providerId", providerName: "providerName" }, outputs: { backToParent: "backToParent" }, ngImport: i0, template: "<div class=\"role-selection-container\">\r\n <h2>Basic Details</h2>\r\n <p class=\"note\">We need basic information and a headshot for your profile</p>\r\n <div class=\"profile-field\">\r\n <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n <div class=\"spinner-border\"></div>\r\n </div>\r\n <form *ngIf=\"isLoaded\" [formGroup]=\"userForm\" class=\"form pb-0\">\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2 mb-3\">First Name*</label>\r\n <input [ngClass]=\"{ 'is-invalid': u.firstName.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n type=\"text\" class=\"form-control\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n <div *ngIf=\" u.firstName.invalid &&\r\n (u.firstName.touched || u.firstName.dirty)\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n First Name is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2 mb-3\">Last Name*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\"\r\n [ngClass]=\"{\r\n 'is-invalid':\r\n u.lastName.invalid && (u.lastName.touched || u.lastName.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.lastName.invalid &&\r\n (u.lastName.touched || u.lastName.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.lastName.errors?.required\">\r\n Last Name is required\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Email*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.email.invalid && (u.email.touched || u.email.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.email.invalid &&\r\n (u.email.touched || u.email.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.email.errors?.required\">\r\n Email is required\r\n </div>\r\n <div class=\"ms-1\" *ngIf=\"u.email.errors?.email\">\r\n Please enter a valid email address\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Home Address 1*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\"\r\n ngx-google-places-autocomplete [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.address1.invalid && (u.address1.touched || u.address1.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.address1.invalid &&\r\n (u.address1.touched || u.address1.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n Home Address 1 is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Zip Code*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.zipcode.invalid && (u.zipcode.touched || u.zipcode.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.zipcode.invalid &&\r\n (u.zipcode.touched || u.zipcode.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.zipcode.errors?.required\">\r\n Zipcode is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Country*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n [ngClass]=\"{\r\n 'is-invalid':\r\n u.country.invalid && (u.country.touched || u.country.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.country.invalid &&\r\n (u.country.touched || u.country.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n Country is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <!-- <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n placeholder=\"Home Address 2\" />\r\n </div>\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.city.invalid && (u.city.touched || u.city.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.city.invalid &&\r\n (u.city.touched || u.city.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n City is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.state.invalid && (u.state.touched || u.state.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.state.invalid &&\r\n (u.state.touched || u.state.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n State is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div> -->\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Phone Number*</label>\r\n\r\n <input type=\"text\" class=\"form-control block shadow-none\" id=\"inputPhone\" name=\"inputPhone\"\r\n placeholder=\"Phone Number\" autocomplete=\"off\" formControlName=\"phoneNumber\" maxlength=\"14\"\r\n (input)=\"phoneMask($event)\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.phoneNumber.invalid &&\r\n (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.phoneNumber.invalid &&\r\n (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n Phone Number is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n <label class=\"note-label mb-2\">Years of experience*</label>\r\n\r\n <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n id=\"yearsOfExperince\"></ng-select>\r\n\r\n <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n YearsOfExperience is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n <label class=\"note-label mb-2\">Profile image*</label>\r\n\r\n <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\" class=\"d-none\" />\r\n <input [(ngModel)]=\"fileName\" readonly type=\"text\" class=\"form-control pe-5\"\r\n placeholder=\"Upload Profile Picture\" (click)=\"uploadFile.click()\" />\r\n <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12\r\n mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Job Title*</label>\r\n\r\n <ng-select class=\"w-100\" class=\"custom-ng-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n </ng-select>\r\n <div *ngIf=\" u.userJobTitle.invalid &&\r\n (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n Job title is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Industry*</label>\r\n\r\n <ng-select class=\"w-100 custom-ng-select\" formControlName=\"industries\" [items]=\"industries\" [multiple]=\"true\"\r\n [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\" [closeOnSelect]=\"false\"\r\n id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n\r\n <!-- Dropdown option -->\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <span class=\"form-check\">\r\n <span class=\"form-check-input-wrapper\">\r\n <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n </span>\r\n {{ item.industryName }}\r\n </span>\r\n </ng-template>\r\n\r\n <!-- Selected label -->\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n </span>\r\n </ng-template>\r\n <div *ngIf=\"u.industries.invalid &&\r\n (u.industries.touched || u.industries.dirty)\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.industries.errors.required\">\r\n Industry is required\r\n </div>\r\n </div>\r\n </ng-select>\r\n </div>\r\n <div class=\"form-group col-sm-12 col-md-4\">\r\n <div class=\"image-wrapper\">\r\n <!-- Spinner -->\r\n <div *ngIf=\"isImageLoading\" class=\"spinner\"></div>\r\n <!-- Image -->\r\n <img *ngIf=\"previewUrl\" [src]=\"previewUrl\" alt=\"Profile Preview\" class=\"preview-image mt-2\"\r\n (load)=\"onImageLoad()\" />\r\n </div>\r\n <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n <div>{{ userError }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Resume Submission</h2>\r\n <p class=\"note mb-2\">Submit your resume here</p>\r\n <div class=\"col-sm-12 col-md-8\">\r\n <div class=\"form-group mb-2 position-relative\">\r\n <input #fileInput type=\"file\" accept=\"/*\" (change)=\"selectFile($event)\" class=\"d-none\" />\r\n <input [(ngModel)]=\"resumeName\" readonly type=\"text\" class=\"form-control pe-5\"\r\n placeholder=\"Upload Resume Here\" (click)=\"fileInput.click()\" />\r\n\r\n <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon-resume\"\r\n (click)=\"fileInput.click()\" />\r\n <div *ngIf=\"isResumeRequired\" class=\"invalid-feedback d-block ms-1\">\r\n Upload your resume\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"col-sm-12 col-md-8\" style=\"padding-left: 15px;\">\r\n <div class=\"resume-wrapper\">\r\n <div *ngIf=\"isresumeLoading\" class=\"spinner-resume\"></div>\r\n <a *ngIf=\"list\" [href]=\"list.fileUrl\" class=\"mt-2\" target=\"_blank\">\r\n <span>{{ list.fileName }}</span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n <div>{{ userError }}</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n <div>\r\n {{userError}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<!-- \r\n<div class=\"producer-type-container\">\r\n <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Type of jobs</h2>\r\n <p class=\"notes\">What type of job are you interested in</p>\r\n <div class=\"job-list\">\r\n <div class=\"job-item\" *ngFor=\"let job of jobTypes\" [class.selected]=\"isSelected(job)\" (click)=\"toggleJob(job)\">\r\n <span class=\"plus\">+</span> {{ job.text }}\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"onBackClick()\">Back</button>\r\n <div class=\"right-actions\">\r\n\r\n <button type=\"button\" class=\"primary\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" (click)=\"saveFinal()\">\r\n Continue\r\n </button>\r\n </div>\r\n</div> -->\r\n\r\n\r\n<div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"onBackClick()\">Back</button>\r\n <div class=\"right-actions\">\r\n\r\n <button type=\"button\" class=\"primary\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" (click)=\"saveFinal()\">\r\n Continue\r\n </button>\r\n </div>\r\n</div>", styles: [".preview-image{width:250px;height:100px;object-fit:contain;margin-top:5px;border-radius:5px}.upload-icon-resume{position:absolute;right:25px;top:17px;width:18px;height:18px;cursor:pointer}.upload-icon{position:absolute;right:25px;top:45px;width:18px;height:18px;cursor:pointer}::ng-deep .ng-select .ng-select-container{width:101%;border-radius:7px}.form-control{font-size:14px;color:#6b7280}.role-selection-container{max-width:950px;margin:0 auto;min-height:300px;padding:2rem}.role-selection-container h2{margin-bottom:.5rem;font-size:1.5rem;font-weight:600}.role-selection-container .note{font-size:.875rem;color:#6b7280}.role-selection-container .note-label{font-size:.875rem;color:#6b7280;padding-left:5px}.role-selection-container .dropdown-wrapper{display:flex;gap:.5rem;margin-bottom:1rem}.role-selection-container .dropdown-wrapper select{flex:1;padding:.5rem;border:1px solid #d1d5db;border-radius:.375rem}.role-selection-container .dropdown-wrapper .add-btn{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border:none;border-radius:.375rem;cursor:pointer}.role-selection-container .dropdown-wrapper .add-btn:disabled{background-color:#d1d5db;cursor:not-allowed}.role-selection-container .selected-roles{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.role-selection-container .selected-roles .role-card{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-radius:.375rem;background-color:#fef3c7;color:#92400e}.role-selection-container .selected-roles .role-card .remove-btn{background:none;border:none;font-size:1.2rem;font-weight:700;cursor:pointer;color:#b91c1c}.role-selection-container .navigation-buttons{display:flex;justify-content:flex-end;gap:1rem;margin-top:70px;margin-bottom:50px}.role-selection-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.image-wrapper{position:relative;width:150px;height:150px}.resume-wrapper{position:relative;width:550px;height:1px}.spinner{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:163%;margin-top:-2px;margin-left:-7px;animation:spin 1s linear infinite}.spinner-resume{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:99%;margin-top:-51px;margin-left:-20px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.profile-field{margin-top:-10px}.profile-field input{line-height:30px}.producer-type-container{max-width:1000px;margin:0 auto;min-height:300px}.producer-type-container h2{font-size:1.5rem;font-weight:600;margin-bottom:.5rem}.producer-type-container p{font-size:.875rem;color:#6b7280;margin-bottom:1.5rem}.producer-type-container .job-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem}.producer-type-container .job-list .job-item{padding:.75rem 1rem;font-size:14px;border:1px solid #d1d5db;border-radius:.375rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s}.producer-type-container .job-list .job-item.selected{border-color:#4077ad;background-color:#eff6ff}.producer-type-container .job-list .job-item .plus{font-weight:700}.producer-type-container .navigation-buttons{display:flex;justify-content:flex-end;gap:.5rem;margin:50px 0}.producer-type-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer}.producer-type-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer}.producer-type-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.actions{display:flex;justify-content:space-between;margin:50px 88px 27px 174px}.right-actions{display:flex;gap:16px}button{height:44px;min-width:120px;border:none;font-size:14px;cursor:pointer;border-radius:5px}button.primary{background-color:#4077ad;color:#fff;border-radius:5px}button.secondary{background-color:#d5d6da;color:#525862;border-radius:5px}button:disabled{background-color:#9ca3af;cursor:not-allowed}::ng-deep .custom-ng-select.ng-select-multiple .ng-select-container{min-height:45px!important;height:auto!important;display:flex;align-items:center;overflow:visible!important}::ng-deep .custom-ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap!important;overflow:visible!important;padding-top:2px;padding-bottom:2px}::ng-deep .custom-ng-select.ng-select-multiple .ng-value{margin-bottom:4px}::ng-deep .custom-ng-select.ng-select-multiple .ng-arrow-wrapper{display:flex;align-items:center;height:100%}:host ::ng-deep .custom-ng-select .ng-select-container{padding:0!important;font-size:13px!important}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-top:3px;font-size:14px;color:#6b7280}::ng-deep .ng-select .ng-select-container{padding-top:3px;font-size:14px;color:#6b7280}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i10.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i10.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "directive", type: GooglePlaceDirective, selector: "[ngx-google-places-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }] });
|
|
5539
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: RoleSelectComponent, isStandalone: false, selector: "app-role-select", inputs: { roleData: "roleData", cloudfrontUrl: "cloudfrontUrl", providerId: "providerId", providerName: "providerName" }, outputs: { backToParent: "backToParent" }, ngImport: i0, template: "<div class=\"role-selection-container\">\r\n <h2>Basic Details</h2>\r\n <p class=\"note\">We need basic information and a headshot for your profile</p>\r\n <div class=\"profile-field\">\r\n <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n <div class=\"spinner-border\"></div>\r\n </div>\r\n <form *ngIf=\"isLoaded\" [formGroup]=\"userForm\" class=\"form pb-0\">\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2 mb-3\">First Name*</label>\r\n <input [ngClass]=\"{ 'is-invalid': u.firstName.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n type=\"text\" class=\"form-control\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n <div *ngIf=\" u.firstName.invalid &&\r\n (u.firstName.touched || u.firstName.dirty)\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n First Name is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2 mb-3\">Last Name*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\"\r\n [ngClass]=\"{\r\n 'is-invalid':\r\n u.lastName.invalid && (u.lastName.touched || u.lastName.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.lastName.invalid &&\r\n (u.lastName.touched || u.lastName.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.lastName.errors?.required\">\r\n Last Name is required\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Email*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.email.invalid && (u.email.touched || u.email.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.email.invalid &&\r\n (u.email.touched || u.email.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.email.errors?.required\">\r\n Email is required\r\n </div>\r\n <div class=\"ms-1\" *ngIf=\"u.email.errors?.email\">\r\n Please enter a valid email address\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Home Address 1*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\"\r\n ngx-google-places-autocomplete [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.address1.invalid && (u.address1.touched || u.address1.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.address1.invalid &&\r\n (u.address1.touched || u.address1.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n Home Address 1 is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">City*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.city.invalid && (u.city.touched || u.city.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.city.invalid &&\r\n (u.city.touched || u.city.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n City is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">State*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.state.invalid && (u.state.touched || u.state.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.state.invalid &&\r\n (u.state.touched || u.state.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n State is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n </div>\r\n <!-- <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n placeholder=\"Home Address 2\" />\r\n </div>\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.city.invalid && (u.city.touched || u.city.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.city.invalid &&\r\n (u.city.touched || u.city.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n City is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.state.invalid && (u.state.touched || u.state.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.state.invalid &&\r\n (u.state.touched || u.state.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n State is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div> -->\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Zip Code*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.zipcode.invalid && (u.zipcode.touched || u.zipcode.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.zipcode.invalid &&\r\n (u.zipcode.touched || u.zipcode.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.zipcode.errors?.required\">\r\n Zipcode is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Country*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n [ngClass]=\"{\r\n 'is-invalid':\r\n u.country.invalid && (u.country.touched || u.country.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.country.invalid &&\r\n (u.country.touched || u.country.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n Country is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Phone Number*</label>\r\n\r\n <input type=\"text\" class=\"form-control block shadow-none\" id=\"inputPhone\" name=\"inputPhone\"\r\n placeholder=\"Phone Number\" autocomplete=\"off\" formControlName=\"phoneNumber\" maxlength=\"14\"\r\n (input)=\"phoneMask($event)\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.phoneNumber.invalid &&\r\n (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.phoneNumber.invalid &&\r\n (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n Phone Number is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n <label class=\"note-label mb-2\">Years of experience*</label>\r\n\r\n <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n id=\"yearsOfExperince\"></ng-select>\r\n\r\n <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n YearsOfExperience is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group col-md-4 col-sm-12\r\n mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Job Title*</label>\r\n\r\n <ng-select class=\"w-100\" class=\"custom-ng-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n </ng-select>\r\n <div *ngIf=\" u.userJobTitle.invalid &&\r\n (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n Job title is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n <label class=\"note-label mb-2\">Profile image</label>\r\n\r\n <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\" class=\"d-none\" />\r\n <input [(ngModel)]=\"fileName\" readonly type=\"text\" class=\"form-control pe-5\"\r\n placeholder=\"Upload Profile Picture\" (click)=\"uploadFile.click()\" />\r\n <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Industry</label>\r\n\r\n <ng-select class=\"w-100 custom-ng-select\" formControlName=\"industries\" [items]=\"industries\" [multiple]=\"true\"\r\n [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\" [closeOnSelect]=\"false\"\r\n id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n\r\n <!-- Dropdown option -->\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <span class=\"form-check\">\r\n <span class=\"form-check-input-wrapper\">\r\n <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n </span>\r\n {{ item.industryName }}\r\n </span>\r\n </ng-template>\r\n\r\n <!-- Selected label -->\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n </span>\r\n </ng-template>\r\n <div *ngIf=\"u.industries.invalid &&\r\n (u.industries.touched || u.industries.dirty)\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.industries.errors.required\">\r\n Industry is required\r\n </div>\r\n </div>\r\n </ng-select>\r\n </div>\r\n <div class=\"form-group col-sm-12 col-md-4\">\r\n <div class=\"image-wrapper\">\r\n <!-- Spinner -->\r\n <div *ngIf=\"isImageLoading\" class=\"spinner\"></div>\r\n <!-- Image -->\r\n <div *ngIf=\"previewUrl\">\r\n <img [src]=\"previewUrl\" class=\"preview-image mt-2\" (load)=\"onImageLoad()\" />\r\n </div>\r\n\r\n </div>\r\n <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n <div>{{ userError }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Resume Submission</h2>\r\n <p class=\"note mb-2\">Submit your resume here</p>\r\n <div class=\"col-sm-12 col-md-8\">\r\n <div class=\"form-group mb-2 position-relative\">\r\n <input #fileInput type=\"file\" accept=\"/*\" (change)=\"selectFile($event)\" class=\"d-none\" />\r\n <input [(ngModel)]=\"resumeName\" readonly type=\"text\" class=\"form-control pe-5\"\r\n placeholder=\"Upload Resume Here\" (click)=\"fileInput.click()\" />\r\n\r\n <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon-resume\"\r\n (click)=\"fileInput.click()\" />\r\n <div *ngIf=\"isResumeRequired\" class=\"invalid-feedback d-block ms-1\">\r\n Upload your resume\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"col-sm-12 col-md-8\" style=\"padding-left: 15px;\">\r\n <div class=\"resume-wrapper\">\r\n <div *ngIf=\"isresumeLoading\" class=\"spinner-resume\"></div>\r\n\r\n <a *ngIf=\"list\" [href]=\"list.fileUrl\" class=\"mt-2\" target=\"_blank\">\r\n <span>{{ list.fileName }}</span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n <div>{{ userError }}</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n <div>\r\n {{userError}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<!-- \r\n<div class=\"producer-type-container\">\r\n <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Type of jobs</h2>\r\n <p class=\"notes\">What type of job are you interested in</p>\r\n <div class=\"job-list\">\r\n <div class=\"job-item\" *ngFor=\"let job of jobTypes\" [class.selected]=\"isSelected(job)\" (click)=\"toggleJob(job)\">\r\n <span class=\"plus\">+</span> {{ job.text }}\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"onBackClick()\">Back</button>\r\n <div class=\"right-actions\">\r\n\r\n <button type=\"button\" class=\"primary\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" (click)=\"saveFinal()\">\r\n Continue\r\n </button>\r\n </div>\r\n</div> -->\r\n\r\n\r\n<div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"onBackClick()\">Back</button>\r\n <div class=\"right-actions\">\r\n\r\n <button type=\"button\" class=\"primary\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" (click)=\"saveFinal()\">\r\n Continue\r\n </button>\r\n </div>\r\n</div>", styles: [".preview-image{width:250px;height:100px;object-fit:contain;margin-top:5px;border-radius:5px}.upload-icon-resume{position:absolute;right:25px;top:17px;width:18px;height:18px;cursor:pointer}.upload-icon{position:absolute;right:25px;top:45px;width:18px;height:18px;cursor:pointer}::ng-deep .ng-select .ng-select-container{width:101%;border-radius:7px}.form-control{font-size:14px;color:#6b7280}.role-selection-container{max-width:950px;margin:0 auto;min-height:300px;padding:2rem}.role-selection-container h2{margin-bottom:.5rem;font-size:1.5rem;font-weight:600}.role-selection-container .note{font-size:.875rem;color:#6b7280}.role-selection-container .note-label{font-size:.875rem;color:#6b7280;padding-left:5px}.role-selection-container .dropdown-wrapper{display:flex;gap:.5rem;margin-bottom:1rem}.role-selection-container .dropdown-wrapper select{flex:1;padding:.5rem;border:1px solid #d1d5db;border-radius:.375rem}.role-selection-container .dropdown-wrapper .add-btn{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border:none;border-radius:.375rem;cursor:pointer}.role-selection-container .dropdown-wrapper .add-btn:disabled{background-color:#d1d5db;cursor:not-allowed}.role-selection-container .selected-roles{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.role-selection-container .selected-roles .role-card{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-radius:.375rem;background-color:#fef3c7;color:#92400e}.role-selection-container .selected-roles .role-card .remove-btn{background:none;border:none;font-size:1.2rem;font-weight:700;cursor:pointer;color:#b91c1c}.role-selection-container .navigation-buttons{display:flex;justify-content:flex-end;gap:1rem;margin-top:70px;margin-bottom:50px}.role-selection-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.image-wrapper{position:relative;width:150px;height:150px}.resume-wrapper{position:relative;width:550px;height:1px}.spinner{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:163%;margin-top:-2px;margin-left:-7px;animation:spin 1s linear infinite}.spinner-resume{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:99%;margin-top:-51px;margin-left:-20px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.profile-field{margin-top:-10px}.profile-field input{line-height:30px}.producer-type-container{max-width:1000px;margin:0 auto;min-height:300px}.producer-type-container h2{font-size:1.5rem;font-weight:600;margin-bottom:.5rem}.producer-type-container p{font-size:.875rem;color:#6b7280;margin-bottom:1.5rem}.producer-type-container .job-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem}.producer-type-container .job-list .job-item{padding:.75rem 1rem;font-size:14px;border:1px solid #d1d5db;border-radius:.375rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s}.producer-type-container .job-list .job-item.selected{border-color:#4077ad;background-color:#eff6ff}.producer-type-container .job-list .job-item .plus{font-weight:700}.producer-type-container .navigation-buttons{display:flex;justify-content:flex-end;gap:.5rem;margin:50px 0}.producer-type-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer}.producer-type-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer}.producer-type-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.actions{display:flex;justify-content:space-between;margin:50px 88px 27px 174px}.right-actions{display:flex;gap:16px}button{height:44px;min-width:120px;border:none;font-size:14px;cursor:pointer;border-radius:5px}button.primary{background-color:#4077ad;color:#fff;border-radius:5px}button.secondary{background-color:#d5d6da;color:#525862;border-radius:5px}button:disabled{background-color:#9ca3af;cursor:not-allowed}::ng-deep .custom-ng-select.ng-select-multiple .ng-select-container{min-height:45px!important;height:auto!important;display:flex;align-items:center;overflow:visible!important}::ng-deep .custom-ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap!important;overflow:visible!important;padding-top:2px;padding-bottom:2px}::ng-deep .custom-ng-select.ng-select-multiple .ng-value{margin-bottom:4px}::ng-deep .custom-ng-select.ng-select-multiple .ng-arrow-wrapper{display:flex;align-items:center;height:100%}:host ::ng-deep .custom-ng-select .ng-select-container{padding:0!important;font-size:13px!important}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-top:3px;font-size:14px;color:#6b7280}::ng-deep .ng-select .ng-select-container{padding-top:3px;font-size:14px;color:#6b7280}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i10.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i10.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "directive", type: GooglePlaceDirective, selector: "[ngx-google-places-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }] });
|
|
5538
5540
|
}
|
|
5539
5541
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RoleSelectComponent, decorators: [{
|
|
5540
5542
|
type: Component,
|
|
5541
|
-
args: [{ selector: 'app-role-select', standalone: false, template: "<div class=\"role-selection-container\">\r\n <h2>Basic Details</h2>\r\n <p class=\"note\">We need basic information and a headshot for your profile</p>\r\n <div class=\"profile-field\">\r\n <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n <div class=\"spinner-border\"></div>\r\n </div>\r\n <form *ngIf=\"isLoaded\" [formGroup]=\"userForm\" class=\"form pb-0\">\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2 mb-3\">First Name*</label>\r\n <input [ngClass]=\"{ 'is-invalid': u.firstName.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n type=\"text\" class=\"form-control\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n <div *ngIf=\" u.firstName.invalid &&\r\n (u.firstName.touched || u.firstName.dirty)\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n First Name is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2 mb-3\">Last Name*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\"\r\n [ngClass]=\"{\r\n 'is-invalid':\r\n u.lastName.invalid && (u.lastName.touched || u.lastName.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.lastName.invalid &&\r\n (u.lastName.touched || u.lastName.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.lastName.errors?.required\">\r\n Last Name is required\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Email*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.email.invalid && (u.email.touched || u.email.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.email.invalid &&\r\n (u.email.touched || u.email.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.email.errors?.required\">\r\n Email is required\r\n </div>\r\n <div class=\"ms-1\" *ngIf=\"u.email.errors?.email\">\r\n Please enter a valid email address\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Home Address 1*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\"\r\n ngx-google-places-autocomplete [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.address1.invalid && (u.address1.touched || u.address1.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.address1.invalid &&\r\n (u.address1.touched || u.address1.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n Home Address 1 is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Zip Code*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.zipcode.invalid && (u.zipcode.touched || u.zipcode.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.zipcode.invalid &&\r\n (u.zipcode.touched || u.zipcode.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.zipcode.errors?.required\">\r\n Zipcode is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Country*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n [ngClass]=\"{\r\n 'is-invalid':\r\n u.country.invalid && (u.country.touched || u.country.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.country.invalid &&\r\n (u.country.touched || u.country.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n Country is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <!-- <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n placeholder=\"Home Address 2\" />\r\n </div>\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.city.invalid && (u.city.touched || u.city.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.city.invalid &&\r\n (u.city.touched || u.city.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n City is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.state.invalid && (u.state.touched || u.state.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.state.invalid &&\r\n (u.state.touched || u.state.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n State is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div> -->\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Phone Number*</label>\r\n\r\n <input type=\"text\" class=\"form-control block shadow-none\" id=\"inputPhone\" name=\"inputPhone\"\r\n placeholder=\"Phone Number\" autocomplete=\"off\" formControlName=\"phoneNumber\" maxlength=\"14\"\r\n (input)=\"phoneMask($event)\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.phoneNumber.invalid &&\r\n (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.phoneNumber.invalid &&\r\n (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n Phone Number is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n <label class=\"note-label mb-2\">Years of experience*</label>\r\n\r\n <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n id=\"yearsOfExperince\"></ng-select>\r\n\r\n <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n YearsOfExperience is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n <label class=\"note-label mb-2\">Profile image*</label>\r\n\r\n <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\" class=\"d-none\" />\r\n <input [(ngModel)]=\"fileName\" readonly type=\"text\" class=\"form-control pe-5\"\r\n placeholder=\"Upload Profile Picture\" (click)=\"uploadFile.click()\" />\r\n <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12\r\n mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Job Title*</label>\r\n\r\n <ng-select class=\"w-100\" class=\"custom-ng-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n </ng-select>\r\n <div *ngIf=\" u.userJobTitle.invalid &&\r\n (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n Job title is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Industry*</label>\r\n\r\n <ng-select class=\"w-100 custom-ng-select\" formControlName=\"industries\" [items]=\"industries\" [multiple]=\"true\"\r\n [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\" [closeOnSelect]=\"false\"\r\n id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n\r\n <!-- Dropdown option -->\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <span class=\"form-check\">\r\n <span class=\"form-check-input-wrapper\">\r\n <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n </span>\r\n {{ item.industryName }}\r\n </span>\r\n </ng-template>\r\n\r\n <!-- Selected label -->\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n </span>\r\n </ng-template>\r\n <div *ngIf=\"u.industries.invalid &&\r\n (u.industries.touched || u.industries.dirty)\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.industries.errors.required\">\r\n Industry is required\r\n </div>\r\n </div>\r\n </ng-select>\r\n </div>\r\n <div class=\"form-group col-sm-12 col-md-4\">\r\n <div class=\"image-wrapper\">\r\n <!-- Spinner -->\r\n <div *ngIf=\"isImageLoading\" class=\"spinner\"></div>\r\n <!-- Image -->\r\n <img *ngIf=\"previewUrl\" [src]=\"previewUrl\" alt=\"Profile Preview\" class=\"preview-image mt-2\"\r\n (load)=\"onImageLoad()\" />\r\n </div>\r\n <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n <div>{{ userError }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Resume Submission</h2>\r\n <p class=\"note mb-2\">Submit your resume here</p>\r\n <div class=\"col-sm-12 col-md-8\">\r\n <div class=\"form-group mb-2 position-relative\">\r\n <input #fileInput type=\"file\" accept=\"/*\" (change)=\"selectFile($event)\" class=\"d-none\" />\r\n <input [(ngModel)]=\"resumeName\" readonly type=\"text\" class=\"form-control pe-5\"\r\n placeholder=\"Upload Resume Here\" (click)=\"fileInput.click()\" />\r\n\r\n <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon-resume\"\r\n (click)=\"fileInput.click()\" />\r\n <div *ngIf=\"isResumeRequired\" class=\"invalid-feedback d-block ms-1\">\r\n Upload your resume\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"col-sm-12 col-md-8\" style=\"padding-left: 15px;\">\r\n <div class=\"resume-wrapper\">\r\n <div *ngIf=\"isresumeLoading\" class=\"spinner-resume\"></div>\r\n <a *ngIf=\"list\" [href]=\"list.fileUrl\" class=\"mt-2\" target=\"_blank\">\r\n <span>{{ list.fileName }}</span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n <div>{{ userError }}</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n <div>\r\n {{userError}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<!-- \r\n<div class=\"producer-type-container\">\r\n <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Type of jobs</h2>\r\n <p class=\"notes\">What type of job are you interested in</p>\r\n <div class=\"job-list\">\r\n <div class=\"job-item\" *ngFor=\"let job of jobTypes\" [class.selected]=\"isSelected(job)\" (click)=\"toggleJob(job)\">\r\n <span class=\"plus\">+</span> {{ job.text }}\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"onBackClick()\">Back</button>\r\n <div class=\"right-actions\">\r\n\r\n <button type=\"button\" class=\"primary\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" (click)=\"saveFinal()\">\r\n Continue\r\n </button>\r\n </div>\r\n</div> -->\r\n\r\n\r\n<div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"onBackClick()\">Back</button>\r\n <div class=\"right-actions\">\r\n\r\n <button type=\"button\" class=\"primary\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" (click)=\"saveFinal()\">\r\n Continue\r\n </button>\r\n </div>\r\n</div>", styles: [".preview-image{width:250px;height:100px;object-fit:contain;margin-top:5px;border-radius:5px}.upload-icon-resume{position:absolute;right:25px;top:17px;width:18px;height:18px;cursor:pointer}.upload-icon{position:absolute;right:25px;top:45px;width:18px;height:18px;cursor:pointer}::ng-deep .ng-select .ng-select-container{width:101%;border-radius:7px}.form-control{font-size:14px;color:#6b7280}.role-selection-container{max-width:950px;margin:0 auto;min-height:300px;padding:2rem}.role-selection-container h2{margin-bottom:.5rem;font-size:1.5rem;font-weight:600}.role-selection-container .note{font-size:.875rem;color:#6b7280}.role-selection-container .note-label{font-size:.875rem;color:#6b7280;padding-left:5px}.role-selection-container .dropdown-wrapper{display:flex;gap:.5rem;margin-bottom:1rem}.role-selection-container .dropdown-wrapper select{flex:1;padding:.5rem;border:1px solid #d1d5db;border-radius:.375rem}.role-selection-container .dropdown-wrapper .add-btn{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border:none;border-radius:.375rem;cursor:pointer}.role-selection-container .dropdown-wrapper .add-btn:disabled{background-color:#d1d5db;cursor:not-allowed}.role-selection-container .selected-roles{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.role-selection-container .selected-roles .role-card{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-radius:.375rem;background-color:#fef3c7;color:#92400e}.role-selection-container .selected-roles .role-card .remove-btn{background:none;border:none;font-size:1.2rem;font-weight:700;cursor:pointer;color:#b91c1c}.role-selection-container .navigation-buttons{display:flex;justify-content:flex-end;gap:1rem;margin-top:70px;margin-bottom:50px}.role-selection-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.image-wrapper{position:relative;width:150px;height:150px}.resume-wrapper{position:relative;width:550px;height:1px}.spinner{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:163%;margin-top:-2px;margin-left:-7px;animation:spin 1s linear infinite}.spinner-resume{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:99%;margin-top:-51px;margin-left:-20px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.profile-field{margin-top:-10px}.profile-field input{line-height:30px}.producer-type-container{max-width:1000px;margin:0 auto;min-height:300px}.producer-type-container h2{font-size:1.5rem;font-weight:600;margin-bottom:.5rem}.producer-type-container p{font-size:.875rem;color:#6b7280;margin-bottom:1.5rem}.producer-type-container .job-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem}.producer-type-container .job-list .job-item{padding:.75rem 1rem;font-size:14px;border:1px solid #d1d5db;border-radius:.375rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s}.producer-type-container .job-list .job-item.selected{border-color:#4077ad;background-color:#eff6ff}.producer-type-container .job-list .job-item .plus{font-weight:700}.producer-type-container .navigation-buttons{display:flex;justify-content:flex-end;gap:.5rem;margin:50px 0}.producer-type-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer}.producer-type-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer}.producer-type-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.actions{display:flex;justify-content:space-between;margin:50px 88px 27px 174px}.right-actions{display:flex;gap:16px}button{height:44px;min-width:120px;border:none;font-size:14px;cursor:pointer;border-radius:5px}button.primary{background-color:#4077ad;color:#fff;border-radius:5px}button.secondary{background-color:#d5d6da;color:#525862;border-radius:5px}button:disabled{background-color:#9ca3af;cursor:not-allowed}::ng-deep .custom-ng-select.ng-select-multiple .ng-select-container{min-height:45px!important;height:auto!important;display:flex;align-items:center;overflow:visible!important}::ng-deep .custom-ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap!important;overflow:visible!important;padding-top:2px;padding-bottom:2px}::ng-deep .custom-ng-select.ng-select-multiple .ng-value{margin-bottom:4px}::ng-deep .custom-ng-select.ng-select-multiple .ng-arrow-wrapper{display:flex;align-items:center;height:100%}:host ::ng-deep .custom-ng-select .ng-select-container{padding:0!important;font-size:13px!important}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-top:3px;font-size:14px;color:#6b7280}::ng-deep .ng-select .ng-select-container{padding-top:3px;font-size:14px;color:#6b7280}\n"] }]
|
|
5543
|
+
args: [{ selector: 'app-role-select', standalone: false, template: "<div class=\"role-selection-container\">\r\n <h2>Basic Details</h2>\r\n <p class=\"note\">We need basic information and a headshot for your profile</p>\r\n <div class=\"profile-field\">\r\n <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n <div class=\"spinner-border\"></div>\r\n </div>\r\n <form *ngIf=\"isLoaded\" [formGroup]=\"userForm\" class=\"form pb-0\">\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2 mb-3\">First Name*</label>\r\n <input [ngClass]=\"{ 'is-invalid': u.firstName.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n type=\"text\" class=\"form-control\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n <div *ngIf=\" u.firstName.invalid &&\r\n (u.firstName.touched || u.firstName.dirty)\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n First Name is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2 mb-3\">Last Name*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\"\r\n [ngClass]=\"{\r\n 'is-invalid':\r\n u.lastName.invalid && (u.lastName.touched || u.lastName.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.lastName.invalid &&\r\n (u.lastName.touched || u.lastName.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.lastName.errors?.required\">\r\n Last Name is required\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Email*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.email.invalid && (u.email.touched || u.email.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.email.invalid &&\r\n (u.email.touched || u.email.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.email.errors?.required\">\r\n Email is required\r\n </div>\r\n <div class=\"ms-1\" *ngIf=\"u.email.errors?.email\">\r\n Please enter a valid email address\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Home Address 1*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\"\r\n ngx-google-places-autocomplete [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.address1.invalid && (u.address1.touched || u.address1.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.address1.invalid &&\r\n (u.address1.touched || u.address1.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n Home Address 1 is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">City*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.city.invalid && (u.city.touched || u.city.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.city.invalid &&\r\n (u.city.touched || u.city.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n City is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">State*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.state.invalid && (u.state.touched || u.state.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.state.invalid &&\r\n (u.state.touched || u.state.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n State is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n </div>\r\n <!-- <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n placeholder=\"Home Address 2\" />\r\n </div>\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.city.invalid && (u.city.touched || u.city.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.city.invalid &&\r\n (u.city.touched || u.city.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n City is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.state.invalid && (u.state.touched || u.state.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.state.invalid &&\r\n (u.state.touched || u.state.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n State is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div> -->\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Zip Code*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.zipcode.invalid && (u.zipcode.touched || u.zipcode.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.zipcode.invalid &&\r\n (u.zipcode.touched || u.zipcode.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.zipcode.errors?.required\">\r\n Zipcode is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Country*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n [ngClass]=\"{\r\n 'is-invalid':\r\n u.country.invalid && (u.country.touched || u.country.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.country.invalid &&\r\n (u.country.touched || u.country.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n Country is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Phone Number*</label>\r\n\r\n <input type=\"text\" class=\"form-control block shadow-none\" id=\"inputPhone\" name=\"inputPhone\"\r\n placeholder=\"Phone Number\" autocomplete=\"off\" formControlName=\"phoneNumber\" maxlength=\"14\"\r\n (input)=\"phoneMask($event)\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.phoneNumber.invalid &&\r\n (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.phoneNumber.invalid &&\r\n (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n Phone Number is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n <label class=\"note-label mb-2\">Years of experience*</label>\r\n\r\n <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n id=\"yearsOfExperince\"></ng-select>\r\n\r\n <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n YearsOfExperience is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group col-md-4 col-sm-12\r\n mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Job Title*</label>\r\n\r\n <ng-select class=\"w-100\" class=\"custom-ng-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n </ng-select>\r\n <div *ngIf=\" u.userJobTitle.invalid &&\r\n (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n Job title is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n <label class=\"note-label mb-2\">Profile image</label>\r\n\r\n <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\" class=\"d-none\" />\r\n <input [(ngModel)]=\"fileName\" readonly type=\"text\" class=\"form-control pe-5\"\r\n placeholder=\"Upload Profile Picture\" (click)=\"uploadFile.click()\" />\r\n <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Industry</label>\r\n\r\n <ng-select class=\"w-100 custom-ng-select\" formControlName=\"industries\" [items]=\"industries\" [multiple]=\"true\"\r\n [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\" [closeOnSelect]=\"false\"\r\n id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n\r\n <!-- Dropdown option -->\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <span class=\"form-check\">\r\n <span class=\"form-check-input-wrapper\">\r\n <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n </span>\r\n {{ item.industryName }}\r\n </span>\r\n </ng-template>\r\n\r\n <!-- Selected label -->\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n </span>\r\n </ng-template>\r\n <div *ngIf=\"u.industries.invalid &&\r\n (u.industries.touched || u.industries.dirty)\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.industries.errors.required\">\r\n Industry is required\r\n </div>\r\n </div>\r\n </ng-select>\r\n </div>\r\n <div class=\"form-group col-sm-12 col-md-4\">\r\n <div class=\"image-wrapper\">\r\n <!-- Spinner -->\r\n <div *ngIf=\"isImageLoading\" class=\"spinner\"></div>\r\n <!-- Image -->\r\n <div *ngIf=\"previewUrl\">\r\n <img [src]=\"previewUrl\" class=\"preview-image mt-2\" (load)=\"onImageLoad()\" />\r\n </div>\r\n\r\n </div>\r\n <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n <div>{{ userError }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Resume Submission</h2>\r\n <p class=\"note mb-2\">Submit your resume here</p>\r\n <div class=\"col-sm-12 col-md-8\">\r\n <div class=\"form-group mb-2 position-relative\">\r\n <input #fileInput type=\"file\" accept=\"/*\" (change)=\"selectFile($event)\" class=\"d-none\" />\r\n <input [(ngModel)]=\"resumeName\" readonly type=\"text\" class=\"form-control pe-5\"\r\n placeholder=\"Upload Resume Here\" (click)=\"fileInput.click()\" />\r\n\r\n <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon-resume\"\r\n (click)=\"fileInput.click()\" />\r\n <div *ngIf=\"isResumeRequired\" class=\"invalid-feedback d-block ms-1\">\r\n Upload your resume\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"col-sm-12 col-md-8\" style=\"padding-left: 15px;\">\r\n <div class=\"resume-wrapper\">\r\n <div *ngIf=\"isresumeLoading\" class=\"spinner-resume\"></div>\r\n\r\n <a *ngIf=\"list\" [href]=\"list.fileUrl\" class=\"mt-2\" target=\"_blank\">\r\n <span>{{ list.fileName }}</span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n <div>{{ userError }}</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n <div>\r\n {{userError}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<!-- \r\n<div class=\"producer-type-container\">\r\n <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Type of jobs</h2>\r\n <p class=\"notes\">What type of job are you interested in</p>\r\n <div class=\"job-list\">\r\n <div class=\"job-item\" *ngFor=\"let job of jobTypes\" [class.selected]=\"isSelected(job)\" (click)=\"toggleJob(job)\">\r\n <span class=\"plus\">+</span> {{ job.text }}\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"onBackClick()\">Back</button>\r\n <div class=\"right-actions\">\r\n\r\n <button type=\"button\" class=\"primary\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" (click)=\"saveFinal()\">\r\n Continue\r\n </button>\r\n </div>\r\n</div> -->\r\n\r\n\r\n<div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"onBackClick()\">Back</button>\r\n <div class=\"right-actions\">\r\n\r\n <button type=\"button\" class=\"primary\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" (click)=\"saveFinal()\">\r\n Continue\r\n </button>\r\n </div>\r\n</div>", styles: [".preview-image{width:250px;height:100px;object-fit:contain;margin-top:5px;border-radius:5px}.upload-icon-resume{position:absolute;right:25px;top:17px;width:18px;height:18px;cursor:pointer}.upload-icon{position:absolute;right:25px;top:45px;width:18px;height:18px;cursor:pointer}::ng-deep .ng-select .ng-select-container{width:101%;border-radius:7px}.form-control{font-size:14px;color:#6b7280}.role-selection-container{max-width:950px;margin:0 auto;min-height:300px;padding:2rem}.role-selection-container h2{margin-bottom:.5rem;font-size:1.5rem;font-weight:600}.role-selection-container .note{font-size:.875rem;color:#6b7280}.role-selection-container .note-label{font-size:.875rem;color:#6b7280;padding-left:5px}.role-selection-container .dropdown-wrapper{display:flex;gap:.5rem;margin-bottom:1rem}.role-selection-container .dropdown-wrapper select{flex:1;padding:.5rem;border:1px solid #d1d5db;border-radius:.375rem}.role-selection-container .dropdown-wrapper .add-btn{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border:none;border-radius:.375rem;cursor:pointer}.role-selection-container .dropdown-wrapper .add-btn:disabled{background-color:#d1d5db;cursor:not-allowed}.role-selection-container .selected-roles{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.role-selection-container .selected-roles .role-card{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-radius:.375rem;background-color:#fef3c7;color:#92400e}.role-selection-container .selected-roles .role-card .remove-btn{background:none;border:none;font-size:1.2rem;font-weight:700;cursor:pointer;color:#b91c1c}.role-selection-container .navigation-buttons{display:flex;justify-content:flex-end;gap:1rem;margin-top:70px;margin-bottom:50px}.role-selection-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.image-wrapper{position:relative;width:150px;height:150px}.resume-wrapper{position:relative;width:550px;height:1px}.spinner{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:163%;margin-top:-2px;margin-left:-7px;animation:spin 1s linear infinite}.spinner-resume{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:99%;margin-top:-51px;margin-left:-20px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.profile-field{margin-top:-10px}.profile-field input{line-height:30px}.producer-type-container{max-width:1000px;margin:0 auto;min-height:300px}.producer-type-container h2{font-size:1.5rem;font-weight:600;margin-bottom:.5rem}.producer-type-container p{font-size:.875rem;color:#6b7280;margin-bottom:1.5rem}.producer-type-container .job-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem}.producer-type-container .job-list .job-item{padding:.75rem 1rem;font-size:14px;border:1px solid #d1d5db;border-radius:.375rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s}.producer-type-container .job-list .job-item.selected{border-color:#4077ad;background-color:#eff6ff}.producer-type-container .job-list .job-item .plus{font-weight:700}.producer-type-container .navigation-buttons{display:flex;justify-content:flex-end;gap:.5rem;margin:50px 0}.producer-type-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer}.producer-type-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer}.producer-type-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.actions{display:flex;justify-content:space-between;margin:50px 88px 27px 174px}.right-actions{display:flex;gap:16px}button{height:44px;min-width:120px;border:none;font-size:14px;cursor:pointer;border-radius:5px}button.primary{background-color:#4077ad;color:#fff;border-radius:5px}button.secondary{background-color:#d5d6da;color:#525862;border-radius:5px}button:disabled{background-color:#9ca3af;cursor:not-allowed}::ng-deep .custom-ng-select.ng-select-multiple .ng-select-container{min-height:45px!important;height:auto!important;display:flex;align-items:center;overflow:visible!important}::ng-deep .custom-ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap!important;overflow:visible!important;padding-top:2px;padding-bottom:2px}::ng-deep .custom-ng-select.ng-select-multiple .ng-value{margin-bottom:4px}::ng-deep .custom-ng-select.ng-select-multiple .ng-arrow-wrapper{display:flex;align-items:center;height:100%}:host ::ng-deep .custom-ng-select .ng-select-container{padding:0!important;font-size:13px!important}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-top:3px;font-size:14px;color:#6b7280}::ng-deep .ng-select .ng-select-container{padding-top:3px;font-size:14px;color:#6b7280}\n"] }]
|
|
5542
5544
|
}], ctorParameters: () => [{ type: CredentialingStore }, { type: UserDocumentService }, { type: i2.Router }, { type: IndustryService }, { type: UserDetailService }, { type: FileService }, { type: ProvidersService }, { type: i6.TokenService }, { type: i3.FormBuilder }], propDecorators: { backToParent: [{
|
|
5543
5545
|
type: Output
|
|
5544
5546
|
}], roleData: [{
|
|
@@ -28240,6 +28242,7 @@ class WorkexperienceComponent {
|
|
|
28240
28242
|
fileService;
|
|
28241
28243
|
http;
|
|
28242
28244
|
providerId;
|
|
28245
|
+
maxDate = new Date();
|
|
28243
28246
|
providerName;
|
|
28244
28247
|
cloudfrontUrl;
|
|
28245
28248
|
uploadToAws = true;
|
|
@@ -28498,11 +28501,11 @@ class WorkexperienceComponent {
|
|
|
28498
28501
|
this.store.nextStep();
|
|
28499
28502
|
}
|
|
28500
28503
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WorkexperienceComponent, deps: [{ token: UserExperienceService }, { token: WorkExperienceStore }, { token: CredentialingStore }, { token: CountryServices }, { token: PostalCodeServices }, { token: i6.TokenService }, { token: i3.FormBuilder }, { token: FileService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
|
|
28501
|
-
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\r\n [bsConfig]=\"{ adaptivePosition: true, isAnimated: true, showWeekNumbers: false,\r\n customTodayClass: !workexperienceForm.get('fromDate')?.value ? 'today-highlight' : '' }\" 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 [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 class=\"upload-title\">Upload</p>\r\n <p class=\"upload-subtitle\">Add documents below</p>\r\n <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Documents\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n Selected: {{ fileName }}\r\n </p>\r\n </div>\r\n </div>\r\n <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=\"secondary\" (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\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\" style=\"margin-left: 380px;\">\r\n <h3>Work Experiences 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\r\n <!-- HEADER (preview) -->\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#edu_' + i\">\r\n\r\n <!-- LEFT : TITLE -->\r\n <span class=\"accordion-title\">\r\n {{ exp.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\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n\r\n <!-- GRID DATA (2 or 3 columns) -->\r\n <div class=\"detail-grid\">\r\n <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:'yyyy/MM/dd' }}</span>\r\n </div>\r\n <div>\r\n <strong>To Date</strong><br />\r\n <span class=\"job-title\">{{ exp.toDate | date:'yyyy/MM/dd' }}</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]=\"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=\"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\" (click)=\"add()\" style=\"background-color: #1f4d5f;width: 200px;\">\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{width:100%;height:44px;padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;height:45px}::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;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;margin-top:25px}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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i10.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i10.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i11.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i11.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
|
|
28504
|
+
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' : '' }\" 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 [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 class=\"upload-title\">Upload</p>\r\n <p class=\"upload-subtitle\">Add documents below</p>\r\n <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Documents\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n Selected: {{ fileName }}\r\n </p>\r\n </div>\r\n </div>\r\n <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=\"secondary\" (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\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\" style=\"margin-left: 380px;\">\r\n <h3>Work Experiences 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\r\n <!-- HEADER (preview) -->\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#edu_' + i\">\r\n\r\n <!-- LEFT : TITLE -->\r\n <span class=\"accordion-title\">\r\n {{ exp.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\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n\r\n <!-- GRID DATA (2 or 3 columns) -->\r\n <div class=\"detail-grid\">\r\n <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]=\"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=\"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\" (click)=\"add()\" style=\"background-color: #1f4d5f;width: 200px;\">\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{width:100%;height:44px;padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;height:45px}::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;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;margin-top:25px}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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i10.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i10.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i11.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i11.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
|
|
28502
28505
|
}
|
|
28503
28506
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WorkexperienceComponent, decorators: [{
|
|
28504
28507
|
type: Component,
|
|
28505
|
-
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\r\n [bsConfig]=\"{ adaptivePosition: true, isAnimated: true, showWeekNumbers: false,\r\n customTodayClass: !workexperienceForm.get('fromDate')?.value ? 'today-highlight' : '' }\" 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 [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 class=\"upload-title\">Upload</p>\r\n <p class=\"upload-subtitle\">Add documents below</p>\r\n <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Documents\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n Selected: {{ fileName }}\r\n </p>\r\n </div>\r\n </div>\r\n <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=\"secondary\" (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\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\" style=\"margin-left: 380px;\">\r\n <h3>Work Experiences 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\r\n <!-- HEADER (preview) -->\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#edu_' + i\">\r\n\r\n <!-- LEFT : TITLE -->\r\n <span class=\"accordion-title\">\r\n {{ exp.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\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n\r\n <!-- GRID DATA (2 or 3 columns) -->\r\n <div class=\"detail-grid\">\r\n <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:'yyyy/MM/dd' }}</span>\r\n </div>\r\n <div>\r\n <strong>To Date</strong><br />\r\n <span class=\"job-title\">{{ exp.toDate | date:'yyyy/MM/dd' }}</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]=\"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=\"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\" (click)=\"add()\" style=\"background-color: #1f4d5f;width: 200px;\">\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{width:100%;height:44px;padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;height:45px}::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;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;margin-top:25px}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}\n"] }]
|
|
28508
|
+
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' : '' }\" 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 [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 class=\"upload-title\">Upload</p>\r\n <p class=\"upload-subtitle\">Add documents below</p>\r\n <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Documents\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n Selected: {{ fileName }}\r\n </p>\r\n </div>\r\n </div>\r\n <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=\"secondary\" (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\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\" style=\"margin-left: 380px;\">\r\n <h3>Work Experiences 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\r\n <!-- HEADER (preview) -->\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#edu_' + i\">\r\n\r\n <!-- LEFT : TITLE -->\r\n <span class=\"accordion-title\">\r\n {{ exp.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\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n\r\n <!-- GRID DATA (2 or 3 columns) -->\r\n <div class=\"detail-grid\">\r\n <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]=\"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=\"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\" (click)=\"add()\" style=\"background-color: #1f4d5f;width: 200px;\">\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{width:100%;height:44px;padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;height:45px}::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;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;margin-top:25px}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}\n"] }]
|
|
28506
28509
|
}], ctorParameters: () => [{ type: UserExperienceService }, { type: WorkExperienceStore }, { type: CredentialingStore }, { type: CountryServices }, { type: PostalCodeServices }, { type: i6.TokenService }, { type: i3.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
|
|
28507
28510
|
type: Input
|
|
28508
28511
|
}], providerName: [{
|