@idsoftsource/initial-process 0.1.1 → 0.1.3
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.
|
@@ -2106,6 +2106,7 @@ class EducationComponent {
|
|
|
2106
2106
|
educationForm;
|
|
2107
2107
|
providerId;
|
|
2108
2108
|
providerName;
|
|
2109
|
+
cloudfrontUrl;
|
|
2109
2110
|
editingIndex = -1;
|
|
2110
2111
|
isEditing = signal(false, ...(ngDevMode ? [{ debugName: "isEditing" }] : []));
|
|
2111
2112
|
fileData = null;
|
|
@@ -2236,6 +2237,8 @@ class EducationComponent {
|
|
|
2236
2237
|
encrypted: true,
|
|
2237
2238
|
publicUrl: result.publicUrl
|
|
2238
2239
|
};
|
|
2240
|
+
files.fileLocation = files.fileLocation.replace(/^https?:\/\/[^/]+\//, '');
|
|
2241
|
+
files.publicUrl = files.publicUrl.replace(/^https?:\/\/[^/]+\//, '');
|
|
2239
2242
|
console.log(files);
|
|
2240
2243
|
this.fileService.awsFileUpload([files]).subscribe((res) => {
|
|
2241
2244
|
if (res?.[0]?.fileId) {
|
|
@@ -2276,7 +2279,7 @@ class EducationComponent {
|
|
|
2276
2279
|
comments: fullValue.comments,
|
|
2277
2280
|
reviewComments: "N/A",
|
|
2278
2281
|
fileId: this.model?.fileId || null,
|
|
2279
|
-
fileUrl: this.model?.fileUrl || null,
|
|
2282
|
+
fileUrl: this.cloudfrontUrl + this.model?.fileUrl || null,
|
|
2280
2283
|
fileName: this.model?.fileName || null,
|
|
2281
2284
|
reviewStatus: fullValue.reviewStatus,
|
|
2282
2285
|
userHeadShotUrl: this.userdata.userDetail.headshotUrl,
|
|
@@ -2380,18 +2383,25 @@ class EducationComponent {
|
|
|
2380
2383
|
this.store.previousStep();
|
|
2381
2384
|
}
|
|
2382
2385
|
nextStep() {
|
|
2383
|
-
this.
|
|
2386
|
+
if (this.workStore.experiences().length === 0) {
|
|
2387
|
+
this.store.nextStep();
|
|
2388
|
+
return;
|
|
2389
|
+
}
|
|
2390
|
+
// ✅ EXIT edit mode
|
|
2391
|
+
this.isEditing.set(false);
|
|
2384
2392
|
}
|
|
2385
2393
|
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 });
|
|
2386
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: EducationComponent, isStandalone: false, selector: "app-education", inputs: { providerId: "providerId", providerName: "providerName" }, 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 story. 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 </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 </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]=\"cloudfront + 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" }] });
|
|
2394
|
+
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 story. 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 </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 </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" }] });
|
|
2387
2395
|
}
|
|
2388
2396
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EducationComponent, decorators: [{
|
|
2389
2397
|
type: Component,
|
|
2390
|
-
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 story. 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 </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 </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]=\"cloudfront + 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"] }]
|
|
2398
|
+
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 story. 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 </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 </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"] }]
|
|
2391
2399
|
}], ctorParameters: () => [{ type: UserEducationService }, { type: CredentialingStore }, { type: EducationStore }, { type: CountryServices }, { type: PostalCodeServices }, { type: i6.TokenService }, { type: i3.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
|
|
2392
2400
|
type: Input
|
|
2393
2401
|
}], providerName: [{
|
|
2394
2402
|
type: Input
|
|
2403
|
+
}], cloudfrontUrl: [{
|
|
2404
|
+
type: Input
|
|
2395
2405
|
}] } });
|
|
2396
2406
|
|
|
2397
2407
|
class UserDocumentService {
|
|
@@ -2507,6 +2517,7 @@ class CertificationComponent {
|
|
|
2507
2517
|
uploadToAws = true;
|
|
2508
2518
|
providerId;
|
|
2509
2519
|
providerName;
|
|
2520
|
+
cloudfrontUrl;
|
|
2510
2521
|
editingIndex = -1;
|
|
2511
2522
|
selectedDocumentTypeId = null;
|
|
2512
2523
|
selectedDocumentId = null;
|
|
@@ -2645,6 +2656,8 @@ class CertificationComponent {
|
|
|
2645
2656
|
// files.fileLocation = files.fileLocation.replace(/^https?:\/\/[^/]+\//, '');
|
|
2646
2657
|
// files.publicUrl = files.publicUrl.replace(/^https?:\/\/[^/]+\//, '');
|
|
2647
2658
|
// }
|
|
2659
|
+
files.fileLocation = files.fileLocation.replace(/^https?:\/\/[^/]+\//, '');
|
|
2660
|
+
files.publicUrl = files.publicUrl.replace(/^https?:\/\/[^/]+\//, '');
|
|
2648
2661
|
console.log(files);
|
|
2649
2662
|
this.fileService.awsFileUpload([files]).subscribe((res) => {
|
|
2650
2663
|
if (res?.[0]?.fileId) {
|
|
@@ -2681,7 +2694,7 @@ class CertificationComponent {
|
|
|
2681
2694
|
expiryDate: fullValue.expiryDate.toISOString(),
|
|
2682
2695
|
notes: fullValue.notes,
|
|
2683
2696
|
fileId: this.model?.fileId || null,
|
|
2684
|
-
fileUrl: this.model?.fileUrl || null,
|
|
2697
|
+
fileUrl: this.cloudfrontUrl + this.model?.fileUrl || null,
|
|
2685
2698
|
fileName: this.model?.fileName || null,
|
|
2686
2699
|
documentTypeId: this.selectedDocumentId,
|
|
2687
2700
|
documentTypeName: this.selectedDocumentName,
|
|
@@ -2780,18 +2793,25 @@ class CertificationComponent {
|
|
|
2780
2793
|
this.store.previousStep();
|
|
2781
2794
|
}
|
|
2782
2795
|
nextStep() {
|
|
2783
|
-
this.
|
|
2796
|
+
if (this.workStore.experiences().length === 0) {
|
|
2797
|
+
this.store.nextStep();
|
|
2798
|
+
return;
|
|
2799
|
+
}
|
|
2800
|
+
// ✅ EXIT edit mode
|
|
2801
|
+
this.isEditing.set(false);
|
|
2784
2802
|
}
|
|
2785
2803
|
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 });
|
|
2786
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CertificationComponent, isStandalone: false, selector: "app-certification", inputs: { providerId: "providerId", providerName: "providerName" }, 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 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\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]=\"cloudfront + 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" }] });
|
|
2804
|
+
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 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\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" }] });
|
|
2787
2805
|
}
|
|
2788
2806
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CertificationComponent, decorators: [{
|
|
2789
2807
|
type: Component,
|
|
2790
|
-
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 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\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]=\"cloudfront + 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"] }]
|
|
2808
|
+
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 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\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"] }]
|
|
2791
2809
|
}], ctorParameters: () => [{ type: UserDocumentService }, { type: CredentialingStore }, { type: CertificationStore }, { type: i6.TokenService }, { type: PostalCodeServices }, { type: i3.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
|
|
2792
2810
|
type: Input
|
|
2793
2811
|
}], providerName: [{
|
|
2794
2812
|
type: Input
|
|
2813
|
+
}], cloudfrontUrl: [{
|
|
2814
|
+
type: Input
|
|
2795
2815
|
}] } });
|
|
2796
2816
|
|
|
2797
2817
|
var ForUser;
|
|
@@ -3862,6 +3882,7 @@ class LicensesComponent {
|
|
|
3862
3882
|
http;
|
|
3863
3883
|
providerId;
|
|
3864
3884
|
providerName;
|
|
3885
|
+
cloudfrontUrl;
|
|
3865
3886
|
uploadToAws = true;
|
|
3866
3887
|
editingIndex = -1;
|
|
3867
3888
|
selectedDocumentTypeId = null;
|
|
@@ -3992,6 +4013,8 @@ class LicensesComponent {
|
|
|
3992
4013
|
encrypted: true,
|
|
3993
4014
|
publicUrl: result.publicUrl
|
|
3994
4015
|
};
|
|
4016
|
+
files.fileLocation = files.fileLocation.replace(/^https?:\/\/[^/]+\//, '');
|
|
4017
|
+
files.publicUrl = files.publicUrl.replace(/^https?:\/\/[^/]+\//, '');
|
|
3995
4018
|
console.log(files);
|
|
3996
4019
|
this.fileService.awsFileUpload([files]).subscribe((res) => {
|
|
3997
4020
|
if (res?.[0]?.fileId) {
|
|
@@ -4031,7 +4054,7 @@ class LicensesComponent {
|
|
|
4031
4054
|
expiryDate: fullValue.expiryDate.toISOString(),
|
|
4032
4055
|
notes: fullValue.notes,
|
|
4033
4056
|
fileId: this.model?.fileId || null,
|
|
4034
|
-
fileUrl: this.model?.fileUrl || null,
|
|
4057
|
+
fileUrl: this.cloudfrontUrl + this.model?.fileUrl || null,
|
|
4035
4058
|
fileName: this.model?.fileName || null,
|
|
4036
4059
|
documentTypeId: this.selectedDocumentId,
|
|
4037
4060
|
documentTypeName: this.selectedDocumentName,
|
|
@@ -4133,18 +4156,25 @@ class LicensesComponent {
|
|
|
4133
4156
|
this.store.previousStep();
|
|
4134
4157
|
}
|
|
4135
4158
|
nextStep() {
|
|
4136
|
-
this.
|
|
4159
|
+
if (this.workStore.experiences().length === 0) {
|
|
4160
|
+
this.store.nextStep();
|
|
4161
|
+
return;
|
|
4162
|
+
}
|
|
4163
|
+
// ✅ EXIT edit mode
|
|
4164
|
+
this.isEditing.set(false);
|
|
4137
4165
|
}
|
|
4138
4166
|
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 });
|
|
4139
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: LicensesComponent, isStandalone: false, selector: "app-licenses", inputs: { providerId: "providerId", providerName: "providerName" }, 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\">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 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>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]=\"cloudfront + 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" }] });
|
|
4167
|
+
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\">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 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>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 <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" }] });
|
|
4140
4168
|
}
|
|
4141
4169
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LicensesComponent, decorators: [{
|
|
4142
4170
|
type: Component,
|
|
4143
|
-
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\">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 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>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]=\"cloudfront + 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"] }]
|
|
4171
|
+
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\">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 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>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 <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"] }]
|
|
4144
4172
|
}], ctorParameters: () => [{ type: UserDocumentService }, { type: CredentialingStore }, { type: LicenseStore }, { type: i6.TokenService }, { type: PostalCodeServices }, { type: i3.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
|
|
4145
4173
|
type: Input
|
|
4146
4174
|
}], providerName: [{
|
|
4147
4175
|
type: Input
|
|
4176
|
+
}], cloudfrontUrl: [{
|
|
4177
|
+
type: Input
|
|
4148
4178
|
}] } });
|
|
4149
4179
|
|
|
4150
4180
|
class ToolService {
|
|
@@ -27972,11 +28002,11 @@ class Step2CoverageComponent {
|
|
|
27972
28002
|
}));
|
|
27973
28003
|
}
|
|
27974
28004
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Step2CoverageComponent, deps: [{ token: CredentialingStore }, { token: UsMapLatestService }, { token: PostalCodeServices }, { token: UserCoverageAreaService }, { token: AlertService }, { token: i6.TokenService }], target: i0.ɵɵFactoryTarget.Component });
|
|
27975
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: Step2CoverageComponent, isStandalone: false, selector: "app-coverage", inputs: { providerId: "providerId", providerName: "providerName" }, ngImport: i0, template: "<div class=\"coverage-container\">\r\n <div class=\"first-section\">\r\n <h4 class=\"head\">Coverage Area</h4>\r\n <!-- <p>Let's start with the basics. Where are you located?</p>\r\n <span>We use this to match you with jobs nearby</span>\r\n <div class=\"location-inputs\">\r\n <input type=\"text\" placeholder=\"City\" [(ngModel)]=\"city\">\r\n <input type=\"text\" placeholder=\"State\" [(ngModel)]=\"state\">\r\n </div> -->\r\n </div>\r\n\r\n <div class=\"coverage-options\">\r\n <div class=\"d-flex justify-content-between\">\r\n <h6 class=\"text-secondary view-card fw-semibold\" style=\"font-size: 14px;\"> Where can you complete assignments?\r\n </h6>\r\n <div class=\"d-flex gap-1\">\r\n <label class=\"form-check-label\">Show Map</label>\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input\" type=\"checkbox\" (change)=\"toggleMap()\" role=\"switch\">\r\n </div>\r\n </div>\r\n </div>\r\n <hr class=\"m-0 border-3\">\r\n\r\n <div class=\"pb-1 d-flex align-items-center mt-2\">\r\n <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length > 0\"></span>\r\n <span class=\"view-card text-secondary ms-3\" style=\"font-size: 14px;\">\r\n My Current Coverage Area\r\n </span>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"cursor: pointer;\" (click)=\"skip()\">\r\n <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length == 0\"></span>\r\n <span class=\"view-card text-secondary ms-3\" style=\"font-size: 14px;\">\r\n Not Applicable\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"state-selector\">\r\n <div class=\"row pb-2\">\r\n <div class=\"col-md-12\">\r\n <div class=\"position-relative\">\r\n <!-- ng-select -->\r\n <ng-select [clearable]=\"true\" [multiple]=\"true\" (change)=\"setSelectedStates($event)\" [items]=\"states\"\r\n [(ngModel)]=\"selectedStates\" bindLabel=\"stateName\" bindValue=\"stateCode\" [closeOnSelect]=\"false\"\r\n placeholder=\"Select State\" id=\"reqStates\" [loading]=\"isStatesLoading\">\r\n <!-- Option Template -->\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <span class=\"form-check\">\r\n <span class=\"form-check-input-wrapper\">\r\n <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n </span>\r\n {{ item.stateName }}\r\n </span>\r\n </ng-template>\r\n\r\n <!-- Label Template -->\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <ng-container *ngIf=\"!isStatesLoading\">\r\n <span class=\"ng-value-label\">{{ item.stateName }}</span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-container>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n <div class=\"border-0 empty-message mt-4\" *ngIf=\"!isStatesLoading && coverages.length == 0\">\r\n <div class=\"text-center text-secondary\" style=\"font-size: 14px;\">No States Selected yet</div>\r\n </div>\r\n <div class=\"coverage-options\">\r\n <div class=\"col-md-10 col-12 py-2 map-wrapper\" [class.open]=\"showMap\">\r\n <us-map [filteredLocations]=\"filteredLocations\"></us-map>\r\n </div>\r\n </div>\r\n <div class=\"col-12 mt-4\" *ngIf=\"!isStatesLoading\">\r\n <div *ngIf=\"coverages.length > 0\">\r\n <div class=\"col-8 p-0 ms-2\">\r\n <h4 class=\"head\">Coverage Area\r\n Counties</h4>\r\n </div>\r\n </div>\r\n <div class=\"row pt-2 pb-2\">\r\n <div class=\"col-12 \">\r\n <div class=\"row\">\r\n <div class=\"col-12\" *ngFor=\"let coverage of coverages; let coverageIndex = index\">\r\n <div class=\"row m-0\" style=\"background: #dedede;\">\r\n <div class=\"col-10 p-0\" style=\"margin-left: 12px;\">\r\n <div class=\"form-group my-2\">\r\n <div class=\"custom-control custom-checkbox\">\r\n <input type=\"checkbox\" class=\"form-check-input custom-control-input\"\r\n id=\"stateCheckbox{{ coverage.state + coverageIndex }}\" [(ngModel)]=\"coverage.checked\"\r\n [indeterminate]=\"coverage.indeterminate\" (change)=\"onSelectAllChanged(coverage)\" />\r\n <label for=\"stateCheckbox{{ coverage?.state + coverageIndex }}\"\r\n class=\"custom-control-label font-weight-bold\"></label>\r\n <label class=\"ms-4 mt-1 position-absolute\"\r\n [attr.for]=\"'stateCheckbox' + coverage.state + coverageIndex\">\r\n {{ coverage.state | stateName }}\r\n</label>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-2\" style=\"display: flex;\r\n justify-content: flex-end;\r\n align-items: center;\r\n height: 21px;\r\n \">\r\n <img\r\n class=\"mt-2 pt-2 pointer\"\r\n [src]=\"coverage?.isShow\r\n ? '/assets/images/icons/arrow-up.svg'\r\n : '/assets/images/icons/arrow-down.svg'\"\r\n alt=\"toggle\"\r\n (click)=\"coverage.isShow = !coverage?.isShow\"\r\n/>\r\n </div>\r\n <span></span>\r\n </div>\r\n <hr class=\"mt-0\" />\r\n <ng-container *ngIf=\"coverage?.isShow\">\r\n <div class=\"form-group mb-1\">\r\n <input type=\"text\" class=\"font-default form-check-inline form-control h-37\"\r\n placeholder=\"Select Counties In {{ coverage.state | stateName }}\" [(ngModel)]=\"coverage.query\" />\r\n </div>\r\n <div class=\"row m-2\" style=\"height: 160px;overflow-y: auto;padding-left: 1.6rem;\">\r\n <div class=\"list-group-item col-3 p-1\"\r\n *ngFor=\"let county of coverage.counties | SearchBy: 'countyName':coverage.query; let countyIndex = index\">\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"checkbox\"\r\n [id]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\"\r\n [(ngModel)]=\"county.checked\"\r\n (change)=\"onChangedCounty($event, coverage.state, county.countyName)\" />\r\n <label class=\"form-check-label\"\r\n [for]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\">\r\n {{ county.countyName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"previousStep()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"skip()\">\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"coverageSave\" [ng2-loading]=\"coverageSave\"\r\n (click)=\"saveCoverage()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n\r\n\r\n</div>", styles: [".coverage-container{max-width:1000px;margin:0 auto;padding:2rem;min-height:300px}.coverage-container .form-check-label{color:#69707d}.coverage-container .head{margin-bottom:.5rem;font-size:20px;font-weight:600;color:#69707d}.coverage-container p{font-size:16px;font-weight:500;color:#6b7280;margin-bottom:7px;margin-top:25px}.coverage-container .first-section span{color:#6b7280}.coverage-container .location-inputs{display:flex;gap:1rem;margin-bottom:5rem;margin-top:20px}.coverage-container .location-inputs input{flex:1;padding:5px 15px;border:1px solid #d1d5db;border-radius:.375rem;height:45px}.coverage-container .state-selector .empty-message{width:100%;padding:1rem;background-color:#f3f4f6;text-align:center;color:#6b7280;border-radius:.375rem}.coverage-container .state-selector .custom-control{font-size:15px;display:flex;align-items:center;gap:7px;color:#69707d;padding-left:13px}.coverage-container .state-selector .custom-control-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .state-selector .form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .coverage-options{margin-bottom:1rem}.coverage-container .coverage-options label{font-size:.875rem;display:flex;align-items:center;gap:.25rem}.coverage-container .coverage-options label .show-map{margin-left:auto}.coverage-container .coverage-options .icon-black{filter:brightness(0) saturate(100%) invert(10%) sepia(47%) saturate(3454%) hue-rotate(184deg) brightness(98%) contrast(101%)}.coverage-container .coverage-options .icon-gray{filter:brightness(0) saturate(100%) invert(100%) sepia(4%) saturate(29%) hue-rotate(68deg) brightness(112%) contrast(80%)}.coverage-container .coverage-options .form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .coverage-options .square-box{width:12px;height:12px;border:2px solid;display:inline-block}.coverage-container .coverage-options .square-box.black{background:#002b49;border:0;width:15px;height:14px}.coverage-container .coverage-options .square-box.gray{border:1px solid rgba(128,128,128,.231372549)!important;border:0;width:15px;height:15px}.coverage-container .coverage-options .map-wrapper{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s ease,opacity .3s ease}.coverage-container .coverage-options .map-wrapper>*{overflow:hidden}.coverage-container .coverage-options .map-wrapper.open{grid-template-rows:1fr;opacity:1}.coverage-container .navigation-buttons{display:flex;justify-content:flex-end;gap:1rem;margin-top:70px;margin-bottom:50px}.coverage-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer;min-width:18%;min-height:50px}.coverage-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer;min-width:18%;min-height:50px}.coverage-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}::ng-deep .ng-select .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:10px}.custom-checkbox1{display:inline-block;width:15px;height:15px;border:1px solid #ccc;margin-right:8px;vertical-align:middle;position:relative;cursor:pointer;border-radius:3px;background-color:#fff}.custom-checkbox2{display:inline-block;width:15px;height:15px;border:1px solid #ccc;vertical-align:middle;position:relative;cursor:pointer;border-radius:3px;background-color:#fff}.custom-checkbox2.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox2.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.custom-checkbox1.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox1.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.select-loader{position:absolute;top:-28px;left:0;font-size:12px;color:#4077ad;display:flex;align-items:center;gap:6px}::ng-deep .form-check{display:block;min-height:1.5rem;margin-bottom:.125rem}.right-actions{display:flex;gap:16px}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border:none;font-size:14px;cursor:pointer;border-radius:5px}button.primary{background-color:#4077ad;color:#fff;border-radius:5px}button.secondary{background-color:#d5d6da;color:#525862;border-radius:5px}button:disabled{background-color:#9ca3af;cursor:not-allowed}.form-group label{top:0!important}.icon-color{cursor:pointer;background:transparent;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}\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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UsMapComponent, selector: "us-map", inputs: ["selectedStates", "allowedStates", "isReadOnly", "filteredLocations"], outputs: ["onMapClick"] }, { kind: "component", type: 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: "pipe", type: SearchPipe, name: "SearchBy" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
|
|
28005
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: Step2CoverageComponent, isStandalone: false, selector: "app-coverage", inputs: { providerId: "providerId", providerName: "providerName" }, ngImport: i0, template: "<div class=\"coverage-container\">\r\n <div class=\"first-section\">\r\n <h4 class=\"head\">Coverage Area</h4>\r\n <!-- <p>Let's start with the basics. Where are you located?</p>\r\n <span>We use this to match you with jobs nearby</span>\r\n <div class=\"location-inputs\">\r\n <input type=\"text\" placeholder=\"City\" [(ngModel)]=\"city\">\r\n <input type=\"text\" placeholder=\"State\" [(ngModel)]=\"state\">\r\n </div> -->\r\n </div>\r\n\r\n <div class=\"coverage-options\">\r\n <div class=\"d-flex justify-content-between\">\r\n <h6 class=\"text-secondary view-card fw-semibold\" style=\"font-size: 14px;\"> Where can you complete assignments?\r\n </h6>\r\n <div class=\"d-flex gap-1\">\r\n <label class=\"form-check-label\">Show Map</label>\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input\" type=\"checkbox\" (change)=\"toggleMap()\" role=\"switch\">\r\n </div>\r\n </div>\r\n </div>\r\n <hr class=\"m-0 border-3\">\r\n\r\n <div class=\"pb-1 d-flex align-items-center mt-2\">\r\n <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length > 0\"></span>\r\n <span class=\"view-card text-secondary ms-3\" style=\"font-size: 14px;\">\r\n My Current Coverage Area\r\n </span>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"cursor: pointer;\" (click)=\"skip()\">\r\n <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length == 0\"></span>\r\n <span class=\"view-card text-secondary ms-3\" style=\"font-size: 14px;\">\r\n Not Applicable\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"state-selector\">\r\n <div class=\"row pb-2\">\r\n <div class=\"col-md-12\">\r\n <div class=\"position-relative\">\r\n <!-- ng-select -->\r\n <ng-select [clearable]=\"true\" [multiple]=\"true\" (change)=\"setSelectedStates($event)\" [items]=\"states\"\r\n [(ngModel)]=\"selectedStates\" bindLabel=\"stateName\" bindValue=\"stateCode\" [closeOnSelect]=\"false\"\r\n placeholder=\"Select State\" id=\"reqStates\" [loading]=\"isStatesLoading\">\r\n <!-- Option Template -->\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <span class=\"form-check\">\r\n <span class=\"form-check-input-wrapper\">\r\n <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n </span>\r\n {{ item.stateName }}\r\n </span>\r\n </ng-template>\r\n\r\n <!-- Label Template -->\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <ng-container *ngIf=\"!isStatesLoading\">\r\n <span class=\"ng-value-label\">{{ item.stateName }}</span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-container>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n <div class=\"border-0 empty-message mt-4\" *ngIf=\"!isStatesLoading && coverages.length == 0\">\r\n <div class=\"text-center text-secondary\" style=\"font-size: 14px;\">No States Selected yet</div>\r\n </div>\r\n <div class=\"coverage-options\">\r\n <div class=\"col-md-10 col-12 py-2 map-wrapper\" [class.open]=\"showMap\">\r\n <us-map [filteredLocations]=\"filteredLocations\"></us-map>\r\n </div>\r\n </div>\r\n <div class=\"col-12 mt-4\" *ngIf=\"!isStatesLoading\">\r\n <div *ngIf=\"coverages.length > 0\">\r\n <div class=\"col-8 p-0 ms-2\">\r\n <h4 class=\"head\">Coverage Area\r\n Counties</h4>\r\n </div>\r\n </div>\r\n <div class=\"row pt-2 pb-2\">\r\n <div class=\"col-12 \">\r\n <div class=\"row\">\r\n <div class=\"col-12\" *ngFor=\"let coverage of coverages; let coverageIndex = index\">\r\n <div class=\"row m-0\" style=\"background: #dedede;\">\r\n <div class=\"col-10\" style=\"margin-left: 0px;padding-left: 5px !important;\">\r\n <div class=\"form-group my-2\">\r\n <div class=\"custom-control custom-checkbox\">\r\n <input type=\"checkbox\" class=\"form-check-input custom-control-input\"\r\n id=\"stateCheckbox{{ coverage.state + coverageIndex }}\" [(ngModel)]=\"coverage.checked\"\r\n [indeterminate]=\"coverage.indeterminate\" (change)=\"onSelectAllChanged(coverage)\" />\r\n <label for=\"stateCheckbox{{ coverage?.state + coverageIndex }}\"\r\n class=\"custom-control-label font-weight-bold\"></label>\r\n <label class=\"ms-4 mt-1 position-absolute\"\r\n [attr.for]=\"'stateCheckbox' + coverage.state + coverageIndex\">\r\n {{ coverage.state | stateName }}\r\n</label>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-2\" style=\"display: flex;\r\n justify-content: flex-end;\r\n align-items: center;\r\n height: 21px;\r\n \">\r\n <img\r\n class=\"mt-2 pt-2 pointer\"\r\n [src]=\"coverage?.isShow\r\n ? '/assets/images/icons/arrow-up.svg'\r\n : '/assets/images/icons/arrow-down.svg'\"\r\n alt=\"toggle\"\r\n (click)=\"coverage.isShow = !coverage?.isShow\"\r\n/>\r\n </div>\r\n <span></span>\r\n </div>\r\n <hr class=\"mt-0\" />\r\n <ng-container *ngIf=\"coverage?.isShow\">\r\n <div class=\"form-group mb-1\">\r\n <input type=\"text\" class=\"font-default form-check-inline form-control h-37\"\r\n placeholder=\"Select Counties In {{ coverage.state | stateName }}\" [(ngModel)]=\"coverage.query\" />\r\n </div>\r\n <div class=\"row m-2\" style=\"height: 160px;overflow-y: auto;padding-left: 1.6rem;\">\r\n <div class=\"list-group-item col-3 p-1\"\r\n *ngFor=\"let county of coverage.counties | SearchBy: 'countyName':coverage.query; let countyIndex = index\">\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"checkbox\"\r\n [id]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\"\r\n [(ngModel)]=\"county.checked\"\r\n (change)=\"onChangedCounty($event, coverage.state, county.countyName)\" />\r\n <label class=\"form-check-label\"\r\n [for]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\">\r\n {{ county.countyName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"previousStep()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"skip()\">\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"coverageSave\" [ng2-loading]=\"coverageSave\"\r\n (click)=\"saveCoverage()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n\r\n\r\n</div>", styles: [".coverage-container{max-width:1000px;margin:0 auto;padding:2rem;min-height:300px}.coverage-container .form-check-label{color:#69707d}.coverage-container .head{margin-bottom:.5rem;font-size:20px;font-weight:600;color:#69707d}.coverage-container p{font-size:16px;font-weight:500;color:#6b7280;margin-bottom:7px;margin-top:25px}.coverage-container .first-section span{color:#6b7280}.coverage-container .location-inputs{display:flex;gap:1rem;margin-bottom:5rem;margin-top:20px}.coverage-container .location-inputs input{flex:1;padding:5px 15px;border:1px solid #d1d5db;border-radius:.375rem;height:45px}.coverage-container .state-selector .empty-message{width:100%;padding:1rem;background-color:#f3f4f6;text-align:center;color:#6b7280;border-radius:.375rem}.coverage-container .state-selector .custom-control{font-size:15px;display:flex;align-items:center;gap:7px;color:#69707d;padding-left:13px}.coverage-container .state-selector .custom-control-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .state-selector .form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .coverage-options{margin-bottom:1rem}.coverage-container .coverage-options label{font-size:.875rem;display:flex;align-items:center;gap:.25rem}.coverage-container .coverage-options label .show-map{margin-left:auto}.coverage-container .coverage-options .icon-black{filter:brightness(0) saturate(100%) invert(10%) sepia(47%) saturate(3454%) hue-rotate(184deg) brightness(98%) contrast(101%)}.coverage-container .coverage-options .icon-gray{filter:brightness(0) saturate(100%) invert(100%) sepia(4%) saturate(29%) hue-rotate(68deg) brightness(112%) contrast(80%)}.coverage-container .coverage-options .form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .coverage-options .square-box{width:12px;height:12px;border:2px solid;display:inline-block}.coverage-container .coverage-options .square-box.black{background:#002b49;border:0;width:15px;height:14px}.coverage-container .coverage-options .square-box.gray{border:1px solid rgba(128,128,128,.231372549)!important;border:0;width:15px;height:15px}.coverage-container .coverage-options .map-wrapper{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s ease,opacity .3s ease}.coverage-container .coverage-options .map-wrapper>*{overflow:hidden}.coverage-container .coverage-options .map-wrapper.open{grid-template-rows:1fr;opacity:1}.coverage-container .navigation-buttons{display:flex;justify-content:flex-end;gap:1rem;margin-top:70px;margin-bottom:50px}.coverage-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer;min-width:18%;min-height:50px}.coverage-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer;min-width:18%;min-height:50px}.coverage-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}::ng-deep .ng-select .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:10px}.custom-checkbox1{display:inline-block;width:15px;height:15px;border:1px solid #ccc;margin-right:8px;vertical-align:middle;position:relative;cursor:pointer;border-radius:3px;background-color:#fff}.custom-checkbox2{display:inline-block;width:15px;height:15px;border:1px solid #ccc;vertical-align:middle;position:relative;cursor:pointer;border-radius:3px;background-color:#fff}.custom-checkbox2.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox2.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.custom-checkbox1.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox1.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.select-loader{position:absolute;top:-28px;left:0;font-size:12px;color:#4077ad;display:flex;align-items:center;gap:6px}::ng-deep .form-check{display:block;min-height:1.5rem;margin-bottom:.125rem}.right-actions{display:flex;gap:16px}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border:none;font-size:14px;cursor:pointer;border-radius:5px}button.primary{background-color:#4077ad;color:#fff;border-radius:5px}button.secondary{background-color:#d5d6da;color:#525862;border-radius:5px}button:disabled{background-color:#9ca3af;cursor:not-allowed}.form-group label{top:0!important}.icon-color{cursor:pointer;background:transparent;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}\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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UsMapComponent, selector: "us-map", inputs: ["selectedStates", "allowedStates", "isReadOnly", "filteredLocations"], outputs: ["onMapClick"] }, { kind: "component", type: 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: "pipe", type: SearchPipe, name: "SearchBy" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
|
|
27976
28006
|
}
|
|
27977
28007
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Step2CoverageComponent, decorators: [{
|
|
27978
28008
|
type: Component,
|
|
27979
|
-
args: [{ selector: 'app-coverage', standalone: false, template: "<div class=\"coverage-container\">\r\n <div class=\"first-section\">\r\n <h4 class=\"head\">Coverage Area</h4>\r\n <!-- <p>Let's start with the basics. Where are you located?</p>\r\n <span>We use this to match you with jobs nearby</span>\r\n <div class=\"location-inputs\">\r\n <input type=\"text\" placeholder=\"City\" [(ngModel)]=\"city\">\r\n <input type=\"text\" placeholder=\"State\" [(ngModel)]=\"state\">\r\n </div> -->\r\n </div>\r\n\r\n <div class=\"coverage-options\">\r\n <div class=\"d-flex justify-content-between\">\r\n <h6 class=\"text-secondary view-card fw-semibold\" style=\"font-size: 14px;\"> Where can you complete assignments?\r\n </h6>\r\n <div class=\"d-flex gap-1\">\r\n <label class=\"form-check-label\">Show Map</label>\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input\" type=\"checkbox\" (change)=\"toggleMap()\" role=\"switch\">\r\n </div>\r\n </div>\r\n </div>\r\n <hr class=\"m-0 border-3\">\r\n\r\n <div class=\"pb-1 d-flex align-items-center mt-2\">\r\n <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length > 0\"></span>\r\n <span class=\"view-card text-secondary ms-3\" style=\"font-size: 14px;\">\r\n My Current Coverage Area\r\n </span>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"cursor: pointer;\" (click)=\"skip()\">\r\n <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length == 0\"></span>\r\n <span class=\"view-card text-secondary ms-3\" style=\"font-size: 14px;\">\r\n Not Applicable\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"state-selector\">\r\n <div class=\"row pb-2\">\r\n <div class=\"col-md-12\">\r\n <div class=\"position-relative\">\r\n <!-- ng-select -->\r\n <ng-select [clearable]=\"true\" [multiple]=\"true\" (change)=\"setSelectedStates($event)\" [items]=\"states\"\r\n [(ngModel)]=\"selectedStates\" bindLabel=\"stateName\" bindValue=\"stateCode\" [closeOnSelect]=\"false\"\r\n placeholder=\"Select State\" id=\"reqStates\" [loading]=\"isStatesLoading\">\r\n <!-- Option Template -->\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <span class=\"form-check\">\r\n <span class=\"form-check-input-wrapper\">\r\n <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n </span>\r\n {{ item.stateName }}\r\n </span>\r\n </ng-template>\r\n\r\n <!-- Label Template -->\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <ng-container *ngIf=\"!isStatesLoading\">\r\n <span class=\"ng-value-label\">{{ item.stateName }}</span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-container>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n <div class=\"border-0 empty-message mt-4\" *ngIf=\"!isStatesLoading && coverages.length == 0\">\r\n <div class=\"text-center text-secondary\" style=\"font-size: 14px;\">No States Selected yet</div>\r\n </div>\r\n <div class=\"coverage-options\">\r\n <div class=\"col-md-10 col-12 py-2 map-wrapper\" [class.open]=\"showMap\">\r\n <us-map [filteredLocations]=\"filteredLocations\"></us-map>\r\n </div>\r\n </div>\r\n <div class=\"col-12 mt-4\" *ngIf=\"!isStatesLoading\">\r\n <div *ngIf=\"coverages.length > 0\">\r\n <div class=\"col-8 p-0 ms-2\">\r\n <h4 class=\"head\">Coverage Area\r\n Counties</h4>\r\n </div>\r\n </div>\r\n <div class=\"row pt-2 pb-2\">\r\n <div class=\"col-12 \">\r\n <div class=\"row\">\r\n <div class=\"col-12\" *ngFor=\"let coverage of coverages; let coverageIndex = index\">\r\n <div class=\"row m-0\" style=\"background: #dedede;\">\r\n <div class=\"col-10 p-0\" style=\"margin-left: 12px;\">\r\n <div class=\"form-group my-2\">\r\n <div class=\"custom-control custom-checkbox\">\r\n <input type=\"checkbox\" class=\"form-check-input custom-control-input\"\r\n id=\"stateCheckbox{{ coverage.state + coverageIndex }}\" [(ngModel)]=\"coverage.checked\"\r\n [indeterminate]=\"coverage.indeterminate\" (change)=\"onSelectAllChanged(coverage)\" />\r\n <label for=\"stateCheckbox{{ coverage?.state + coverageIndex }}\"\r\n class=\"custom-control-label font-weight-bold\"></label>\r\n <label class=\"ms-4 mt-1 position-absolute\"\r\n [attr.for]=\"'stateCheckbox' + coverage.state + coverageIndex\">\r\n {{ coverage.state | stateName }}\r\n</label>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-2\" style=\"display: flex;\r\n justify-content: flex-end;\r\n align-items: center;\r\n height: 21px;\r\n \">\r\n <img\r\n class=\"mt-2 pt-2 pointer\"\r\n [src]=\"coverage?.isShow\r\n ? '/assets/images/icons/arrow-up.svg'\r\n : '/assets/images/icons/arrow-down.svg'\"\r\n alt=\"toggle\"\r\n (click)=\"coverage.isShow = !coverage?.isShow\"\r\n/>\r\n </div>\r\n <span></span>\r\n </div>\r\n <hr class=\"mt-0\" />\r\n <ng-container *ngIf=\"coverage?.isShow\">\r\n <div class=\"form-group mb-1\">\r\n <input type=\"text\" class=\"font-default form-check-inline form-control h-37\"\r\n placeholder=\"Select Counties In {{ coverage.state | stateName }}\" [(ngModel)]=\"coverage.query\" />\r\n </div>\r\n <div class=\"row m-2\" style=\"height: 160px;overflow-y: auto;padding-left: 1.6rem;\">\r\n <div class=\"list-group-item col-3 p-1\"\r\n *ngFor=\"let county of coverage.counties | SearchBy: 'countyName':coverage.query; let countyIndex = index\">\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"checkbox\"\r\n [id]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\"\r\n [(ngModel)]=\"county.checked\"\r\n (change)=\"onChangedCounty($event, coverage.state, county.countyName)\" />\r\n <label class=\"form-check-label\"\r\n [for]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\">\r\n {{ county.countyName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"previousStep()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"skip()\">\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"coverageSave\" [ng2-loading]=\"coverageSave\"\r\n (click)=\"saveCoverage()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n\r\n\r\n</div>", styles: [".coverage-container{max-width:1000px;margin:0 auto;padding:2rem;min-height:300px}.coverage-container .form-check-label{color:#69707d}.coverage-container .head{margin-bottom:.5rem;font-size:20px;font-weight:600;color:#69707d}.coverage-container p{font-size:16px;font-weight:500;color:#6b7280;margin-bottom:7px;margin-top:25px}.coverage-container .first-section span{color:#6b7280}.coverage-container .location-inputs{display:flex;gap:1rem;margin-bottom:5rem;margin-top:20px}.coverage-container .location-inputs input{flex:1;padding:5px 15px;border:1px solid #d1d5db;border-radius:.375rem;height:45px}.coverage-container .state-selector .empty-message{width:100%;padding:1rem;background-color:#f3f4f6;text-align:center;color:#6b7280;border-radius:.375rem}.coverage-container .state-selector .custom-control{font-size:15px;display:flex;align-items:center;gap:7px;color:#69707d;padding-left:13px}.coverage-container .state-selector .custom-control-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .state-selector .form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .coverage-options{margin-bottom:1rem}.coverage-container .coverage-options label{font-size:.875rem;display:flex;align-items:center;gap:.25rem}.coverage-container .coverage-options label .show-map{margin-left:auto}.coverage-container .coverage-options .icon-black{filter:brightness(0) saturate(100%) invert(10%) sepia(47%) saturate(3454%) hue-rotate(184deg) brightness(98%) contrast(101%)}.coverage-container .coverage-options .icon-gray{filter:brightness(0) saturate(100%) invert(100%) sepia(4%) saturate(29%) hue-rotate(68deg) brightness(112%) contrast(80%)}.coverage-container .coverage-options .form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .coverage-options .square-box{width:12px;height:12px;border:2px solid;display:inline-block}.coverage-container .coverage-options .square-box.black{background:#002b49;border:0;width:15px;height:14px}.coverage-container .coverage-options .square-box.gray{border:1px solid rgba(128,128,128,.231372549)!important;border:0;width:15px;height:15px}.coverage-container .coverage-options .map-wrapper{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s ease,opacity .3s ease}.coverage-container .coverage-options .map-wrapper>*{overflow:hidden}.coverage-container .coverage-options .map-wrapper.open{grid-template-rows:1fr;opacity:1}.coverage-container .navigation-buttons{display:flex;justify-content:flex-end;gap:1rem;margin-top:70px;margin-bottom:50px}.coverage-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer;min-width:18%;min-height:50px}.coverage-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer;min-width:18%;min-height:50px}.coverage-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}::ng-deep .ng-select .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:10px}.custom-checkbox1{display:inline-block;width:15px;height:15px;border:1px solid #ccc;margin-right:8px;vertical-align:middle;position:relative;cursor:pointer;border-radius:3px;background-color:#fff}.custom-checkbox2{display:inline-block;width:15px;height:15px;border:1px solid #ccc;vertical-align:middle;position:relative;cursor:pointer;border-radius:3px;background-color:#fff}.custom-checkbox2.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox2.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.custom-checkbox1.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox1.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.select-loader{position:absolute;top:-28px;left:0;font-size:12px;color:#4077ad;display:flex;align-items:center;gap:6px}::ng-deep .form-check{display:block;min-height:1.5rem;margin-bottom:.125rem}.right-actions{display:flex;gap:16px}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border:none;font-size:14px;cursor:pointer;border-radius:5px}button.primary{background-color:#4077ad;color:#fff;border-radius:5px}button.secondary{background-color:#d5d6da;color:#525862;border-radius:5px}button:disabled{background-color:#9ca3af;cursor:not-allowed}.form-group label{top:0!important}.icon-color{cursor:pointer;background:transparent;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}\n"] }]
|
|
28009
|
+
args: [{ selector: 'app-coverage', standalone: false, template: "<div class=\"coverage-container\">\r\n <div class=\"first-section\">\r\n <h4 class=\"head\">Coverage Area</h4>\r\n <!-- <p>Let's start with the basics. Where are you located?</p>\r\n <span>We use this to match you with jobs nearby</span>\r\n <div class=\"location-inputs\">\r\n <input type=\"text\" placeholder=\"City\" [(ngModel)]=\"city\">\r\n <input type=\"text\" placeholder=\"State\" [(ngModel)]=\"state\">\r\n </div> -->\r\n </div>\r\n\r\n <div class=\"coverage-options\">\r\n <div class=\"d-flex justify-content-between\">\r\n <h6 class=\"text-secondary view-card fw-semibold\" style=\"font-size: 14px;\"> Where can you complete assignments?\r\n </h6>\r\n <div class=\"d-flex gap-1\">\r\n <label class=\"form-check-label\">Show Map</label>\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input\" type=\"checkbox\" (change)=\"toggleMap()\" role=\"switch\">\r\n </div>\r\n </div>\r\n </div>\r\n <hr class=\"m-0 border-3\">\r\n\r\n <div class=\"pb-1 d-flex align-items-center mt-2\">\r\n <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length > 0\"></span>\r\n <span class=\"view-card text-secondary ms-3\" style=\"font-size: 14px;\">\r\n My Current Coverage Area\r\n </span>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"cursor: pointer;\" (click)=\"skip()\">\r\n <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length == 0\"></span>\r\n <span class=\"view-card text-secondary ms-3\" style=\"font-size: 14px;\">\r\n Not Applicable\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"state-selector\">\r\n <div class=\"row pb-2\">\r\n <div class=\"col-md-12\">\r\n <div class=\"position-relative\">\r\n <!-- ng-select -->\r\n <ng-select [clearable]=\"true\" [multiple]=\"true\" (change)=\"setSelectedStates($event)\" [items]=\"states\"\r\n [(ngModel)]=\"selectedStates\" bindLabel=\"stateName\" bindValue=\"stateCode\" [closeOnSelect]=\"false\"\r\n placeholder=\"Select State\" id=\"reqStates\" [loading]=\"isStatesLoading\">\r\n <!-- Option Template -->\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <span class=\"form-check\">\r\n <span class=\"form-check-input-wrapper\">\r\n <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n </span>\r\n {{ item.stateName }}\r\n </span>\r\n </ng-template>\r\n\r\n <!-- Label Template -->\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <ng-container *ngIf=\"!isStatesLoading\">\r\n <span class=\"ng-value-label\">{{ item.stateName }}</span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-container>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n <div class=\"border-0 empty-message mt-4\" *ngIf=\"!isStatesLoading && coverages.length == 0\">\r\n <div class=\"text-center text-secondary\" style=\"font-size: 14px;\">No States Selected yet</div>\r\n </div>\r\n <div class=\"coverage-options\">\r\n <div class=\"col-md-10 col-12 py-2 map-wrapper\" [class.open]=\"showMap\">\r\n <us-map [filteredLocations]=\"filteredLocations\"></us-map>\r\n </div>\r\n </div>\r\n <div class=\"col-12 mt-4\" *ngIf=\"!isStatesLoading\">\r\n <div *ngIf=\"coverages.length > 0\">\r\n <div class=\"col-8 p-0 ms-2\">\r\n <h4 class=\"head\">Coverage Area\r\n Counties</h4>\r\n </div>\r\n </div>\r\n <div class=\"row pt-2 pb-2\">\r\n <div class=\"col-12 \">\r\n <div class=\"row\">\r\n <div class=\"col-12\" *ngFor=\"let coverage of coverages; let coverageIndex = index\">\r\n <div class=\"row m-0\" style=\"background: #dedede;\">\r\n <div class=\"col-10\" style=\"margin-left: 0px;padding-left: 5px !important;\">\r\n <div class=\"form-group my-2\">\r\n <div class=\"custom-control custom-checkbox\">\r\n <input type=\"checkbox\" class=\"form-check-input custom-control-input\"\r\n id=\"stateCheckbox{{ coverage.state + coverageIndex }}\" [(ngModel)]=\"coverage.checked\"\r\n [indeterminate]=\"coverage.indeterminate\" (change)=\"onSelectAllChanged(coverage)\" />\r\n <label for=\"stateCheckbox{{ coverage?.state + coverageIndex }}\"\r\n class=\"custom-control-label font-weight-bold\"></label>\r\n <label class=\"ms-4 mt-1 position-absolute\"\r\n [attr.for]=\"'stateCheckbox' + coverage.state + coverageIndex\">\r\n {{ coverage.state | stateName }}\r\n</label>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-2\" style=\"display: flex;\r\n justify-content: flex-end;\r\n align-items: center;\r\n height: 21px;\r\n \">\r\n <img\r\n class=\"mt-2 pt-2 pointer\"\r\n [src]=\"coverage?.isShow\r\n ? '/assets/images/icons/arrow-up.svg'\r\n : '/assets/images/icons/arrow-down.svg'\"\r\n alt=\"toggle\"\r\n (click)=\"coverage.isShow = !coverage?.isShow\"\r\n/>\r\n </div>\r\n <span></span>\r\n </div>\r\n <hr class=\"mt-0\" />\r\n <ng-container *ngIf=\"coverage?.isShow\">\r\n <div class=\"form-group mb-1\">\r\n <input type=\"text\" class=\"font-default form-check-inline form-control h-37\"\r\n placeholder=\"Select Counties In {{ coverage.state | stateName }}\" [(ngModel)]=\"coverage.query\" />\r\n </div>\r\n <div class=\"row m-2\" style=\"height: 160px;overflow-y: auto;padding-left: 1.6rem;\">\r\n <div class=\"list-group-item col-3 p-1\"\r\n *ngFor=\"let county of coverage.counties | SearchBy: 'countyName':coverage.query; let countyIndex = index\">\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"checkbox\"\r\n [id]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\"\r\n [(ngModel)]=\"county.checked\"\r\n (change)=\"onChangedCounty($event, coverage.state, county.countyName)\" />\r\n <label class=\"form-check-label\"\r\n [for]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\">\r\n {{ county.countyName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"previousStep()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"skip()\">\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"coverageSave\" [ng2-loading]=\"coverageSave\"\r\n (click)=\"saveCoverage()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n\r\n\r\n</div>", styles: [".coverage-container{max-width:1000px;margin:0 auto;padding:2rem;min-height:300px}.coverage-container .form-check-label{color:#69707d}.coverage-container .head{margin-bottom:.5rem;font-size:20px;font-weight:600;color:#69707d}.coverage-container p{font-size:16px;font-weight:500;color:#6b7280;margin-bottom:7px;margin-top:25px}.coverage-container .first-section span{color:#6b7280}.coverage-container .location-inputs{display:flex;gap:1rem;margin-bottom:5rem;margin-top:20px}.coverage-container .location-inputs input{flex:1;padding:5px 15px;border:1px solid #d1d5db;border-radius:.375rem;height:45px}.coverage-container .state-selector .empty-message{width:100%;padding:1rem;background-color:#f3f4f6;text-align:center;color:#6b7280;border-radius:.375rem}.coverage-container .state-selector .custom-control{font-size:15px;display:flex;align-items:center;gap:7px;color:#69707d;padding-left:13px}.coverage-container .state-selector .custom-control-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .state-selector .form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .coverage-options{margin-bottom:1rem}.coverage-container .coverage-options label{font-size:.875rem;display:flex;align-items:center;gap:.25rem}.coverage-container .coverage-options label .show-map{margin-left:auto}.coverage-container .coverage-options .icon-black{filter:brightness(0) saturate(100%) invert(10%) sepia(47%) saturate(3454%) hue-rotate(184deg) brightness(98%) contrast(101%)}.coverage-container .coverage-options .icon-gray{filter:brightness(0) saturate(100%) invert(100%) sepia(4%) saturate(29%) hue-rotate(68deg) brightness(112%) contrast(80%)}.coverage-container .coverage-options .form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .coverage-options .square-box{width:12px;height:12px;border:2px solid;display:inline-block}.coverage-container .coverage-options .square-box.black{background:#002b49;border:0;width:15px;height:14px}.coverage-container .coverage-options .square-box.gray{border:1px solid rgba(128,128,128,.231372549)!important;border:0;width:15px;height:15px}.coverage-container .coverage-options .map-wrapper{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s ease,opacity .3s ease}.coverage-container .coverage-options .map-wrapper>*{overflow:hidden}.coverage-container .coverage-options .map-wrapper.open{grid-template-rows:1fr;opacity:1}.coverage-container .navigation-buttons{display:flex;justify-content:flex-end;gap:1rem;margin-top:70px;margin-bottom:50px}.coverage-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer;min-width:18%;min-height:50px}.coverage-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer;min-width:18%;min-height:50px}.coverage-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}::ng-deep .ng-select .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:10px}.custom-checkbox1{display:inline-block;width:15px;height:15px;border:1px solid #ccc;margin-right:8px;vertical-align:middle;position:relative;cursor:pointer;border-radius:3px;background-color:#fff}.custom-checkbox2{display:inline-block;width:15px;height:15px;border:1px solid #ccc;vertical-align:middle;position:relative;cursor:pointer;border-radius:3px;background-color:#fff}.custom-checkbox2.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox2.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.custom-checkbox1.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox1.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.select-loader{position:absolute;top:-28px;left:0;font-size:12px;color:#4077ad;display:flex;align-items:center;gap:6px}::ng-deep .form-check{display:block;min-height:1.5rem;margin-bottom:.125rem}.right-actions{display:flex;gap:16px}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border:none;font-size:14px;cursor:pointer;border-radius:5px}button.primary{background-color:#4077ad;color:#fff;border-radius:5px}button.secondary{background-color:#d5d6da;color:#525862;border-radius:5px}button:disabled{background-color:#9ca3af;cursor:not-allowed}.form-group label{top:0!important}.icon-color{cursor:pointer;background:transparent;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}\n"] }]
|
|
27980
28010
|
}], ctorParameters: () => [{ type: CredentialingStore }, { type: UsMapLatestService }, { type: PostalCodeServices }, { type: UserCoverageAreaService }, { type: AlertService }, { type: i6.TokenService }], propDecorators: { providerId: [{
|
|
27981
28011
|
type: Input
|
|
27982
28012
|
}], providerName: [{
|
|
@@ -28088,6 +28118,7 @@ class WorkexperienceComponent {
|
|
|
28088
28118
|
http;
|
|
28089
28119
|
providerId;
|
|
28090
28120
|
providerName;
|
|
28121
|
+
cloudfrontUrl;
|
|
28091
28122
|
uploadToAws = true;
|
|
28092
28123
|
editingIndex = -1;
|
|
28093
28124
|
workexperienceForm;
|
|
@@ -28218,6 +28249,8 @@ class WorkexperienceComponent {
|
|
|
28218
28249
|
encrypted: true,
|
|
28219
28250
|
publicUrl: result.publicUrl
|
|
28220
28251
|
};
|
|
28252
|
+
files.fileLocation = files.fileLocation.replace(/^https?:\/\/[^/]+\//, '');
|
|
28253
|
+
files.publicUrl = files.publicUrl.replace(/^https?:\/\/[^/]+\//, '');
|
|
28221
28254
|
this.fileService.awsFileUpload([files]).subscribe((res) => {
|
|
28222
28255
|
if (res?.[0]?.fileId) {
|
|
28223
28256
|
this.model.fileId = res[0].fileId;
|
|
@@ -28258,7 +28291,7 @@ class WorkexperienceComponent {
|
|
|
28258
28291
|
toDate: fullValue.toDate.toISOString(),
|
|
28259
28292
|
jobDescription: fullValue.jobDescription,
|
|
28260
28293
|
fileId: this.model?.fileId || null,
|
|
28261
|
-
fileUrl: this.model?.fileUrl || null,
|
|
28294
|
+
fileUrl: this.cloudfrontUrl + this.model?.fileUrl || null,
|
|
28262
28295
|
fileName: this.model?.fileName || null,
|
|
28263
28296
|
reviewStatus: fullValue.reviewStatus,
|
|
28264
28297
|
userHeadShotUrl: this.userdata.userDetail.headshotUrl
|
|
@@ -28339,18 +28372,25 @@ class WorkexperienceComponent {
|
|
|
28339
28372
|
this.store.previousStep();
|
|
28340
28373
|
}
|
|
28341
28374
|
nextStep() {
|
|
28342
|
-
this.
|
|
28375
|
+
if (this.workStore.experiences().length === 0) {
|
|
28376
|
+
this.store.nextStep();
|
|
28377
|
+
return;
|
|
28378
|
+
}
|
|
28379
|
+
// ✅ EXIT edit mode
|
|
28380
|
+
this.isEditing.set(false);
|
|
28343
28381
|
}
|
|
28344
28382
|
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 });
|
|
28345
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: WorkexperienceComponent, isStandalone: false, selector: "app-workexperience", inputs: { providerId: "providerId", providerName: "providerName" }, 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 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\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 </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 </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]=\"cloudfront + 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" }] });
|
|
28383
|
+
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 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\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 </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 </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" }] });
|
|
28346
28384
|
}
|
|
28347
28385
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WorkexperienceComponent, decorators: [{
|
|
28348
28386
|
type: Component,
|
|
28349
|
-
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 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\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 </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 </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]=\"cloudfront + 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"] }]
|
|
28387
|
+
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 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\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 </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 </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"] }]
|
|
28350
28388
|
}], ctorParameters: () => [{ type: UserExperienceService }, { type: WorkExperienceStore }, { type: CredentialingStore }, { type: CountryServices }, { type: PostalCodeServices }, { type: i6.TokenService }, { type: i3.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
|
|
28351
28389
|
type: Input
|
|
28352
28390
|
}], providerName: [{
|
|
28353
28391
|
type: Input
|
|
28392
|
+
}], cloudfrontUrl: [{
|
|
28393
|
+
type: Input
|
|
28354
28394
|
}] } });
|
|
28355
28395
|
|
|
28356
28396
|
class CredentialingComponent {
|
|
@@ -28388,7 +28428,7 @@ class CredentialingComponent {
|
|
|
28388
28428
|
this.back.emit();
|
|
28389
28429
|
}
|
|
28390
28430
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CredentialingComponent, deps: [{ token: CredentialingStore }, { token: LIBRARY_CONFIG }, { token: i1$1.ViewportScroller }], target: i0.ɵɵFactoryTarget.Component });
|
|
28391
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CredentialingComponent, isStandalone: false, selector: "app-credentialing", inputs: { data: "data" }, outputs: { back: "back" }, ngImport: i0, template: "<div class=\"credentialing-container\">\r\n <app-stepper></app-stepper>\r\n <div class=\"step-content\" [@stepTransition]=\"store.currentStep()\">\r\n <app-role-select (backToParent)=\"goBackToInitialProcess()\" [providerName] = \"providerName\" [providerId]=\"providerId\" [cloudfrontUrl]=\"cloudfrontUrl\" [roleData]=\"data\"\r\n *ngIf=\"store.currentStep() === 1\"></app-role-select>\r\n <app-coverage [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 2\"></app-coverage>\r\n <app-workexperience [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 3\"></app-workexperience>\r\n <app-education [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 4\"></app-education>\r\n <app-certification [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 5\"></app-certification>\r\n <app-licenses [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 6\"></app-licenses>\r\n <app-skills [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 7\"></app-skills>\r\n <app-tools [providerName] = \"providerName\" [providerId]=\"providerId\" [roleData]=\"data\" *ngIf=\"store.currentStep() === 8\"></app-tools>\r\n </div>\r\n</div>", styles: ["::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px!important;border:1px solid #dee2e6}.step-content{position:relative;min-height:400px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: StepperComponent, selector: "app-stepper" }, { kind: "component", type: EducationComponent, selector: "app-education", inputs: ["providerId", "providerName"] }, { kind: "component", type: CertificationComponent, selector: "app-certification", inputs: ["providerId", "providerName"] }, { kind: "component", type: SkillsComponent, selector: "app-skills", inputs: ["providerId", "providerName"] }, { kind: "component", type: LicensesComponent, selector: "app-licenses", inputs: ["providerId", "providerName"] }, { kind: "component", type: ToolsComponent, selector: "app-tools", inputs: ["roleData", "providerId", "providerName"] }, { kind: "component", type: RoleSelectComponent, selector: "app-role-select", inputs: ["roleData", "cloudfrontUrl", "providerId", "providerName"], outputs: ["backToParent"] }, { kind: "component", type: Step2CoverageComponent, selector: "app-coverage", inputs: ["providerId", "providerName"] }, { kind: "component", type: WorkexperienceComponent, selector: "app-workexperience", inputs: ["providerId", "providerName"] }], animations: [
|
|
28431
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CredentialingComponent, isStandalone: false, selector: "app-credentialing", inputs: { data: "data" }, outputs: { back: "back" }, ngImport: i0, template: "<div class=\"credentialing-container\">\r\n <app-stepper></app-stepper>\r\n <div class=\"step-content\" [@stepTransition]=\"store.currentStep()\">\r\n <app-role-select (backToParent)=\"goBackToInitialProcess()\" [providerName] = \"providerName\" [providerId]=\"providerId\" [cloudfrontUrl]=\"cloudfrontUrl\" [roleData]=\"data\"\r\n *ngIf=\"store.currentStep() === 1\"></app-role-select>\r\n <app-coverage [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 2\"></app-coverage>\r\n <app-workexperience [cloudfrontUrl]=\"cloudfrontUrl\" [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 3\"></app-workexperience>\r\n <app-education [cloudfrontUrl]=\"cloudfrontUrl\" [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 4\"></app-education>\r\n <app-certification [cloudfrontUrl]=\"cloudfrontUrl\" [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 5\"></app-certification>\r\n <app-licenses [cloudfrontUrl]=\"cloudfrontUrl\" [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 6\"></app-licenses>\r\n <app-skills [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 7\"></app-skills>\r\n <app-tools [providerName] = \"providerName\" [providerId]=\"providerId\" [roleData]=\"data\" *ngIf=\"store.currentStep() === 8\"></app-tools>\r\n </div>\r\n</div>", styles: ["::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px!important;border:1px solid #dee2e6}.step-content{position:relative;min-height:400px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: StepperComponent, selector: "app-stepper" }, { kind: "component", type: EducationComponent, selector: "app-education", inputs: ["providerId", "providerName", "cloudfrontUrl"] }, { kind: "component", type: CertificationComponent, selector: "app-certification", inputs: ["providerId", "providerName", "cloudfrontUrl"] }, { kind: "component", type: SkillsComponent, selector: "app-skills", inputs: ["providerId", "providerName"] }, { kind: "component", type: LicensesComponent, selector: "app-licenses", inputs: ["providerId", "providerName", "cloudfrontUrl"] }, { kind: "component", type: ToolsComponent, selector: "app-tools", inputs: ["roleData", "providerId", "providerName"] }, { kind: "component", type: RoleSelectComponent, selector: "app-role-select", inputs: ["roleData", "cloudfrontUrl", "providerId", "providerName"], outputs: ["backToParent"] }, { kind: "component", type: Step2CoverageComponent, selector: "app-coverage", inputs: ["providerId", "providerName"] }, { kind: "component", type: WorkexperienceComponent, selector: "app-workexperience", inputs: ["providerId", "providerName", "cloudfrontUrl"] }], animations: [
|
|
28392
28432
|
trigger('stepTransition', [
|
|
28393
28433
|
transition('* <=> *', [
|
|
28394
28434
|
style({
|
|
@@ -28418,7 +28458,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
28418
28458
|
}))
|
|
28419
28459
|
])
|
|
28420
28460
|
])
|
|
28421
|
-
], template: "<div class=\"credentialing-container\">\r\n <app-stepper></app-stepper>\r\n <div class=\"step-content\" [@stepTransition]=\"store.currentStep()\">\r\n <app-role-select (backToParent)=\"goBackToInitialProcess()\" [providerName] = \"providerName\" [providerId]=\"providerId\" [cloudfrontUrl]=\"cloudfrontUrl\" [roleData]=\"data\"\r\n *ngIf=\"store.currentStep() === 1\"></app-role-select>\r\n <app-coverage [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 2\"></app-coverage>\r\n <app-workexperience [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 3\"></app-workexperience>\r\n <app-education [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 4\"></app-education>\r\n <app-certification [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 5\"></app-certification>\r\n <app-licenses [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 6\"></app-licenses>\r\n <app-skills [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 7\"></app-skills>\r\n <app-tools [providerName] = \"providerName\" [providerId]=\"providerId\" [roleData]=\"data\" *ngIf=\"store.currentStep() === 8\"></app-tools>\r\n </div>\r\n</div>", styles: ["::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px!important;border:1px solid #dee2e6}.step-content{position:relative;min-height:400px}\n"] }]
|
|
28461
|
+
], template: "<div class=\"credentialing-container\">\r\n <app-stepper></app-stepper>\r\n <div class=\"step-content\" [@stepTransition]=\"store.currentStep()\">\r\n <app-role-select (backToParent)=\"goBackToInitialProcess()\" [providerName] = \"providerName\" [providerId]=\"providerId\" [cloudfrontUrl]=\"cloudfrontUrl\" [roleData]=\"data\"\r\n *ngIf=\"store.currentStep() === 1\"></app-role-select>\r\n <app-coverage [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 2\"></app-coverage>\r\n <app-workexperience [cloudfrontUrl]=\"cloudfrontUrl\" [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 3\"></app-workexperience>\r\n <app-education [cloudfrontUrl]=\"cloudfrontUrl\" [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 4\"></app-education>\r\n <app-certification [cloudfrontUrl]=\"cloudfrontUrl\" [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 5\"></app-certification>\r\n <app-licenses [cloudfrontUrl]=\"cloudfrontUrl\" [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 6\"></app-licenses>\r\n <app-skills [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 7\"></app-skills>\r\n <app-tools [providerName] = \"providerName\" [providerId]=\"providerId\" [roleData]=\"data\" *ngIf=\"store.currentStep() === 8\"></app-tools>\r\n </div>\r\n</div>", styles: ["::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px!important;border:1px solid #dee2e6}.step-content{position:relative;min-height:400px}\n"] }]
|
|
28422
28462
|
}], ctorParameters: () => [{ type: CredentialingStore }, { type: undefined, decorators: [{
|
|
28423
28463
|
type: Inject,
|
|
28424
28464
|
args: [LIBRARY_CONFIG]
|
|
@@ -28644,6 +28684,7 @@ class InitialProcessComponent {
|
|
|
28644
28684
|
publicUrl: null,
|
|
28645
28685
|
};
|
|
28646
28686
|
points = [];
|
|
28687
|
+
showlogout = false;
|
|
28647
28688
|
pointsChange = new EventEmitter();
|
|
28648
28689
|
cleared = new EventEmitter();
|
|
28649
28690
|
companyForm;
|
|
@@ -28860,6 +28901,7 @@ class InitialProcessComponent {
|
|
|
28860
28901
|
this.roleContextService = roleContextService;
|
|
28861
28902
|
this.libConfig = libConfig;
|
|
28862
28903
|
const appType = this.libConfig.appType;
|
|
28904
|
+
this.showlogout = this.libConfig.isLogout;
|
|
28863
28905
|
console.log('App Type from provider:', appType);
|
|
28864
28906
|
this.setPrivacyAndTerms(appType);
|
|
28865
28907
|
this.branding =
|
|
@@ -29631,11 +29673,11 @@ class InitialProcessComponent {
|
|
|
29631
29673
|
this.destroy$.complete();
|
|
29632
29674
|
}
|
|
29633
29675
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InitialProcessComponent, deps: [{ token: i2.Router }, { token: UserDetailService }, { token: i3.FormBuilder }, { token: FileService }, { token: ProvidersService }, { token: RolesService }, { token: i7.BsModalService }, { token: ProviderContractorSubCategoryService }, { token: ProviderContractorSubCategoryService }, { token: i9.AuthService }, { token: i6.TokenService }, { token: i6.RoleContextService }, { token: LIBRARY_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
|
|
29634
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: InitialProcessComponent, isStandalone: false, selector: "app-initial-process", viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"card pb-2 pr-5\" style=\"margin-bottom: 30px;\">\r\n <ng-container class=\"load-page\" [style.visibility]=\"view == 1 ? 'visible' : 'hidden' \">\r\n <ul class=\"term-list para-comma\" [ngClass]=\"view == 1 ? '' : 'hidden-view'\">\r\n Thanks for joining\r\n <span class=\"brand-name\">{{ branding.displayName }}</span>.\r\n Our members and service providers rely on accurate info in your profile to\r\n connect you with work that suits your capabilities. Keep your profile\r\n complete, skills updated, licenses current, photos and logos professional,\r\n and schedule up to date.\r\n </ul>\r\n <div class=\"row col-12 mt-4\" [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n <div class=\"col-md-6 col-lg-6 col-sm-12\">\r\n <div class=\"form-group form-check agree\">\r\n <input #acceptTerms=\"ngModel\" [ngClass]=\"{ 'is-invalid': !model.acceptTerms && validatePage==1 }\"\r\n [(ngModel)]=\"model.acceptTerms\" type=\"checkbox\" name=\"acceptTerms\" id=\"acceptTerms\"\r\n class=\"form-check-input\" (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\"\r\n required>\r\n <label for=\"acceptTerms\" class=\"form-check-label checkmark pointer\"\r\n (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\">\r\n I agree to Terms and Conditions\r\n </label>\r\n <!-- <div *ngIf=\"!model.acceptTerms && validatePage==1\" class=\"invalid-feedback\">\r\n Accept Terms & Conditions is required\r\n </div> -->\r\n </div>\r\n <div class=\"form-group form-check agree\">\r\n <input #privacy=\"ngModel\" [ngClass]=\"{ 'is-invalid':!model.privacy && validatePage==1}\"\r\n (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\" [(ngModel)]=\"model.privacy\"\r\n type=\"checkbox\" name=\"privacy\" id=\"privacy\" class=\"form-check-input\" required>\r\n <label for=\"privacy\" class=\"form-check-label checkmark pointer\"\r\n (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\">\r\n I agree to Privacy Statement\r\n </label>\r\n <!-- <div *ngIf=\"!model.privacy && validatePage==1\" class=\"invalid-feedback\">\r\n Accept Privacy Statement\r\n </div> -->\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 justify-content-between row footer-signature\"\r\n [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n <!-- <div class=\"col-md-3 col-sm-3 slider-tab\">\r\n </div> -->\r\n\r\n <div class=\"col-6\"></div>\r\n <div class=\"col-md-12 col-sm-12 col-xl-3 text-end\">\r\n <h6>\r\n <button class=\"next\" (click)=\" next(2)\"\r\n [ngClass]=\"(((!points || !points?.length || points.length ==0) && !fileData ) || !model.acceptTerms || !model.privacy) ? 'disabled-btn':''\">\r\n <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n alt=\"Logo\">\r\n </button> \r\n </h6>\r\n </div>\r\n </div>\r\n <ng-container>\r\n <div class=\"term-signature col-md-6 col-lg-6 col-sm-12\" [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n <h6 class=\"checkmark\">Signature</h6>\r\n <div [ngClass]=\"{ 'd-none': signaturePadData?.publicUrl }\" class=\"sign-img mb-2\">\r\n <canvas #canvas [width]=\"255\" [height]=\"90\"></canvas>\r\n </div>\r\n <div [ngClass]=\"{ 'd-none': !signaturePadData?.publicUrl }\" class=\"mb-2\">\r\n <img [width]=\"255\" [height]=\"120\" [src]=\"signaturePadData?.publicUrl\" style=\"position: relative\" alt>\r\n </div>\r\n <h6 class=\"d-flex align-items-center gap-2\">\r\n <button (click)=\"clearPad()\" class=\"btn-clear btn-sm\">\r\n Clear\r\n </button>\r\n\r\n <!-- <button (click)=\"uploadImage.click()\" class=\"save-btn upload btn-sm\">\r\n <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\">\r\n Upload\r\n <input #uploadImage type=\"file\" class=\"image-upload d-none\" accept=\"image/*\"\r\n (change)=\"uploadSignImage($event)\">\r\n </button> -->\r\n </h6>\r\n\r\n <div *ngIf=\"validatePage==1 && (!points || !points?.length || points.length ==0) && !fileData\"\r\n class=\"invalid-feedback d-block\">\r\n Signature is required\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 2\">\r\n <div class=\"add-tab-view \">\r\n <ul>\r\n <h5>\r\n <b>\r\n Please choose the relevant sections in which you wish to\r\n participate\r\n </b>\r\n </h5>\r\n <br>\r\n <b class=\"para-comma\">\r\n Choose the areas you'd like to be part of \u2014 whether it's programs, services, events, or collaborations,\r\n you're in control of your involvement.\r\n <br>\r\n connect your business to others and prospective clients.\r\n </b>\r\n </ul>\r\n\r\n <div class=\"row mt-4\">\r\n <ng-container *ngFor=\"let userType of userViewRoles\">\r\n <div class=\"card card-design text-center user-card mx-2 my-2\" style=\"width: 12%;\"\r\n [ngClass]=\"userType.value === selectedRoleValue ? 'user-cards-active' : ''\"\r\n (click)=\"selectedUserRole(userType)\">\r\n <img [src]=\"userType?.img\" class=\"mb-2 mt-2\" style=\"width: 70px;height: 70px;\">\r\n <h6 class=\"m-0 mt-2\">{{userType.name}}</h6>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- <h6 class=\"inspect-add\">\r\n <button (click)=\"next(3);isBusiness=true;\" class=\"add-btn btn-sm\">\r\n Yes\r\n </button>\r\n \r\n <button (click)=\"isBusiness=false;view = 4;\" class=\"add-btn btn-sm\">\r\n No\r\n </button>\r\n </h6> -->\r\n </div>\r\n <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n <!-- <div class=\"col-md-3 col-sm-12 slider-tab text-center\">\r\n <img class=\"slider-view\" src=\"assets/images/icons/stepper-1.svg\" alt=\"Logo\">\r\n </div> -->\r\n <div class=\"col-5\"></div>\r\n <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n <h6>\r\n <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n Back\r\n </button>\r\n \r\n <button (click)=\"next(3)\" class=\"next\" [disabled]=\"!isUserSelected\"\r\n [ngClass]=\"!isUserSelected ? 'disabled-btn':''\">\r\n <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n alt=\"Logo\">\r\n </button>\r\n \r\n </h6>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 3\">\r\n <form [formGroup]=\"companyForm\" class=\"form\">\r\n <div class=\"term-list \">\r\n <ul>\r\n <h5>\r\n <b>\r\n Enter your business information here.\r\n </b>\r\n </h5>\r\n <br>\r\n </ul>\r\n <div class=\"profile-field\">\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{'is-invalid': ( f.companyName.errors && validatePage == 3) || providerError}\"\r\n type=\"text\" class=\"form-control\" id=\"companyName\" placeholder=\"Company Name\"\r\n formControlName=\"companyName\">\r\n <div *ngIf=\" f.companyName.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.companyName.errors.required\">\r\n Company Name is required\r\n </div>\r\n <div *ngIf=\"f.companyName.errors.minlength\">\r\n Company Name must be at least 2 characters\r\n </div>\r\n <div *ngIf=\"f.companyName.errors.maxLength\">\r\n Company Name must be less than 100 characters\r\n </div>\r\n </div>\r\n <div *ngIf=\"providerError\" class=\"invalid-feedback\">\r\n <div>\r\n {{providerError}}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input class=\"form-control block fw-medium shadow-none\" type=\"text\" name=\"inputPhone\"\r\n placeholder=\"Company Phone Number \" id=\"inputPhone\" autocomplete=\"off\" formControlName=\"phoneNumber\"\r\n appMobileMask [maxLength]=\"300\"\r\n [ngClass]=\"{'is-invalid': ( f.phoneNumber.errors && validatePage == 3) || providerError}\">\r\n <div *ngIf=\"f.phoneNumber.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.phoneNumber.errors.required\">\r\n Phone Number is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': f.address1.errors&& validatePage == 3 }\" type=\"text\"\r\n class=\"form-control\" id=\"businessAddress\" ngx-google-places-autocomplete [options]='options'\r\n (onAddressChange)=\"AddressChange($event)\" placeholder=\"Business Address 1\" formControlName=\"address1\">\r\n <div *ngIf=\" f.address1.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.address1.errors.required\">\r\n Business Address 1 is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"businessAddress2\" placeholder=\"Business Address 2\">\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': f.city.errors&& validatePage == 3 }\" type=\"text\" class=\"form-control\"\r\n id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n <div *ngIf=\" f.city.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.city.errors.required\">City is required</div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': f.state.errors&& validatePage == 3 }\" type=\"text\"\r\n class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n <div *ngIf=\" f.state.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.state.errors.required\">State is required</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [textMask]=\"{ mask: zipcodeMask }\"\r\n [ngClass]=\"{ 'is-invalid': f.zipcode.errors&& validatePage == 3 }\" type=\"text\" class=\"form-control\"\r\n id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n <div *ngIf=\" f.zipcode.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.zipcode.errors.required\">Zipcode is\r\n required</div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': f.country.errors && validatePage == 3}\" type=\"text\"\r\n class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n <div *ngIf=\" f.country.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.country.errors.required\">Country is\r\n required</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n <div *ngIf=\"selectedRole?.name == 'Contractor'\" style=\"padding: 0px 20px;border-radius: 5px;\">\r\n <div class=\"term-list pt-0\">\r\n <h5>\r\n <b>\r\n Contractor Category\r\n </b>\r\n </h5>\r\n <div class=\"profile-field\">\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-12 col-sm-12 mb-2\">\r\n <label></label>\r\n <ng-select [items]=\"contractorSubCategories\" bindLabel=\"name\" [multiple]=\"true\" [closeOnSelect]=\"false\"\r\n placeholder=\"Select Contractor Category\" (ngModelChange)=\"changeContractor($event)\"\r\n [(ngModel)]=\"selectedContractorCategories\">\r\n </ng-select>\r\n </div>\r\n </div>\r\n <accordion [isAnimated]=\"false\">\r\n <ng-container *ngFor=\"let item of selectedContractorCategories;let i=index\">\r\n <accordion-group [isOpen]=\"true\">\r\n <button accordion-heading class=\"w-100\" style=\"font-size: 16px;font-weight: 600;\">\r\n <div class=\"w-100 mt-2\">\r\n <div class=\"backdrop\">\r\n <input type=\"checkbox\" [(ngModel)]=\"item.selectAll\" [name]=\"item?.id\" [id]=\"item?.id\"\r\n (change)=\"selectAll($event,item?.items)\">\r\n <label [for]=\"item?.id\"> {{item?.name}}</label>\r\n </div>\r\n </div>\r\n </button>\r\n <div class=\"row\">\r\n <div class=\"backdrop col-4 form-control-sm\" *ngFor=\"let subItem of item?.items\">\r\n <input type=\"checkbox\" [(ngModel)]=\"subItem.selected\" [name]=\"subItem?.id\" [id]=\"subItem?.id\"\r\n (change)=\"unCheckedEvent($event,item)\">\r\n <label [for]=\"subItem?.id\"> {{subItem?.name}}</label>\r\n </div>\r\n </div>\r\n </accordion-group>\r\n </ng-container>\r\n </accordion>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n <!-- <div class=\"col-md-3 col-sm-12 slider-tab text-center\">\r\n <img class=\"slider-view\" src=\"assets/images/icons/stepper-2.svg\" alt=\"Logo\">\r\n </div> -->\r\n <div class=\"col-5\"></div>\r\n <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n <h6>\r\n <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n Back\r\n </button>\r\n \r\n <button class=\" next\" (click)=\"next(4)\">\r\n <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n alt=\"Logo\">\r\n </button>\r\n \r\n </h6>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 4\">\r\n\r\n <div class=\"add-tab \">\r\n <ul>\r\n <h5 class=\"p-4 pb-2\">\r\n <b>\r\n We need basic information's and headshot for your profile\r\n </b>\r\n <div class=\"form-group form-check agree p-0 mt-3\" *ngIf=\"isBusiness\">\r\n <input [(ngModel)]=\"isCopy\" type=\"checkbox\" name=\"isCopy\" id=\"isCopy\" class=\"form-check-input mt-2\"\r\n (change)=\"changeAddressUser()\">\r\n <label for=\"isCopy\" class=\"form-check-label checkmark\">\r\n Copy From Provider Infromation\r\n </label>\r\n </div>\r\n </h5>\r\n </ul>\r\n <div class=\"profile-field\">\r\n <form [formGroup]=\"userForm\" class=\"form pb-0\">\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.firstName.errors && validatePage == 4 }\" type=\"text\"\r\n class=\"form-control\" placeholder=\"Fist Name\" formControlName=\"firstName\" id=\"firstName\">\r\n <div *ngIf=\" u.firstName.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n First Name is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.lastName.errors && validatePage == 4 }\" type=\"text\"\r\n class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\">\r\n <div *ngIf=\" u.lastName.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.lastName.errors.required\">\r\n Last Name is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.email.errors && validatePage == 4 }\" type=\"text\"\r\n class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\">\r\n <div *ngIf=\" u.email.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.email.errors.required\">\r\n Emai is required\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-12 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.address1.errors && validatePage == 4 }\" [options]=\"options\"\r\n (onAddressChange)=\"AddressChangeUser($event)\" type=\"text\" class=\"form-control\"\r\n placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete>\r\n <div *ngIf=\" u.address1.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.address1.errors.required\">\r\n Home Address 1 is required\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n placeholder=\"Home Address 2\">\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.city.errors && validatePage == 4}\" type=\"text\" class=\"form-control\"\r\n id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n <div *ngIf=\" u.city.errors && validatePage ==4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.city.errors.required\">City is required</div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.state.errors && validatePage == 4 }\" type=\"text\"\r\n class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n <div *ngIf=\" u.state.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.state.errors.required\">State is required</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [textMask]=\"{ mask: zipcodeMask }\"\r\n [ngClass]=\"{ 'is-invalid': u.zipcode.errors && validatePage == 4 }\" type=\"text\" class=\"form-control\"\r\n id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n <div *ngIf=\" u.zipcode.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.zipcode.errors.required\">Zipcode is\r\n required</div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.country.errors && validatePage == 4 }\" type=\"text\"\r\n class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n <div *ngIf=\" u.country.errors && validatePage ==4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.country.errors.required\">Country is\r\n required</div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input class=\"form-control block shadow-none\" type=\"text\" name=\"inputPhone\" placeholder=\"Phone Number \"\r\n id=\"inputPhone\" autocomplete=\"off\" formControlName=\"phoneNumber\" appMobileMask [maxLength]=\"300\"\r\n [ngClass]=\"{'is-invalid': ( u.phoneNumber.errors && validatePage == 4)}\">\r\n <div *ngIf=\"u.phoneNumber.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors.required\">\r\n Phone Number is required\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"form-group mb-2 form\">\r\n <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\"\r\n class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n <input (click)=\"uploadImage1.click()\" [(ngModel)]=\"fileName\" readonly type=\"text\" class=\"form-control\"\r\n id=\"upload\" accept=\"image/*\" placeholder=\"Upload Profile Picture\">\r\n <img #uploadImage1 class=\"upload-image\" (click)=\"uploadFile.click()\" type=\"file\"\r\n src=\"assets/images/icons/upload.svg\" alt=\"Logo\">\r\n <div *ngIf=\"isImageRequired\" class=\"invalid-feedback d-block\">\r\n <div class=\"ms-1\">\r\n Please Upload Profile Image\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n <div>\r\n {{userError}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n <!-- <div class=\"col-md-3 col-sm-12 pt-3 slider-tab text-center\">\r\n <img class=\"slider-view\" src=\"assets/images/icons/stepper-3.svg\" alt=\"Logo\">\r\n </div> -->\r\n <div class=\"col-5\"></div>\r\n <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n <h6>\r\n <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n Back\r\n </button>\r\n \r\n <button class=\"next\" (click)=\"next(5)\" [disabled]=\"showLoader\"\r\n [config]=\"DefaultButtonSpinnerConfig\">\r\n <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n alt=\"Logo\">\r\n </button>\r\n \r\n </h6>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 5\">\r\n <ul class=\"term-list ps-3\">\r\n <h5>\r\n <b>\r\n Thanks, we got the basics down!\r\n </b>\r\n </h5>\r\n <br>\r\n <b class=\"para-comma\">\r\n Account created successfully. Next step: complete your profile.\r\n <br>\r\n <br>\r\n Profile completion is mandatory to participate in rosters, programs, requests, and platform workflows.\r\n Incomplete profiles will have limited access.\r\n <br>\r\n <br>\r\n You may access your dashboard at any time, but full functionality is available only after completion.\r\n </b>\r\n </ul>\r\n <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n <!-- <div class=\"col-md-3 col-lg-3 col-xl-3 col-sm-12 text-center\">\r\n <img class=\"slider ml-3\" src=\"assets/images/icons/stepper-4.svg\" alt=\"Logo\">\r\n </div> -->\r\n <div class=\"col-5\"></div>\r\n <div class=\"col-md-4 col-sm-12 col-xl-4 text-end row\">\r\n <div class=\"col-md-2 col-2\">\r\n <h6 style=\"margin-right: 3rem\">\r\n </h6>\r\n </div>\r\n\r\n \r\n <div class=\"col-md-8\">\r\n <h6>\r\n <button (click)=\"dashboard()\" class=\"go-btn btn-sm\">\r\n Go To Home \r\n <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\"\r\n src=\"assets/images/icons/next.svg\" alt=\"Logo\">\r\n </button>\r\n </h6>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div>test</div> -->\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 10\">\r\n <app-credentialing (back)=\"onCredentialingBack()\" [data]=\"credentialingData\"></app-credentialing>\r\n </ng-container>\r\n </div>\r\n</div>\r\n\r\n<ng-template #termsAndConditionsModel>\r\n <div class=\"modal-dialog modal-dialog-centered\">\r\n <div class=\"modal-content terms-fixed-modal\">\r\n\r\n <!-- HEADER -->\r\n <div class=\"modal-header\">\r\n <h4 class=\"modal-title fw-bold title-popup\">\r\n {{ termsAndConditionTitle }}\r\n </h4>\r\n </div>\r\n\r\n <!-- SCROLLABLE CONTENT ONLY -->\r\n <div class=\"modal-body terms-scroll-area\" (scroll)=\"onTermsScroll($event)\">\r\n <ng-container *ngIf=\"termsAndConditionTitle == 'Terms and Conditions'\">\r\n <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n </app-terms-conditions>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"termsAndConditionTitle != 'Terms and Conditions'\">\r\n <app-privacy-policy [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n </app-privacy-policy>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- FOOTER (NOT SCROLLING) -->\r\n <div>\r\n <div class=\"modal-footer text-end\" style=\"display: block;\">\r\n <!-- YOUR BUTTONS \u2014 UNCHANGED -->\r\n <button type=\"button\" class=\"btn btn-primary btn-sm px-4\"\r\n style=\"background: #d3dae6; color: #98a2b3; border: #D3DAE6 !important;\"\r\n (click)=\"decline(termsAndConditionTitle); modelRef.hide();\">\r\n Decline\r\n </button>\r\n\r\n <button type=\"button\" class=\"btn btn-primary btn-sm px-4\" style=\"color:white;background: #4077AD;\"\r\n [disabled]=\"!isAgreeEnabled\" (click)=\"agree(termsAndConditionTitle); modelRef.hide();\">\r\n Agree\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".brand-name{font-weight:700;font-size:calc(100% + 4px)}::ng-deep .backdrop{background-color:transparent!important}.filter-black{filter:brightness(.4)!important}.footer-view{margin-top:3rem;margin-left:0;margin-right:0}.footer-signature{margin-top:9rem}.slider-view{width:11rem;margin-left:1px}.container{margin-top:30px}.container .card{border-radius:1.25rem}.container .header{padding:33px 10px 0}.container .header .logo{width:15%;height:80%}.container .form-control{padding:.75rem 1rem;border-color:#a1a1a1}.container .form-control:focus{color:#000;box-shadow:none;border-color:#a1a1a1!important}.container .form-control::placeholder{font-weight:500;font-size:12px;color:#a1a1a1}.container .link{color:#4077ad}.container .link-signup{font-weight:bolder}.container .form-check-label{margin-bottom:0;padding-top:9px}.container .content-view{margin-top:10%}.container .content-description{margin-top:25%}.container .tag-content{color:#fff9e8;margin-left:9%}.container .tag-content p{color:#fff9e8}.container .form-check-input:checked{background-color:#000;border-color:#000}.container .img-tick{margin:-31px 12px 0 -35px}.container .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #000000}.container .form-check-input:focus{box-shadow:none}.container input[type=checkbox]{accent-color:#000000}.term-list{padding:48px 60px 6px 0;margin-left:30px;color:\"#1f1f1fdb\"}.add-tab{padding:75px 75px 6px 1px;margin-left:50px;color:\"#1f1f1fdb\"}.add-tab-view{padding:75px 75px 6px 1px;margin-left:80px;color:\"#1f1f1fdb\"}.inspect-add{margin-top:3rem}.add-btn{font-size:16px;border-radius:5px;transition:.2s;padding:.25rem .5rem;background:#fff;border:1px solid rgba(148,147,147,.1882352941);color:#444;line-height:48px;box-shadow:0 1px 9px #98a2b3;width:9rem}.add-btn:hover{border:1px solid rgba(148,147,147,.1882352941);box-shadow:none}.agree{padding:0 0 8px 47px}.agree .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #98A2B3;width:14px;height:14px;margin:5px 9px 0 -35px}.agree .form-check-input:focus{box-shadow:none}.agree .form-check-input:checked{background-color:#000;border-color:#000}.agree .invalid-feedback{font-size:10px!important;margin:0 0 0 21px}.checkmark{vertical-align:text-bottom;color:#98a2b3;font-weight:500;font-size:12px}.term-signature{padding-left:16rem;padding-right:65px;position:absolute;margin:150px 0 0 50%}.participate-tab{height:135px;width:142px}.card-design{height:147px;width:160px;padding-left:10px;margin-left:42px;background:#fff0;border:2px solid #98A2B3;box-shadow:0 0 4px #98a2b3;border-radius:27px;margin-bottom:42px}.upload{height:39px;margin-top:-4px;width:126px;font-size:12px}.participate-tab{margin-top:-25px}.slider{width:14rem;margin-left:69px}.btn-clear{background:#d3dae6;color:#98a2b3;font-size:12px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;width:46%;line-height:28px}.btn-close{background:#f1f4fa;color:#98a2b3;font-size:17px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;font-weight:500;width:116px;color:#737a87;line-height:28px}.view-logo{padding-top:1%;padding-bottom:4%;text-align:center}.back-btn{border-radius:45px;height:41px}.next{background:#4077ad;border-radius:30px;height:60px;width:60px;border:white}.profile-field{margin-top:-10px}.profile-field input{line-height:30px;margin:-10px 3px 3px}.load-page{padding:21px 49px 13px 34px}.sign-img{width:291px;height:95px;border-radius:8px;border:1px solid rgba(179,178,178,.33);margin-top:19px}.upload-image{height:16px;width:16px;position:absolute;margin-left:66rem;margin-top:-39px}.para-comma{font-weight:500}.go-btn{border-radius:45px;height:50px;padding:0 20px;background:#4077ad;border:1px solid #4077ad;color:#fff;line-height:28px;font-size:14px;font-weight:500}.text-label{color:#747b83;font-weight:500}.form{padding:20px;border-radius:5px}.form-control:focus{color:#000;box-shadow:none;border-color:#848484!important}.form-control::placeholder{font-weight:500;font-size:12px;color:#bec1be;padding-left:10px}.btn-primary:active{background-color:#50575e}@media screen and (min-width: 500px) and (max-width: 769px){.content-view{background:#0c1620;width:44rem;margin:31px 0 0!important;padding:28px 32px 17px 71px!important;border-radius:29px}.upload-image{margin-left:25rem!important}}@media screen and (min-width: 768px) and (max-width: 1024px){.back-btn{height:31px;width:82px;position:absolute;margin-left:-53px}.back-tab{position:absolute;margin-left:-87px;height:37px}.go-btn{width:175px;height:44px}.term-signature{padding-left:10px}.upload-image{margin-left:40rem}}@media screen and (min-width: 374px) and (max-width: 426px){.head-logo{width:216px;padding-bottom:16px}.slider{visibility:hidden}.back-btn{height:31px;width:82px;position:absolute;margin-left:73px;margin-top:23px}.go-btn{width:175px;height:44px}.upload-image{margin-left:16rem}.term-signature{margin:84% 0 7px 4%}}@media screen and (min-width: 320px) and (max-width: 426px){.footer-signature{margin-top:20rem}.login .head-logo{padding:16px 2px 0;width:38%!important;height:40%!important}.container{margin-top:5px!important}.card{padding:2px!important}.tag-content{margin:3% 0 0!important;background-color:#121b24;border-radius:13px}.img-tick{margin:3px!important}.slider{visibility:hidden}.load-page{padding:0}.head-logo{width:216px;padding-bottom:16px}.back-btn{height:26px;width:71px;position:absolute;margin-left:-17rem!important;font-size:10px;margin-top:23px}.go-btn{width:142px;height:36px;margin-right:-28px;font-size:10px}.add-tab,.add-tab-view{padding:30px 33px 2px 3px;margin-left:15px}.add-btn{width:6rem}.slider-tab{visibility:hidden}.back-tab{margin-left:-14rem;margin-top:1px;font-size:14px;height:39px}.participate-tab{height:96px;width:87px}.card-design{height:124px;width:125px;padding-left:17px;margin-left:30px}.term-signature{padding:22px 22px 13px 27px}.term-list{padding:43px 10px 10px 3px;margin-left:0;text-align:-webkit-center}}@media screen and (min-width: 320px) and (max-width: 376px){.agree{padding:0 0 8px 25px}.participate-tab{height:96px;width:87px}.card-design{height:109px;width:97px;padding-left:4px;margin-left:10px}.card-design h6{font-size:10px;padding-left:14px;font-weight:600}.sign-img{width:270px}.term-list{padding:20px 20px 6px 4px;margin-left:13px}}@media screen and (min-width: 320px) and (max-width: 350px){.upload-image{height:13px;width:11px;margin-left:10rem;margin-top:-35px}.btn-clear{width:92px}.term-signature{margin:84% 0 7px 4%}}.disabled-btn{cursor:not-allowed!important;background:#4077ad!important;color:#fff!important}.modal-dialog .modal-content{border-radius:12px}.title-popup{font-size:18px;color:#0c1620}ul.term-list-data li{padding-bottom:5px;font-size:13px;font-weight:500;line-height:21px}ol,ul,dl{margin-top:0;margin-bottom:1rem}::ng-deep .modal-content{background:none!important;width:100%;border:none}.hidden-view{display:none}.header-container{position:relative;padding:20px}.view-logo{text-align:center}.logout-button{top:20px;right:20px;position:absolute}.logout-button button{background:none;border:none;font-size:16px;display:flex;align-items:center;cursor:pointer}.logout-button img{margin-right:5px;height:20px}.user-card{align-items:center;color:#4077ad;cursor:pointer}.user-cards-active{background:#4077ad;color:#fff}.save-btn.upload{border:1px solid #4077AD;background-color:#4077ad;color:#fff;border-radius:5px;background:#4077ad;padding:4px 10px;display:inline-flex;align-items:center;gap:6px}.save-btn.upload img{filter:brightness(0) invert(1)}.form-check.agree{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}.form-check.agree .form-check-input{margin-top:4px;flex-shrink:0}.form-check.agree .form-check-label{line-height:1.4;cursor:pointer;white-space:normal}.spinner-16{width:16px;height:16px}.h6-buttons{display:flex;align-items:center;gap:8px}.form-check.agree{display:flex;align-items:flex-start;margin-bottom:14px}.form-check-input{position:absolute;opacity:0;cursor:pointer}.form-check-label{position:relative;padding-left:28px;cursor:pointer;font-size:14px;line-height:20px;color:#212529;-webkit-user-select:none;user-select:none}.form-check-label:before{content:\"\";position:absolute;left:0;top:8px;width:18px;height:18px;border:2px solid #adb5bd;border-radius:4px;background:#fff;transition:all .2s ease}.form-check-label:after{content:\"\";position:absolute;left:5px;top:10px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .15s ease}.form-check-input:checked+.form-check-label:before{background-color:#4077ad;border-color:#4077ad}.form-check-input:checked+.form-check-label:after{transform:rotate(45deg) scale(1)}.form-check-label:hover:before{border-color:#4077ad}.form-check-input:focus+.form-check-label:before{box-shadow:0 0 0 3px #0d6efd40}.form-check-input.is-invalid+.form-check-label:before{border-color:#dc3545}.form-check-input.is-invalid:checked+.form-check-label:before{background-color:#dc3545}.invalid-feedback{display:block;font-size:12px;margin-left:7px;margin-top:4px}::ng-deep .modal-dialog{max-width:750px}.user-cards-active{background-color:#4077ad;color:#fff;border:2px solid #4077AD}.terms-fixed-modal{width:1080px;height:700px;display:flex;flex-direction:column}.terms-scroll-area{flex:1 1 auto;overflow-y:auto;padding:16px}body.modal-open{overflow:hidden!important}.modal{z-index:1055!important}.modal-backdrop{z-index:1050!important}.modal-dialog{margin:auto;pointer-events:auto}.modal-content{position:relative;z-index:1060;background-color:#fff}\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: 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.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.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { 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: "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"] }, { kind: "directive", type: GooglePlaceDirective, selector: "[ngx-google-places-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { kind: "component", type: TermsConditionsComponent, selector: "app-terms-conditions", inputs: ["title", "branding", "PrivacyAndTerms"] }, { kind: "component", type: PrivacyPolicyComponent, selector: "app-privacy-policy", inputs: ["title", "branding", "PrivacyAndTerms"] }, { kind: "component", type: CredentialingComponent, selector: "app-credentialing", inputs: ["data"], outputs: ["back"] }] });
|
|
29676
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: InitialProcessComponent, isStandalone: false, selector: "app-initial-process", viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"mb-4 logout-container\" *ngIf=\"showlogout\">\r\n <span class=\"logout-wrapper\" (click)=\"logout()\">\r\n <span class=\"logout-icon\"></span>\r\n <span class=\"logout-text\">Logout</span>\r\n </span>\r\n </div>\r\n <div class=\"card pb-2 pr-5\" style=\"margin-bottom: 30px;\">\r\n <ng-container class=\"load-page\" [style.visibility]=\"view == 1 ? 'visible' : 'hidden' \">\r\n <ul class=\"term-list para-comma\" [ngClass]=\"view == 1 ? '' : 'hidden-view'\">\r\n Thanks for joining\r\n <span class=\"brand-name\">{{ branding.displayName }}</span>.\r\n Our members and service providers rely on accurate info in your profile to\r\n connect you with work that suits your capabilities. Keep your profile\r\n complete, skills updated, licenses current, photos and logos professional,\r\n and schedule up to date.\r\n </ul>\r\n <div class=\"row col-12 mt-4\" [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n <div class=\"col-md-6 col-lg-6 col-sm-12\">\r\n <div class=\"form-group form-check agree\">\r\n <input #acceptTerms=\"ngModel\" [ngClass]=\"{ 'is-invalid': !model.acceptTerms && validatePage==1 }\"\r\n [(ngModel)]=\"model.acceptTerms\" type=\"checkbox\" name=\"acceptTerms\" id=\"acceptTerms\"\r\n class=\"form-check-input\" (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\"\r\n required>\r\n <label for=\"acceptTerms\" class=\"form-check-label checkmark pointer\"\r\n (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\">\r\n I agree to Terms and Conditions\r\n </label>\r\n <!-- <div *ngIf=\"!model.acceptTerms && validatePage==1\" class=\"invalid-feedback\">\r\n Accept Terms & Conditions is required\r\n </div> -->\r\n </div>\r\n <div class=\"form-group form-check agree\">\r\n <input #privacy=\"ngModel\" [ngClass]=\"{ 'is-invalid':!model.privacy && validatePage==1}\"\r\n (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\" [(ngModel)]=\"model.privacy\"\r\n type=\"checkbox\" name=\"privacy\" id=\"privacy\" class=\"form-check-input\" required>\r\n <label for=\"privacy\" class=\"form-check-label checkmark pointer\"\r\n (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\">\r\n I agree to Privacy Statement\r\n </label>\r\n <!-- <div *ngIf=\"!model.privacy && validatePage==1\" class=\"invalid-feedback\">\r\n Accept Privacy Statement\r\n </div> -->\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 justify-content-between row footer-signature\"\r\n [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n <!-- <div class=\"col-md-3 col-sm-3 slider-tab\">\r\n </div> -->\r\n\r\n <div class=\"col-6\"></div>\r\n <div class=\"col-md-12 col-sm-12 col-xl-3 text-end\">\r\n <h6>\r\n <button class=\"next\" (click)=\" next(2)\"\r\n [ngClass]=\"(((!points || !points?.length || points.length ==0) && !fileData ) || !model.acceptTerms || !model.privacy) ? 'disabled-btn':''\">\r\n <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n alt=\"Logo\">\r\n </button> \r\n </h6>\r\n </div>\r\n </div>\r\n <ng-container>\r\n <div class=\"term-signature col-md-6 col-lg-6 col-sm-12\" [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n <h6 class=\"checkmark\">Signature</h6>\r\n <div [ngClass]=\"{ 'd-none': signaturePadData?.publicUrl }\" class=\"sign-img mb-2\">\r\n <canvas #canvas [width]=\"255\" [height]=\"90\"></canvas>\r\n </div>\r\n <div [ngClass]=\"{ 'd-none': !signaturePadData?.publicUrl }\" class=\"mb-2\">\r\n <img [width]=\"255\" [height]=\"120\" [src]=\"signaturePadData?.publicUrl\" style=\"position: relative\" alt>\r\n </div>\r\n <h6 class=\"d-flex align-items-center gap-2\">\r\n <button (click)=\"clearPad()\" class=\"btn-clear btn-sm\">\r\n Clear\r\n </button>\r\n\r\n <!-- <button (click)=\"uploadImage.click()\" class=\"save-btn upload btn-sm\">\r\n <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\">\r\n Upload\r\n <input #uploadImage type=\"file\" class=\"image-upload d-none\" accept=\"image/*\"\r\n (change)=\"uploadSignImage($event)\">\r\n </button> -->\r\n </h6>\r\n\r\n <div *ngIf=\"validatePage==1 && (!points || !points?.length || points.length ==0) && !fileData\"\r\n class=\"invalid-feedback d-block\">\r\n Signature is required\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 2\">\r\n <div class=\"add-tab-view \">\r\n <ul>\r\n <h5>\r\n <b>\r\n Please choose the relevant sections in which you wish to\r\n participate\r\n </b>\r\n </h5>\r\n <br>\r\n <b class=\"para-comma\">\r\n Choose the areas you'd like to be part of \u2014 whether it's programs, services, events, or collaborations,\r\n you're in control of your involvement.\r\n <br>\r\n connect your business to others and prospective clients.\r\n </b>\r\n </ul>\r\n\r\n <div class=\"row mt-4\">\r\n <ng-container *ngFor=\"let userType of userViewRoles\">\r\n <div class=\"card card-design text-center user-card mx-2 my-2\" style=\"width: 12%;\"\r\n [ngClass]=\"userType.value === selectedRoleValue ? 'user-cards-active' : ''\"\r\n (click)=\"selectedUserRole(userType)\">\r\n <img [src]=\"userType?.img\" class=\"mb-2 mt-2\" style=\"width: 70px;height: 70px;\">\r\n <h6 class=\"m-0 mt-2\">{{userType.name}}</h6>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- <h6 class=\"inspect-add\">\r\n <button (click)=\"next(3);isBusiness=true;\" class=\"add-btn btn-sm\">\r\n Yes\r\n </button>\r\n \r\n <button (click)=\"isBusiness=false;view = 4;\" class=\"add-btn btn-sm\">\r\n No\r\n </button>\r\n </h6> -->\r\n </div>\r\n <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n <!-- <div class=\"col-md-3 col-sm-12 slider-tab text-center\">\r\n <img class=\"slider-view\" src=\"assets/images/icons/stepper-1.svg\" alt=\"Logo\">\r\n </div> -->\r\n <div class=\"col-5\"></div>\r\n <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n <h6>\r\n <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n Back\r\n </button>\r\n \r\n <button (click)=\"next(3)\" class=\"next\" [disabled]=\"!isUserSelected\"\r\n [ngClass]=\"!isUserSelected ? 'disabled-btn':''\">\r\n <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n alt=\"Logo\">\r\n </button>\r\n \r\n </h6>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 3\">\r\n <form [formGroup]=\"companyForm\" class=\"form\">\r\n <div class=\"term-list \">\r\n <ul>\r\n <h5>\r\n <b>\r\n Enter your business information here.\r\n </b>\r\n </h5>\r\n <br>\r\n </ul>\r\n <div class=\"profile-field\">\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{'is-invalid': ( f.companyName.errors && validatePage == 3) || providerError}\"\r\n type=\"text\" class=\"form-control\" id=\"companyName\" placeholder=\"Company Name\"\r\n formControlName=\"companyName\">\r\n <div *ngIf=\" f.companyName.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.companyName.errors.required\">\r\n Company Name is required\r\n </div>\r\n <div *ngIf=\"f.companyName.errors.minlength\">\r\n Company Name must be at least 2 characters\r\n </div>\r\n <div *ngIf=\"f.companyName.errors.maxLength\">\r\n Company Name must be less than 100 characters\r\n </div>\r\n </div>\r\n <div *ngIf=\"providerError\" class=\"invalid-feedback\">\r\n <div>\r\n {{providerError}}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input class=\"form-control block fw-medium shadow-none\" type=\"text\" name=\"inputPhone\"\r\n placeholder=\"Company Phone Number \" id=\"inputPhone\" autocomplete=\"off\" formControlName=\"phoneNumber\"\r\n appMobileMask [maxLength]=\"300\"\r\n [ngClass]=\"{'is-invalid': ( f.phoneNumber.errors && validatePage == 3) || providerError}\">\r\n <div *ngIf=\"f.phoneNumber.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.phoneNumber.errors.required\">\r\n Phone Number is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': f.address1.errors&& validatePage == 3 }\" type=\"text\"\r\n class=\"form-control\" id=\"businessAddress\" ngx-google-places-autocomplete [options]='options'\r\n (onAddressChange)=\"AddressChange($event)\" placeholder=\"Business Address 1\" formControlName=\"address1\">\r\n <div *ngIf=\" f.address1.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.address1.errors.required\">\r\n Business Address 1 is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"businessAddress2\" placeholder=\"Business Address 2\">\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': f.city.errors&& validatePage == 3 }\" type=\"text\" class=\"form-control\"\r\n id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n <div *ngIf=\" f.city.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.city.errors.required\">City is required</div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': f.state.errors&& validatePage == 3 }\" type=\"text\"\r\n class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n <div *ngIf=\" f.state.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.state.errors.required\">State is required</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [textMask]=\"{ mask: zipcodeMask }\"\r\n [ngClass]=\"{ 'is-invalid': f.zipcode.errors&& validatePage == 3 }\" type=\"text\" class=\"form-control\"\r\n id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n <div *ngIf=\" f.zipcode.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.zipcode.errors.required\">Zipcode is\r\n required</div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': f.country.errors && validatePage == 3}\" type=\"text\"\r\n class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n <div *ngIf=\" f.country.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.country.errors.required\">Country is\r\n required</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n <div *ngIf=\"selectedRole?.name == 'Contractor'\" style=\"padding: 0px 20px;border-radius: 5px;\">\r\n <div class=\"term-list pt-0\">\r\n <h5>\r\n <b>\r\n Contractor Category\r\n </b>\r\n </h5>\r\n <div class=\"profile-field\">\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-12 col-sm-12 mb-2\">\r\n <label></label>\r\n <ng-select [items]=\"contractorSubCategories\" bindLabel=\"name\" [multiple]=\"true\" [closeOnSelect]=\"false\"\r\n placeholder=\"Select Contractor Category\" (ngModelChange)=\"changeContractor($event)\"\r\n [(ngModel)]=\"selectedContractorCategories\">\r\n </ng-select>\r\n </div>\r\n </div>\r\n <accordion [isAnimated]=\"false\">\r\n <ng-container *ngFor=\"let item of selectedContractorCategories;let i=index\">\r\n <accordion-group [isOpen]=\"true\">\r\n <button accordion-heading class=\"w-100\" style=\"font-size: 16px;font-weight: 600;\">\r\n <div class=\"w-100 mt-2\">\r\n <div class=\"backdrop\">\r\n <input type=\"checkbox\" [(ngModel)]=\"item.selectAll\" [name]=\"item?.id\" [id]=\"item?.id\"\r\n (change)=\"selectAll($event,item?.items)\">\r\n <label [for]=\"item?.id\"> {{item?.name}}</label>\r\n </div>\r\n </div>\r\n </button>\r\n <div class=\"row\">\r\n <div class=\"backdrop col-4 form-control-sm\" *ngFor=\"let subItem of item?.items\">\r\n <input type=\"checkbox\" [(ngModel)]=\"subItem.selected\" [name]=\"subItem?.id\" [id]=\"subItem?.id\"\r\n (change)=\"unCheckedEvent($event,item)\">\r\n <label [for]=\"subItem?.id\"> {{subItem?.name}}</label>\r\n </div>\r\n </div>\r\n </accordion-group>\r\n </ng-container>\r\n </accordion>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n <!-- <div class=\"col-md-3 col-sm-12 slider-tab text-center\">\r\n <img class=\"slider-view\" src=\"assets/images/icons/stepper-2.svg\" alt=\"Logo\">\r\n </div> -->\r\n <div class=\"col-5\"></div>\r\n <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n <h6>\r\n <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n Back\r\n </button>\r\n \r\n <button class=\" next\" (click)=\"next(4)\">\r\n <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n alt=\"Logo\">\r\n </button>\r\n \r\n </h6>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 4\">\r\n\r\n <div class=\"add-tab \">\r\n <ul>\r\n <h5 class=\"p-4 pb-2\">\r\n <b>\r\n We need basic information's and headshot for your profile\r\n </b>\r\n <div class=\"form-group form-check agree p-0 mt-3\" *ngIf=\"isBusiness\">\r\n <input [(ngModel)]=\"isCopy\" type=\"checkbox\" name=\"isCopy\" id=\"isCopy\" class=\"form-check-input mt-2\"\r\n (change)=\"changeAddressUser()\">\r\n <label for=\"isCopy\" class=\"form-check-label checkmark\">\r\n Copy From Provider Infromation\r\n </label>\r\n </div>\r\n </h5>\r\n </ul>\r\n <div class=\"profile-field\">\r\n <form [formGroup]=\"userForm\" class=\"form pb-0\">\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.firstName.errors && validatePage == 4 }\" type=\"text\"\r\n class=\"form-control\" placeholder=\"Fist Name\" formControlName=\"firstName\" id=\"firstName\">\r\n <div *ngIf=\" u.firstName.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n First Name is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.lastName.errors && validatePage == 4 }\" type=\"text\"\r\n class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\">\r\n <div *ngIf=\" u.lastName.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.lastName.errors.required\">\r\n Last Name is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.email.errors && validatePage == 4 }\" type=\"text\"\r\n class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\">\r\n <div *ngIf=\" u.email.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.email.errors.required\">\r\n Emai is required\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-12 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.address1.errors && validatePage == 4 }\" [options]=\"options\"\r\n (onAddressChange)=\"AddressChangeUser($event)\" type=\"text\" class=\"form-control\"\r\n placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete>\r\n <div *ngIf=\" u.address1.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.address1.errors.required\">\r\n Home Address 1 is required\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n placeholder=\"Home Address 2\">\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.city.errors && validatePage == 4}\" type=\"text\" class=\"form-control\"\r\n id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n <div *ngIf=\" u.city.errors && validatePage ==4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.city.errors.required\">City is required</div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.state.errors && validatePage == 4 }\" type=\"text\"\r\n class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n <div *ngIf=\" u.state.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.state.errors.required\">State is required</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [textMask]=\"{ mask: zipcodeMask }\"\r\n [ngClass]=\"{ 'is-invalid': u.zipcode.errors && validatePage == 4 }\" type=\"text\" class=\"form-control\"\r\n id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n <div *ngIf=\" u.zipcode.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.zipcode.errors.required\">Zipcode is\r\n required</div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.country.errors && validatePage == 4 }\" type=\"text\"\r\n class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n <div *ngIf=\" u.country.errors && validatePage ==4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.country.errors.required\">Country is\r\n required</div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input class=\"form-control block shadow-none\" type=\"text\" name=\"inputPhone\" placeholder=\"Phone Number \"\r\n id=\"inputPhone\" autocomplete=\"off\" formControlName=\"phoneNumber\" appMobileMask [maxLength]=\"300\"\r\n [ngClass]=\"{'is-invalid': ( u.phoneNumber.errors && validatePage == 4)}\">\r\n <div *ngIf=\"u.phoneNumber.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors.required\">\r\n Phone Number is required\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"form-group mb-2 form\">\r\n <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\"\r\n class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n <input (click)=\"uploadImage1.click()\" [(ngModel)]=\"fileName\" readonly type=\"text\" class=\"form-control\"\r\n id=\"upload\" accept=\"image/*\" placeholder=\"Upload Profile Picture\">\r\n <img #uploadImage1 class=\"upload-image\" (click)=\"uploadFile.click()\" type=\"file\"\r\n src=\"assets/images/icons/upload.svg\" alt=\"Logo\">\r\n <div *ngIf=\"isImageRequired\" class=\"invalid-feedback d-block\">\r\n <div class=\"ms-1\">\r\n Please Upload Profile Image\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n <div>\r\n {{userError}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n <!-- <div class=\"col-md-3 col-sm-12 pt-3 slider-tab text-center\">\r\n <img class=\"slider-view\" src=\"assets/images/icons/stepper-3.svg\" alt=\"Logo\">\r\n </div> -->\r\n <div class=\"col-5\"></div>\r\n <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n <h6>\r\n <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n Back\r\n </button>\r\n \r\n <button class=\"next\" (click)=\"next(5)\" [disabled]=\"showLoader\" [config]=\"DefaultButtonSpinnerConfig\">\r\n <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n alt=\"Logo\">\r\n </button>\r\n \r\n </h6>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 5\">\r\n <ul class=\"term-list ps-3\">\r\n <h5>\r\n <b>\r\n Thanks, we got the basics down!\r\n </b>\r\n </h5>\r\n <br>\r\n <b class=\"para-comma\">\r\n Account created successfully. Next step: complete your profile.\r\n <br>\r\n <br>\r\n Profile completion is mandatory to participate in rosters, programs, requests, and platform workflows.\r\n Incomplete profiles will have limited access.\r\n <br>\r\n <br>\r\n You may access your dashboard at any time, but full functionality is available only after completion.\r\n </b>\r\n </ul>\r\n <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n <!-- <div class=\"col-md-3 col-lg-3 col-xl-3 col-sm-12 text-center\">\r\n <img class=\"slider ml-3\" src=\"assets/images/icons/stepper-4.svg\" alt=\"Logo\">\r\n </div> -->\r\n <div class=\"col-5\"></div>\r\n <div class=\"col-md-4 col-sm-12 col-xl-4 text-end row\">\r\n <div class=\"col-md-2 col-2\">\r\n <h6 style=\"margin-right: 3rem\">\r\n </h6>\r\n </div>\r\n\r\n \r\n <div class=\"col-md-8\">\r\n <h6>\r\n <button (click)=\"dashboard()\" class=\"go-btn btn-sm\">\r\n Go To Home \r\n <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\"\r\n src=\"assets/images/icons/next.svg\" alt=\"Logo\">\r\n </button>\r\n </h6>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div>test</div> -->\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 10\">\r\n <app-credentialing (back)=\"onCredentialingBack()\" [data]=\"credentialingData\"></app-credentialing>\r\n </ng-container>\r\n </div>\r\n</div>\r\n\r\n<ng-template #termsAndConditionsModel>\r\n <div class=\"modal-dialog modal-dialog-centered\">\r\n <div class=\"modal-content terms-fixed-modal\">\r\n\r\n <!-- HEADER -->\r\n <div class=\"modal-header\">\r\n <h4 class=\"modal-title fw-bold title-popup\">\r\n {{ termsAndConditionTitle }}\r\n </h4>\r\n </div>\r\n\r\n <!-- SCROLLABLE CONTENT ONLY -->\r\n <div class=\"modal-body terms-scroll-area\" (scroll)=\"onTermsScroll($event)\">\r\n <ng-container *ngIf=\"termsAndConditionTitle == 'Terms and Conditions'\">\r\n <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n </app-terms-conditions>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"termsAndConditionTitle != 'Terms and Conditions'\">\r\n <app-privacy-policy [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n </app-privacy-policy>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- FOOTER (NOT SCROLLING) -->\r\n <div>\r\n <div class=\"modal-footer text-end\" style=\"display: block;\">\r\n <!-- YOUR BUTTONS \u2014 UNCHANGED -->\r\n <button type=\"button\" class=\"btn btn-primary btn-sm px-4\"\r\n style=\"background: #d3dae6; color: #98a2b3; border: #D3DAE6 !important;\"\r\n (click)=\"decline(termsAndConditionTitle); modelRef.hide();\">\r\n Decline\r\n </button>\r\n\r\n <button type=\"button\" class=\"btn btn-primary btn-sm px-4\" style=\"color:white;background: #4077AD;\"\r\n [disabled]=\"!isAgreeEnabled\" (click)=\"agree(termsAndConditionTitle); modelRef.hide();\">\r\n Agree\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".brand-name{font-weight:700;font-size:calc(100% + 4px)}::ng-deep .backdrop{background-color:transparent!important}.filter-black{filter:brightness(.4)!important}.footer-view{margin-top:3rem;margin-left:0;margin-right:0}.footer-signature{margin-top:9rem}.slider-view{width:11rem;margin-left:1px}.container{margin-top:30px}.container .card{border-radius:1.25rem}.container .header{padding:33px 10px 0}.container .header .logo{width:15%;height:80%}.container .form-control{padding:.75rem 1rem;border-color:#a1a1a1}.container .form-control:focus{color:#000;box-shadow:none;border-color:#a1a1a1!important}.container .form-control::placeholder{font-weight:500;font-size:12px;color:#a1a1a1}.container .link{color:#4077ad}.container .link-signup{font-weight:bolder}.container .form-check-label{margin-bottom:0;padding-top:9px}.container .content-view{margin-top:10%}.container .content-description{margin-top:25%}.container .tag-content{color:#fff9e8;margin-left:9%}.container .tag-content p{color:#fff9e8}.container .form-check-input:checked{background-color:#000;border-color:#000}.container .img-tick{margin:-31px 12px 0 -35px}.container .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #000000}.container .form-check-input:focus{box-shadow:none}.container input[type=checkbox]{accent-color:#000000}.term-list{padding:48px 60px 6px 0;margin-left:30px;color:\"#1f1f1fdb\"}.add-tab{padding:75px 75px 6px 1px;margin-left:50px;color:\"#1f1f1fdb\"}.add-tab-view{padding:75px 75px 6px 1px;margin-left:80px;color:\"#1f1f1fdb\"}.inspect-add{margin-top:3rem}.add-btn{font-size:16px;border-radius:5px;transition:.2s;padding:.25rem .5rem;background:#fff;border:1px solid rgba(148,147,147,.1882352941);color:#444;line-height:48px;box-shadow:0 1px 9px #98a2b3;width:9rem}.add-btn:hover{border:1px solid rgba(148,147,147,.1882352941);box-shadow:none}.agree{padding:0 0 8px 47px}.agree .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #98A2B3;width:14px;height:14px;margin:5px 9px 0 -35px}.agree .form-check-input:focus{box-shadow:none}.agree .form-check-input:checked{background-color:#000;border-color:#000}.agree .invalid-feedback{font-size:10px!important;margin:0 0 0 21px}.checkmark{vertical-align:text-bottom;color:#98a2b3;font-weight:500;font-size:12px}.term-signature{padding-left:16rem;padding-right:65px;position:absolute;margin:150px 0 0 50%}.participate-tab{height:135px;width:142px}.card-design{height:147px;width:160px;padding-left:10px;margin-left:42px;background:#fff0;border:2px solid #98A2B3;box-shadow:0 0 4px #98a2b3;border-radius:27px;margin-bottom:42px}.upload{height:39px;margin-top:-4px;width:126px;font-size:12px}.participate-tab{margin-top:-25px}.slider{width:14rem;margin-left:69px}.btn-clear{background:#d3dae6;color:#98a2b3;font-size:12px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;width:46%;line-height:28px}.btn-close{background:#f1f4fa;color:#98a2b3;font-size:17px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;font-weight:500;width:116px;color:#737a87;line-height:28px}.view-logo{padding-top:1%;padding-bottom:4%;text-align:center}.back-btn{border-radius:45px;height:41px}.next{background:#4077ad;border-radius:30px;height:60px;width:60px;border:white}.profile-field{margin-top:-10px}.profile-field input{line-height:30px;margin:-10px 3px 3px}.load-page{padding:21px 49px 13px 34px}.sign-img{width:291px;height:95px;border-radius:8px;border:1px solid rgba(179,178,178,.33);margin-top:19px}.upload-image{height:16px;width:16px;position:absolute;margin-left:66rem;margin-top:-39px}.para-comma{font-weight:500}.go-btn{border-radius:45px;height:50px;padding:0 20px;background:#4077ad;border:1px solid #4077ad;color:#fff;line-height:28px;font-size:14px;font-weight:500}.text-label{color:#747b83;font-weight:500}.form{padding:20px;border-radius:5px}.form-control:focus{color:#000;box-shadow:none;border-color:#848484!important}.form-control::placeholder{font-weight:500;font-size:12px;color:#bec1be;padding-left:10px}.btn-primary:active{background-color:#50575e}@media screen and (min-width: 500px) and (max-width: 769px){.content-view{background:#0c1620;width:44rem;margin:31px 0 0!important;padding:28px 32px 17px 71px!important;border-radius:29px}.upload-image{margin-left:25rem!important}}@media screen and (min-width: 768px) and (max-width: 1024px){.back-btn{height:31px;width:82px;position:absolute;margin-left:-53px}.back-tab{position:absolute;margin-left:-87px;height:37px}.go-btn{width:175px;height:44px}.term-signature{padding-left:10px}.upload-image{margin-left:40rem}}@media screen and (min-width: 374px) and (max-width: 426px){.head-logo{width:216px;padding-bottom:16px}.slider{visibility:hidden}.back-btn{height:31px;width:82px;position:absolute;margin-left:73px;margin-top:23px}.go-btn{width:175px;height:44px}.upload-image{margin-left:16rem}.term-signature{margin:84% 0 7px 4%}}@media screen and (min-width: 320px) and (max-width: 426px){.footer-signature{margin-top:20rem}.login .head-logo{padding:16px 2px 0;width:38%!important;height:40%!important}.container{margin-top:5px!important}.card{padding:2px!important}.tag-content{margin:3% 0 0!important;background-color:#121b24;border-radius:13px}.img-tick{margin:3px!important}.slider{visibility:hidden}.load-page{padding:0}.head-logo{width:216px;padding-bottom:16px}.back-btn{height:26px;width:71px;position:absolute;margin-left:-17rem!important;font-size:10px;margin-top:23px}.go-btn{width:142px;height:36px;margin-right:-28px;font-size:10px}.add-tab,.add-tab-view{padding:30px 33px 2px 3px;margin-left:15px}.add-btn{width:6rem}.slider-tab{visibility:hidden}.back-tab{margin-left:-14rem;margin-top:1px;font-size:14px;height:39px}.participate-tab{height:96px;width:87px}.card-design{height:124px;width:125px;padding-left:17px;margin-left:30px}.term-signature{padding:22px 22px 13px 27px}.term-list{padding:43px 10px 10px 3px;margin-left:0;text-align:-webkit-center}}@media screen and (min-width: 320px) and (max-width: 376px){.agree{padding:0 0 8px 25px}.participate-tab{height:96px;width:87px}.card-design{height:109px;width:97px;padding-left:4px;margin-left:10px}.card-design h6{font-size:10px;padding-left:14px;font-weight:600}.sign-img{width:270px}.term-list{padding:20px 20px 6px 4px;margin-left:13px}}@media screen and (min-width: 320px) and (max-width: 350px){.upload-image{height:13px;width:11px;margin-left:10rem;margin-top:-35px}.btn-clear{width:92px}.term-signature{margin:84% 0 7px 4%}}.disabled-btn{cursor:not-allowed!important;background:#4077ad!important;color:#fff!important}.modal-dialog .modal-content{border-radius:12px;background:#fff!important;border:1px solid rgba(128,128,128,.3294117647)!important}.title-popup{font-size:18px;color:#0c1620}ul.term-list-data li{padding-bottom:5px;font-size:13px;font-weight:500;line-height:21px}ol,ul,dl{margin-top:0;margin-bottom:1rem}::ng-deep .modal-content{background:none!important;width:100%;border:none}.hidden-view{display:none}.header-container{position:relative;padding:20px}.view-logo{text-align:center}.logout-button{top:20px;right:20px;position:absolute}.logout-button button{background:none;border:none;font-size:16px;display:flex;align-items:center;cursor:pointer}.logout-button img{margin-right:5px;height:20px}.user-card{align-items:center;color:#4077ad;cursor:pointer}.user-cards-active{background:#4077ad;color:#fff}.save-btn.upload{border:1px solid #4077AD;background-color:#4077ad;color:#fff;border-radius:5px;background:#4077ad;padding:4px 10px;display:inline-flex;align-items:center;gap:6px}.save-btn.upload img{filter:brightness(0) invert(1)}.form-check.agree{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}.form-check.agree .form-check-input{margin-top:4px;flex-shrink:0}.form-check.agree .form-check-label{line-height:1.4;cursor:pointer;white-space:normal}.spinner-16{width:16px;height:16px}.h6-buttons{display:flex;align-items:center;gap:8px}.form-check.agree{display:flex;align-items:flex-start;margin-bottom:14px}.form-check-input{position:absolute;opacity:0;cursor:pointer}.form-check-label{position:relative;padding-left:28px;cursor:pointer;font-size:14px;line-height:20px;color:#212529;-webkit-user-select:none;user-select:none}.form-check-label:before{content:\"\";position:absolute;left:0;top:8px;width:18px;height:18px;border:2px solid #adb5bd;border-radius:4px;background:#fff;transition:all .2s ease}.form-check-label:after{content:\"\";position:absolute;left:5px;top:10px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .15s ease}.form-check-input:checked+.form-check-label:before{background-color:#4077ad;border-color:#4077ad}.form-check-input:checked+.form-check-label:after{transform:rotate(45deg) scale(1)}.form-check-label:hover:before{border-color:#4077ad}.form-check-input:focus+.form-check-label:before{box-shadow:0 0 0 3px #0d6efd40}.form-check-input.is-invalid+.form-check-label:before{border-color:#dc3545}.form-check-input.is-invalid:checked+.form-check-label:before{background-color:#dc3545}.invalid-feedback{display:block;font-size:12px;margin-left:7px;margin-top:4px}::ng-deep .modal-dialog{max-width:750px}.user-cards-active{background-color:#4077ad;color:#fff;border:2px solid #4077AD}.terms-fixed-modal{width:1080px;height:700px;display:flex;flex-direction:column}.terms-scroll-area{flex:1 1 auto;overflow-y:auto;padding:16px}body.modal-open{overflow:hidden!important}.modal{z-index:1055!important}.modal-backdrop{z-index:1050!important}.modal-dialog{margin:auto;pointer-events:auto}.modal-content{position:relative;z-index:1060}.logout-container{display:flex;justify-content:flex-end}.logout-wrapper{display:flex;align-items:center;cursor:pointer;gap:6px}.logout-icon{width:20px;height:20px;background:url(/assets/images/icons/logoutt.svg) no-repeat center;background-size:contain}\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: 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.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.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { 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: "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"] }, { kind: "directive", type: GooglePlaceDirective, selector: "[ngx-google-places-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { kind: "component", type: TermsConditionsComponent, selector: "app-terms-conditions", inputs: ["title", "branding", "PrivacyAndTerms"] }, { kind: "component", type: PrivacyPolicyComponent, selector: "app-privacy-policy", inputs: ["title", "branding", "PrivacyAndTerms"] }, { kind: "component", type: CredentialingComponent, selector: "app-credentialing", inputs: ["data"], outputs: ["back"] }] });
|
|
29635
29677
|
}
|
|
29636
29678
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InitialProcessComponent, decorators: [{
|
|
29637
29679
|
type: Component,
|
|
29638
|
-
args: [{ selector: 'app-initial-process', standalone: false, template: "<div class=\"container\">\r\n <div class=\"card pb-2 pr-5\" style=\"margin-bottom: 30px;\">\r\n <ng-container class=\"load-page\" [style.visibility]=\"view == 1 ? 'visible' : 'hidden' \">\r\n <ul class=\"term-list para-comma\" [ngClass]=\"view == 1 ? '' : 'hidden-view'\">\r\n Thanks for joining\r\n <span class=\"brand-name\">{{ branding.displayName }}</span>.\r\n Our members and service providers rely on accurate info in your profile to\r\n connect you with work that suits your capabilities. Keep your profile\r\n complete, skills updated, licenses current, photos and logos professional,\r\n and schedule up to date.\r\n </ul>\r\n <div class=\"row col-12 mt-4\" [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n <div class=\"col-md-6 col-lg-6 col-sm-12\">\r\n <div class=\"form-group form-check agree\">\r\n <input #acceptTerms=\"ngModel\" [ngClass]=\"{ 'is-invalid': !model.acceptTerms && validatePage==1 }\"\r\n [(ngModel)]=\"model.acceptTerms\" type=\"checkbox\" name=\"acceptTerms\" id=\"acceptTerms\"\r\n class=\"form-check-input\" (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\"\r\n required>\r\n <label for=\"acceptTerms\" class=\"form-check-label checkmark pointer\"\r\n (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\">\r\n I agree to Terms and Conditions\r\n </label>\r\n <!-- <div *ngIf=\"!model.acceptTerms && validatePage==1\" class=\"invalid-feedback\">\r\n Accept Terms & Conditions is required\r\n </div> -->\r\n </div>\r\n <div class=\"form-group form-check agree\">\r\n <input #privacy=\"ngModel\" [ngClass]=\"{ 'is-invalid':!model.privacy && validatePage==1}\"\r\n (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\" [(ngModel)]=\"model.privacy\"\r\n type=\"checkbox\" name=\"privacy\" id=\"privacy\" class=\"form-check-input\" required>\r\n <label for=\"privacy\" class=\"form-check-label checkmark pointer\"\r\n (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\">\r\n I agree to Privacy Statement\r\n </label>\r\n <!-- <div *ngIf=\"!model.privacy && validatePage==1\" class=\"invalid-feedback\">\r\n Accept Privacy Statement\r\n </div> -->\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 justify-content-between row footer-signature\"\r\n [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n <!-- <div class=\"col-md-3 col-sm-3 slider-tab\">\r\n </div> -->\r\n\r\n <div class=\"col-6\"></div>\r\n <div class=\"col-md-12 col-sm-12 col-xl-3 text-end\">\r\n <h6>\r\n <button class=\"next\" (click)=\" next(2)\"\r\n [ngClass]=\"(((!points || !points?.length || points.length ==0) && !fileData ) || !model.acceptTerms || !model.privacy) ? 'disabled-btn':''\">\r\n <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n alt=\"Logo\">\r\n </button> \r\n </h6>\r\n </div>\r\n </div>\r\n <ng-container>\r\n <div class=\"term-signature col-md-6 col-lg-6 col-sm-12\" [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n <h6 class=\"checkmark\">Signature</h6>\r\n <div [ngClass]=\"{ 'd-none': signaturePadData?.publicUrl }\" class=\"sign-img mb-2\">\r\n <canvas #canvas [width]=\"255\" [height]=\"90\"></canvas>\r\n </div>\r\n <div [ngClass]=\"{ 'd-none': !signaturePadData?.publicUrl }\" class=\"mb-2\">\r\n <img [width]=\"255\" [height]=\"120\" [src]=\"signaturePadData?.publicUrl\" style=\"position: relative\" alt>\r\n </div>\r\n <h6 class=\"d-flex align-items-center gap-2\">\r\n <button (click)=\"clearPad()\" class=\"btn-clear btn-sm\">\r\n Clear\r\n </button>\r\n\r\n <!-- <button (click)=\"uploadImage.click()\" class=\"save-btn upload btn-sm\">\r\n <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\">\r\n Upload\r\n <input #uploadImage type=\"file\" class=\"image-upload d-none\" accept=\"image/*\"\r\n (change)=\"uploadSignImage($event)\">\r\n </button> -->\r\n </h6>\r\n\r\n <div *ngIf=\"validatePage==1 && (!points || !points?.length || points.length ==0) && !fileData\"\r\n class=\"invalid-feedback d-block\">\r\n Signature is required\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 2\">\r\n <div class=\"add-tab-view \">\r\n <ul>\r\n <h5>\r\n <b>\r\n Please choose the relevant sections in which you wish to\r\n participate\r\n </b>\r\n </h5>\r\n <br>\r\n <b class=\"para-comma\">\r\n Choose the areas you'd like to be part of \u2014 whether it's programs, services, events, or collaborations,\r\n you're in control of your involvement.\r\n <br>\r\n connect your business to others and prospective clients.\r\n </b>\r\n </ul>\r\n\r\n <div class=\"row mt-4\">\r\n <ng-container *ngFor=\"let userType of userViewRoles\">\r\n <div class=\"card card-design text-center user-card mx-2 my-2\" style=\"width: 12%;\"\r\n [ngClass]=\"userType.value === selectedRoleValue ? 'user-cards-active' : ''\"\r\n (click)=\"selectedUserRole(userType)\">\r\n <img [src]=\"userType?.img\" class=\"mb-2 mt-2\" style=\"width: 70px;height: 70px;\">\r\n <h6 class=\"m-0 mt-2\">{{userType.name}}</h6>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- <h6 class=\"inspect-add\">\r\n <button (click)=\"next(3);isBusiness=true;\" class=\"add-btn btn-sm\">\r\n Yes\r\n </button>\r\n \r\n <button (click)=\"isBusiness=false;view = 4;\" class=\"add-btn btn-sm\">\r\n No\r\n </button>\r\n </h6> -->\r\n </div>\r\n <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n <!-- <div class=\"col-md-3 col-sm-12 slider-tab text-center\">\r\n <img class=\"slider-view\" src=\"assets/images/icons/stepper-1.svg\" alt=\"Logo\">\r\n </div> -->\r\n <div class=\"col-5\"></div>\r\n <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n <h6>\r\n <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n Back\r\n </button>\r\n \r\n <button (click)=\"next(3)\" class=\"next\" [disabled]=\"!isUserSelected\"\r\n [ngClass]=\"!isUserSelected ? 'disabled-btn':''\">\r\n <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n alt=\"Logo\">\r\n </button>\r\n \r\n </h6>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 3\">\r\n <form [formGroup]=\"companyForm\" class=\"form\">\r\n <div class=\"term-list \">\r\n <ul>\r\n <h5>\r\n <b>\r\n Enter your business information here.\r\n </b>\r\n </h5>\r\n <br>\r\n </ul>\r\n <div class=\"profile-field\">\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{'is-invalid': ( f.companyName.errors && validatePage == 3) || providerError}\"\r\n type=\"text\" class=\"form-control\" id=\"companyName\" placeholder=\"Company Name\"\r\n formControlName=\"companyName\">\r\n <div *ngIf=\" f.companyName.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.companyName.errors.required\">\r\n Company Name is required\r\n </div>\r\n <div *ngIf=\"f.companyName.errors.minlength\">\r\n Company Name must be at least 2 characters\r\n </div>\r\n <div *ngIf=\"f.companyName.errors.maxLength\">\r\n Company Name must be less than 100 characters\r\n </div>\r\n </div>\r\n <div *ngIf=\"providerError\" class=\"invalid-feedback\">\r\n <div>\r\n {{providerError}}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input class=\"form-control block fw-medium shadow-none\" type=\"text\" name=\"inputPhone\"\r\n placeholder=\"Company Phone Number \" id=\"inputPhone\" autocomplete=\"off\" formControlName=\"phoneNumber\"\r\n appMobileMask [maxLength]=\"300\"\r\n [ngClass]=\"{'is-invalid': ( f.phoneNumber.errors && validatePage == 3) || providerError}\">\r\n <div *ngIf=\"f.phoneNumber.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.phoneNumber.errors.required\">\r\n Phone Number is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': f.address1.errors&& validatePage == 3 }\" type=\"text\"\r\n class=\"form-control\" id=\"businessAddress\" ngx-google-places-autocomplete [options]='options'\r\n (onAddressChange)=\"AddressChange($event)\" placeholder=\"Business Address 1\" formControlName=\"address1\">\r\n <div *ngIf=\" f.address1.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.address1.errors.required\">\r\n Business Address 1 is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"businessAddress2\" placeholder=\"Business Address 2\">\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': f.city.errors&& validatePage == 3 }\" type=\"text\" class=\"form-control\"\r\n id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n <div *ngIf=\" f.city.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.city.errors.required\">City is required</div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': f.state.errors&& validatePage == 3 }\" type=\"text\"\r\n class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n <div *ngIf=\" f.state.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.state.errors.required\">State is required</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [textMask]=\"{ mask: zipcodeMask }\"\r\n [ngClass]=\"{ 'is-invalid': f.zipcode.errors&& validatePage == 3 }\" type=\"text\" class=\"form-control\"\r\n id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n <div *ngIf=\" f.zipcode.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.zipcode.errors.required\">Zipcode is\r\n required</div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': f.country.errors && validatePage == 3}\" type=\"text\"\r\n class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n <div *ngIf=\" f.country.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.country.errors.required\">Country is\r\n required</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n <div *ngIf=\"selectedRole?.name == 'Contractor'\" style=\"padding: 0px 20px;border-radius: 5px;\">\r\n <div class=\"term-list pt-0\">\r\n <h5>\r\n <b>\r\n Contractor Category\r\n </b>\r\n </h5>\r\n <div class=\"profile-field\">\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-12 col-sm-12 mb-2\">\r\n <label></label>\r\n <ng-select [items]=\"contractorSubCategories\" bindLabel=\"name\" [multiple]=\"true\" [closeOnSelect]=\"false\"\r\n placeholder=\"Select Contractor Category\" (ngModelChange)=\"changeContractor($event)\"\r\n [(ngModel)]=\"selectedContractorCategories\">\r\n </ng-select>\r\n </div>\r\n </div>\r\n <accordion [isAnimated]=\"false\">\r\n <ng-container *ngFor=\"let item of selectedContractorCategories;let i=index\">\r\n <accordion-group [isOpen]=\"true\">\r\n <button accordion-heading class=\"w-100\" style=\"font-size: 16px;font-weight: 600;\">\r\n <div class=\"w-100 mt-2\">\r\n <div class=\"backdrop\">\r\n <input type=\"checkbox\" [(ngModel)]=\"item.selectAll\" [name]=\"item?.id\" [id]=\"item?.id\"\r\n (change)=\"selectAll($event,item?.items)\">\r\n <label [for]=\"item?.id\"> {{item?.name}}</label>\r\n </div>\r\n </div>\r\n </button>\r\n <div class=\"row\">\r\n <div class=\"backdrop col-4 form-control-sm\" *ngFor=\"let subItem of item?.items\">\r\n <input type=\"checkbox\" [(ngModel)]=\"subItem.selected\" [name]=\"subItem?.id\" [id]=\"subItem?.id\"\r\n (change)=\"unCheckedEvent($event,item)\">\r\n <label [for]=\"subItem?.id\"> {{subItem?.name}}</label>\r\n </div>\r\n </div>\r\n </accordion-group>\r\n </ng-container>\r\n </accordion>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n <!-- <div class=\"col-md-3 col-sm-12 slider-tab text-center\">\r\n <img class=\"slider-view\" src=\"assets/images/icons/stepper-2.svg\" alt=\"Logo\">\r\n </div> -->\r\n <div class=\"col-5\"></div>\r\n <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n <h6>\r\n <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n Back\r\n </button>\r\n \r\n <button class=\" next\" (click)=\"next(4)\">\r\n <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n alt=\"Logo\">\r\n </button>\r\n \r\n </h6>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 4\">\r\n\r\n <div class=\"add-tab \">\r\n <ul>\r\n <h5 class=\"p-4 pb-2\">\r\n <b>\r\n We need basic information's and headshot for your profile\r\n </b>\r\n <div class=\"form-group form-check agree p-0 mt-3\" *ngIf=\"isBusiness\">\r\n <input [(ngModel)]=\"isCopy\" type=\"checkbox\" name=\"isCopy\" id=\"isCopy\" class=\"form-check-input mt-2\"\r\n (change)=\"changeAddressUser()\">\r\n <label for=\"isCopy\" class=\"form-check-label checkmark\">\r\n Copy From Provider Infromation\r\n </label>\r\n </div>\r\n </h5>\r\n </ul>\r\n <div class=\"profile-field\">\r\n <form [formGroup]=\"userForm\" class=\"form pb-0\">\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.firstName.errors && validatePage == 4 }\" type=\"text\"\r\n class=\"form-control\" placeholder=\"Fist Name\" formControlName=\"firstName\" id=\"firstName\">\r\n <div *ngIf=\" u.firstName.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n First Name is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.lastName.errors && validatePage == 4 }\" type=\"text\"\r\n class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\">\r\n <div *ngIf=\" u.lastName.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.lastName.errors.required\">\r\n Last Name is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.email.errors && validatePage == 4 }\" type=\"text\"\r\n class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\">\r\n <div *ngIf=\" u.email.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.email.errors.required\">\r\n Emai is required\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-12 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.address1.errors && validatePage == 4 }\" [options]=\"options\"\r\n (onAddressChange)=\"AddressChangeUser($event)\" type=\"text\" class=\"form-control\"\r\n placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete>\r\n <div *ngIf=\" u.address1.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.address1.errors.required\">\r\n Home Address 1 is required\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n placeholder=\"Home Address 2\">\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.city.errors && validatePage == 4}\" type=\"text\" class=\"form-control\"\r\n id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n <div *ngIf=\" u.city.errors && validatePage ==4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.city.errors.required\">City is required</div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.state.errors && validatePage == 4 }\" type=\"text\"\r\n class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n <div *ngIf=\" u.state.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.state.errors.required\">State is required</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [textMask]=\"{ mask: zipcodeMask }\"\r\n [ngClass]=\"{ 'is-invalid': u.zipcode.errors && validatePage == 4 }\" type=\"text\" class=\"form-control\"\r\n id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n <div *ngIf=\" u.zipcode.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.zipcode.errors.required\">Zipcode is\r\n required</div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.country.errors && validatePage == 4 }\" type=\"text\"\r\n class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n <div *ngIf=\" u.country.errors && validatePage ==4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.country.errors.required\">Country is\r\n required</div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input class=\"form-control block shadow-none\" type=\"text\" name=\"inputPhone\" placeholder=\"Phone Number \"\r\n id=\"inputPhone\" autocomplete=\"off\" formControlName=\"phoneNumber\" appMobileMask [maxLength]=\"300\"\r\n [ngClass]=\"{'is-invalid': ( u.phoneNumber.errors && validatePage == 4)}\">\r\n <div *ngIf=\"u.phoneNumber.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors.required\">\r\n Phone Number is required\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"form-group mb-2 form\">\r\n <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\"\r\n class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n <input (click)=\"uploadImage1.click()\" [(ngModel)]=\"fileName\" readonly type=\"text\" class=\"form-control\"\r\n id=\"upload\" accept=\"image/*\" placeholder=\"Upload Profile Picture\">\r\n <img #uploadImage1 class=\"upload-image\" (click)=\"uploadFile.click()\" type=\"file\"\r\n src=\"assets/images/icons/upload.svg\" alt=\"Logo\">\r\n <div *ngIf=\"isImageRequired\" class=\"invalid-feedback d-block\">\r\n <div class=\"ms-1\">\r\n Please Upload Profile Image\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n <div>\r\n {{userError}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n <!-- <div class=\"col-md-3 col-sm-12 pt-3 slider-tab text-center\">\r\n <img class=\"slider-view\" src=\"assets/images/icons/stepper-3.svg\" alt=\"Logo\">\r\n </div> -->\r\n <div class=\"col-5\"></div>\r\n <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n <h6>\r\n <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n Back\r\n </button>\r\n \r\n <button class=\"next\" (click)=\"next(5)\" [disabled]=\"showLoader\"\r\n [config]=\"DefaultButtonSpinnerConfig\">\r\n <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n alt=\"Logo\">\r\n </button>\r\n \r\n </h6>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 5\">\r\n <ul class=\"term-list ps-3\">\r\n <h5>\r\n <b>\r\n Thanks, we got the basics down!\r\n </b>\r\n </h5>\r\n <br>\r\n <b class=\"para-comma\">\r\n Account created successfully. Next step: complete your profile.\r\n <br>\r\n <br>\r\n Profile completion is mandatory to participate in rosters, programs, requests, and platform workflows.\r\n Incomplete profiles will have limited access.\r\n <br>\r\n <br>\r\n You may access your dashboard at any time, but full functionality is available only after completion.\r\n </b>\r\n </ul>\r\n <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n <!-- <div class=\"col-md-3 col-lg-3 col-xl-3 col-sm-12 text-center\">\r\n <img class=\"slider ml-3\" src=\"assets/images/icons/stepper-4.svg\" alt=\"Logo\">\r\n </div> -->\r\n <div class=\"col-5\"></div>\r\n <div class=\"col-md-4 col-sm-12 col-xl-4 text-end row\">\r\n <div class=\"col-md-2 col-2\">\r\n <h6 style=\"margin-right: 3rem\">\r\n </h6>\r\n </div>\r\n\r\n \r\n <div class=\"col-md-8\">\r\n <h6>\r\n <button (click)=\"dashboard()\" class=\"go-btn btn-sm\">\r\n Go To Home \r\n <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\"\r\n src=\"assets/images/icons/next.svg\" alt=\"Logo\">\r\n </button>\r\n </h6>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div>test</div> -->\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 10\">\r\n <app-credentialing (back)=\"onCredentialingBack()\" [data]=\"credentialingData\"></app-credentialing>\r\n </ng-container>\r\n </div>\r\n</div>\r\n\r\n<ng-template #termsAndConditionsModel>\r\n <div class=\"modal-dialog modal-dialog-centered\">\r\n <div class=\"modal-content terms-fixed-modal\">\r\n\r\n <!-- HEADER -->\r\n <div class=\"modal-header\">\r\n <h4 class=\"modal-title fw-bold title-popup\">\r\n {{ termsAndConditionTitle }}\r\n </h4>\r\n </div>\r\n\r\n <!-- SCROLLABLE CONTENT ONLY -->\r\n <div class=\"modal-body terms-scroll-area\" (scroll)=\"onTermsScroll($event)\">\r\n <ng-container *ngIf=\"termsAndConditionTitle == 'Terms and Conditions'\">\r\n <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n </app-terms-conditions>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"termsAndConditionTitle != 'Terms and Conditions'\">\r\n <app-privacy-policy [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n </app-privacy-policy>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- FOOTER (NOT SCROLLING) -->\r\n <div>\r\n <div class=\"modal-footer text-end\" style=\"display: block;\">\r\n <!-- YOUR BUTTONS \u2014 UNCHANGED -->\r\n <button type=\"button\" class=\"btn btn-primary btn-sm px-4\"\r\n style=\"background: #d3dae6; color: #98a2b3; border: #D3DAE6 !important;\"\r\n (click)=\"decline(termsAndConditionTitle); modelRef.hide();\">\r\n Decline\r\n </button>\r\n\r\n <button type=\"button\" class=\"btn btn-primary btn-sm px-4\" style=\"color:white;background: #4077AD;\"\r\n [disabled]=\"!isAgreeEnabled\" (click)=\"agree(termsAndConditionTitle); modelRef.hide();\">\r\n Agree\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".brand-name{font-weight:700;font-size:calc(100% + 4px)}::ng-deep .backdrop{background-color:transparent!important}.filter-black{filter:brightness(.4)!important}.footer-view{margin-top:3rem;margin-left:0;margin-right:0}.footer-signature{margin-top:9rem}.slider-view{width:11rem;margin-left:1px}.container{margin-top:30px}.container .card{border-radius:1.25rem}.container .header{padding:33px 10px 0}.container .header .logo{width:15%;height:80%}.container .form-control{padding:.75rem 1rem;border-color:#a1a1a1}.container .form-control:focus{color:#000;box-shadow:none;border-color:#a1a1a1!important}.container .form-control::placeholder{font-weight:500;font-size:12px;color:#a1a1a1}.container .link{color:#4077ad}.container .link-signup{font-weight:bolder}.container .form-check-label{margin-bottom:0;padding-top:9px}.container .content-view{margin-top:10%}.container .content-description{margin-top:25%}.container .tag-content{color:#fff9e8;margin-left:9%}.container .tag-content p{color:#fff9e8}.container .form-check-input:checked{background-color:#000;border-color:#000}.container .img-tick{margin:-31px 12px 0 -35px}.container .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #000000}.container .form-check-input:focus{box-shadow:none}.container input[type=checkbox]{accent-color:#000000}.term-list{padding:48px 60px 6px 0;margin-left:30px;color:\"#1f1f1fdb\"}.add-tab{padding:75px 75px 6px 1px;margin-left:50px;color:\"#1f1f1fdb\"}.add-tab-view{padding:75px 75px 6px 1px;margin-left:80px;color:\"#1f1f1fdb\"}.inspect-add{margin-top:3rem}.add-btn{font-size:16px;border-radius:5px;transition:.2s;padding:.25rem .5rem;background:#fff;border:1px solid rgba(148,147,147,.1882352941);color:#444;line-height:48px;box-shadow:0 1px 9px #98a2b3;width:9rem}.add-btn:hover{border:1px solid rgba(148,147,147,.1882352941);box-shadow:none}.agree{padding:0 0 8px 47px}.agree .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #98A2B3;width:14px;height:14px;margin:5px 9px 0 -35px}.agree .form-check-input:focus{box-shadow:none}.agree .form-check-input:checked{background-color:#000;border-color:#000}.agree .invalid-feedback{font-size:10px!important;margin:0 0 0 21px}.checkmark{vertical-align:text-bottom;color:#98a2b3;font-weight:500;font-size:12px}.term-signature{padding-left:16rem;padding-right:65px;position:absolute;margin:150px 0 0 50%}.participate-tab{height:135px;width:142px}.card-design{height:147px;width:160px;padding-left:10px;margin-left:42px;background:#fff0;border:2px solid #98A2B3;box-shadow:0 0 4px #98a2b3;border-radius:27px;margin-bottom:42px}.upload{height:39px;margin-top:-4px;width:126px;font-size:12px}.participate-tab{margin-top:-25px}.slider{width:14rem;margin-left:69px}.btn-clear{background:#d3dae6;color:#98a2b3;font-size:12px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;width:46%;line-height:28px}.btn-close{background:#f1f4fa;color:#98a2b3;font-size:17px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;font-weight:500;width:116px;color:#737a87;line-height:28px}.view-logo{padding-top:1%;padding-bottom:4%;text-align:center}.back-btn{border-radius:45px;height:41px}.next{background:#4077ad;border-radius:30px;height:60px;width:60px;border:white}.profile-field{margin-top:-10px}.profile-field input{line-height:30px;margin:-10px 3px 3px}.load-page{padding:21px 49px 13px 34px}.sign-img{width:291px;height:95px;border-radius:8px;border:1px solid rgba(179,178,178,.33);margin-top:19px}.upload-image{height:16px;width:16px;position:absolute;margin-left:66rem;margin-top:-39px}.para-comma{font-weight:500}.go-btn{border-radius:45px;height:50px;padding:0 20px;background:#4077ad;border:1px solid #4077ad;color:#fff;line-height:28px;font-size:14px;font-weight:500}.text-label{color:#747b83;font-weight:500}.form{padding:20px;border-radius:5px}.form-control:focus{color:#000;box-shadow:none;border-color:#848484!important}.form-control::placeholder{font-weight:500;font-size:12px;color:#bec1be;padding-left:10px}.btn-primary:active{background-color:#50575e}@media screen and (min-width: 500px) and (max-width: 769px){.content-view{background:#0c1620;width:44rem;margin:31px 0 0!important;padding:28px 32px 17px 71px!important;border-radius:29px}.upload-image{margin-left:25rem!important}}@media screen and (min-width: 768px) and (max-width: 1024px){.back-btn{height:31px;width:82px;position:absolute;margin-left:-53px}.back-tab{position:absolute;margin-left:-87px;height:37px}.go-btn{width:175px;height:44px}.term-signature{padding-left:10px}.upload-image{margin-left:40rem}}@media screen and (min-width: 374px) and (max-width: 426px){.head-logo{width:216px;padding-bottom:16px}.slider{visibility:hidden}.back-btn{height:31px;width:82px;position:absolute;margin-left:73px;margin-top:23px}.go-btn{width:175px;height:44px}.upload-image{margin-left:16rem}.term-signature{margin:84% 0 7px 4%}}@media screen and (min-width: 320px) and (max-width: 426px){.footer-signature{margin-top:20rem}.login .head-logo{padding:16px 2px 0;width:38%!important;height:40%!important}.container{margin-top:5px!important}.card{padding:2px!important}.tag-content{margin:3% 0 0!important;background-color:#121b24;border-radius:13px}.img-tick{margin:3px!important}.slider{visibility:hidden}.load-page{padding:0}.head-logo{width:216px;padding-bottom:16px}.back-btn{height:26px;width:71px;position:absolute;margin-left:-17rem!important;font-size:10px;margin-top:23px}.go-btn{width:142px;height:36px;margin-right:-28px;font-size:10px}.add-tab,.add-tab-view{padding:30px 33px 2px 3px;margin-left:15px}.add-btn{width:6rem}.slider-tab{visibility:hidden}.back-tab{margin-left:-14rem;margin-top:1px;font-size:14px;height:39px}.participate-tab{height:96px;width:87px}.card-design{height:124px;width:125px;padding-left:17px;margin-left:30px}.term-signature{padding:22px 22px 13px 27px}.term-list{padding:43px 10px 10px 3px;margin-left:0;text-align:-webkit-center}}@media screen and (min-width: 320px) and (max-width: 376px){.agree{padding:0 0 8px 25px}.participate-tab{height:96px;width:87px}.card-design{height:109px;width:97px;padding-left:4px;margin-left:10px}.card-design h6{font-size:10px;padding-left:14px;font-weight:600}.sign-img{width:270px}.term-list{padding:20px 20px 6px 4px;margin-left:13px}}@media screen and (min-width: 320px) and (max-width: 350px){.upload-image{height:13px;width:11px;margin-left:10rem;margin-top:-35px}.btn-clear{width:92px}.term-signature{margin:84% 0 7px 4%}}.disabled-btn{cursor:not-allowed!important;background:#4077ad!important;color:#fff!important}.modal-dialog .modal-content{border-radius:12px}.title-popup{font-size:18px;color:#0c1620}ul.term-list-data li{padding-bottom:5px;font-size:13px;font-weight:500;line-height:21px}ol,ul,dl{margin-top:0;margin-bottom:1rem}::ng-deep .modal-content{background:none!important;width:100%;border:none}.hidden-view{display:none}.header-container{position:relative;padding:20px}.view-logo{text-align:center}.logout-button{top:20px;right:20px;position:absolute}.logout-button button{background:none;border:none;font-size:16px;display:flex;align-items:center;cursor:pointer}.logout-button img{margin-right:5px;height:20px}.user-card{align-items:center;color:#4077ad;cursor:pointer}.user-cards-active{background:#4077ad;color:#fff}.save-btn.upload{border:1px solid #4077AD;background-color:#4077ad;color:#fff;border-radius:5px;background:#4077ad;padding:4px 10px;display:inline-flex;align-items:center;gap:6px}.save-btn.upload img{filter:brightness(0) invert(1)}.form-check.agree{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}.form-check.agree .form-check-input{margin-top:4px;flex-shrink:0}.form-check.agree .form-check-label{line-height:1.4;cursor:pointer;white-space:normal}.spinner-16{width:16px;height:16px}.h6-buttons{display:flex;align-items:center;gap:8px}.form-check.agree{display:flex;align-items:flex-start;margin-bottom:14px}.form-check-input{position:absolute;opacity:0;cursor:pointer}.form-check-label{position:relative;padding-left:28px;cursor:pointer;font-size:14px;line-height:20px;color:#212529;-webkit-user-select:none;user-select:none}.form-check-label:before{content:\"\";position:absolute;left:0;top:8px;width:18px;height:18px;border:2px solid #adb5bd;border-radius:4px;background:#fff;transition:all .2s ease}.form-check-label:after{content:\"\";position:absolute;left:5px;top:10px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .15s ease}.form-check-input:checked+.form-check-label:before{background-color:#4077ad;border-color:#4077ad}.form-check-input:checked+.form-check-label:after{transform:rotate(45deg) scale(1)}.form-check-label:hover:before{border-color:#4077ad}.form-check-input:focus+.form-check-label:before{box-shadow:0 0 0 3px #0d6efd40}.form-check-input.is-invalid+.form-check-label:before{border-color:#dc3545}.form-check-input.is-invalid:checked+.form-check-label:before{background-color:#dc3545}.invalid-feedback{display:block;font-size:12px;margin-left:7px;margin-top:4px}::ng-deep .modal-dialog{max-width:750px}.user-cards-active{background-color:#4077ad;color:#fff;border:2px solid #4077AD}.terms-fixed-modal{width:1080px;height:700px;display:flex;flex-direction:column}.terms-scroll-area{flex:1 1 auto;overflow-y:auto;padding:16px}body.modal-open{overflow:hidden!important}.modal{z-index:1055!important}.modal-backdrop{z-index:1050!important}.modal-dialog{margin:auto;pointer-events:auto}.modal-content{position:relative;z-index:1060;background-color:#fff}\n"] }]
|
|
29680
|
+
args: [{ selector: 'app-initial-process', standalone: false, template: "<div class=\"container\">\r\n <div class=\"mb-4 logout-container\" *ngIf=\"showlogout\">\r\n <span class=\"logout-wrapper\" (click)=\"logout()\">\r\n <span class=\"logout-icon\"></span>\r\n <span class=\"logout-text\">Logout</span>\r\n </span>\r\n </div>\r\n <div class=\"card pb-2 pr-5\" style=\"margin-bottom: 30px;\">\r\n <ng-container class=\"load-page\" [style.visibility]=\"view == 1 ? 'visible' : 'hidden' \">\r\n <ul class=\"term-list para-comma\" [ngClass]=\"view == 1 ? '' : 'hidden-view'\">\r\n Thanks for joining\r\n <span class=\"brand-name\">{{ branding.displayName }}</span>.\r\n Our members and service providers rely on accurate info in your profile to\r\n connect you with work that suits your capabilities. Keep your profile\r\n complete, skills updated, licenses current, photos and logos professional,\r\n and schedule up to date.\r\n </ul>\r\n <div class=\"row col-12 mt-4\" [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n <div class=\"col-md-6 col-lg-6 col-sm-12\">\r\n <div class=\"form-group form-check agree\">\r\n <input #acceptTerms=\"ngModel\" [ngClass]=\"{ 'is-invalid': !model.acceptTerms && validatePage==1 }\"\r\n [(ngModel)]=\"model.acceptTerms\" type=\"checkbox\" name=\"acceptTerms\" id=\"acceptTerms\"\r\n class=\"form-check-input\" (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\"\r\n required>\r\n <label for=\"acceptTerms\" class=\"form-check-label checkmark pointer\"\r\n (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\">\r\n I agree to Terms and Conditions\r\n </label>\r\n <!-- <div *ngIf=\"!model.acceptTerms && validatePage==1\" class=\"invalid-feedback\">\r\n Accept Terms & Conditions is required\r\n </div> -->\r\n </div>\r\n <div class=\"form-group form-check agree\">\r\n <input #privacy=\"ngModel\" [ngClass]=\"{ 'is-invalid':!model.privacy && validatePage==1}\"\r\n (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\" [(ngModel)]=\"model.privacy\"\r\n type=\"checkbox\" name=\"privacy\" id=\"privacy\" class=\"form-check-input\" required>\r\n <label for=\"privacy\" class=\"form-check-label checkmark pointer\"\r\n (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\">\r\n I agree to Privacy Statement\r\n </label>\r\n <!-- <div *ngIf=\"!model.privacy && validatePage==1\" class=\"invalid-feedback\">\r\n Accept Privacy Statement\r\n </div> -->\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 justify-content-between row footer-signature\"\r\n [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n <!-- <div class=\"col-md-3 col-sm-3 slider-tab\">\r\n </div> -->\r\n\r\n <div class=\"col-6\"></div>\r\n <div class=\"col-md-12 col-sm-12 col-xl-3 text-end\">\r\n <h6>\r\n <button class=\"next\" (click)=\" next(2)\"\r\n [ngClass]=\"(((!points || !points?.length || points.length ==0) && !fileData ) || !model.acceptTerms || !model.privacy) ? 'disabled-btn':''\">\r\n <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n alt=\"Logo\">\r\n </button> \r\n </h6>\r\n </div>\r\n </div>\r\n <ng-container>\r\n <div class=\"term-signature col-md-6 col-lg-6 col-sm-12\" [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n <h6 class=\"checkmark\">Signature</h6>\r\n <div [ngClass]=\"{ 'd-none': signaturePadData?.publicUrl }\" class=\"sign-img mb-2\">\r\n <canvas #canvas [width]=\"255\" [height]=\"90\"></canvas>\r\n </div>\r\n <div [ngClass]=\"{ 'd-none': !signaturePadData?.publicUrl }\" class=\"mb-2\">\r\n <img [width]=\"255\" [height]=\"120\" [src]=\"signaturePadData?.publicUrl\" style=\"position: relative\" alt>\r\n </div>\r\n <h6 class=\"d-flex align-items-center gap-2\">\r\n <button (click)=\"clearPad()\" class=\"btn-clear btn-sm\">\r\n Clear\r\n </button>\r\n\r\n <!-- <button (click)=\"uploadImage.click()\" class=\"save-btn upload btn-sm\">\r\n <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\">\r\n Upload\r\n <input #uploadImage type=\"file\" class=\"image-upload d-none\" accept=\"image/*\"\r\n (change)=\"uploadSignImage($event)\">\r\n </button> -->\r\n </h6>\r\n\r\n <div *ngIf=\"validatePage==1 && (!points || !points?.length || points.length ==0) && !fileData\"\r\n class=\"invalid-feedback d-block\">\r\n Signature is required\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 2\">\r\n <div class=\"add-tab-view \">\r\n <ul>\r\n <h5>\r\n <b>\r\n Please choose the relevant sections in which you wish to\r\n participate\r\n </b>\r\n </h5>\r\n <br>\r\n <b class=\"para-comma\">\r\n Choose the areas you'd like to be part of \u2014 whether it's programs, services, events, or collaborations,\r\n you're in control of your involvement.\r\n <br>\r\n connect your business to others and prospective clients.\r\n </b>\r\n </ul>\r\n\r\n <div class=\"row mt-4\">\r\n <ng-container *ngFor=\"let userType of userViewRoles\">\r\n <div class=\"card card-design text-center user-card mx-2 my-2\" style=\"width: 12%;\"\r\n [ngClass]=\"userType.value === selectedRoleValue ? 'user-cards-active' : ''\"\r\n (click)=\"selectedUserRole(userType)\">\r\n <img [src]=\"userType?.img\" class=\"mb-2 mt-2\" style=\"width: 70px;height: 70px;\">\r\n <h6 class=\"m-0 mt-2\">{{userType.name}}</h6>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- <h6 class=\"inspect-add\">\r\n <button (click)=\"next(3);isBusiness=true;\" class=\"add-btn btn-sm\">\r\n Yes\r\n </button>\r\n \r\n <button (click)=\"isBusiness=false;view = 4;\" class=\"add-btn btn-sm\">\r\n No\r\n </button>\r\n </h6> -->\r\n </div>\r\n <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n <!-- <div class=\"col-md-3 col-sm-12 slider-tab text-center\">\r\n <img class=\"slider-view\" src=\"assets/images/icons/stepper-1.svg\" alt=\"Logo\">\r\n </div> -->\r\n <div class=\"col-5\"></div>\r\n <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n <h6>\r\n <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n Back\r\n </button>\r\n \r\n <button (click)=\"next(3)\" class=\"next\" [disabled]=\"!isUserSelected\"\r\n [ngClass]=\"!isUserSelected ? 'disabled-btn':''\">\r\n <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n alt=\"Logo\">\r\n </button>\r\n \r\n </h6>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 3\">\r\n <form [formGroup]=\"companyForm\" class=\"form\">\r\n <div class=\"term-list \">\r\n <ul>\r\n <h5>\r\n <b>\r\n Enter your business information here.\r\n </b>\r\n </h5>\r\n <br>\r\n </ul>\r\n <div class=\"profile-field\">\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{'is-invalid': ( f.companyName.errors && validatePage == 3) || providerError}\"\r\n type=\"text\" class=\"form-control\" id=\"companyName\" placeholder=\"Company Name\"\r\n formControlName=\"companyName\">\r\n <div *ngIf=\" f.companyName.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.companyName.errors.required\">\r\n Company Name is required\r\n </div>\r\n <div *ngIf=\"f.companyName.errors.minlength\">\r\n Company Name must be at least 2 characters\r\n </div>\r\n <div *ngIf=\"f.companyName.errors.maxLength\">\r\n Company Name must be less than 100 characters\r\n </div>\r\n </div>\r\n <div *ngIf=\"providerError\" class=\"invalid-feedback\">\r\n <div>\r\n {{providerError}}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input class=\"form-control block fw-medium shadow-none\" type=\"text\" name=\"inputPhone\"\r\n placeholder=\"Company Phone Number \" id=\"inputPhone\" autocomplete=\"off\" formControlName=\"phoneNumber\"\r\n appMobileMask [maxLength]=\"300\"\r\n [ngClass]=\"{'is-invalid': ( f.phoneNumber.errors && validatePage == 3) || providerError}\">\r\n <div *ngIf=\"f.phoneNumber.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.phoneNumber.errors.required\">\r\n Phone Number is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': f.address1.errors&& validatePage == 3 }\" type=\"text\"\r\n class=\"form-control\" id=\"businessAddress\" ngx-google-places-autocomplete [options]='options'\r\n (onAddressChange)=\"AddressChange($event)\" placeholder=\"Business Address 1\" formControlName=\"address1\">\r\n <div *ngIf=\" f.address1.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.address1.errors.required\">\r\n Business Address 1 is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"businessAddress2\" placeholder=\"Business Address 2\">\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': f.city.errors&& validatePage == 3 }\" type=\"text\" class=\"form-control\"\r\n id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n <div *ngIf=\" f.city.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.city.errors.required\">City is required</div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': f.state.errors&& validatePage == 3 }\" type=\"text\"\r\n class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n <div *ngIf=\" f.state.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.state.errors.required\">State is required</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [textMask]=\"{ mask: zipcodeMask }\"\r\n [ngClass]=\"{ 'is-invalid': f.zipcode.errors&& validatePage == 3 }\" type=\"text\" class=\"form-control\"\r\n id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n <div *ngIf=\" f.zipcode.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.zipcode.errors.required\">Zipcode is\r\n required</div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': f.country.errors && validatePage == 3}\" type=\"text\"\r\n class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n <div *ngIf=\" f.country.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.country.errors.required\">Country is\r\n required</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n <div *ngIf=\"selectedRole?.name == 'Contractor'\" style=\"padding: 0px 20px;border-radius: 5px;\">\r\n <div class=\"term-list pt-0\">\r\n <h5>\r\n <b>\r\n Contractor Category\r\n </b>\r\n </h5>\r\n <div class=\"profile-field\">\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-12 col-sm-12 mb-2\">\r\n <label></label>\r\n <ng-select [items]=\"contractorSubCategories\" bindLabel=\"name\" [multiple]=\"true\" [closeOnSelect]=\"false\"\r\n placeholder=\"Select Contractor Category\" (ngModelChange)=\"changeContractor($event)\"\r\n [(ngModel)]=\"selectedContractorCategories\">\r\n </ng-select>\r\n </div>\r\n </div>\r\n <accordion [isAnimated]=\"false\">\r\n <ng-container *ngFor=\"let item of selectedContractorCategories;let i=index\">\r\n <accordion-group [isOpen]=\"true\">\r\n <button accordion-heading class=\"w-100\" style=\"font-size: 16px;font-weight: 600;\">\r\n <div class=\"w-100 mt-2\">\r\n <div class=\"backdrop\">\r\n <input type=\"checkbox\" [(ngModel)]=\"item.selectAll\" [name]=\"item?.id\" [id]=\"item?.id\"\r\n (change)=\"selectAll($event,item?.items)\">\r\n <label [for]=\"item?.id\"> {{item?.name}}</label>\r\n </div>\r\n </div>\r\n </button>\r\n <div class=\"row\">\r\n <div class=\"backdrop col-4 form-control-sm\" *ngFor=\"let subItem of item?.items\">\r\n <input type=\"checkbox\" [(ngModel)]=\"subItem.selected\" [name]=\"subItem?.id\" [id]=\"subItem?.id\"\r\n (change)=\"unCheckedEvent($event,item)\">\r\n <label [for]=\"subItem?.id\"> {{subItem?.name}}</label>\r\n </div>\r\n </div>\r\n </accordion-group>\r\n </ng-container>\r\n </accordion>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n <!-- <div class=\"col-md-3 col-sm-12 slider-tab text-center\">\r\n <img class=\"slider-view\" src=\"assets/images/icons/stepper-2.svg\" alt=\"Logo\">\r\n </div> -->\r\n <div class=\"col-5\"></div>\r\n <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n <h6>\r\n <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n Back\r\n </button>\r\n \r\n <button class=\" next\" (click)=\"next(4)\">\r\n <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n alt=\"Logo\">\r\n </button>\r\n \r\n </h6>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 4\">\r\n\r\n <div class=\"add-tab \">\r\n <ul>\r\n <h5 class=\"p-4 pb-2\">\r\n <b>\r\n We need basic information's and headshot for your profile\r\n </b>\r\n <div class=\"form-group form-check agree p-0 mt-3\" *ngIf=\"isBusiness\">\r\n <input [(ngModel)]=\"isCopy\" type=\"checkbox\" name=\"isCopy\" id=\"isCopy\" class=\"form-check-input mt-2\"\r\n (change)=\"changeAddressUser()\">\r\n <label for=\"isCopy\" class=\"form-check-label checkmark\">\r\n Copy From Provider Infromation\r\n </label>\r\n </div>\r\n </h5>\r\n </ul>\r\n <div class=\"profile-field\">\r\n <form [formGroup]=\"userForm\" class=\"form pb-0\">\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.firstName.errors && validatePage == 4 }\" type=\"text\"\r\n class=\"form-control\" placeholder=\"Fist Name\" formControlName=\"firstName\" id=\"firstName\">\r\n <div *ngIf=\" u.firstName.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n First Name is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.lastName.errors && validatePage == 4 }\" type=\"text\"\r\n class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\">\r\n <div *ngIf=\" u.lastName.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.lastName.errors.required\">\r\n Last Name is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.email.errors && validatePage == 4 }\" type=\"text\"\r\n class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\">\r\n <div *ngIf=\" u.email.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.email.errors.required\">\r\n Emai is required\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-12 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.address1.errors && validatePage == 4 }\" [options]=\"options\"\r\n (onAddressChange)=\"AddressChangeUser($event)\" type=\"text\" class=\"form-control\"\r\n placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete>\r\n <div *ngIf=\" u.address1.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.address1.errors.required\">\r\n Home Address 1 is required\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n placeholder=\"Home Address 2\">\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.city.errors && validatePage == 4}\" type=\"text\" class=\"form-control\"\r\n id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n <div *ngIf=\" u.city.errors && validatePage ==4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.city.errors.required\">City is required</div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.state.errors && validatePage == 4 }\" type=\"text\"\r\n class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n <div *ngIf=\" u.state.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.state.errors.required\">State is required</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [textMask]=\"{ mask: zipcodeMask }\"\r\n [ngClass]=\"{ 'is-invalid': u.zipcode.errors && validatePage == 4 }\" type=\"text\" class=\"form-control\"\r\n id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n <div *ngIf=\" u.zipcode.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.zipcode.errors.required\">Zipcode is\r\n required</div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.country.errors && validatePage == 4 }\" type=\"text\"\r\n class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n <div *ngIf=\" u.country.errors && validatePage ==4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.country.errors.required\">Country is\r\n required</div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input class=\"form-control block shadow-none\" type=\"text\" name=\"inputPhone\" placeholder=\"Phone Number \"\r\n id=\"inputPhone\" autocomplete=\"off\" formControlName=\"phoneNumber\" appMobileMask [maxLength]=\"300\"\r\n [ngClass]=\"{'is-invalid': ( u.phoneNumber.errors && validatePage == 4)}\">\r\n <div *ngIf=\"u.phoneNumber.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors.required\">\r\n Phone Number is required\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"form-group mb-2 form\">\r\n <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\"\r\n class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n <input (click)=\"uploadImage1.click()\" [(ngModel)]=\"fileName\" readonly type=\"text\" class=\"form-control\"\r\n id=\"upload\" accept=\"image/*\" placeholder=\"Upload Profile Picture\">\r\n <img #uploadImage1 class=\"upload-image\" (click)=\"uploadFile.click()\" type=\"file\"\r\n src=\"assets/images/icons/upload.svg\" alt=\"Logo\">\r\n <div *ngIf=\"isImageRequired\" class=\"invalid-feedback d-block\">\r\n <div class=\"ms-1\">\r\n Please Upload Profile Image\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n <div>\r\n {{userError}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n <!-- <div class=\"col-md-3 col-sm-12 pt-3 slider-tab text-center\">\r\n <img class=\"slider-view\" src=\"assets/images/icons/stepper-3.svg\" alt=\"Logo\">\r\n </div> -->\r\n <div class=\"col-5\"></div>\r\n <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n <h6>\r\n <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n Back\r\n </button>\r\n \r\n <button class=\"next\" (click)=\"next(5)\" [disabled]=\"showLoader\" [config]=\"DefaultButtonSpinnerConfig\">\r\n <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n alt=\"Logo\">\r\n </button>\r\n \r\n </h6>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 5\">\r\n <ul class=\"term-list ps-3\">\r\n <h5>\r\n <b>\r\n Thanks, we got the basics down!\r\n </b>\r\n </h5>\r\n <br>\r\n <b class=\"para-comma\">\r\n Account created successfully. Next step: complete your profile.\r\n <br>\r\n <br>\r\n Profile completion is mandatory to participate in rosters, programs, requests, and platform workflows.\r\n Incomplete profiles will have limited access.\r\n <br>\r\n <br>\r\n You may access your dashboard at any time, but full functionality is available only after completion.\r\n </b>\r\n </ul>\r\n <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n <!-- <div class=\"col-md-3 col-lg-3 col-xl-3 col-sm-12 text-center\">\r\n <img class=\"slider ml-3\" src=\"assets/images/icons/stepper-4.svg\" alt=\"Logo\">\r\n </div> -->\r\n <div class=\"col-5\"></div>\r\n <div class=\"col-md-4 col-sm-12 col-xl-4 text-end row\">\r\n <div class=\"col-md-2 col-2\">\r\n <h6 style=\"margin-right: 3rem\">\r\n </h6>\r\n </div>\r\n\r\n \r\n <div class=\"col-md-8\">\r\n <h6>\r\n <button (click)=\"dashboard()\" class=\"go-btn btn-sm\">\r\n Go To Home \r\n <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\"\r\n src=\"assets/images/icons/next.svg\" alt=\"Logo\">\r\n </button>\r\n </h6>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div>test</div> -->\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 10\">\r\n <app-credentialing (back)=\"onCredentialingBack()\" [data]=\"credentialingData\"></app-credentialing>\r\n </ng-container>\r\n </div>\r\n</div>\r\n\r\n<ng-template #termsAndConditionsModel>\r\n <div class=\"modal-dialog modal-dialog-centered\">\r\n <div class=\"modal-content terms-fixed-modal\">\r\n\r\n <!-- HEADER -->\r\n <div class=\"modal-header\">\r\n <h4 class=\"modal-title fw-bold title-popup\">\r\n {{ termsAndConditionTitle }}\r\n </h4>\r\n </div>\r\n\r\n <!-- SCROLLABLE CONTENT ONLY -->\r\n <div class=\"modal-body terms-scroll-area\" (scroll)=\"onTermsScroll($event)\">\r\n <ng-container *ngIf=\"termsAndConditionTitle == 'Terms and Conditions'\">\r\n <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n </app-terms-conditions>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"termsAndConditionTitle != 'Terms and Conditions'\">\r\n <app-privacy-policy [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n </app-privacy-policy>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- FOOTER (NOT SCROLLING) -->\r\n <div>\r\n <div class=\"modal-footer text-end\" style=\"display: block;\">\r\n <!-- YOUR BUTTONS \u2014 UNCHANGED -->\r\n <button type=\"button\" class=\"btn btn-primary btn-sm px-4\"\r\n style=\"background: #d3dae6; color: #98a2b3; border: #D3DAE6 !important;\"\r\n (click)=\"decline(termsAndConditionTitle); modelRef.hide();\">\r\n Decline\r\n </button>\r\n\r\n <button type=\"button\" class=\"btn btn-primary btn-sm px-4\" style=\"color:white;background: #4077AD;\"\r\n [disabled]=\"!isAgreeEnabled\" (click)=\"agree(termsAndConditionTitle); modelRef.hide();\">\r\n Agree\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".brand-name{font-weight:700;font-size:calc(100% + 4px)}::ng-deep .backdrop{background-color:transparent!important}.filter-black{filter:brightness(.4)!important}.footer-view{margin-top:3rem;margin-left:0;margin-right:0}.footer-signature{margin-top:9rem}.slider-view{width:11rem;margin-left:1px}.container{margin-top:30px}.container .card{border-radius:1.25rem}.container .header{padding:33px 10px 0}.container .header .logo{width:15%;height:80%}.container .form-control{padding:.75rem 1rem;border-color:#a1a1a1}.container .form-control:focus{color:#000;box-shadow:none;border-color:#a1a1a1!important}.container .form-control::placeholder{font-weight:500;font-size:12px;color:#a1a1a1}.container .link{color:#4077ad}.container .link-signup{font-weight:bolder}.container .form-check-label{margin-bottom:0;padding-top:9px}.container .content-view{margin-top:10%}.container .content-description{margin-top:25%}.container .tag-content{color:#fff9e8;margin-left:9%}.container .tag-content p{color:#fff9e8}.container .form-check-input:checked{background-color:#000;border-color:#000}.container .img-tick{margin:-31px 12px 0 -35px}.container .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #000000}.container .form-check-input:focus{box-shadow:none}.container input[type=checkbox]{accent-color:#000000}.term-list{padding:48px 60px 6px 0;margin-left:30px;color:\"#1f1f1fdb\"}.add-tab{padding:75px 75px 6px 1px;margin-left:50px;color:\"#1f1f1fdb\"}.add-tab-view{padding:75px 75px 6px 1px;margin-left:80px;color:\"#1f1f1fdb\"}.inspect-add{margin-top:3rem}.add-btn{font-size:16px;border-radius:5px;transition:.2s;padding:.25rem .5rem;background:#fff;border:1px solid rgba(148,147,147,.1882352941);color:#444;line-height:48px;box-shadow:0 1px 9px #98a2b3;width:9rem}.add-btn:hover{border:1px solid rgba(148,147,147,.1882352941);box-shadow:none}.agree{padding:0 0 8px 47px}.agree .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #98A2B3;width:14px;height:14px;margin:5px 9px 0 -35px}.agree .form-check-input:focus{box-shadow:none}.agree .form-check-input:checked{background-color:#000;border-color:#000}.agree .invalid-feedback{font-size:10px!important;margin:0 0 0 21px}.checkmark{vertical-align:text-bottom;color:#98a2b3;font-weight:500;font-size:12px}.term-signature{padding-left:16rem;padding-right:65px;position:absolute;margin:150px 0 0 50%}.participate-tab{height:135px;width:142px}.card-design{height:147px;width:160px;padding-left:10px;margin-left:42px;background:#fff0;border:2px solid #98A2B3;box-shadow:0 0 4px #98a2b3;border-radius:27px;margin-bottom:42px}.upload{height:39px;margin-top:-4px;width:126px;font-size:12px}.participate-tab{margin-top:-25px}.slider{width:14rem;margin-left:69px}.btn-clear{background:#d3dae6;color:#98a2b3;font-size:12px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;width:46%;line-height:28px}.btn-close{background:#f1f4fa;color:#98a2b3;font-size:17px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;font-weight:500;width:116px;color:#737a87;line-height:28px}.view-logo{padding-top:1%;padding-bottom:4%;text-align:center}.back-btn{border-radius:45px;height:41px}.next{background:#4077ad;border-radius:30px;height:60px;width:60px;border:white}.profile-field{margin-top:-10px}.profile-field input{line-height:30px;margin:-10px 3px 3px}.load-page{padding:21px 49px 13px 34px}.sign-img{width:291px;height:95px;border-radius:8px;border:1px solid rgba(179,178,178,.33);margin-top:19px}.upload-image{height:16px;width:16px;position:absolute;margin-left:66rem;margin-top:-39px}.para-comma{font-weight:500}.go-btn{border-radius:45px;height:50px;padding:0 20px;background:#4077ad;border:1px solid #4077ad;color:#fff;line-height:28px;font-size:14px;font-weight:500}.text-label{color:#747b83;font-weight:500}.form{padding:20px;border-radius:5px}.form-control:focus{color:#000;box-shadow:none;border-color:#848484!important}.form-control::placeholder{font-weight:500;font-size:12px;color:#bec1be;padding-left:10px}.btn-primary:active{background-color:#50575e}@media screen and (min-width: 500px) and (max-width: 769px){.content-view{background:#0c1620;width:44rem;margin:31px 0 0!important;padding:28px 32px 17px 71px!important;border-radius:29px}.upload-image{margin-left:25rem!important}}@media screen and (min-width: 768px) and (max-width: 1024px){.back-btn{height:31px;width:82px;position:absolute;margin-left:-53px}.back-tab{position:absolute;margin-left:-87px;height:37px}.go-btn{width:175px;height:44px}.term-signature{padding-left:10px}.upload-image{margin-left:40rem}}@media screen and (min-width: 374px) and (max-width: 426px){.head-logo{width:216px;padding-bottom:16px}.slider{visibility:hidden}.back-btn{height:31px;width:82px;position:absolute;margin-left:73px;margin-top:23px}.go-btn{width:175px;height:44px}.upload-image{margin-left:16rem}.term-signature{margin:84% 0 7px 4%}}@media screen and (min-width: 320px) and (max-width: 426px){.footer-signature{margin-top:20rem}.login .head-logo{padding:16px 2px 0;width:38%!important;height:40%!important}.container{margin-top:5px!important}.card{padding:2px!important}.tag-content{margin:3% 0 0!important;background-color:#121b24;border-radius:13px}.img-tick{margin:3px!important}.slider{visibility:hidden}.load-page{padding:0}.head-logo{width:216px;padding-bottom:16px}.back-btn{height:26px;width:71px;position:absolute;margin-left:-17rem!important;font-size:10px;margin-top:23px}.go-btn{width:142px;height:36px;margin-right:-28px;font-size:10px}.add-tab,.add-tab-view{padding:30px 33px 2px 3px;margin-left:15px}.add-btn{width:6rem}.slider-tab{visibility:hidden}.back-tab{margin-left:-14rem;margin-top:1px;font-size:14px;height:39px}.participate-tab{height:96px;width:87px}.card-design{height:124px;width:125px;padding-left:17px;margin-left:30px}.term-signature{padding:22px 22px 13px 27px}.term-list{padding:43px 10px 10px 3px;margin-left:0;text-align:-webkit-center}}@media screen and (min-width: 320px) and (max-width: 376px){.agree{padding:0 0 8px 25px}.participate-tab{height:96px;width:87px}.card-design{height:109px;width:97px;padding-left:4px;margin-left:10px}.card-design h6{font-size:10px;padding-left:14px;font-weight:600}.sign-img{width:270px}.term-list{padding:20px 20px 6px 4px;margin-left:13px}}@media screen and (min-width: 320px) and (max-width: 350px){.upload-image{height:13px;width:11px;margin-left:10rem;margin-top:-35px}.btn-clear{width:92px}.term-signature{margin:84% 0 7px 4%}}.disabled-btn{cursor:not-allowed!important;background:#4077ad!important;color:#fff!important}.modal-dialog .modal-content{border-radius:12px;background:#fff!important;border:1px solid rgba(128,128,128,.3294117647)!important}.title-popup{font-size:18px;color:#0c1620}ul.term-list-data li{padding-bottom:5px;font-size:13px;font-weight:500;line-height:21px}ol,ul,dl{margin-top:0;margin-bottom:1rem}::ng-deep .modal-content{background:none!important;width:100%;border:none}.hidden-view{display:none}.header-container{position:relative;padding:20px}.view-logo{text-align:center}.logout-button{top:20px;right:20px;position:absolute}.logout-button button{background:none;border:none;font-size:16px;display:flex;align-items:center;cursor:pointer}.logout-button img{margin-right:5px;height:20px}.user-card{align-items:center;color:#4077ad;cursor:pointer}.user-cards-active{background:#4077ad;color:#fff}.save-btn.upload{border:1px solid #4077AD;background-color:#4077ad;color:#fff;border-radius:5px;background:#4077ad;padding:4px 10px;display:inline-flex;align-items:center;gap:6px}.save-btn.upload img{filter:brightness(0) invert(1)}.form-check.agree{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}.form-check.agree .form-check-input{margin-top:4px;flex-shrink:0}.form-check.agree .form-check-label{line-height:1.4;cursor:pointer;white-space:normal}.spinner-16{width:16px;height:16px}.h6-buttons{display:flex;align-items:center;gap:8px}.form-check.agree{display:flex;align-items:flex-start;margin-bottom:14px}.form-check-input{position:absolute;opacity:0;cursor:pointer}.form-check-label{position:relative;padding-left:28px;cursor:pointer;font-size:14px;line-height:20px;color:#212529;-webkit-user-select:none;user-select:none}.form-check-label:before{content:\"\";position:absolute;left:0;top:8px;width:18px;height:18px;border:2px solid #adb5bd;border-radius:4px;background:#fff;transition:all .2s ease}.form-check-label:after{content:\"\";position:absolute;left:5px;top:10px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .15s ease}.form-check-input:checked+.form-check-label:before{background-color:#4077ad;border-color:#4077ad}.form-check-input:checked+.form-check-label:after{transform:rotate(45deg) scale(1)}.form-check-label:hover:before{border-color:#4077ad}.form-check-input:focus+.form-check-label:before{box-shadow:0 0 0 3px #0d6efd40}.form-check-input.is-invalid+.form-check-label:before{border-color:#dc3545}.form-check-input.is-invalid:checked+.form-check-label:before{background-color:#dc3545}.invalid-feedback{display:block;font-size:12px;margin-left:7px;margin-top:4px}::ng-deep .modal-dialog{max-width:750px}.user-cards-active{background-color:#4077ad;color:#fff;border:2px solid #4077AD}.terms-fixed-modal{width:1080px;height:700px;display:flex;flex-direction:column}.terms-scroll-area{flex:1 1 auto;overflow-y:auto;padding:16px}body.modal-open{overflow:hidden!important}.modal{z-index:1055!important}.modal-backdrop{z-index:1050!important}.modal-dialog{margin:auto;pointer-events:auto}.modal-content{position:relative;z-index:1060}.logout-container{display:flex;justify-content:flex-end}.logout-wrapper{display:flex;align-items:center;cursor:pointer;gap:6px}.logout-icon{width:20px;height:20px;background:url(/assets/images/icons/logoutt.svg) no-repeat center;background-size:contain}\n"] }]
|
|
29639
29681
|
}], ctorParameters: () => [{ type: i2.Router }, { type: UserDetailService }, { type: i3.FormBuilder }, { type: FileService }, { type: ProvidersService }, { type: RolesService }, { type: i7.BsModalService }, { type: ProviderContractorSubCategoryService }, { type: ProviderContractorSubCategoryService }, { type: i9.AuthService }, { type: i6.TokenService }, { type: i6.RoleContextService }, { type: undefined, decorators: [{
|
|
29640
29682
|
type: Inject,
|
|
29641
29683
|
args: [LIBRARY_CONFIG]
|