@idsoftsource/initial-process 1.0.7 → 1.0.9
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.
|
@@ -4,7 +4,7 @@ import * as i1$1 from '@angular/common';
|
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i3 from '@angular/forms';
|
|
6
6
|
import { NG_VALUE_ACCESSOR, COMPOSITION_BUFFER_MODE, Validators, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
7
|
-
import * as
|
|
7
|
+
import * as i3$1 from '@angular/router';
|
|
8
8
|
import { RouterModule } from '@angular/router';
|
|
9
9
|
import { map, of, tap, Subscription, switchMap, finalize, catchError, EMPTY, Subject, takeUntil } from 'rxjs';
|
|
10
10
|
import * as i1 from '@angular/common/http';
|
|
@@ -2350,11 +2350,11 @@ class EducationComponent {
|
|
|
2350
2350
|
this.store.nextStep();
|
|
2351
2351
|
}
|
|
2352
2352
|
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 });
|
|
2353
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: EducationComponent, isStandalone: false, selector: "app-education", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div *ngIf=\"!showpreview()\">\r\n <div class=\"education-container\">\r\n <h3>Add Education</h3>\r\n <p class=\"hint\">\r\n Please list your educational history. This can cover anything from GED to college degree\r\n </p>\r\n <form [formGroup]=\"educationForm\">\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">General Equivalency Diploma / Degree</div>\r\n <input type=\"text\" placeholder=\"Enter your Diploma here\" formControlName=\"courseName\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('courseName')?.touched &&\r\n educationForm.get('courseName')?.hasError('required')\">\r\n Degree is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">Diploma / Degree Type</div>\r\n <input type=\"text\" placeholder=\"Enter your Diploma / Degree Type\" formControlName=\"courseType\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('courseType')?.touched &&\r\n educationForm.get('courseType')?.hasError('required')\">\r\n Diploma / Degree Type is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Institution Name</div>\r\n <input type=\"text\" placeholder=\"Enter institution name here\" formControlName=\"instituteName\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('instituteName')?.touched &&\r\n educationForm.get('instituteName')?.hasError('required')\">\r\n Institution name is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Country</div>\r\n <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n {{ item.country }}\r\n </ng-template>\r\n <!-- <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-item$=\"item$\" let-index=\"index\">\r\n <span class=\"ng-value-label\">\r\n {{item.country}}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span> \r\n </ng-template> -->\r\n </ng-select>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">State</div>\r\n <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select State\">\r\n\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n\r\n </div>\r\n </div>\r\n <div class=\"row form-row\">\r\n <div class=\"field city\">\r\n <div class=\"head\">City</div>\r\n <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('city')?.touched &&\r\n educationForm.get('city')?.hasError('required')\">\r\n Enter City\r\n </small>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Start Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Start date\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !educationForm.get('startDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"startDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('startDate')?.touched &&\r\n educationForm.get('startDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n \r\n </div>\r\n </div>\r\n\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !educationForm.get('endDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"endDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('endDate')?.touched &&\r\n educationForm.get('endDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"comments\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p class=\"upload-title\">Upload</p>\r\n <p class=\"upload-subtitle\">Add documents such as Diploma, Degree</p>\r\n <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Documents\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n Selected: {{ fileName }}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\"> \r\n <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\" >\r\n Skip\r\n </button> \r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\" >\r\n <h3>Education Preview</h3>\r\n </div>\r\n <div class=\"accordion\" >\r\n\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n class=\"accordion-item border-0\">\r\n\r\n <!-- HEADER (preview) -->\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#edu_' + i\">\r\n\r\n <!-- LEFT : TITLE -->\r\n <span class=\"accordion-title\">\r\n {{ exp.courseName }}\r\n </span>\r\n\r\n <!-- RIGHT : EDIT ICON -->\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n\r\n </button>\r\n </h2>\r\n\r\n\r\n <!-- BODY -->\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n\r\n <!-- GRID DATA (2 or 3 columns) -->\r\n <div class=\"detail-grid\">\r\n\r\n <div>\r\n <strong>Course Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.courseName }}</span>\r\n </div>\r\n <div>\r\n <strong>Course Type</strong><br />\r\n <span class=\"job-title\"> {{ exp.courseType }}</span>\r\n </div>\r\n <div>\r\n <strong>Institute Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.instituteName }}</span>\r\n </div>\r\n <div>\r\n <strong>From Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.startDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div>\r\n <strong>To Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.endDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div>\r\n <strong>State</strong><br />\r\n <span class=\"job-title\"> {{ exp.state | stateName }}</span>\r\n </div> <div>\r\n <strong>City</strong><br />\r\n <span class=\"job-title\"> {{ exp.city }}</span>\r\n </div>\r\n \r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Comments</strong><br />\r\n <span class=\"job-title\"> {{ exp.comments }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary\" (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}.preview-header{margin-left:400px}.accordion-item{margin:20px 100px}@media screen and (max-width: 767px){.row{flex-direction:column;gap:12px}.right-actions{gap:45px}.preview-header{margin-left:0}.accordion{margin:20px 0}.actions{flex-direction:column-reverse;gap:5px}.accordion-item{margin:20px 0}}\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" }] });
|
|
2353
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: EducationComponent, isStandalone: false, selector: "app-education", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div *ngIf=\"!showpreview()\">\r\n <div class=\"education-container\">\r\n <h3>Add Education</h3>\r\n <p class=\"hint\">\r\n Please list your educational history. This can cover anything from GED to college degree\r\n </p>\r\n <form [formGroup]=\"educationForm\">\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">General Equivalency Diploma / Degree</div>\r\n <input type=\"text\" placeholder=\"Enter your Diploma here\" formControlName=\"courseName\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('courseName')?.touched &&\r\n educationForm.get('courseName')?.hasError('required')\">\r\n Degree is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">Diploma / Degree Type</div>\r\n <input type=\"text\" placeholder=\"Enter your Diploma / Degree Type\" formControlName=\"courseType\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('courseType')?.touched &&\r\n educationForm.get('courseType')?.hasError('required')\">\r\n Diploma / Degree Type is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Institution Name</div>\r\n <input type=\"text\" placeholder=\"Enter institution name here\" formControlName=\"instituteName\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('instituteName')?.touched &&\r\n educationForm.get('instituteName')?.hasError('required')\">\r\n Institution name is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Country</div>\r\n <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n {{ item.country }}\r\n </ng-template>\r\n <!-- <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-item$=\"item$\" let-index=\"index\">\r\n <span class=\"ng-value-label\">\r\n {{item.country}}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span> \r\n </ng-template> -->\r\n </ng-select>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">State</div>\r\n <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select State\">\r\n\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n\r\n </div>\r\n </div>\r\n <div class=\"row form-row\">\r\n <div class=\"field city\">\r\n <div class=\"head\">City</div>\r\n <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('city')?.touched &&\r\n educationForm.get('city')?.hasError('required')\">\r\n Enter City\r\n </small>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Start Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Start date\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !educationForm.get('startDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"startDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('startDate')?.touched &&\r\n educationForm.get('startDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n \r\n </div>\r\n </div>\r\n\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !educationForm.get('endDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"endDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('endDate')?.touched &&\r\n educationForm.get('endDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"comments\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p class=\"upload-title\">Upload</p>\r\n <p class=\"upload-subtitle\">Add documents such as Diploma, Degree</p>\r\n <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Documents\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n Selected: {{ fileName }}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\"> \r\n <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\" >\r\n Skip\r\n </button> \r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\" >\r\n <h3>Education Preview</h3>\r\n </div>\r\n <div class=\"accordion\" >\r\n\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n class=\"accordion-item border-0\">\r\n\r\n <!-- HEADER (preview) -->\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#edu_' + i\">\r\n\r\n <!-- LEFT : TITLE -->\r\n <span class=\"accordion-title\">\r\n {{ exp.courseName }}\r\n </span>\r\n\r\n <!-- RIGHT : EDIT ICON -->\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n\r\n </button>\r\n </h2>\r\n\r\n\r\n <!-- BODY -->\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n\r\n <!-- GRID DATA (2 or 3 columns) -->\r\n <div class=\"detail-grid\">\r\n\r\n <div>\r\n <strong>Course Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.courseName }}</span>\r\n </div>\r\n <div>\r\n <strong>Course Type</strong><br />\r\n <span class=\"job-title\"> {{ exp.courseType }}</span>\r\n </div>\r\n <div>\r\n <strong>Institute Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.instituteName }}</span>\r\n </div>\r\n <div>\r\n <strong>From Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.startDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div>\r\n <strong>To Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.endDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div>\r\n <strong>State</strong><br />\r\n <span class=\"job-title\"> {{ exp.state | stateName }}</span>\r\n </div> <div>\r\n <strong>City</strong><br />\r\n <span class=\"job-title\"> {{ exp.city }}</span>\r\n </div>\r\n \r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Comments</strong><br />\r\n <span class=\"job-title\"> {{ exp.comments }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary\" (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}.preview-header{margin-left:400px}.accordion-item{margin:20px 100px}@media screen and (max-width: 767px){.row{flex-direction:column;gap:12px}.right-actions{gap:9px}.preview-header{margin-left:0}.accordion{margin:20px 0}.actions{gap:5px}.accordion-item{margin:20px 0}}\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" }] });
|
|
2354
2354
|
}
|
|
2355
2355
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EducationComponent, decorators: [{
|
|
2356
2356
|
type: Component,
|
|
2357
|
-
args: [{ selector: 'app-education', standalone: false, template: "<div *ngIf=\"!showpreview()\">\r\n <div class=\"education-container\">\r\n <h3>Add Education</h3>\r\n <p class=\"hint\">\r\n Please list your educational history. This can cover anything from GED to college degree\r\n </p>\r\n <form [formGroup]=\"educationForm\">\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">General Equivalency Diploma / Degree</div>\r\n <input type=\"text\" placeholder=\"Enter your Diploma here\" formControlName=\"courseName\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('courseName')?.touched &&\r\n educationForm.get('courseName')?.hasError('required')\">\r\n Degree is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">Diploma / Degree Type</div>\r\n <input type=\"text\" placeholder=\"Enter your Diploma / Degree Type\" formControlName=\"courseType\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('courseType')?.touched &&\r\n educationForm.get('courseType')?.hasError('required')\">\r\n Diploma / Degree Type is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Institution Name</div>\r\n <input type=\"text\" placeholder=\"Enter institution name here\" formControlName=\"instituteName\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('instituteName')?.touched &&\r\n educationForm.get('instituteName')?.hasError('required')\">\r\n Institution name is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Country</div>\r\n <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n {{ item.country }}\r\n </ng-template>\r\n <!-- <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-item$=\"item$\" let-index=\"index\">\r\n <span class=\"ng-value-label\">\r\n {{item.country}}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span> \r\n </ng-template> -->\r\n </ng-select>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">State</div>\r\n <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select State\">\r\n\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n\r\n </div>\r\n </div>\r\n <div class=\"row form-row\">\r\n <div class=\"field city\">\r\n <div class=\"head\">City</div>\r\n <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('city')?.touched &&\r\n educationForm.get('city')?.hasError('required')\">\r\n Enter City\r\n </small>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Start Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Start date\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !educationForm.get('startDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"startDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('startDate')?.touched &&\r\n educationForm.get('startDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n \r\n </div>\r\n </div>\r\n\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !educationForm.get('endDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"endDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('endDate')?.touched &&\r\n educationForm.get('endDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"comments\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p class=\"upload-title\">Upload</p>\r\n <p class=\"upload-subtitle\">Add documents such as Diploma, Degree</p>\r\n <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Documents\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n Selected: {{ fileName }}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\"> \r\n <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\" >\r\n Skip\r\n </button> \r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\" >\r\n <h3>Education Preview</h3>\r\n </div>\r\n <div class=\"accordion\" >\r\n\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n class=\"accordion-item border-0\">\r\n\r\n <!-- HEADER (preview) -->\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#edu_' + i\">\r\n\r\n <!-- LEFT : TITLE -->\r\n <span class=\"accordion-title\">\r\n {{ exp.courseName }}\r\n </span>\r\n\r\n <!-- RIGHT : EDIT ICON -->\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n\r\n </button>\r\n </h2>\r\n\r\n\r\n <!-- BODY -->\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n\r\n <!-- GRID DATA (2 or 3 columns) -->\r\n <div class=\"detail-grid\">\r\n\r\n <div>\r\n <strong>Course Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.courseName }}</span>\r\n </div>\r\n <div>\r\n <strong>Course Type</strong><br />\r\n <span class=\"job-title\"> {{ exp.courseType }}</span>\r\n </div>\r\n <div>\r\n <strong>Institute Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.instituteName }}</span>\r\n </div>\r\n <div>\r\n <strong>From Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.startDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div>\r\n <strong>To Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.endDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div>\r\n <strong>State</strong><br />\r\n <span class=\"job-title\"> {{ exp.state | stateName }}</span>\r\n </div> <div>\r\n <strong>City</strong><br />\r\n <span class=\"job-title\"> {{ exp.city }}</span>\r\n </div>\r\n \r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Comments</strong><br />\r\n <span class=\"job-title\"> {{ exp.comments }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary\" (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}.preview-header{margin-left:400px}.accordion-item{margin:20px 100px}@media screen and (max-width: 767px){.row{flex-direction:column;gap:12px}.right-actions{gap:45px}.preview-header{margin-left:0}.accordion{margin:20px 0}.actions{flex-direction:column-reverse;gap:5px}.accordion-item{margin:20px 0}}\n"] }]
|
|
2357
|
+
args: [{ selector: 'app-education', standalone: false, template: "<div *ngIf=\"!showpreview()\">\r\n <div class=\"education-container\">\r\n <h3>Add Education</h3>\r\n <p class=\"hint\">\r\n Please list your educational history. This can cover anything from GED to college degree\r\n </p>\r\n <form [formGroup]=\"educationForm\">\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">General Equivalency Diploma / Degree</div>\r\n <input type=\"text\" placeholder=\"Enter your Diploma here\" formControlName=\"courseName\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('courseName')?.touched &&\r\n educationForm.get('courseName')?.hasError('required')\">\r\n Degree is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">Diploma / Degree Type</div>\r\n <input type=\"text\" placeholder=\"Enter your Diploma / Degree Type\" formControlName=\"courseType\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('courseType')?.touched &&\r\n educationForm.get('courseType')?.hasError('required')\">\r\n Diploma / Degree Type is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Institution Name</div>\r\n <input type=\"text\" placeholder=\"Enter institution name here\" formControlName=\"instituteName\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('instituteName')?.touched &&\r\n educationForm.get('instituteName')?.hasError('required')\">\r\n Institution name is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Country</div>\r\n <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n {{ item.country }}\r\n </ng-template>\r\n <!-- <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-item$=\"item$\" let-index=\"index\">\r\n <span class=\"ng-value-label\">\r\n {{item.country}}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span> \r\n </ng-template> -->\r\n </ng-select>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">State</div>\r\n <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select State\">\r\n\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n\r\n </div>\r\n </div>\r\n <div class=\"row form-row\">\r\n <div class=\"field city\">\r\n <div class=\"head\">City</div>\r\n <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('city')?.touched &&\r\n educationForm.get('city')?.hasError('required')\">\r\n Enter City\r\n </small>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Start Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Start date\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !educationForm.get('startDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"startDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('startDate')?.touched &&\r\n educationForm.get('startDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n \r\n </div>\r\n </div>\r\n\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !educationForm.get('endDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"endDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('endDate')?.touched &&\r\n educationForm.get('endDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"comments\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p class=\"upload-title\">Upload</p>\r\n <p class=\"upload-subtitle\">Add documents such as Diploma, Degree</p>\r\n <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Documents\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n Selected: {{ fileName }}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\"> \r\n <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\" >\r\n Skip\r\n </button> \r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\" >\r\n <h3>Education Preview</h3>\r\n </div>\r\n <div class=\"accordion\" >\r\n\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n class=\"accordion-item border-0\">\r\n\r\n <!-- HEADER (preview) -->\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#edu_' + i\">\r\n\r\n <!-- LEFT : TITLE -->\r\n <span class=\"accordion-title\">\r\n {{ exp.courseName }}\r\n </span>\r\n\r\n <!-- RIGHT : EDIT ICON -->\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n\r\n </button>\r\n </h2>\r\n\r\n\r\n <!-- BODY -->\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n\r\n <!-- GRID DATA (2 or 3 columns) -->\r\n <div class=\"detail-grid\">\r\n\r\n <div>\r\n <strong>Course Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.courseName }}</span>\r\n </div>\r\n <div>\r\n <strong>Course Type</strong><br />\r\n <span class=\"job-title\"> {{ exp.courseType }}</span>\r\n </div>\r\n <div>\r\n <strong>Institute Name</strong><br />\r\n <span class=\"job-title\"> {{ exp.instituteName }}</span>\r\n </div>\r\n <div>\r\n <strong>From Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.startDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div>\r\n <strong>To Date</strong><br />\r\n <span class=\"job-title\"> {{ exp.endDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div>\r\n <strong>State</strong><br />\r\n <span class=\"job-title\"> {{ exp.state | stateName }}</span>\r\n </div> <div>\r\n <strong>City</strong><br />\r\n <span class=\"job-title\"> {{ exp.city }}</span>\r\n </div>\r\n \r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Comments</strong><br />\r\n <span class=\"job-title\"> {{ exp.comments }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary\" (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}.preview-header{margin-left:400px}.accordion-item{margin:20px 100px}@media screen and (max-width: 767px){.row{flex-direction:column;gap:12px}.right-actions{gap:9px}.preview-header{margin-left:0}.accordion{margin:20px 0}.actions{gap:5px}.accordion-item{margin:20px 0}}\n"] }]
|
|
2358
2358
|
}], ctorParameters: () => [{ type: UserEducationService }, { type: CredentialingStore }, { type: EducationStore }, { type: CountryServices }, { type: PostalCodeServices }, { type: i6.TokenService }, { type: i3.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
|
|
2359
2359
|
type: Input
|
|
2360
2360
|
}], providerName: [{
|
|
@@ -3096,13 +3096,13 @@ class UtilsService {
|
|
|
3096
3096
|
}
|
|
3097
3097
|
return fileType;
|
|
3098
3098
|
}
|
|
3099
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: UtilsService, deps: [{ token: AlertService }, { token:
|
|
3099
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: UtilsService, deps: [{ token: AlertService }, { token: i3$1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
3100
3100
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: UtilsService, providedIn: "root" });
|
|
3101
3101
|
}
|
|
3102
3102
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: UtilsService, decorators: [{
|
|
3103
3103
|
type: Injectable,
|
|
3104
3104
|
args: [{ providedIn: "root" }]
|
|
3105
|
-
}], ctorParameters: () => [{ type: AlertService }, { type:
|
|
3105
|
+
}], ctorParameters: () => [{ type: AlertService }, { type: i3$1.Router }] });
|
|
3106
3106
|
|
|
3107
3107
|
class NgxStarsComponent {
|
|
3108
3108
|
maxStars = 5;
|
|
@@ -3305,6 +3305,7 @@ class SkillsComponent {
|
|
|
3305
3305
|
userSkillsSub;
|
|
3306
3306
|
providerId;
|
|
3307
3307
|
providerName;
|
|
3308
|
+
userdata;
|
|
3308
3309
|
tab;
|
|
3309
3310
|
showLoading;
|
|
3310
3311
|
showLoader = false;
|
|
@@ -3374,7 +3375,7 @@ class SkillsComponent {
|
|
|
3374
3375
|
providerId: [this.providerId],
|
|
3375
3376
|
providerName: [this.providerName],
|
|
3376
3377
|
userId: [this.userContext?.userId],
|
|
3377
|
-
userName: [this.
|
|
3378
|
+
userName: [this.userdata.userDetail.firstName + this.userdata.userDetail.lastName],
|
|
3378
3379
|
skillSetId: [skillSetId ?? null],
|
|
3379
3380
|
skillSetName: [skillName ?? null],
|
|
3380
3381
|
notes: [''],
|
|
@@ -3393,7 +3394,7 @@ class SkillsComponent {
|
|
|
3393
3394
|
providerId: [this.providerId],
|
|
3394
3395
|
providerName: [this.providerName],
|
|
3395
3396
|
userId: [this.userContext?.userId],
|
|
3396
|
-
userName: [this.
|
|
3397
|
+
userName: [this.userdata.userDetail.firstName + this.userdata.userDetail.lastName],
|
|
3397
3398
|
skillSetId: [skillSetId],
|
|
3398
3399
|
skillSetName: [skillName],
|
|
3399
3400
|
notes: [this.copyData.notes],
|
|
@@ -3439,6 +3440,10 @@ class SkillsComponent {
|
|
|
3439
3440
|
}
|
|
3440
3441
|
}
|
|
3441
3442
|
async ngOnInit() {
|
|
3443
|
+
await loadProfile();
|
|
3444
|
+
const saved = profileSignal();
|
|
3445
|
+
this.userdata = saved;
|
|
3446
|
+
console.log(this.userdata);
|
|
3442
3447
|
this.userId = await this.tokenService?.getUserId();
|
|
3443
3448
|
this.emailId = await this.tokenService?.getUserEmail();
|
|
3444
3449
|
this.showForm = false;
|
|
@@ -3496,7 +3501,7 @@ class SkillsComponent {
|
|
|
3496
3501
|
group.patchValue({
|
|
3497
3502
|
skillSetId: skill.skillSetId,
|
|
3498
3503
|
starRating: skill.starRating,
|
|
3499
|
-
year:
|
|
3504
|
+
year: skill.year,
|
|
3500
3505
|
profileVisibility: skill.profileVisibility,
|
|
3501
3506
|
notes: skill.notes,
|
|
3502
3507
|
});
|
|
@@ -3666,7 +3671,7 @@ class SkillsComponent {
|
|
|
3666
3671
|
element.userHeadShotUrl = this.roleContextService?.tempUserContext()?.headshotUrl ?? '';
|
|
3667
3672
|
element.userId = this.userId ?? '';
|
|
3668
3673
|
element.emailId = this.emailId ?? '';
|
|
3669
|
-
element.userName = this.
|
|
3674
|
+
element.userName = this.userdata.userDetail.firstName + this.userdata.userDetail.lastName;
|
|
3670
3675
|
element.forUser = ForUser.ForProducer;
|
|
3671
3676
|
});
|
|
3672
3677
|
}
|
|
@@ -4477,7 +4482,7 @@ class ToolsComponent {
|
|
|
4477
4482
|
formGroup.patchValue({
|
|
4478
4483
|
toolId: key,
|
|
4479
4484
|
starRating: tool.starRating,
|
|
4480
|
-
year:
|
|
4485
|
+
year: tool.year,
|
|
4481
4486
|
make: tool.make,
|
|
4482
4487
|
model: tool.model,
|
|
4483
4488
|
serialNumber: tool.serialNumber,
|
|
@@ -4798,7 +4803,7 @@ class ToolsComponent {
|
|
|
4798
4803
|
});
|
|
4799
4804
|
}
|
|
4800
4805
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToolsComponent, deps: [{ token: ToolService }, { token: UserToolService }, { token: i3.UntypedFormBuilder }, { token: UtilsService }, { token: CredentialingStore }, { token: i6.TokenService }, { token: UserDetailService }, { token: LIBRARY_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
|
|
4801
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ToolsComponent, isStandalone: false, selector: "app-tools", inputs: { roleData: "roleData", providerId: "providerId", providerName: "providerName" }, ngImport: i0, template: "<!-- Tool PREVIEW LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n <h5 class=\"title text-secondary\">Tools Preview</h5>\r\n <!-- <p class=\"subtitle\">Add Tools</p> -->\r\n <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n <accordion-group *ngFor=\"let tool of userToolsPreview\" #accGroup (isOpenChange)=\"onAccordionChange(tool, $event)\">\r\n <div accordion-heading class=\"skill-preview-header d-flex justify-content-between align-items-center\">\r\n <span class=\"fw-semibold text-secondary\">\r\n {{ tool.toolName }}\r\n </span>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <!-- EDIT MODE BUTTONS -->\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool); else viewActions\">\r\n <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backTool(accGroup)\">\r\n Cancel\r\n </button>\r\n <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserTools()\" \r\n [disabled]=\"showLoader\">\r\n Update\r\n </button>\r\n </ng-container>\r\n <!-- VIEW MODE ACTIONS -->\r\n <ng-template #viewActions>\r\n <button type=\"button\" class=\"me-3\" (click)=\"editToolFromPreview(tool, accGroup, $event)\">\r\n <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" />\r\n </button>\r\n <!-- Arrow (ngx controls click) -->\r\n <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n [class.rotate]=\"accGroup.isOpen\" />\r\n </ng-template>\r\n </div>\r\n </div>\r\n <!-- BODY -->\r\n <div class=\"skill-preview-body content-part mt-3\">\r\n <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n <div class=\"row g-3 row-gap-2\">\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Service Provider</label>\r\n <div class=\"value\">{{ tool.providerName }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Manufacturer</label>\r\n <div class=\"value\">{{ tool.make }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Years of Experience</label>\r\n <div class=\"value\">{{ tool.year }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Self Ability Rating</label>\r\n <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\" style=\"pointer-events: none\">\r\n </ngx-stars>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Active</label><br />\r\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"tool.profileVisibility\" disabled>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Tools / Equipment</label>\r\n <div class=\"value\">{{ tool.toolName }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Model</label>\r\n <div class=\"value\">{{ tool.model }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Serial Number</label>\r\n <div class=\"value\">{{ tool.serialNumber }}</div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label>Description</label>\r\n <div class=\"value\">{{ tool.notes }}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- Edit Mode -->\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\" [formGroup]=\"tab.at(0)\">\r\n <div class=\"row g-3\">\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Service Provider</label>\r\n <div class=\"value\">{{ tool.providerName }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Manufacturer</label> <br />\r\n <input class=\"form-control\" type=\"text\" formControlName=\"make\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" bindValue=\"value\" formControlName=\"year\"\r\n [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\">\r\n </ng-select>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Self Ability Rating</label>\r\n <ngx-stars [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n (rate)=\"onRatingSets($event)\">\r\n </ngx-stars>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Active</label><br />\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Tools / Equipment</label>\r\n <input class=\"form-control\" [value]=\"tool.toolName\" readonly>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Model</label>\r\n <input class=\"form-control\" formControlName=\"model\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Serial Number</label>\r\n <input class=\"form-control\" formControlName=\"serialNumber\">\r\n </div>\r\n <div class=\"col-12\">\r\n <label>Description</label>\r\n <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\"></textarea>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </accordion-group>\r\n </accordion>\r\n</div>\r\n\r\n<!-- Tool LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'add'\">\r\n <h3 class=\"text-secondary\">Add Tools</h3>\r\n <p class=\"info\">Manage specialty tools and equipment</p>\r\n <div class=\"content-part\">\r\n <h6 class=\"text-secondary\"> Add User Tool</h6>\r\n <div class=\"sub-section\">\r\n <div class=\"row mt-2\">\r\n <div class=\"col-12 col-md-12 col-sm-12 ps-lg-0\">\r\n <div class=\"search-part\" *ngIf=\"!isEditMode\">\r\n <input type=\"text\" placeholder=\"Search / Add Tools here\" [(ngModel)]=\"searchToolQry\" (input)=\"getTools()\" />\r\n <button class=\"btn\" (click)=\"createNewTools()\" tooltip=\"Add Tool\">\r\n <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18px\" height=\"18px\" />\r\n </button>\r\n </div>\r\n <div *ngIf=\"!searchToolQry && toolSubmittedValue\" class=\"invalid-feedback is-invalid d-block\">\r\n Please Enter Tools Name\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n {{ nameError }}\r\n </div>\r\n <div class=\"col tools-section\" [ngClass]=\"showLoading ? 'loader':''\">\r\n <div class=\"row mt-2\" [ngStyle]=\"showLoader ? {'min-height': '150px'} : {}\">\r\n <div class=\"col-12 col-md-4\" *ngFor=\"let Tool of tools\">\r\n <div class=\"mt-2 d-flex\">\r\n <input (change)=\"onSelectedTools($event, Tool)\" [checked]=\"Tool.selected == true\" id=\"{{ Tool.id }}\"\r\n name=\"{{ Tool.id }}\" type=\"checkbox\" />\r\n <label class=\"text-title\" for=\"{{ Tool.id }}\">\r\n {{ Tool.name }}</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{ 'loader': showLoading,'pt-3': !showLoading,'edit-mode': isEditMode}\">\r\n <tabset #tabSet>\r\n <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab?.controls; let index = index\"\r\n [label]=\"tabs[index]\" tab1 id=\"{{ tabs[index] }}\" #{{tabs[index]}}>\r\n <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n <span class=\"text-secondary\">{{ tabs[index] }}</span>\r\n <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.toolId.value)\">\r\n <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n </button>\r\n </ng-template>\r\n <div [formGroup]=\"group\" class=\"tab-card\">\r\n <div class=\"card-body mt-3 position-relative\">\r\n <div class=\"col-12 col-md-3 mt-1 copyAll\" *ngIf=\"\r\n tab.controls.length > 1 && index == copyOptionIndex\r\n \">\r\n <label class=\"label\">Copy to All Tabs</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index, group.value,viewTab)\"\r\n role=\"switch\" />\r\n </div>\r\n <div class=\"row\" [ngClass]=\"index == 0 && tab.controls.length > 1 ? 'mt-5' : '' \">\r\n <div class=\"col-12 col-md-2 mt-1\">\r\n <label class=\"label\">Self-ability Rating</label>\r\n <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.starRating.errors }\" [maxStars]=\"5\">\r\n </ngx-stars>\r\n <div *ngIf=\"userToolSubmitted && k.starRating.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid':\r\n userToolSubmitted && k.starRating.errors\r\n }\">\r\n <div *ngIf=\"k.starRating.errors.required\">\r\n Star Rating is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-2 mt-1\">\r\n <label class=\"label\">Profile Visibility</label><br />\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\" />\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" (change)=\"onYearChange(group)\"\r\n formControlName=\"year\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.year.errors\r\n }\" bindValue=\"value\" [closeOnSelect]=\"true\" [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\"\r\n id=\"reqStates\"></ng-select>\r\n\r\n <div *ngIf=\"userToolSubmitted && k.year.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.year.errors\r\n }\">\r\n <div *ngIf=\"k.year.errors.required\">\r\n Year is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Manufacturer</label>\r\n <input id=\"make\" formControlName=\"make\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Manufacturer here\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.make.errors\r\n }\" (change)=\"onYearChange(group)\" />\r\n <!-- <div *ngIf=\"userToolSubmitted && k.make.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.make.errors\r\n }\">\r\n <div *ngIf=\"k.make.errors.required\">\r\n Manufacturer is required\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\"row pt-2\">\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Model</label>\r\n <input id=\"model\" formControlName=\"model\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Model here\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.model.errors\r\n }\" (change)=\"onYearChange(group)\" />\r\n <!-- <div *ngIf=\"userToolSubmitted && k.model.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.model.errors\r\n }\">\r\n <div *ngIf=\"k.model.errors.required\">\r\n Model is required\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\" label\">Serial Number</label>\r\n <input id=\"serialNumber\" formControlName=\"serialNumber\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Serial Number here\" [ngClass]=\"{\r\n 'is-invalid':\r\n userToolSubmitted && k.serialNumber.errors\r\n }\" />\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Comment</label>\r\n <textarea placeholder=\"Enter your comment here\" formControlName=\"notes\" class=\"form-control\"\r\n [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.notes.errors\r\n }\" rows=\"2\"></textarea>\r\n <div *ngIf=\"userToolSubmitted && k.notes.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.notes.errors\r\n }\">\r\n <div *ngIf=\"k.notes.errors.required\">\r\n Description is required\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </tab>\r\n </tabset>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"tools-container last pt-5 mt-5\">\r\n <div class=\"d-flex justify-content-between pt-3 mob-res\">\r\n <!-- (click)=\"reset()\" -->\r\n <button class=\"back-btn\" (click)=\"goBack()\">Back</button>\r\n <div class=\"mob-view\">\r\n <button class=\"back-btn me-3 add\" *ngIf=\"store.toolStepView() === 'preview'\" (click)=\"store.goToToolAdd()\">\r\n Add More Tools\r\n </button>\r\n <button [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\" (click)=\"saveFinal()\"\r\n class=\"float-end save-btn\">\r\n Go To Dashboard\r\n </button>\r\n <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" class=\"float-end save-btn\">\r\n Add\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: ["@charset \"UTF-8\";.tools-container{max-width:1000px;margin:40px auto;min-height:300px}.tools-container.last{min-height:unset}.tools-container h3{margin-bottom:5px;font-size:22px;font-weight:500}.tools-container .info{font-size:13px;color:#666;margin-bottom:30px}.content-part{background:#fff}.content-part p,.content-part div{font-size:small}.content-part div .label{font-size:12px!important;font-weight:700!important;padding-bottom:5px!important}.content-part .row{margin-top:-15px}.content-part .sub-section{padding:0 10px}.content-part .sub-section .title{font-size:16px;font-weight:400;color:var(--font-primary)}.content-part .sub-section .info-title{font-size:12px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .sub-section .content{font-size:12px}.content-part .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px}.content-part .sub-section .subsection input{width:30%}.content-part .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background-color:#fff;border-radius:5px;color:var(--font-primary)}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;height:45px;position:relative;border-radius:5px;border:1px solid #d3dae6;padding:10px 0 10px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.content-part .search-part input{width:auto;flex:1;color:var(--font-dark);font-size:var(--font12-input);font-weight:400;border:none;background:none;outline:none}.content-part .search-part .btn{background:#1e2541;border-radius:5px;padding:5px;width:41px;height:36px;margin-right:3px}.content-part .search-part .btn img{filter:brightness(0) invert(1)}.content-part textarea{width:100%;background:none}.content-part .tools-section{margin-left:5px}.content-part .tools-section .category-title{margin-bottom:5px;font-size:13px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .tools-section .text-title{font-size:13px;margin-left:3px;color:var(--font-primary)}.content-part .tools-section input[type=checkbox]{border:2px solid #000!important;height:14px!important;width:15px!important;border-radius:2px!important;margin:2px}.content-part .tools-section input[type=checkbox]:checked{background-color:#000!important;border:2px solid #000!important}.content-part .tools-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#000;width:15px;display:flex;justify-content:center;border:2px solid #000;height:14px;align-items:center;border-radius:2px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#237b4b!important;border:1px solid #237b4b!important}.copyAll{position:absolute;right:0;text-align:end;top:-40px}.close-popup{position:absolute;right:7px;top:4px;width:25px}.form-control:focus{border:var(--bs-border-width) solid var(--bs-border-color)}::ng-deep .nav-link{color:#000!important}.back-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background:#d3dae6;color:#6c757dc7;border-radius:5px}.back-btn.edit{padding:5px 20px;min-height:20px;min-width:auto}.back-btn.add{background:#2e5b70;color:#fff}.save-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px}.create-btn{font-size:14px;transition:.2s;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px;height:40px;min-width:9rem}.form-control{color:#333;background:none!important;font-size:small;height:45px}.form-control:focus{box-shadow:none!important}@media only screen and (min-width: 300px) and (max-width: 450px){.modal-content .close-popup{width:16px}}.loader{filter:blur(3px)}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.skill-preview-body label{font-weight:500;font-size:14px;color:#6b7280;padding-bottom:5px}.skill-preview-body p{margin:0}.skill-preview-body .value{font-size:13px;color:#212529}.skill-preview-card{border-radius:12px;margin-bottom:12px;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease;overflow:hidden}.continue-btn{background-color:#4077ad;padding:5px 20px;min-height:20px;font-weight:500;color:#fff;border-radius:5px}.action-btns{display:flex;justify-content:space-between;align-items:center}.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:15px}.actions button{padding:10px 22px;border:none;border-radius:6px;font-size:14px;transition:all .2s ease;font-weight:500;min-width:8rem;min-height:45px}.actions .secondary{color:#6c757dc7;background-color:#e0e0e0}.actions .secondary:hover{background-color:#d5d5d5}.actions .primary{background-color:#2196f3;color:#fff}.actions .primary:hover{background-color:#1976d2}@media (max-width: 600px){.actions{flex-direction:column;align-items:stretch}.actions button{width:100%}}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .2s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.icon-color.rotate{transform:rotate(180deg)}@media screen and (max-width: 767px){.tools-container{padding:0 10px}.tools-container .mob-view{display:flex;justify-content:space-between}.tools-container .mob-res{flex-direction:column-reverse;gap:5px}.footer-actions{flex-direction:column-reverse;gap:5px;margin-top:65px}.continue-btn{padding:7px 45px}.back-btn{width:100%}.continue-btn{padding:10px 43px}.save-btn{padding:10px 15px;width:46%;margin-left:0!important}}.save-btn{margin-left:15px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "component", type: NgxStarsComponent, selector: "ngx-stars", inputs: ["maxStars", "initialStars", "readonly", "size", "color", "animation", "animationSpeed", "customPadding", "wholeStars", "customStarIcons"], outputs: ["ratingOutput"] }, { kind: "directive", type: i11$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i12.TabDirective, selector: "tab, [tab]", inputs: ["heading", "id", "disabled", "removable", "tabOrder", "customClass", "active"], outputs: ["selectTab", "deselect", "removed"], exportAs: ["tab"] }, { kind: "component", type: i12.TabsetComponent, selector: "tabset", inputs: ["vertical", "justified", "type"] }, { kind: "directive", type: i12.TabHeadingDirective, selector: "[tabHeading]" }, { kind: "component", type: i13.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i13.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }], animations: [
|
|
4806
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ToolsComponent, isStandalone: false, selector: "app-tools", inputs: { roleData: "roleData", providerId: "providerId", providerName: "providerName" }, ngImport: i0, template: "<!-- Tool PREVIEW LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n <h5 class=\"title text-secondary\">Tools Preview</h5>\r\n <!-- <p class=\"subtitle\">Add Tools</p> -->\r\n <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n <accordion-group *ngFor=\"let tool of userToolsPreview\" #accGroup (isOpenChange)=\"onAccordionChange(tool, $event)\">\r\n <div accordion-heading class=\"skill-preview-header d-flex justify-content-between align-items-center\">\r\n <span class=\"fw-semibold text-secondary\">\r\n {{ tool.toolName }}\r\n </span>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <!-- EDIT MODE BUTTONS -->\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool); else viewActions\">\r\n <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backTool(accGroup)\">\r\n Cancel\r\n </button>\r\n <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserTools()\" \r\n [disabled]=\"showLoader\">\r\n Update\r\n </button>\r\n </ng-container>\r\n <!-- VIEW MODE ACTIONS -->\r\n <ng-template #viewActions>\r\n <button type=\"button\" class=\"me-3\" (click)=\"editToolFromPreview(tool, accGroup, $event)\">\r\n <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" />\r\n </button>\r\n <!-- Arrow (ngx controls click) -->\r\n <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n [class.rotate]=\"accGroup.isOpen\" />\r\n </ng-template>\r\n </div>\r\n </div>\r\n <!-- BODY -->\r\n <div class=\"skill-preview-body content-part mt-3\">\r\n <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n <div class=\"row g-3 row-gap-2\">\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Service Provider</label>\r\n <div class=\"value\">{{ tool.providerName }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Manufacturer</label>\r\n <div class=\"value\">{{ tool.make }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Years of Experience</label>\r\n <div class=\"value\">{{ tool.year }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Self Ability Rating</label>\r\n <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\" style=\"pointer-events: none\">\r\n </ngx-stars>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Active</label><br />\r\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"tool.profileVisibility\" disabled>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Tools / Equipment</label>\r\n <div class=\"value\">{{ tool.toolName }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Model</label>\r\n <div class=\"value\">{{ tool.model }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Serial Number</label>\r\n <div class=\"value\">{{ tool.serialNumber }}</div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label>Description</label>\r\n <div class=\"value\">{{ tool.notes }}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- Edit Mode -->\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\" [formGroup]=\"tab.at(0)\">\r\n <div class=\"row g-3\">\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Service Provider</label>\r\n <div class=\"value\">{{ tool.providerName }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Manufacturer</label> <br />\r\n <input class=\"form-control\" type=\"text\" formControlName=\"make\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" bindValue=\"value\" formControlName=\"year\"\r\n [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\">\r\n </ng-select>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Self Ability Rating</label>\r\n <ngx-stars [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n (rate)=\"onRatingSets($event)\">\r\n </ngx-stars>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Active</label><br />\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Tools / Equipment</label>\r\n <input class=\"form-control\" [value]=\"tool.toolName\" readonly>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Model</label>\r\n <input class=\"form-control\" formControlName=\"model\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Serial Number</label>\r\n <input class=\"form-control\" formControlName=\"serialNumber\">\r\n </div>\r\n <div class=\"col-12\">\r\n <label>Description</label>\r\n <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\"></textarea>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </accordion-group>\r\n </accordion>\r\n</div>\r\n\r\n<!-- Tool LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'add'\">\r\n <h3 class=\"text-secondary\">Add Tools</h3>\r\n <p class=\"info\">Manage specialty tools and equipment</p>\r\n <div class=\"content-part\">\r\n <h6 class=\"text-secondary\"> Add User Tool</h6>\r\n <div class=\"sub-section\">\r\n <div class=\"row mt-2\">\r\n <div class=\"col-12 col-md-12 col-sm-12 ps-lg-0\">\r\n <div class=\"search-part\" *ngIf=\"!isEditMode\">\r\n <input type=\"text\" placeholder=\"Search / Add Tools here\" [(ngModel)]=\"searchToolQry\" (input)=\"getTools()\" />\r\n <button class=\"btn\" (click)=\"createNewTools()\" tooltip=\"Add Tool\">\r\n <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18px\" height=\"18px\" />\r\n </button>\r\n </div>\r\n <div *ngIf=\"!searchToolQry && toolSubmittedValue\" class=\"invalid-feedback is-invalid d-block\">\r\n Please Enter Tools Name\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n {{ nameError }}\r\n </div>\r\n <div class=\"col tools-section\" [ngClass]=\"showLoading ? 'loader':''\">\r\n <div class=\"row mt-2\" [ngStyle]=\"showLoader ? {'min-height': '150px'} : {}\">\r\n <div class=\"col-12 col-md-4\" *ngFor=\"let Tool of tools\">\r\n <div class=\"mt-2 d-flex\">\r\n <input (change)=\"onSelectedTools($event, Tool)\" [checked]=\"Tool.selected == true\" id=\"{{ Tool.id }}\"\r\n name=\"{{ Tool.id }}\" type=\"checkbox\" />\r\n <label class=\"text-title\" for=\"{{ Tool.id }}\">\r\n {{ Tool.name }}</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{ 'loader': showLoading,'pt-3': !showLoading,'edit-mode': isEditMode}\">\r\n <tabset #tabSet>\r\n <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab?.controls; let index = index\"\r\n [label]=\"tabs[index]\" tab1 id=\"{{ tabs[index] }}\" #{{tabs[index]}}>\r\n <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n <span class=\"text-secondary\">{{ tabs[index] }}</span>\r\n <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.toolId.value)\">\r\n <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n </button>\r\n </ng-template>\r\n <div [formGroup]=\"group\" class=\"tab-card\">\r\n <div class=\"card-body mt-3 position-relative\">\r\n <div class=\"col-12 col-md-3 mt-1 copyAll\" *ngIf=\"\r\n tab.controls.length > 1 && index == copyOptionIndex\r\n \">\r\n <label class=\"label\">Copy to All Tabs</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index, group.value,viewTab)\"\r\n role=\"switch\" />\r\n </div>\r\n <div class=\"row\" [ngClass]=\"index == 0 && tab.controls.length > 1 ? 'mt-5' : '' \">\r\n <div class=\"col-12 col-md-2 mt-1\">\r\n <label class=\"label\">Self-ability Rating</label>\r\n <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.starRating.errors }\" [maxStars]=\"5\">\r\n </ngx-stars>\r\n <div *ngIf=\"userToolSubmitted && k.starRating.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid':\r\n userToolSubmitted && k.starRating.errors\r\n }\">\r\n <div *ngIf=\"k.starRating.errors.required\">\r\n Star Rating is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-2 mt-1\">\r\n <label class=\"label\">Profile Visibility</label><br />\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\" />\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" (change)=\"onYearChange(group)\"\r\n formControlName=\"year\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.year.errors\r\n }\" bindValue=\"value\" [closeOnSelect]=\"true\" [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\"\r\n id=\"reqStates\"></ng-select>\r\n\r\n <div *ngIf=\"userToolSubmitted && k.year.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.year.errors\r\n }\">\r\n <div *ngIf=\"k.year.errors.required\">\r\n Year is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Manufacturer</label>\r\n <input id=\"make\" formControlName=\"make\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Manufacturer here\" (change)=\"onYearChange(group)\" />\r\n <!-- <div *ngIf=\"userToolSubmitted && k.make.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.make.errors\r\n }\">\r\n <div *ngIf=\"k.make.errors.required\">\r\n Manufacturer is required\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\"row pt-2\">\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Model</label>\r\n <input id=\"model\" formControlName=\"model\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Model here\" (change)=\"onYearChange(group)\" />\r\n <!-- <div *ngIf=\"userToolSubmitted && k.model.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.model.errors\r\n }\">\r\n <div *ngIf=\"k.model.errors.required\">\r\n Model is required\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\" label\">Serial Number</label>\r\n <input id=\"serialNumber\" formControlName=\"serialNumber\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Serial Number here\" />\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Comment</label>\r\n <textarea placeholder=\"Enter your comment here\" formControlName=\"notes\" class=\"form-control\"\r\n [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.notes.errors\r\n }\" rows=\"2\"></textarea>\r\n <div *ngIf=\"userToolSubmitted && k.notes.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.notes.errors\r\n }\">\r\n <div *ngIf=\"k.notes.errors.required\">\r\n Description is required\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </tab>\r\n </tabset>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"tools-container last pt-5 mt-5\">\r\n <div class=\"d-flex justify-content-between pt-3 mob-res\">\r\n <!-- (click)=\"reset()\" -->\r\n <button class=\"back-btn\" (click)=\"goBack()\">Back</button>\r\n <div class=\"mob-view\">\r\n <button class=\"back-btn me-3 add\" *ngIf=\"store.toolStepView() === 'preview'\" (click)=\"store.goToToolAdd()\">\r\n Add More Tools\r\n </button>\r\n <button [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\" (click)=\"saveFinal()\"\r\n class=\"float-end save-btn\">\r\n Go To Dashboard\r\n </button>\r\n <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" class=\"float-end save-btn\">\r\n Add\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: ["@charset \"UTF-8\";.tools-container{max-width:1000px;margin:40px auto;min-height:300px}.tools-container.last{min-height:unset}.tools-container h3{margin-bottom:5px;font-size:22px;font-weight:500}.tools-container .info{font-size:13px;color:#666;margin-bottom:30px}.content-part{background:#fff}.content-part p,.content-part div{font-size:small}.content-part div .label{font-size:12px!important;font-weight:700!important;padding-bottom:5px!important}.content-part .row{margin-top:-15px}.content-part .sub-section{padding:0 10px}.content-part .sub-section .title{font-size:16px;font-weight:400;color:var(--font-primary)}.content-part .sub-section .info-title{font-size:12px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .sub-section .content{font-size:12px}.content-part .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px}.content-part .sub-section .subsection input{width:30%}.content-part .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background-color:#fff;border-radius:5px;color:var(--font-primary)}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;height:45px;position:relative;border-radius:5px;border:1px solid #d3dae6;padding:10px 0 10px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.content-part .search-part input{width:auto;flex:1;color:var(--font-dark);font-size:var(--font12-input);font-weight:400;border:none;background:none;outline:none}.content-part .search-part .btn{background:#1e2541;border-radius:5px;padding:5px;width:41px;height:36px;margin-right:3px}.content-part .search-part .btn img{filter:brightness(0) invert(1)}.content-part textarea{width:100%;background:none}.content-part .tools-section{margin-left:5px}.content-part .tools-section .category-title{margin-bottom:5px;font-size:13px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .tools-section .text-title{font-size:13px;margin-left:3px;color:var(--font-primary)}.content-part .tools-section input[type=checkbox]{border:2px solid #000!important;height:14px!important;width:15px!important;border-radius:2px!important;margin:2px}.content-part .tools-section input[type=checkbox]:checked{background-color:#000!important;border:2px solid #000!important}.content-part .tools-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#000;width:15px;display:flex;justify-content:center;border:2px solid #000;height:14px;align-items:center;border-radius:2px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#237b4b!important;border:1px solid #237b4b!important}.copyAll{position:absolute;right:0;text-align:end;top:-40px}.close-popup{position:absolute;right:7px;top:4px;width:25px}.form-control:focus{border:var(--bs-border-width) solid var(--bs-border-color)}::ng-deep .nav-link{color:#000!important}.back-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background:#d3dae6;color:#6c757dc7;border-radius:5px}.back-btn.edit{padding:5px 20px;min-height:20px;min-width:auto}.back-btn.add{background:#2e5b70;color:#fff}.save-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px}.create-btn{font-size:14px;transition:.2s;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px;height:40px;min-width:9rem}.form-control{color:#333;background:none!important;font-size:small;height:45px}.form-control:focus{box-shadow:none!important}@media only screen and (min-width: 300px) and (max-width: 450px){.modal-content .close-popup{width:16px}}.loader{filter:blur(3px)}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.skill-preview-body label{font-weight:500;font-size:14px;color:#6b7280;padding-bottom:5px}.skill-preview-body p{margin:0}.skill-preview-body .value{font-size:13px;color:#212529}.skill-preview-card{border-radius:12px;margin-bottom:12px;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease;overflow:hidden}.continue-btn{background-color:#4077ad;padding:5px 20px;min-height:20px;font-weight:500;color:#fff;border-radius:5px}.action-btns{display:flex;justify-content:space-between;align-items:center}.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:15px}.actions button{padding:10px 22px;border:none;border-radius:6px;font-size:14px;transition:all .2s ease;font-weight:500;min-width:8rem;min-height:45px}.actions .secondary{color:#6c757dc7;background-color:#e0e0e0}.actions .secondary:hover{background-color:#d5d5d5}.actions .primary{background-color:#2196f3;color:#fff}.actions .primary:hover{background-color:#1976d2}@media (max-width: 600px){.actions{flex-direction:column;align-items:stretch}.actions button{width:100%}}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .2s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.icon-color.rotate{transform:rotate(180deg)}@media screen and (max-width: 767px){.tools-container{padding:0 10px}.tools-container .mob-view{display:flex;justify-content:space-between}.tools-container .mob-res{flex-direction:column-reverse;gap:5px}.footer-actions{flex-direction:column-reverse;gap:5px;margin-top:65px}.continue-btn{padding:7px 45px}.back-btn{width:100%}.continue-btn{padding:10px 43px}.save-btn{padding:10px 15px;width:46%;margin-left:0!important}}.save-btn{margin-left:15px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "component", type: NgxStarsComponent, selector: "ngx-stars", inputs: ["maxStars", "initialStars", "readonly", "size", "color", "animation", "animationSpeed", "customPadding", "wholeStars", "customStarIcons"], outputs: ["ratingOutput"] }, { kind: "directive", type: i11$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i12.TabDirective, selector: "tab, [tab]", inputs: ["heading", "id", "disabled", "removable", "tabOrder", "customClass", "active"], outputs: ["selectTab", "deselect", "removed"], exportAs: ["tab"] }, { kind: "component", type: i12.TabsetComponent, selector: "tabset", inputs: ["vertical", "justified", "type"] }, { kind: "directive", type: i12.TabHeadingDirective, selector: "[tabHeading]" }, { kind: "component", type: i13.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i13.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }], animations: [
|
|
4802
4807
|
trigger('expandCollapse', [
|
|
4803
4808
|
state('open', style({
|
|
4804
4809
|
height: '*',
|
|
@@ -4836,7 +4841,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
4836
4841
|
})),
|
|
4837
4842
|
transition('open <=> closed', animate('300ms ease'))
|
|
4838
4843
|
])
|
|
4839
|
-
], template: "<!-- Tool PREVIEW LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n <h5 class=\"title text-secondary\">Tools Preview</h5>\r\n <!-- <p class=\"subtitle\">Add Tools</p> -->\r\n <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n <accordion-group *ngFor=\"let tool of userToolsPreview\" #accGroup (isOpenChange)=\"onAccordionChange(tool, $event)\">\r\n <div accordion-heading class=\"skill-preview-header d-flex justify-content-between align-items-center\">\r\n <span class=\"fw-semibold text-secondary\">\r\n {{ tool.toolName }}\r\n </span>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <!-- EDIT MODE BUTTONS -->\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool); else viewActions\">\r\n <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backTool(accGroup)\">\r\n Cancel\r\n </button>\r\n <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserTools()\" \r\n [disabled]=\"showLoader\">\r\n Update\r\n </button>\r\n </ng-container>\r\n <!-- VIEW MODE ACTIONS -->\r\n <ng-template #viewActions>\r\n <button type=\"button\" class=\"me-3\" (click)=\"editToolFromPreview(tool, accGroup, $event)\">\r\n <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" />\r\n </button>\r\n <!-- Arrow (ngx controls click) -->\r\n <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n [class.rotate]=\"accGroup.isOpen\" />\r\n </ng-template>\r\n </div>\r\n </div>\r\n <!-- BODY -->\r\n <div class=\"skill-preview-body content-part mt-3\">\r\n <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n <div class=\"row g-3 row-gap-2\">\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Service Provider</label>\r\n <div class=\"value\">{{ tool.providerName }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Manufacturer</label>\r\n <div class=\"value\">{{ tool.make }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Years of Experience</label>\r\n <div class=\"value\">{{ tool.year }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Self Ability Rating</label>\r\n <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\" style=\"pointer-events: none\">\r\n </ngx-stars>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Active</label><br />\r\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"tool.profileVisibility\" disabled>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Tools / Equipment</label>\r\n <div class=\"value\">{{ tool.toolName }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Model</label>\r\n <div class=\"value\">{{ tool.model }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Serial Number</label>\r\n <div class=\"value\">{{ tool.serialNumber }}</div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label>Description</label>\r\n <div class=\"value\">{{ tool.notes }}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- Edit Mode -->\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\" [formGroup]=\"tab.at(0)\">\r\n <div class=\"row g-3\">\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Service Provider</label>\r\n <div class=\"value\">{{ tool.providerName }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Manufacturer</label> <br />\r\n <input class=\"form-control\" type=\"text\" formControlName=\"make\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" bindValue=\"value\" formControlName=\"year\"\r\n [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\">\r\n </ng-select>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Self Ability Rating</label>\r\n <ngx-stars [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n (rate)=\"onRatingSets($event)\">\r\n </ngx-stars>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Active</label><br />\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Tools / Equipment</label>\r\n <input class=\"form-control\" [value]=\"tool.toolName\" readonly>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Model</label>\r\n <input class=\"form-control\" formControlName=\"model\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Serial Number</label>\r\n <input class=\"form-control\" formControlName=\"serialNumber\">\r\n </div>\r\n <div class=\"col-12\">\r\n <label>Description</label>\r\n <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\"></textarea>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </accordion-group>\r\n </accordion>\r\n</div>\r\n\r\n<!-- Tool LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'add'\">\r\n <h3 class=\"text-secondary\">Add Tools</h3>\r\n <p class=\"info\">Manage specialty tools and equipment</p>\r\n <div class=\"content-part\">\r\n <h6 class=\"text-secondary\"> Add User Tool</h6>\r\n <div class=\"sub-section\">\r\n <div class=\"row mt-2\">\r\n <div class=\"col-12 col-md-12 col-sm-12 ps-lg-0\">\r\n <div class=\"search-part\" *ngIf=\"!isEditMode\">\r\n <input type=\"text\" placeholder=\"Search / Add Tools here\" [(ngModel)]=\"searchToolQry\" (input)=\"getTools()\" />\r\n <button class=\"btn\" (click)=\"createNewTools()\" tooltip=\"Add Tool\">\r\n <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18px\" height=\"18px\" />\r\n </button>\r\n </div>\r\n <div *ngIf=\"!searchToolQry && toolSubmittedValue\" class=\"invalid-feedback is-invalid d-block\">\r\n Please Enter Tools Name\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n {{ nameError }}\r\n </div>\r\n <div class=\"col tools-section\" [ngClass]=\"showLoading ? 'loader':''\">\r\n <div class=\"row mt-2\" [ngStyle]=\"showLoader ? {'min-height': '150px'} : {}\">\r\n <div class=\"col-12 col-md-4\" *ngFor=\"let Tool of tools\">\r\n <div class=\"mt-2 d-flex\">\r\n <input (change)=\"onSelectedTools($event, Tool)\" [checked]=\"Tool.selected == true\" id=\"{{ Tool.id }}\"\r\n name=\"{{ Tool.id }}\" type=\"checkbox\" />\r\n <label class=\"text-title\" for=\"{{ Tool.id }}\">\r\n {{ Tool.name }}</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{ 'loader': showLoading,'pt-3': !showLoading,'edit-mode': isEditMode}\">\r\n <tabset #tabSet>\r\n <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab?.controls; let index = index\"\r\n [label]=\"tabs[index]\" tab1 id=\"{{ tabs[index] }}\" #{{tabs[index]}}>\r\n <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n <span class=\"text-secondary\">{{ tabs[index] }}</span>\r\n <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.toolId.value)\">\r\n <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n </button>\r\n </ng-template>\r\n <div [formGroup]=\"group\" class=\"tab-card\">\r\n <div class=\"card-body mt-3 position-relative\">\r\n <div class=\"col-12 col-md-3 mt-1 copyAll\" *ngIf=\"\r\n tab.controls.length > 1 && index == copyOptionIndex\r\n \">\r\n <label class=\"label\">Copy to All Tabs</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index, group.value,viewTab)\"\r\n role=\"switch\" />\r\n </div>\r\n <div class=\"row\" [ngClass]=\"index == 0 && tab.controls.length > 1 ? 'mt-5' : '' \">\r\n <div class=\"col-12 col-md-2 mt-1\">\r\n <label class=\"label\">Self-ability Rating</label>\r\n <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.starRating.errors }\" [maxStars]=\"5\">\r\n </ngx-stars>\r\n <div *ngIf=\"userToolSubmitted && k.starRating.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid':\r\n userToolSubmitted && k.starRating.errors\r\n }\">\r\n <div *ngIf=\"k.starRating.errors.required\">\r\n Star Rating is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-2 mt-1\">\r\n <label class=\"label\">Profile Visibility</label><br />\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\" />\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" (change)=\"onYearChange(group)\"\r\n formControlName=\"year\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.year.errors\r\n }\" bindValue=\"value\" [closeOnSelect]=\"true\" [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\"\r\n id=\"reqStates\"></ng-select>\r\n\r\n <div *ngIf=\"userToolSubmitted && k.year.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.year.errors\r\n }\">\r\n <div *ngIf=\"k.year.errors.required\">\r\n Year is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Manufacturer</label>\r\n <input id=\"make\" formControlName=\"make\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Manufacturer here\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.make.errors\r\n }\" (change)=\"onYearChange(group)\" />\r\n <!-- <div *ngIf=\"userToolSubmitted && k.make.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.make.errors\r\n }\">\r\n <div *ngIf=\"k.make.errors.required\">\r\n Manufacturer is required\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\"row pt-2\">\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Model</label>\r\n <input id=\"model\" formControlName=\"model\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Model here\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.model.errors\r\n }\" (change)=\"onYearChange(group)\" />\r\n <!-- <div *ngIf=\"userToolSubmitted && k.model.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.model.errors\r\n }\">\r\n <div *ngIf=\"k.model.errors.required\">\r\n Model is required\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\" label\">Serial Number</label>\r\n <input id=\"serialNumber\" formControlName=\"serialNumber\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Serial Number here\" [ngClass]=\"{\r\n 'is-invalid':\r\n userToolSubmitted && k.serialNumber.errors\r\n }\" />\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Comment</label>\r\n <textarea placeholder=\"Enter your comment here\" formControlName=\"notes\" class=\"form-control\"\r\n [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.notes.errors\r\n }\" rows=\"2\"></textarea>\r\n <div *ngIf=\"userToolSubmitted && k.notes.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.notes.errors\r\n }\">\r\n <div *ngIf=\"k.notes.errors.required\">\r\n Description is required\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </tab>\r\n </tabset>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"tools-container last pt-5 mt-5\">\r\n <div class=\"d-flex justify-content-between pt-3 mob-res\">\r\n <!-- (click)=\"reset()\" -->\r\n <button class=\"back-btn\" (click)=\"goBack()\">Back</button>\r\n <div class=\"mob-view\">\r\n <button class=\"back-btn me-3 add\" *ngIf=\"store.toolStepView() === 'preview'\" (click)=\"store.goToToolAdd()\">\r\n Add More Tools\r\n </button>\r\n <button [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\" (click)=\"saveFinal()\"\r\n class=\"float-end save-btn\">\r\n Go To Dashboard\r\n </button>\r\n <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" class=\"float-end save-btn\">\r\n Add\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: ["@charset \"UTF-8\";.tools-container{max-width:1000px;margin:40px auto;min-height:300px}.tools-container.last{min-height:unset}.tools-container h3{margin-bottom:5px;font-size:22px;font-weight:500}.tools-container .info{font-size:13px;color:#666;margin-bottom:30px}.content-part{background:#fff}.content-part p,.content-part div{font-size:small}.content-part div .label{font-size:12px!important;font-weight:700!important;padding-bottom:5px!important}.content-part .row{margin-top:-15px}.content-part .sub-section{padding:0 10px}.content-part .sub-section .title{font-size:16px;font-weight:400;color:var(--font-primary)}.content-part .sub-section .info-title{font-size:12px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .sub-section .content{font-size:12px}.content-part .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px}.content-part .sub-section .subsection input{width:30%}.content-part .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background-color:#fff;border-radius:5px;color:var(--font-primary)}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;height:45px;position:relative;border-radius:5px;border:1px solid #d3dae6;padding:10px 0 10px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.content-part .search-part input{width:auto;flex:1;color:var(--font-dark);font-size:var(--font12-input);font-weight:400;border:none;background:none;outline:none}.content-part .search-part .btn{background:#1e2541;border-radius:5px;padding:5px;width:41px;height:36px;margin-right:3px}.content-part .search-part .btn img{filter:brightness(0) invert(1)}.content-part textarea{width:100%;background:none}.content-part .tools-section{margin-left:5px}.content-part .tools-section .category-title{margin-bottom:5px;font-size:13px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .tools-section .text-title{font-size:13px;margin-left:3px;color:var(--font-primary)}.content-part .tools-section input[type=checkbox]{border:2px solid #000!important;height:14px!important;width:15px!important;border-radius:2px!important;margin:2px}.content-part .tools-section input[type=checkbox]:checked{background-color:#000!important;border:2px solid #000!important}.content-part .tools-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#000;width:15px;display:flex;justify-content:center;border:2px solid #000;height:14px;align-items:center;border-radius:2px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#237b4b!important;border:1px solid #237b4b!important}.copyAll{position:absolute;right:0;text-align:end;top:-40px}.close-popup{position:absolute;right:7px;top:4px;width:25px}.form-control:focus{border:var(--bs-border-width) solid var(--bs-border-color)}::ng-deep .nav-link{color:#000!important}.back-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background:#d3dae6;color:#6c757dc7;border-radius:5px}.back-btn.edit{padding:5px 20px;min-height:20px;min-width:auto}.back-btn.add{background:#2e5b70;color:#fff}.save-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px}.create-btn{font-size:14px;transition:.2s;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px;height:40px;min-width:9rem}.form-control{color:#333;background:none!important;font-size:small;height:45px}.form-control:focus{box-shadow:none!important}@media only screen and (min-width: 300px) and (max-width: 450px){.modal-content .close-popup{width:16px}}.loader{filter:blur(3px)}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.skill-preview-body label{font-weight:500;font-size:14px;color:#6b7280;padding-bottom:5px}.skill-preview-body p{margin:0}.skill-preview-body .value{font-size:13px;color:#212529}.skill-preview-card{border-radius:12px;margin-bottom:12px;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease;overflow:hidden}.continue-btn{background-color:#4077ad;padding:5px 20px;min-height:20px;font-weight:500;color:#fff;border-radius:5px}.action-btns{display:flex;justify-content:space-between;align-items:center}.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:15px}.actions button{padding:10px 22px;border:none;border-radius:6px;font-size:14px;transition:all .2s ease;font-weight:500;min-width:8rem;min-height:45px}.actions .secondary{color:#6c757dc7;background-color:#e0e0e0}.actions .secondary:hover{background-color:#d5d5d5}.actions .primary{background-color:#2196f3;color:#fff}.actions .primary:hover{background-color:#1976d2}@media (max-width: 600px){.actions{flex-direction:column;align-items:stretch}.actions button{width:100%}}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .2s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.icon-color.rotate{transform:rotate(180deg)}@media screen and (max-width: 767px){.tools-container{padding:0 10px}.tools-container .mob-view{display:flex;justify-content:space-between}.tools-container .mob-res{flex-direction:column-reverse;gap:5px}.footer-actions{flex-direction:column-reverse;gap:5px;margin-top:65px}.continue-btn{padding:7px 45px}.back-btn{width:100%}.continue-btn{padding:10px 43px}.save-btn{padding:10px 15px;width:46%;margin-left:0!important}}.save-btn{margin-left:15px}\n"] }]
|
|
4844
|
+
], template: "<!-- Tool PREVIEW LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n <h5 class=\"title text-secondary\">Tools Preview</h5>\r\n <!-- <p class=\"subtitle\">Add Tools</p> -->\r\n <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n <accordion-group *ngFor=\"let tool of userToolsPreview\" #accGroup (isOpenChange)=\"onAccordionChange(tool, $event)\">\r\n <div accordion-heading class=\"skill-preview-header d-flex justify-content-between align-items-center\">\r\n <span class=\"fw-semibold text-secondary\">\r\n {{ tool.toolName }}\r\n </span>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <!-- EDIT MODE BUTTONS -->\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool); else viewActions\">\r\n <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backTool(accGroup)\">\r\n Cancel\r\n </button>\r\n <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserTools()\" \r\n [disabled]=\"showLoader\">\r\n Update\r\n </button>\r\n </ng-container>\r\n <!-- VIEW MODE ACTIONS -->\r\n <ng-template #viewActions>\r\n <button type=\"button\" class=\"me-3\" (click)=\"editToolFromPreview(tool, accGroup, $event)\">\r\n <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" />\r\n </button>\r\n <!-- Arrow (ngx controls click) -->\r\n <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n [class.rotate]=\"accGroup.isOpen\" />\r\n </ng-template>\r\n </div>\r\n </div>\r\n <!-- BODY -->\r\n <div class=\"skill-preview-body content-part mt-3\">\r\n <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n <div class=\"row g-3 row-gap-2\">\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Service Provider</label>\r\n <div class=\"value\">{{ tool.providerName }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Manufacturer</label>\r\n <div class=\"value\">{{ tool.make }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Years of Experience</label>\r\n <div class=\"value\">{{ tool.year }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Self Ability Rating</label>\r\n <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\" style=\"pointer-events: none\">\r\n </ngx-stars>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Active</label><br />\r\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"tool.profileVisibility\" disabled>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Tools / Equipment</label>\r\n <div class=\"value\">{{ tool.toolName }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Model</label>\r\n <div class=\"value\">{{ tool.model }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Serial Number</label>\r\n <div class=\"value\">{{ tool.serialNumber }}</div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label>Description</label>\r\n <div class=\"value\">{{ tool.notes }}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- Edit Mode -->\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\" [formGroup]=\"tab.at(0)\">\r\n <div class=\"row g-3\">\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Service Provider</label>\r\n <div class=\"value\">{{ tool.providerName }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Manufacturer</label> <br />\r\n <input class=\"form-control\" type=\"text\" formControlName=\"make\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" bindValue=\"value\" formControlName=\"year\"\r\n [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\">\r\n </ng-select>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Self Ability Rating</label>\r\n <ngx-stars [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n (rate)=\"onRatingSets($event)\">\r\n </ngx-stars>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Active</label><br />\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Tools / Equipment</label>\r\n <input class=\"form-control\" [value]=\"tool.toolName\" readonly>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Model</label>\r\n <input class=\"form-control\" formControlName=\"model\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Serial Number</label>\r\n <input class=\"form-control\" formControlName=\"serialNumber\">\r\n </div>\r\n <div class=\"col-12\">\r\n <label>Description</label>\r\n <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\"></textarea>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </accordion-group>\r\n </accordion>\r\n</div>\r\n\r\n<!-- Tool LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'add'\">\r\n <h3 class=\"text-secondary\">Add Tools</h3>\r\n <p class=\"info\">Manage specialty tools and equipment</p>\r\n <div class=\"content-part\">\r\n <h6 class=\"text-secondary\"> Add User Tool</h6>\r\n <div class=\"sub-section\">\r\n <div class=\"row mt-2\">\r\n <div class=\"col-12 col-md-12 col-sm-12 ps-lg-0\">\r\n <div class=\"search-part\" *ngIf=\"!isEditMode\">\r\n <input type=\"text\" placeholder=\"Search / Add Tools here\" [(ngModel)]=\"searchToolQry\" (input)=\"getTools()\" />\r\n <button class=\"btn\" (click)=\"createNewTools()\" tooltip=\"Add Tool\">\r\n <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18px\" height=\"18px\" />\r\n </button>\r\n </div>\r\n <div *ngIf=\"!searchToolQry && toolSubmittedValue\" class=\"invalid-feedback is-invalid d-block\">\r\n Please Enter Tools Name\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n {{ nameError }}\r\n </div>\r\n <div class=\"col tools-section\" [ngClass]=\"showLoading ? 'loader':''\">\r\n <div class=\"row mt-2\" [ngStyle]=\"showLoader ? {'min-height': '150px'} : {}\">\r\n <div class=\"col-12 col-md-4\" *ngFor=\"let Tool of tools\">\r\n <div class=\"mt-2 d-flex\">\r\n <input (change)=\"onSelectedTools($event, Tool)\" [checked]=\"Tool.selected == true\" id=\"{{ Tool.id }}\"\r\n name=\"{{ Tool.id }}\" type=\"checkbox\" />\r\n <label class=\"text-title\" for=\"{{ Tool.id }}\">\r\n {{ Tool.name }}</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{ 'loader': showLoading,'pt-3': !showLoading,'edit-mode': isEditMode}\">\r\n <tabset #tabSet>\r\n <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab?.controls; let index = index\"\r\n [label]=\"tabs[index]\" tab1 id=\"{{ tabs[index] }}\" #{{tabs[index]}}>\r\n <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n <span class=\"text-secondary\">{{ tabs[index] }}</span>\r\n <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.toolId.value)\">\r\n <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n </button>\r\n </ng-template>\r\n <div [formGroup]=\"group\" class=\"tab-card\">\r\n <div class=\"card-body mt-3 position-relative\">\r\n <div class=\"col-12 col-md-3 mt-1 copyAll\" *ngIf=\"\r\n tab.controls.length > 1 && index == copyOptionIndex\r\n \">\r\n <label class=\"label\">Copy to All Tabs</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index, group.value,viewTab)\"\r\n role=\"switch\" />\r\n </div>\r\n <div class=\"row\" [ngClass]=\"index == 0 && tab.controls.length > 1 ? 'mt-5' : '' \">\r\n <div class=\"col-12 col-md-2 mt-1\">\r\n <label class=\"label\">Self-ability Rating</label>\r\n <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.starRating.errors }\" [maxStars]=\"5\">\r\n </ngx-stars>\r\n <div *ngIf=\"userToolSubmitted && k.starRating.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid':\r\n userToolSubmitted && k.starRating.errors\r\n }\">\r\n <div *ngIf=\"k.starRating.errors.required\">\r\n Star Rating is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-2 mt-1\">\r\n <label class=\"label\">Profile Visibility</label><br />\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\" />\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" (change)=\"onYearChange(group)\"\r\n formControlName=\"year\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.year.errors\r\n }\" bindValue=\"value\" [closeOnSelect]=\"true\" [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\"\r\n id=\"reqStates\"></ng-select>\r\n\r\n <div *ngIf=\"userToolSubmitted && k.year.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.year.errors\r\n }\">\r\n <div *ngIf=\"k.year.errors.required\">\r\n Year is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Manufacturer</label>\r\n <input id=\"make\" formControlName=\"make\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Manufacturer here\" (change)=\"onYearChange(group)\" />\r\n <!-- <div *ngIf=\"userToolSubmitted && k.make.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.make.errors\r\n }\">\r\n <div *ngIf=\"k.make.errors.required\">\r\n Manufacturer is required\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\"row pt-2\">\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Model</label>\r\n <input id=\"model\" formControlName=\"model\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Model here\" (change)=\"onYearChange(group)\" />\r\n <!-- <div *ngIf=\"userToolSubmitted && k.model.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.model.errors\r\n }\">\r\n <div *ngIf=\"k.model.errors.required\">\r\n Model is required\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\" label\">Serial Number</label>\r\n <input id=\"serialNumber\" formControlName=\"serialNumber\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Serial Number here\" />\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Comment</label>\r\n <textarea placeholder=\"Enter your comment here\" formControlName=\"notes\" class=\"form-control\"\r\n [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.notes.errors\r\n }\" rows=\"2\"></textarea>\r\n <div *ngIf=\"userToolSubmitted && k.notes.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.notes.errors\r\n }\">\r\n <div *ngIf=\"k.notes.errors.required\">\r\n Description is required\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </tab>\r\n </tabset>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"tools-container last pt-5 mt-5\">\r\n <div class=\"d-flex justify-content-between pt-3 mob-res\">\r\n <!-- (click)=\"reset()\" -->\r\n <button class=\"back-btn\" (click)=\"goBack()\">Back</button>\r\n <div class=\"mob-view\">\r\n <button class=\"back-btn me-3 add\" *ngIf=\"store.toolStepView() === 'preview'\" (click)=\"store.goToToolAdd()\">\r\n Add More Tools\r\n </button>\r\n <button [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\" (click)=\"saveFinal()\"\r\n class=\"float-end save-btn\">\r\n Go To Dashboard\r\n </button>\r\n <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" class=\"float-end save-btn\">\r\n Add\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: ["@charset \"UTF-8\";.tools-container{max-width:1000px;margin:40px auto;min-height:300px}.tools-container.last{min-height:unset}.tools-container h3{margin-bottom:5px;font-size:22px;font-weight:500}.tools-container .info{font-size:13px;color:#666;margin-bottom:30px}.content-part{background:#fff}.content-part p,.content-part div{font-size:small}.content-part div .label{font-size:12px!important;font-weight:700!important;padding-bottom:5px!important}.content-part .row{margin-top:-15px}.content-part .sub-section{padding:0 10px}.content-part .sub-section .title{font-size:16px;font-weight:400;color:var(--font-primary)}.content-part .sub-section .info-title{font-size:12px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .sub-section .content{font-size:12px}.content-part .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px}.content-part .sub-section .subsection input{width:30%}.content-part .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background-color:#fff;border-radius:5px;color:var(--font-primary)}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;height:45px;position:relative;border-radius:5px;border:1px solid #d3dae6;padding:10px 0 10px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.content-part .search-part input{width:auto;flex:1;color:var(--font-dark);font-size:var(--font12-input);font-weight:400;border:none;background:none;outline:none}.content-part .search-part .btn{background:#1e2541;border-radius:5px;padding:5px;width:41px;height:36px;margin-right:3px}.content-part .search-part .btn img{filter:brightness(0) invert(1)}.content-part textarea{width:100%;background:none}.content-part .tools-section{margin-left:5px}.content-part .tools-section .category-title{margin-bottom:5px;font-size:13px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .tools-section .text-title{font-size:13px;margin-left:3px;color:var(--font-primary)}.content-part .tools-section input[type=checkbox]{border:2px solid #000!important;height:14px!important;width:15px!important;border-radius:2px!important;margin:2px}.content-part .tools-section input[type=checkbox]:checked{background-color:#000!important;border:2px solid #000!important}.content-part .tools-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#000;width:15px;display:flex;justify-content:center;border:2px solid #000;height:14px;align-items:center;border-radius:2px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#237b4b!important;border:1px solid #237b4b!important}.copyAll{position:absolute;right:0;text-align:end;top:-40px}.close-popup{position:absolute;right:7px;top:4px;width:25px}.form-control:focus{border:var(--bs-border-width) solid var(--bs-border-color)}::ng-deep .nav-link{color:#000!important}.back-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background:#d3dae6;color:#6c757dc7;border-radius:5px}.back-btn.edit{padding:5px 20px;min-height:20px;min-width:auto}.back-btn.add{background:#2e5b70;color:#fff}.save-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px}.create-btn{font-size:14px;transition:.2s;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px;height:40px;min-width:9rem}.form-control{color:#333;background:none!important;font-size:small;height:45px}.form-control:focus{box-shadow:none!important}@media only screen and (min-width: 300px) and (max-width: 450px){.modal-content .close-popup{width:16px}}.loader{filter:blur(3px)}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.skill-preview-body label{font-weight:500;font-size:14px;color:#6b7280;padding-bottom:5px}.skill-preview-body p{margin:0}.skill-preview-body .value{font-size:13px;color:#212529}.skill-preview-card{border-radius:12px;margin-bottom:12px;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease;overflow:hidden}.continue-btn{background-color:#4077ad;padding:5px 20px;min-height:20px;font-weight:500;color:#fff;border-radius:5px}.action-btns{display:flex;justify-content:space-between;align-items:center}.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:15px}.actions button{padding:10px 22px;border:none;border-radius:6px;font-size:14px;transition:all .2s ease;font-weight:500;min-width:8rem;min-height:45px}.actions .secondary{color:#6c757dc7;background-color:#e0e0e0}.actions .secondary:hover{background-color:#d5d5d5}.actions .primary{background-color:#2196f3;color:#fff}.actions .primary:hover{background-color:#1976d2}@media (max-width: 600px){.actions{flex-direction:column;align-items:stretch}.actions button{width:100%}}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .2s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.icon-color.rotate{transform:rotate(180deg)}@media screen and (max-width: 767px){.tools-container{padding:0 10px}.tools-container .mob-view{display:flex;justify-content:space-between}.tools-container .mob-res{flex-direction:column-reverse;gap:5px}.footer-actions{flex-direction:column-reverse;gap:5px;margin-top:65px}.continue-btn{padding:7px 45px}.back-btn{width:100%}.continue-btn{padding:10px 43px}.save-btn{padding:10px 15px;width:46%;margin-left:0!important}}.save-btn{margin-left:15px}\n"] }]
|
|
4840
4845
|
}], ctorParameters: () => [{ type: ToolService }, { type: UserToolService }, { type: i3.UntypedFormBuilder }, { type: UtilsService }, { type: CredentialingStore }, { type: i6.TokenService }, { type: UserDetailService }, { type: undefined, decorators: [{
|
|
4841
4846
|
type: Inject,
|
|
4842
4847
|
args: [LIBRARY_CONFIG]
|
|
@@ -5275,7 +5280,7 @@ class RoleSelectComponent {
|
|
|
5275
5280
|
// id: this.editingIndex >= 0
|
|
5276
5281
|
// ? this.workStore.getExperience(this.editingIndex)?.id
|
|
5277
5282
|
// : '00000000-0000-0000-0000-000000000000',
|
|
5278
|
-
providerName:
|
|
5283
|
+
providerName: this.providerName,
|
|
5279
5284
|
userId: this.userId,
|
|
5280
5285
|
userName: form.firstName + form.lastName,
|
|
5281
5286
|
issuedState: '',
|
|
@@ -5286,7 +5291,7 @@ class RoleSelectComponent {
|
|
|
5286
5291
|
fileId: this.model?.fileId || null,
|
|
5287
5292
|
fileUrl: this.model?.fileUrl || null,
|
|
5288
5293
|
fileName: this.model?.fileName || null,
|
|
5289
|
-
status:
|
|
5294
|
+
status: 5,
|
|
5290
5295
|
mainType: 4,
|
|
5291
5296
|
forUser: 2,
|
|
5292
5297
|
userHeadShotUrl: '',
|
|
@@ -5295,8 +5300,8 @@ class RoleSelectComponent {
|
|
|
5295
5300
|
phoneNumber: form.phoneNumber,
|
|
5296
5301
|
profileVisibility: true,
|
|
5297
5302
|
notify: true,
|
|
5298
|
-
nationwide:
|
|
5299
|
-
number:
|
|
5303
|
+
nationwide: true,
|
|
5304
|
+
number: 'Resume1'
|
|
5300
5305
|
};
|
|
5301
5306
|
this.userDocumentService
|
|
5302
5307
|
.createUserDocument(apiPayload)
|
|
@@ -5538,13 +5543,13 @@ class RoleSelectComponent {
|
|
|
5538
5543
|
});
|
|
5539
5544
|
}
|
|
5540
5545
|
}
|
|
5541
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RoleSelectComponent, deps: [{ token: CredentialingStore }, { token: UserDocumentService }, { token:
|
|
5542
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: RoleSelectComponent, isStandalone: false, selector: "app-role-select", inputs: { roleData: "roleData", cloudfrontUrl: "cloudfrontUrl", providerId: "providerId", providerName: "providerName" }, outputs: { backToParent: "backToParent" }, ngImport: i0, template: "<div class=\"role-selection-container\">\r\n <h2>Basic Details</h2>\r\n <p class=\"note\">We need basic information and a headshot for your profile</p>\r\n <div class=\"profile-field\">\r\n <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n <div class=\"spinner-border\"></div>\r\n </div>\r\n <form *ngIf=\"isLoaded\" [formGroup]=\"userForm\" class=\"form pb-0\">\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2 mb-3\">First Name*</label>\r\n <input [ngClass]=\"{ 'is-invalid': u.firstName.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n type=\"text\" class=\"form-control\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n <div *ngIf=\" u.firstName.invalid &&\r\n (u.firstName.touched || u.firstName.dirty)\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n First Name is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2 mb-3\">Last Name*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\"\r\n [ngClass]=\"{\r\n 'is-invalid':\r\n u.lastName.invalid && (u.lastName.touched || u.lastName.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.lastName.invalid &&\r\n (u.lastName.touched || u.lastName.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.lastName.errors?.required\">\r\n Last Name is required\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Email*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.email.invalid && (u.email.touched || u.email.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.email.invalid &&\r\n (u.email.touched || u.email.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.email.errors?.required\">\r\n Email is required\r\n </div>\r\n <div class=\"ms-1\" *ngIf=\"u.email.errors?.email\">\r\n Please enter a valid email address\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Home Address 1*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\"\r\n ngx-google-places-autocomplete [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.address1.invalid && (u.address1.touched || u.address1.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.address1.invalid &&\r\n (u.address1.touched || u.address1.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n Home Address 1 is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">City*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.city.invalid && (u.city.touched || u.city.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.city.invalid &&\r\n (u.city.touched || u.city.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n City is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">State*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.state.invalid && (u.state.touched || u.state.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.state.invalid &&\r\n (u.state.touched || u.state.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n State is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n </div>\r\n <!-- <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n placeholder=\"Home Address 2\" />\r\n </div>\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.city.invalid && (u.city.touched || u.city.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.city.invalid &&\r\n (u.city.touched || u.city.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n City is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.state.invalid && (u.state.touched || u.state.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.state.invalid &&\r\n (u.state.touched || u.state.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n State is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div> -->\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Zip Code*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.zipcode.invalid && (u.zipcode.touched || u.zipcode.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.zipcode.invalid &&\r\n (u.zipcode.touched || u.zipcode.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.zipcode.errors?.required\">\r\n Zipcode is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Country*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n [ngClass]=\"{\r\n 'is-invalid':\r\n u.country.invalid && (u.country.touched || u.country.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.country.invalid &&\r\n (u.country.touched || u.country.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n Country is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Phone Number*</label>\r\n\r\n <input type=\"text\" class=\"form-control block shadow-none\" id=\"inputPhone\" name=\"inputPhone\"\r\n placeholder=\"Phone Number\" autocomplete=\"off\" formControlName=\"phoneNumber\" maxlength=\"14\"\r\n (input)=\"phoneMask($event)\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.phoneNumber.invalid &&\r\n (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.phoneNumber.invalid &&\r\n (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n Phone Number is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n <label class=\"note-label mb-2\">Years of experience*</label>\r\n\r\n <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n id=\"yearsOfExperince\"></ng-select>\r\n\r\n <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n YearsOfExperience is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group col-md-4 col-sm-12\r\n mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Job Title*</label>\r\n\r\n <ng-select class=\"w-100\" class=\"custom-ng-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n </ng-select>\r\n <div *ngIf=\" u.userJobTitle.invalid &&\r\n (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n Job title is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n <label class=\"note-label mb-2\">Profile image</label>\r\n\r\n <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\" class=\"d-none\" />\r\n <input [(ngModel)]=\"fileName\" readonly type=\"text\" class=\"form-control pe-5\"\r\n placeholder=\"Upload Profile Picture\" (click)=\"uploadFile.click()\" />\r\n <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Industry</label>\r\n\r\n <ng-select class=\"w-100 custom-ng-select\" formControlName=\"industries\" [items]=\"industries\" [multiple]=\"true\"\r\n [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\" [closeOnSelect]=\"false\"\r\n id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n\r\n <!-- Dropdown option -->\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <span class=\"form-check\">\r\n <span class=\"form-check-input-wrapper\">\r\n <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n </span>\r\n {{ item.industryName }}\r\n </span>\r\n </ng-template>\r\n\r\n <!-- Selected label -->\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n </span>\r\n </ng-template>\r\n <div *ngIf=\"u.industries.invalid &&\r\n (u.industries.touched || u.industries.dirty)\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.industries.errors.required\">\r\n Industry is required\r\n </div>\r\n </div>\r\n </ng-select>\r\n </div>\r\n <div class=\"form-group col-sm-12 col-md-4\">\r\n <div class=\"image-wrapper\">\r\n <!-- Spinner -->\r\n <div *ngIf=\"isImageLoading\" class=\"spinner\"></div>\r\n <!-- Image -->\r\n <div *ngIf=\"previewUrl\">\r\n <img [src]=\"previewUrl\" class=\"preview-image mt-2\" (load)=\"onImageLoad()\" />\r\n </div>\r\n\r\n </div>\r\n <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n <div>{{ userError }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Resume Submission</h2>\r\n <p class=\"note mb-2\">Submit your resume here</p>\r\n <div class=\"col-sm-12 col-md-8\">\r\n <div class=\"form-group mb-2 position-relative\">\r\n <input #fileInput type=\"file\" accept=\"/*\" (change)=\"selectFile($event)\" class=\"d-none\" />\r\n <input [(ngModel)]=\"resumeName\" readonly type=\"text\" class=\"form-control pe-5\"\r\n placeholder=\"Upload Resume Here\" (click)=\"fileInput.click()\" />\r\n\r\n <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon-resume\"\r\n (click)=\"fileInput.click()\" />\r\n <div *ngIf=\"isResumeRequired\" class=\"invalid-feedback d-block ms-1\">\r\n Upload your resume\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"col-sm-12 col-md-8\" style=\"padding-left: 15px;\">\r\n <div class=\"resume-wrapper\">\r\n <div *ngIf=\"isresumeLoading\" class=\"spinner-resume\"></div>\r\n\r\n <a *ngIf=\"list\" [href]=\"list.fileUrl\" class=\"mt-2\" target=\"_blank\">\r\n <span>{{ list.fileName }}</span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n <div>{{ userError }}</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n <div>\r\n {{userError}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<!-- \r\n<div class=\"producer-type-container\">\r\n <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Type of jobs</h2>\r\n <p class=\"notes\">What type of job are you interested in</p>\r\n <div class=\"job-list\">\r\n <div class=\"job-item\" *ngFor=\"let job of jobTypes\" [class.selected]=\"isSelected(job)\" (click)=\"toggleJob(job)\">\r\n <span class=\"plus\">+</span> {{ job.text }}\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"onBackClick()\">Back</button>\r\n <div class=\"right-actions\">\r\n\r\n <button type=\"button\" class=\"primary\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" (click)=\"saveFinal()\">\r\n Continue\r\n </button>\r\n </div>\r\n</div> -->\r\n\r\n\r\n<div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"onBackClick()\">Back</button>\r\n <div class=\"right-actions\">\r\n\r\n <button type=\"button\" class=\"primary\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" (click)=\"saveFinal()\">\r\n Continue\r\n </button>\r\n </div>\r\n</div>", styles: [".preview-image{width:250px;height:100px;object-fit:contain;margin-top:5px;border-radius:5px}.upload-icon-resume{position:absolute;right:25px;top:17px;width:18px;height:18px;cursor:pointer}.upload-icon{position:absolute;right:25px;top:45px;width:18px;height:18px;cursor:pointer}::ng-deep .ng-select .ng-select-container{width:101%;border-radius:7px}.form-control{font-size:14px;color:#6b7280}.role-selection-container{max-width:950px;margin:0 auto;min-height:300px;padding:2rem}.role-selection-container h2{margin-bottom:.5rem;font-size:1.5rem;font-weight:600}.role-selection-container .note{font-size:.875rem;color:#6b7280}.role-selection-container .note-label{font-size:.875rem;color:#6b7280;padding-left:5px}.role-selection-container .dropdown-wrapper{display:flex;gap:.5rem;margin-bottom:1rem}.role-selection-container .dropdown-wrapper select{flex:1;padding:.5rem;border:1px solid #d1d5db;border-radius:.375rem}.role-selection-container .dropdown-wrapper .add-btn{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border:none;border-radius:.375rem;cursor:pointer}.role-selection-container .dropdown-wrapper .add-btn:disabled{background-color:#d1d5db;cursor:not-allowed}.role-selection-container .selected-roles{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.role-selection-container .selected-roles .role-card{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-radius:.375rem;background-color:#fef3c7;color:#92400e}.role-selection-container .selected-roles .role-card .remove-btn{background:none;border:none;font-size:1.2rem;font-weight:700;cursor:pointer;color:#b91c1c}.role-selection-container .navigation-buttons{display:flex;justify-content:flex-end;gap:1rem;margin-top:70px;margin-bottom:50px}.role-selection-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.image-wrapper{position:relative;width:150px;height:150px}.resume-wrapper{position:relative;width:550px;height:1px}.spinner{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:163%;margin-top:-2px;margin-left:-7px;animation:spin 1s linear infinite}.spinner-resume{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:99%;margin-top:-51px;margin-left:-20px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.profile-field{margin-top:-10px}.profile-field input{line-height:30px}.producer-type-container{max-width:1000px;margin:0 auto;min-height:300px}.producer-type-container h2{font-size:1.5rem;font-weight:600;margin-bottom:.5rem}.producer-type-container p{font-size:.875rem;color:#6b7280;margin-bottom:1.5rem}.producer-type-container .job-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem}.producer-type-container .job-list .job-item{padding:.75rem 1rem;font-size:14px;border:1px solid #d1d5db;border-radius:.375rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s}.producer-type-container .job-list .job-item.selected{border-color:#4077ad;background-color:#eff6ff}.producer-type-container .job-list .job-item .plus{font-weight:700}.producer-type-container .navigation-buttons{display:flex;justify-content:flex-end;gap:.5rem;margin:50px 0}.producer-type-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer}.producer-type-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer}.producer-type-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.actions{display:flex;justify-content:space-between;margin:50px 88px 27px 174px}.right-actions{display:flex;gap:16px}button{height:44px;min-width:120px;border:none;font-size:14px;cursor:pointer;border-radius:5px}button.primary{background-color:#4077ad;color:#fff;border-radius:5px}button.secondary{background-color:#d5d6da;color:#525862;border-radius:5px}button:disabled{background-color:#9ca3af;cursor:not-allowed}::ng-deep .custom-ng-select.ng-select-multiple .ng-select-container{min-height:45px!important;height:auto!important;display:flex;align-items:center;overflow:visible!important}::ng-deep .custom-ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap!important;overflow:visible!important;padding-top:2px;padding-bottom:2px}::ng-deep .custom-ng-select.ng-select-multiple .ng-value{margin-bottom:4px}::ng-deep .custom-ng-select.ng-select-multiple .ng-arrow-wrapper{display:flex;align-items:center;height:100%}:host ::ng-deep .custom-ng-select .ng-select-container{padding:0!important;font-size:13px!important}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-top:3px;font-size:14px;color:#6b7280}::ng-deep .ng-select .ng-select-container{padding-top:3px;font-size:14px;color:#6b7280}@media screen and (max-width: 767px){.actions{margin:10px 34px}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i10.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i10.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "directive", type: GooglePlaceDirective, selector: "[ngx-google-places-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }] });
|
|
5546
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RoleSelectComponent, deps: [{ token: CredentialingStore }, { token: UserDocumentService }, { token: i3$1.Router }, { token: IndustryService }, { token: UserDetailService }, { token: FileService }, { token: ProvidersService }, { token: i6.TokenService }, { token: i3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
5547
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: RoleSelectComponent, isStandalone: false, selector: "app-role-select", inputs: { roleData: "roleData", cloudfrontUrl: "cloudfrontUrl", providerId: "providerId", providerName: "providerName" }, outputs: { backToParent: "backToParent" }, ngImport: i0, template: "<div class=\"role-selection-container\">\r\n <h2>Basic Details</h2>\r\n <p class=\"note\">We need basic information and a headshot for your profile</p>\r\n <div class=\"profile-field\">\r\n <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n <div class=\"spinner-border\"></div>\r\n </div>\r\n <form *ngIf=\"isLoaded\" [formGroup]=\"userForm\" class=\"form pb-0\">\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2 mb-3\">First Name*</label>\r\n <input [ngClass]=\"{ 'is-invalid': u.firstName.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n type=\"text\" class=\"form-control\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n <div *ngIf=\" u.firstName.invalid &&\r\n (u.firstName.touched || u.firstName.dirty)\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n First Name is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2 mb-3\">Last Name*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\"\r\n [ngClass]=\"{\r\n 'is-invalid':\r\n u.lastName.invalid && (u.lastName.touched || u.lastName.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.lastName.invalid &&\r\n (u.lastName.touched || u.lastName.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.lastName.errors?.required\">\r\n Last Name is required\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Email*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.email.invalid && (u.email.touched || u.email.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.email.invalid &&\r\n (u.email.touched || u.email.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.email.errors?.required\">\r\n Email is required\r\n </div>\r\n <div class=\"ms-1\" *ngIf=\"u.email.errors?.email\">\r\n Please enter a valid email address\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Home Address 1*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\"\r\n ngx-google-places-autocomplete [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.address1.invalid && (u.address1.touched || u.address1.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.address1.invalid &&\r\n (u.address1.touched || u.address1.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n Home Address 1 is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">City*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.city.invalid && (u.city.touched || u.city.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.city.invalid &&\r\n (u.city.touched || u.city.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n City is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">State*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.state.invalid && (u.state.touched || u.state.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.state.invalid &&\r\n (u.state.touched || u.state.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n State is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n </div>\r\n <!-- <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n placeholder=\"Home Address 2\" />\r\n </div>\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.city.invalid && (u.city.touched || u.city.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.city.invalid &&\r\n (u.city.touched || u.city.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n City is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.state.invalid && (u.state.touched || u.state.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.state.invalid &&\r\n (u.state.touched || u.state.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n State is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div> -->\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Zip Code*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.zipcode.invalid && (u.zipcode.touched || u.zipcode.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.zipcode.invalid &&\r\n (u.zipcode.touched || u.zipcode.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.zipcode.errors?.required\">\r\n Zipcode is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Country*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n [ngClass]=\"{\r\n 'is-invalid':\r\n u.country.invalid && (u.country.touched || u.country.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.country.invalid &&\r\n (u.country.touched || u.country.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n Country is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Phone Number*</label>\r\n\r\n <input type=\"text\" class=\"form-control block shadow-none\" id=\"inputPhone\" name=\"inputPhone\"\r\n placeholder=\"Phone Number\" autocomplete=\"off\" formControlName=\"phoneNumber\" maxlength=\"14\"\r\n (input)=\"phoneMask($event)\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.phoneNumber.invalid &&\r\n (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.phoneNumber.invalid &&\r\n (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n Phone Number is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n <label class=\"note-label mb-2\">Years of experience*</label>\r\n\r\n <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n id=\"yearsOfExperince\"></ng-select>\r\n\r\n <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n Years Of Experience is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group col-md-4 col-sm-12\r\n mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Job Title*</label>\r\n\r\n <ng-select class=\"w-100\" class=\"custom-ng-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n </ng-select>\r\n <div *ngIf=\" u.userJobTitle.invalid &&\r\n (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n Job title is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n <label class=\"note-label mb-2\">Profile image</label>\r\n\r\n <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\" class=\"d-none\" />\r\n <input [(ngModel)]=\"fileName\" readonly type=\"text\" class=\"form-control pe-5\"\r\n placeholder=\"Upload Profile Picture\" (click)=\"uploadFile.click()\" />\r\n <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n <div class=\"res d-flex justify-content-between\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Industry</label>\r\n\r\n <ng-select class=\"w-100 custom-ng-select\" formControlName=\"industries\" [items]=\"industries\"\r\n [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\"\r\n [closeOnSelect]=\"false\" id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n\r\n <!-- Dropdown option -->\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <span class=\"form-check\">\r\n <span class=\"form-check-input-wrapper\">\r\n <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n </span>\r\n {{ item.industryName }}\r\n </span>\r\n </ng-template>\r\n\r\n <!-- Selected label -->\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n </span>\r\n </ng-template>\r\n <div *ngIf=\"u.industries.invalid &&\r\n (u.industries.touched || u.industries.dirty)\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.industries.errors.required\">\r\n Industry is required\r\n </div>\r\n </div>\r\n </ng-select>\r\n </div>\r\n <div class=\"form-group col-sm-12 col-md-4\">\r\n <div class=\"image-wrapper\">\r\n <!-- Spinner -->\r\n <div *ngIf=\"isImageLoading\" class=\"spinner\"></div>\r\n <!-- Image -->\r\n <div *ngIf=\"previewUrl\">\r\n <img [src]=\"previewUrl\" class=\"preview-image mt-2\" (load)=\"onImageLoad()\" />\r\n </div>\r\n\r\n </div>\r\n <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n <div>{{ userError }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Resume Submission</h2>\r\n <p class=\"note mb-2\">Submit your resume here</p>\r\n <div class=\"col-sm-12 col-md-8\">\r\n <div class=\"form-group mb-2 position-relative\">\r\n <input #fileInput type=\"file\" accept=\"/*\" (change)=\"selectFile($event)\" class=\"d-none\" />\r\n <input [(ngModel)]=\"resumeName\" readonly type=\"text\" class=\"form-control pe-5\"\r\n placeholder=\"Upload Resume Here\" (click)=\"fileInput.click()\" />\r\n\r\n <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon-resume\"\r\n (click)=\"fileInput.click()\" />\r\n <div *ngIf=\"isResumeRequired\" class=\"invalid-feedback d-block ms-1\">\r\n Upload your resume\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"col-sm-12 col-md-8\" style=\"padding-left: 15px;\">\r\n <div class=\"resume-wrapper\">\r\n <div *ngIf=\"isresumeLoading\" class=\"spinner-resume\"></div>\r\n\r\n <a *ngIf=\"list\" [href]=\"list.fileUrl\" class=\"mt-2\" target=\"_blank\">\r\n <span>{{ list.fileName }}</span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n <div>{{ userError }}</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n <div>\r\n {{userError}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<!-- \r\n<div class=\"producer-type-container\">\r\n <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Type of jobs</h2>\r\n <p class=\"notes\">What type of job are you interested in</p>\r\n <div class=\"job-list\">\r\n <div class=\"job-item\" *ngFor=\"let job of jobTypes\" [class.selected]=\"isSelected(job)\" (click)=\"toggleJob(job)\">\r\n <span class=\"plus\">+</span> {{ job.text }}\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"onBackClick()\">Back</button>\r\n <div class=\"right-actions\">\r\n\r\n <button type=\"button\" class=\"primary\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" (click)=\"saveFinal()\">\r\n Continue\r\n </button>\r\n </div>\r\n</div> -->\r\n\r\n\r\n<div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"onBackClick()\">Back</button>\r\n <div class=\"right-actions\">\r\n\r\n <button type=\"button\" class=\"primary\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" (click)=\"saveFinal()\">\r\n Continue\r\n </button>\r\n </div>\r\n</div>", styles: [".preview-image{width:250px;height:100px;object-fit:contain;margin-top:5px;border-radius:5px}.upload-icon-resume{position:absolute;right:25px;top:17px;width:18px;height:18px;cursor:pointer}.upload-icon{position:absolute;right:25px;top:45px;width:18px;height:18px;cursor:pointer}::ng-deep .ng-select .ng-select-container{width:101%;border-radius:7px}.form-control{font-size:14px;color:#6b7280}.role-selection-container{max-width:950px;margin:0 auto;min-height:300px;padding:2rem}.role-selection-container h2{margin-bottom:.5rem;font-size:1.5rem;font-weight:600}.role-selection-container .note{font-size:.875rem;color:#6b7280}.role-selection-container .note-label{font-size:.875rem;color:#6b7280;padding-left:5px}.role-selection-container .dropdown-wrapper{display:flex;gap:.5rem;margin-bottom:1rem}.role-selection-container .dropdown-wrapper select{flex:1;padding:.5rem;border:1px solid #d1d5db;border-radius:.375rem}.role-selection-container .dropdown-wrapper .add-btn{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border:none;border-radius:.375rem;cursor:pointer}.role-selection-container .dropdown-wrapper .add-btn:disabled{background-color:#d1d5db;cursor:not-allowed}.role-selection-container .selected-roles{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.role-selection-container .selected-roles .role-card{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-radius:.375rem;background-color:#fef3c7;color:#92400e}.role-selection-container .selected-roles .role-card .remove-btn{background:none;border:none;font-size:1.2rem;font-weight:700;cursor:pointer;color:#b91c1c}.role-selection-container .navigation-buttons{display:flex;justify-content:flex-end;gap:1rem;margin-top:70px;margin-bottom:50px}.role-selection-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.image-wrapper{position:relative;width:150px;height:150px}.resume-wrapper{position:relative;width:550px;height:1px}.spinner{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:163%;margin-top:-2px;margin-left:-7px;animation:spin 1s linear infinite}.spinner-resume{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:99%;margin-top:-51px;margin-left:-20px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.profile-field{margin-top:-10px}.profile-field input{line-height:30px}.producer-type-container{max-width:1000px;margin:0 auto;min-height:300px}.producer-type-container h2{font-size:1.5rem;font-weight:600;margin-bottom:.5rem}.producer-type-container p{font-size:.875rem;color:#6b7280;margin-bottom:1.5rem}.producer-type-container .job-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem}.producer-type-container .job-list .job-item{padding:.75rem 1rem;font-size:14px;border:1px solid #d1d5db;border-radius:.375rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s}.producer-type-container .job-list .job-item.selected{border-color:#4077ad;background-color:#eff6ff}.producer-type-container .job-list .job-item .plus{font-weight:700}.producer-type-container .navigation-buttons{display:flex;justify-content:flex-end;gap:.5rem;margin:50px 0}.producer-type-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer}.producer-type-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer}.producer-type-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.actions{display:flex;justify-content:space-between;margin:50px 88px 27px 174px}.right-actions{display:flex;gap:16px}button{height:44px;min-width:120px;border:none;font-size:14px;cursor:pointer;border-radius:5px}button.primary{background-color:#4077ad;color:#fff;border-radius:5px}button.secondary{background-color:#d5d6da;color:#525862;border-radius:5px}button:disabled{background-color:#9ca3af;cursor:not-allowed}::ng-deep .custom-ng-select.ng-select-multiple .ng-select-container{min-height:45px!important;height:auto!important;display:flex;align-items:center;overflow:visible!important}::ng-deep .custom-ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap!important;overflow:visible!important;padding-top:2px;padding-bottom:2px}::ng-deep .custom-ng-select.ng-select-multiple .ng-value{margin-bottom:4px}::ng-deep .custom-ng-select.ng-select-multiple .ng-arrow-wrapper{display:flex;align-items:center;height:100%}:host ::ng-deep .custom-ng-select .ng-select-container{padding:0!important;font-size:13px!important}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-top:3px;font-size:14px;color:#6b7280}::ng-deep .ng-select .ng-select-container{padding-top:3px;font-size:14px;color:#6b7280}@media screen and (max-width: 767px){.actions{margin:10px 34px}.res{flex-direction:column-reverse}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i10.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i10.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "directive", type: GooglePlaceDirective, selector: "[ngx-google-places-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }] });
|
|
5543
5548
|
}
|
|
5544
5549
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RoleSelectComponent, decorators: [{
|
|
5545
5550
|
type: Component,
|
|
5546
|
-
args: [{ selector: 'app-role-select', standalone: false, template: "<div class=\"role-selection-container\">\r\n <h2>Basic Details</h2>\r\n <p class=\"note\">We need basic information and a headshot for your profile</p>\r\n <div class=\"profile-field\">\r\n <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n <div class=\"spinner-border\"></div>\r\n </div>\r\n <form *ngIf=\"isLoaded\" [formGroup]=\"userForm\" class=\"form pb-0\">\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2 mb-3\">First Name*</label>\r\n <input [ngClass]=\"{ 'is-invalid': u.firstName.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n type=\"text\" class=\"form-control\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n <div *ngIf=\" u.firstName.invalid &&\r\n (u.firstName.touched || u.firstName.dirty)\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n First Name is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2 mb-3\">Last Name*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\"\r\n [ngClass]=\"{\r\n 'is-invalid':\r\n u.lastName.invalid && (u.lastName.touched || u.lastName.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.lastName.invalid &&\r\n (u.lastName.touched || u.lastName.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.lastName.errors?.required\">\r\n Last Name is required\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Email*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.email.invalid && (u.email.touched || u.email.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.email.invalid &&\r\n (u.email.touched || u.email.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.email.errors?.required\">\r\n Email is required\r\n </div>\r\n <div class=\"ms-1\" *ngIf=\"u.email.errors?.email\">\r\n Please enter a valid email address\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Home Address 1*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\"\r\n ngx-google-places-autocomplete [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.address1.invalid && (u.address1.touched || u.address1.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.address1.invalid &&\r\n (u.address1.touched || u.address1.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n Home Address 1 is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">City*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.city.invalid && (u.city.touched || u.city.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.city.invalid &&\r\n (u.city.touched || u.city.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n City is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">State*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.state.invalid && (u.state.touched || u.state.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.state.invalid &&\r\n (u.state.touched || u.state.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n State is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n </div>\r\n <!-- <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n placeholder=\"Home Address 2\" />\r\n </div>\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.city.invalid && (u.city.touched || u.city.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.city.invalid &&\r\n (u.city.touched || u.city.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n City is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.state.invalid && (u.state.touched || u.state.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.state.invalid &&\r\n (u.state.touched || u.state.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n State is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div> -->\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Zip Code*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.zipcode.invalid && (u.zipcode.touched || u.zipcode.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.zipcode.invalid &&\r\n (u.zipcode.touched || u.zipcode.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.zipcode.errors?.required\">\r\n Zipcode is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Country*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n [ngClass]=\"{\r\n 'is-invalid':\r\n u.country.invalid && (u.country.touched || u.country.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.country.invalid &&\r\n (u.country.touched || u.country.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n Country is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Phone Number*</label>\r\n\r\n <input type=\"text\" class=\"form-control block shadow-none\" id=\"inputPhone\" name=\"inputPhone\"\r\n placeholder=\"Phone Number\" autocomplete=\"off\" formControlName=\"phoneNumber\" maxlength=\"14\"\r\n (input)=\"phoneMask($event)\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.phoneNumber.invalid &&\r\n (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.phoneNumber.invalid &&\r\n (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n Phone Number is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n <label class=\"note-label mb-2\">Years of experience*</label>\r\n\r\n <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n id=\"yearsOfExperince\"></ng-select>\r\n\r\n <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n YearsOfExperience is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group col-md-4 col-sm-12\r\n mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Job Title*</label>\r\n\r\n <ng-select class=\"w-100\" class=\"custom-ng-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n </ng-select>\r\n <div *ngIf=\" u.userJobTitle.invalid &&\r\n (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n Job title is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n <label class=\"note-label mb-2\">Profile image</label>\r\n\r\n <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\" class=\"d-none\" />\r\n <input [(ngModel)]=\"fileName\" readonly type=\"text\" class=\"form-control pe-5\"\r\n placeholder=\"Upload Profile Picture\" (click)=\"uploadFile.click()\" />\r\n <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Industry</label>\r\n\r\n <ng-select class=\"w-100 custom-ng-select\" formControlName=\"industries\" [items]=\"industries\" [multiple]=\"true\"\r\n [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\" [closeOnSelect]=\"false\"\r\n id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n\r\n <!-- Dropdown option -->\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <span class=\"form-check\">\r\n <span class=\"form-check-input-wrapper\">\r\n <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n </span>\r\n {{ item.industryName }}\r\n </span>\r\n </ng-template>\r\n\r\n <!-- Selected label -->\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n </span>\r\n </ng-template>\r\n <div *ngIf=\"u.industries.invalid &&\r\n (u.industries.touched || u.industries.dirty)\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.industries.errors.required\">\r\n Industry is required\r\n </div>\r\n </div>\r\n </ng-select>\r\n </div>\r\n <div class=\"form-group col-sm-12 col-md-4\">\r\n <div class=\"image-wrapper\">\r\n <!-- Spinner -->\r\n <div *ngIf=\"isImageLoading\" class=\"spinner\"></div>\r\n <!-- Image -->\r\n <div *ngIf=\"previewUrl\">\r\n <img [src]=\"previewUrl\" class=\"preview-image mt-2\" (load)=\"onImageLoad()\" />\r\n </div>\r\n\r\n </div>\r\n <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n <div>{{ userError }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Resume Submission</h2>\r\n <p class=\"note mb-2\">Submit your resume here</p>\r\n <div class=\"col-sm-12 col-md-8\">\r\n <div class=\"form-group mb-2 position-relative\">\r\n <input #fileInput type=\"file\" accept=\"/*\" (change)=\"selectFile($event)\" class=\"d-none\" />\r\n <input [(ngModel)]=\"resumeName\" readonly type=\"text\" class=\"form-control pe-5\"\r\n placeholder=\"Upload Resume Here\" (click)=\"fileInput.click()\" />\r\n\r\n <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon-resume\"\r\n (click)=\"fileInput.click()\" />\r\n <div *ngIf=\"isResumeRequired\" class=\"invalid-feedback d-block ms-1\">\r\n Upload your resume\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"col-sm-12 col-md-8\" style=\"padding-left: 15px;\">\r\n <div class=\"resume-wrapper\">\r\n <div *ngIf=\"isresumeLoading\" class=\"spinner-resume\"></div>\r\n\r\n <a *ngIf=\"list\" [href]=\"list.fileUrl\" class=\"mt-2\" target=\"_blank\">\r\n <span>{{ list.fileName }}</span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n <div>{{ userError }}</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n <div>\r\n {{userError}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<!-- \r\n<div class=\"producer-type-container\">\r\n <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Type of jobs</h2>\r\n <p class=\"notes\">What type of job are you interested in</p>\r\n <div class=\"job-list\">\r\n <div class=\"job-item\" *ngFor=\"let job of jobTypes\" [class.selected]=\"isSelected(job)\" (click)=\"toggleJob(job)\">\r\n <span class=\"plus\">+</span> {{ job.text }}\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"onBackClick()\">Back</button>\r\n <div class=\"right-actions\">\r\n\r\n <button type=\"button\" class=\"primary\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" (click)=\"saveFinal()\">\r\n Continue\r\n </button>\r\n </div>\r\n</div> -->\r\n\r\n\r\n<div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"onBackClick()\">Back</button>\r\n <div class=\"right-actions\">\r\n\r\n <button type=\"button\" class=\"primary\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" (click)=\"saveFinal()\">\r\n Continue\r\n </button>\r\n </div>\r\n</div>", styles: [".preview-image{width:250px;height:100px;object-fit:contain;margin-top:5px;border-radius:5px}.upload-icon-resume{position:absolute;right:25px;top:17px;width:18px;height:18px;cursor:pointer}.upload-icon{position:absolute;right:25px;top:45px;width:18px;height:18px;cursor:pointer}::ng-deep .ng-select .ng-select-container{width:101%;border-radius:7px}.form-control{font-size:14px;color:#6b7280}.role-selection-container{max-width:950px;margin:0 auto;min-height:300px;padding:2rem}.role-selection-container h2{margin-bottom:.5rem;font-size:1.5rem;font-weight:600}.role-selection-container .note{font-size:.875rem;color:#6b7280}.role-selection-container .note-label{font-size:.875rem;color:#6b7280;padding-left:5px}.role-selection-container .dropdown-wrapper{display:flex;gap:.5rem;margin-bottom:1rem}.role-selection-container .dropdown-wrapper select{flex:1;padding:.5rem;border:1px solid #d1d5db;border-radius:.375rem}.role-selection-container .dropdown-wrapper .add-btn{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border:none;border-radius:.375rem;cursor:pointer}.role-selection-container .dropdown-wrapper .add-btn:disabled{background-color:#d1d5db;cursor:not-allowed}.role-selection-container .selected-roles{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.role-selection-container .selected-roles .role-card{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-radius:.375rem;background-color:#fef3c7;color:#92400e}.role-selection-container .selected-roles .role-card .remove-btn{background:none;border:none;font-size:1.2rem;font-weight:700;cursor:pointer;color:#b91c1c}.role-selection-container .navigation-buttons{display:flex;justify-content:flex-end;gap:1rem;margin-top:70px;margin-bottom:50px}.role-selection-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.image-wrapper{position:relative;width:150px;height:150px}.resume-wrapper{position:relative;width:550px;height:1px}.spinner{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:163%;margin-top:-2px;margin-left:-7px;animation:spin 1s linear infinite}.spinner-resume{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:99%;margin-top:-51px;margin-left:-20px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.profile-field{margin-top:-10px}.profile-field input{line-height:30px}.producer-type-container{max-width:1000px;margin:0 auto;min-height:300px}.producer-type-container h2{font-size:1.5rem;font-weight:600;margin-bottom:.5rem}.producer-type-container p{font-size:.875rem;color:#6b7280;margin-bottom:1.5rem}.producer-type-container .job-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem}.producer-type-container .job-list .job-item{padding:.75rem 1rem;font-size:14px;border:1px solid #d1d5db;border-radius:.375rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s}.producer-type-container .job-list .job-item.selected{border-color:#4077ad;background-color:#eff6ff}.producer-type-container .job-list .job-item .plus{font-weight:700}.producer-type-container .navigation-buttons{display:flex;justify-content:flex-end;gap:.5rem;margin:50px 0}.producer-type-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer}.producer-type-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer}.producer-type-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.actions{display:flex;justify-content:space-between;margin:50px 88px 27px 174px}.right-actions{display:flex;gap:16px}button{height:44px;min-width:120px;border:none;font-size:14px;cursor:pointer;border-radius:5px}button.primary{background-color:#4077ad;color:#fff;border-radius:5px}button.secondary{background-color:#d5d6da;color:#525862;border-radius:5px}button:disabled{background-color:#9ca3af;cursor:not-allowed}::ng-deep .custom-ng-select.ng-select-multiple .ng-select-container{min-height:45px!important;height:auto!important;display:flex;align-items:center;overflow:visible!important}::ng-deep .custom-ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap!important;overflow:visible!important;padding-top:2px;padding-bottom:2px}::ng-deep .custom-ng-select.ng-select-multiple .ng-value{margin-bottom:4px}::ng-deep .custom-ng-select.ng-select-multiple .ng-arrow-wrapper{display:flex;align-items:center;height:100%}:host ::ng-deep .custom-ng-select .ng-select-container{padding:0!important;font-size:13px!important}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-top:3px;font-size:14px;color:#6b7280}::ng-deep .ng-select .ng-select-container{padding-top:3px;font-size:14px;color:#6b7280}@media screen and (max-width: 767px){.actions{margin:10px 34px}}\n"] }]
|
|
5547
|
-
}], ctorParameters: () => [{ type: CredentialingStore }, { type: UserDocumentService }, { type:
|
|
5551
|
+
args: [{ selector: 'app-role-select', standalone: false, template: "<div class=\"role-selection-container\">\r\n <h2>Basic Details</h2>\r\n <p class=\"note\">We need basic information and a headshot for your profile</p>\r\n <div class=\"profile-field\">\r\n <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n <div class=\"spinner-border\"></div>\r\n </div>\r\n <form *ngIf=\"isLoaded\" [formGroup]=\"userForm\" class=\"form pb-0\">\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2 mb-3\">First Name*</label>\r\n <input [ngClass]=\"{ 'is-invalid': u.firstName.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n type=\"text\" class=\"form-control\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n <div *ngIf=\" u.firstName.invalid &&\r\n (u.firstName.touched || u.firstName.dirty)\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n First Name is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2 mb-3\">Last Name*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\"\r\n [ngClass]=\"{\r\n 'is-invalid':\r\n u.lastName.invalid && (u.lastName.touched || u.lastName.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.lastName.invalid &&\r\n (u.lastName.touched || u.lastName.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.lastName.errors?.required\">\r\n Last Name is required\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Email*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.email.invalid && (u.email.touched || u.email.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.email.invalid &&\r\n (u.email.touched || u.email.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.email.errors?.required\">\r\n Email is required\r\n </div>\r\n <div class=\"ms-1\" *ngIf=\"u.email.errors?.email\">\r\n Please enter a valid email address\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Home Address 1*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\"\r\n ngx-google-places-autocomplete [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.address1.invalid && (u.address1.touched || u.address1.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.address1.invalid &&\r\n (u.address1.touched || u.address1.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n Home Address 1 is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">City*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.city.invalid && (u.city.touched || u.city.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.city.invalid &&\r\n (u.city.touched || u.city.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n City is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">State*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.state.invalid && (u.state.touched || u.state.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.state.invalid &&\r\n (u.state.touched || u.state.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n State is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n </div>\r\n <!-- <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n placeholder=\"Home Address 2\" />\r\n </div>\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.city.invalid && (u.city.touched || u.city.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.city.invalid &&\r\n (u.city.touched || u.city.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n City is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.state.invalid && (u.state.touched || u.state.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.state.invalid &&\r\n (u.state.touched || u.state.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n State is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div> -->\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Zip Code*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.zipcode.invalid && (u.zipcode.touched || u.zipcode.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.zipcode.invalid &&\r\n (u.zipcode.touched || u.zipcode.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.zipcode.errors?.required\">\r\n Zipcode is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Country*</label>\r\n\r\n <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n [ngClass]=\"{\r\n 'is-invalid':\r\n u.country.invalid && (u.country.touched || u.country.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.country.invalid &&\r\n (u.country.touched || u.country.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n Country is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Phone Number*</label>\r\n\r\n <input type=\"text\" class=\"form-control block shadow-none\" id=\"inputPhone\" name=\"inputPhone\"\r\n placeholder=\"Phone Number\" autocomplete=\"off\" formControlName=\"phoneNumber\" maxlength=\"14\"\r\n (input)=\"phoneMask($event)\" [ngClass]=\"{\r\n 'is-invalid':\r\n u.phoneNumber.invalid &&\r\n (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n }\" />\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"\r\n u.phoneNumber.invalid &&\r\n (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n \">\r\n <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n Phone Number is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n <label class=\"note-label mb-2\">Years of experience*</label>\r\n\r\n <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n id=\"yearsOfExperince\"></ng-select>\r\n\r\n <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n Years Of Experience is required\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group col-md-4 col-sm-12\r\n mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Job Title*</label>\r\n\r\n <ng-select class=\"w-100\" class=\"custom-ng-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n </ng-select>\r\n <div *ngIf=\" u.userJobTitle.invalid &&\r\n (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n Job title is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n <label class=\"note-label mb-2\">Profile image</label>\r\n\r\n <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\" class=\"d-none\" />\r\n <input [(ngModel)]=\"fileName\" readonly type=\"text\" class=\"form-control pe-5\"\r\n placeholder=\"Upload Profile Picture\" (click)=\"uploadFile.click()\" />\r\n <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n <div class=\"res d-flex justify-content-between\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <label class=\"note-label mb-2\">Industry</label>\r\n\r\n <ng-select class=\"w-100 custom-ng-select\" formControlName=\"industries\" [items]=\"industries\"\r\n [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\"\r\n [closeOnSelect]=\"false\" id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n\r\n <!-- Dropdown option -->\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <span class=\"form-check\">\r\n <span class=\"form-check-input-wrapper\">\r\n <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n </span>\r\n {{ item.industryName }}\r\n </span>\r\n </ng-template>\r\n\r\n <!-- Selected label -->\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n </span>\r\n </ng-template>\r\n <div *ngIf=\"u.industries.invalid &&\r\n (u.industries.touched || u.industries.dirty)\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.industries.errors.required\">\r\n Industry is required\r\n </div>\r\n </div>\r\n </ng-select>\r\n </div>\r\n <div class=\"form-group col-sm-12 col-md-4\">\r\n <div class=\"image-wrapper\">\r\n <!-- Spinner -->\r\n <div *ngIf=\"isImageLoading\" class=\"spinner\"></div>\r\n <!-- Image -->\r\n <div *ngIf=\"previewUrl\">\r\n <img [src]=\"previewUrl\" class=\"preview-image mt-2\" (load)=\"onImageLoad()\" />\r\n </div>\r\n\r\n </div>\r\n <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n <div>{{ userError }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Resume Submission</h2>\r\n <p class=\"note mb-2\">Submit your resume here</p>\r\n <div class=\"col-sm-12 col-md-8\">\r\n <div class=\"form-group mb-2 position-relative\">\r\n <input #fileInput type=\"file\" accept=\"/*\" (change)=\"selectFile($event)\" class=\"d-none\" />\r\n <input [(ngModel)]=\"resumeName\" readonly type=\"text\" class=\"form-control pe-5\"\r\n placeholder=\"Upload Resume Here\" (click)=\"fileInput.click()\" />\r\n\r\n <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon-resume\"\r\n (click)=\"fileInput.click()\" />\r\n <div *ngIf=\"isResumeRequired\" class=\"invalid-feedback d-block ms-1\">\r\n Upload your resume\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"col-sm-12 col-md-8\" style=\"padding-left: 15px;\">\r\n <div class=\"resume-wrapper\">\r\n <div *ngIf=\"isresumeLoading\" class=\"spinner-resume\"></div>\r\n\r\n <a *ngIf=\"list\" [href]=\"list.fileUrl\" class=\"mt-2\" target=\"_blank\">\r\n <span>{{ list.fileName }}</span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n <div>{{ userError }}</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n <div>\r\n {{userError}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<!-- \r\n<div class=\"producer-type-container\">\r\n <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Type of jobs</h2>\r\n <p class=\"notes\">What type of job are you interested in</p>\r\n <div class=\"job-list\">\r\n <div class=\"job-item\" *ngFor=\"let job of jobTypes\" [class.selected]=\"isSelected(job)\" (click)=\"toggleJob(job)\">\r\n <span class=\"plus\">+</span> {{ job.text }}\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"onBackClick()\">Back</button>\r\n <div class=\"right-actions\">\r\n\r\n <button type=\"button\" class=\"primary\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" (click)=\"saveFinal()\">\r\n Continue\r\n </button>\r\n </div>\r\n</div> -->\r\n\r\n\r\n<div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"onBackClick()\">Back</button>\r\n <div class=\"right-actions\">\r\n\r\n <button type=\"button\" class=\"primary\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" (click)=\"saveFinal()\">\r\n Continue\r\n </button>\r\n </div>\r\n</div>", styles: [".preview-image{width:250px;height:100px;object-fit:contain;margin-top:5px;border-radius:5px}.upload-icon-resume{position:absolute;right:25px;top:17px;width:18px;height:18px;cursor:pointer}.upload-icon{position:absolute;right:25px;top:45px;width:18px;height:18px;cursor:pointer}::ng-deep .ng-select .ng-select-container{width:101%;border-radius:7px}.form-control{font-size:14px;color:#6b7280}.role-selection-container{max-width:950px;margin:0 auto;min-height:300px;padding:2rem}.role-selection-container h2{margin-bottom:.5rem;font-size:1.5rem;font-weight:600}.role-selection-container .note{font-size:.875rem;color:#6b7280}.role-selection-container .note-label{font-size:.875rem;color:#6b7280;padding-left:5px}.role-selection-container .dropdown-wrapper{display:flex;gap:.5rem;margin-bottom:1rem}.role-selection-container .dropdown-wrapper select{flex:1;padding:.5rem;border:1px solid #d1d5db;border-radius:.375rem}.role-selection-container .dropdown-wrapper .add-btn{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border:none;border-radius:.375rem;cursor:pointer}.role-selection-container .dropdown-wrapper .add-btn:disabled{background-color:#d1d5db;cursor:not-allowed}.role-selection-container .selected-roles{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.role-selection-container .selected-roles .role-card{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-radius:.375rem;background-color:#fef3c7;color:#92400e}.role-selection-container .selected-roles .role-card .remove-btn{background:none;border:none;font-size:1.2rem;font-weight:700;cursor:pointer;color:#b91c1c}.role-selection-container .navigation-buttons{display:flex;justify-content:flex-end;gap:1rem;margin-top:70px;margin-bottom:50px}.role-selection-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.image-wrapper{position:relative;width:150px;height:150px}.resume-wrapper{position:relative;width:550px;height:1px}.spinner{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:163%;margin-top:-2px;margin-left:-7px;animation:spin 1s linear infinite}.spinner-resume{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:99%;margin-top:-51px;margin-left:-20px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.profile-field{margin-top:-10px}.profile-field input{line-height:30px}.producer-type-container{max-width:1000px;margin:0 auto;min-height:300px}.producer-type-container h2{font-size:1.5rem;font-weight:600;margin-bottom:.5rem}.producer-type-container p{font-size:.875rem;color:#6b7280;margin-bottom:1.5rem}.producer-type-container .job-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem}.producer-type-container .job-list .job-item{padding:.75rem 1rem;font-size:14px;border:1px solid #d1d5db;border-radius:.375rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s}.producer-type-container .job-list .job-item.selected{border-color:#4077ad;background-color:#eff6ff}.producer-type-container .job-list .job-item .plus{font-weight:700}.producer-type-container .navigation-buttons{display:flex;justify-content:flex-end;gap:.5rem;margin:50px 0}.producer-type-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer}.producer-type-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer}.producer-type-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.actions{display:flex;justify-content:space-between;margin:50px 88px 27px 174px}.right-actions{display:flex;gap:16px}button{height:44px;min-width:120px;border:none;font-size:14px;cursor:pointer;border-radius:5px}button.primary{background-color:#4077ad;color:#fff;border-radius:5px}button.secondary{background-color:#d5d6da;color:#525862;border-radius:5px}button:disabled{background-color:#9ca3af;cursor:not-allowed}::ng-deep .custom-ng-select.ng-select-multiple .ng-select-container{min-height:45px!important;height:auto!important;display:flex;align-items:center;overflow:visible!important}::ng-deep .custom-ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap!important;overflow:visible!important;padding-top:2px;padding-bottom:2px}::ng-deep .custom-ng-select.ng-select-multiple .ng-value{margin-bottom:4px}::ng-deep .custom-ng-select.ng-select-multiple .ng-arrow-wrapper{display:flex;align-items:center;height:100%}:host ::ng-deep .custom-ng-select .ng-select-container{padding:0!important;font-size:13px!important}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-top:3px;font-size:14px;color:#6b7280}::ng-deep .ng-select .ng-select-container{padding-top:3px;font-size:14px;color:#6b7280}@media screen and (max-width: 767px){.actions{margin:10px 34px}.res{flex-direction:column-reverse}}\n"] }]
|
|
5552
|
+
}], ctorParameters: () => [{ type: CredentialingStore }, { type: UserDocumentService }, { type: i3$1.Router }, { type: IndustryService }, { type: UserDetailService }, { type: FileService }, { type: ProvidersService }, { type: i6.TokenService }, { type: i3.FormBuilder }], propDecorators: { backToParent: [{
|
|
5548
5553
|
type: Output
|
|
5549
5554
|
}], roleData: [{
|
|
5550
5555
|
type: Input
|
|
@@ -28130,11 +28135,11 @@ class Step2CoverageComponent {
|
|
|
28130
28135
|
}));
|
|
28131
28136
|
}
|
|
28132
28137
|
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 });
|
|
28133
|
-
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 <label style=\"padding-top: 2px;\">Select All</label>\r\n <input type=\"checkbox\" style=\"width: 16px;border: 1px solid #ddd;\"\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 font-weight-bold\"></label>\r\n <label class=\"position-absolute\" style=\"margin-left: 88px;\"\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 class=\"mt-2 mt-sm-2 pt-2 pointer\" [src]=\"coverage?.isShow\r\n ? '/assets/images/icons/arrow-up.svg'\r\n : '/assets/images/icons/arrow-down.svg'\" alt=\"toggle\" (click)=\"coverage.isShow = !coverage?.isShow\" />\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}.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}.custom-control label{padding-top:8px}@media screen and (max-width: 767px){.actions button{min-width:90px}.right-actions{gap:5px}.custom-control label{padding-top:0}}\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" }] });
|
|
28138
|
+
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 <label style=\"padding-top: 2px;\">Select All</label>\r\n <input type=\"checkbox\" style=\"width: 16px;border: 1px solid #ddd;\"\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 font-weight-bold\"></label>\r\n <label class=\"position-absolute\" style=\"margin-left: 88px;\"\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 class=\"mt-2 mt-sm-2 pt-2 pointer\" [src]=\"coverage?.isShow\r\n ? '/assets/images/icons/arrow-up.svg'\r\n : '/assets/images/icons/arrow-down.svg'\" alt=\"toggle\" (click)=\"coverage.isShow = !coverage?.isShow\" />\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-lg-2\" style=\"height: 160px;overflow-y: auto;padding-left: 1.6rem;\">\r\n <div class=\"list-group-item col-3 res-coverage col-sm-6 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}.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}.custom-control label{padding-top:8px}@media screen and (max-width: 767px){.actions{gap:10px}.actions button{min-width:90px}.right-actions{gap:5px;justify-content:space-between}.custom-control label{padding-top:0}.res-coverage{width:50%}.pointer{display:none}}\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" }] });
|
|
28134
28139
|
}
|
|
28135
28140
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Step2CoverageComponent, decorators: [{
|
|
28136
28141
|
type: Component,
|
|
28137
|
-
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 <label style=\"padding-top: 2px;\">Select All</label>\r\n <input type=\"checkbox\" style=\"width: 16px;border: 1px solid #ddd;\"\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 font-weight-bold\"></label>\r\n <label class=\"position-absolute\" style=\"margin-left: 88px;\"\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 class=\"mt-2 mt-sm-2 pt-2 pointer\" [src]=\"coverage?.isShow\r\n ? '/assets/images/icons/arrow-up.svg'\r\n : '/assets/images/icons/arrow-down.svg'\" alt=\"toggle\" (click)=\"coverage.isShow = !coverage?.isShow\" />\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}.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}.custom-control label{padding-top:8px}@media screen and (max-width: 767px){.actions button{min-width:90px}.right-actions{gap:5px}.custom-control label{padding-top:0}}\n"] }]
|
|
28142
|
+
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 <label style=\"padding-top: 2px;\">Select All</label>\r\n <input type=\"checkbox\" style=\"width: 16px;border: 1px solid #ddd;\"\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 font-weight-bold\"></label>\r\n <label class=\"position-absolute\" style=\"margin-left: 88px;\"\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 class=\"mt-2 mt-sm-2 pt-2 pointer\" [src]=\"coverage?.isShow\r\n ? '/assets/images/icons/arrow-up.svg'\r\n : '/assets/images/icons/arrow-down.svg'\" alt=\"toggle\" (click)=\"coverage.isShow = !coverage?.isShow\" />\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-lg-2\" style=\"height: 160px;overflow-y: auto;padding-left: 1.6rem;\">\r\n <div class=\"list-group-item col-3 res-coverage col-sm-6 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}.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}.custom-control label{padding-top:8px}@media screen and (max-width: 767px){.actions{gap:10px}.actions button{min-width:90px}.right-actions{gap:5px;justify-content:space-between}.custom-control label{padding-top:0}.res-coverage{width:50%}.pointer{display:none}}\n"] }]
|
|
28138
28143
|
}], ctorParameters: () => [{ type: CredentialingStore }, { type: UsMapLatestService }, { type: PostalCodeServices }, { type: UserCoverageAreaService }, { type: AlertService }, { type: i6.TokenService }], propDecorators: { providerId: [{
|
|
28139
28144
|
type: Input
|
|
28140
28145
|
}], providerName: [{
|
|
@@ -28504,11 +28509,11 @@ class WorkexperienceComponent {
|
|
|
28504
28509
|
this.store.nextStep();
|
|
28505
28510
|
}
|
|
28506
28511
|
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 });
|
|
28507
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: WorkexperienceComponent, isStandalone: false, selector: "app-workexperience", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div *ngIf=\"!showpreview()\">\r\n <div class=\"education-container\">\r\n <h3>Add Work Experience</h3>\r\n <p class=\"hint\">\r\n Add your prior and current work history below\r\n </p>\r\n <form [formGroup]=\"workexperienceForm\">\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Company Name</div>\r\n <input type=\"text\" placeholder=\"Enter your company name here\" formControlName=\"companyName\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('companyName')?.touched &&\r\n workexperienceForm.get('companyName')?.hasError('required')\">\r\n Company name is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">Job Title</div>\r\n <input type=\"text\" placeholder=\"Enter your job title here\" formControlName=\"jobTitle\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('jobTitle')?.touched &&\r\n workexperienceForm.get('jobTitle')?.hasError('required')\">\r\n Job title is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Country</div>\r\n <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n {{ item.country }}\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n <div class=\"field\">\r\n <div class=\"head\">State</div>\r\n <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select State\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n <div class=\"row form-row\">\r\n <div class=\"field\">\r\n <div class=\"head\">City</div>\r\n <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('city')?.touched &&\r\n workexperienceForm.get('city')?.hasError('required')\">\r\n City is required\r\n </small>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Start Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Start date\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"{ adaptivePosition: true, isAnimated: true, showWeekNumbers: false,\r\n customTodayClass: !workexperienceForm.get('fromDate')?.value ? 'today-highlight' : '' }\" formControlName=\"fromDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('fromDate')?.touched &&\r\n workexperienceForm.get('fromDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !workexperienceForm.get('toDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"toDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('toDate')?.touched &&\r\n workexperienceForm.get('toDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Job Description or duties</div>\r\n <textarea placeholder=\"Description\" formControlName=\"jobDescription\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p class=\"upload-title\">Upload</p>\r\n <p class=\"upload-subtitle\">Add documents below</p>\r\n <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Documents\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n Selected: {{ fileName }}\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\" >\r\n <h3>Work Experiences Preview</h3>\r\n </div>\r\n <div class=\"accordion\" >\r\n\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n class=\"accordion-item border-0\">\r\n\r\n <!-- HEADER (preview) -->\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#edu_' + i\">\r\n\r\n <!-- LEFT : TITLE -->\r\n <span class=\"accordion-title\">\r\n {{ exp.companyName }}\r\n </span>\r\n\r\n <!-- RIGHT : EDIT ICON -->\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n\r\n </button>\r\n </h2>\r\n\r\n\r\n <!-- BODY -->\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n\r\n <!-- GRID DATA (2 or 3 columns) -->\r\n <div class=\"detail-grid\">\r\n <div>\r\n <strong>Company Name</strong><br />\r\n <span class=\"job-title\">{{ exp.companyName }}</span>\r\n </div>\r\n <div>\r\n <strong>Job Title</strong><br />\r\n <span class=\"job-title\">{{ exp.jobTitle }}</span>\r\n </div>\r\n <div>\r\n <strong>From Date</strong><br />\r\n <span class=\"job-title\">{{ exp.fromDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div>\r\n <strong>To Date</strong><br />\r\n <span class=\"job-title\">{{ exp.toDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n\r\n <div>\r\n <strong>Country</strong><br />\r\n <span class=\"job-title\">{{ exp.country }}</span>\r\n </div>\r\n <div>\r\n <strong>State</strong><br />\r\n <span class=\"job-title\">{{ exp.state | stateName }}</span>\r\n </div>\r\n\r\n <div>\r\n <strong>City</strong><br />\r\n <span class=\"job-title\">{{ exp.city }}</span>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Job Description</strong><br />\r\n <span class=\"job-title\"> {{ exp.jobDescription }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary\" (click)=\"add()\" style=\"background-color: #1f4d5f;width: 200px;\">\r\n Add More Experiences\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:18px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input,select,textarea{width:100%;height:44px;padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;margin-bottom:5px;font-weight:500}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;margin-top:25px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin-top:25px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:380px}.accordion{margin:20px 100px}@media screen and (max-width: 767px){.preview-header{margin-left:0}.accordion{margin:20px 0}.actions{flex-direction:column-reverse;gap:10px}.right-actions{gap:43px}}\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" }] });
|
|
28512
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: WorkexperienceComponent, isStandalone: false, selector: "app-workexperience", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div *ngIf=\"!showpreview()\">\r\n <div class=\"education-container\">\r\n <h3>Add Work Experience</h3>\r\n <p class=\"hint\">\r\n Add your prior and current work history below\r\n </p>\r\n <form [formGroup]=\"workexperienceForm\">\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Company Name</div>\r\n <input type=\"text\" placeholder=\"Enter your company name here\" formControlName=\"companyName\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('companyName')?.touched &&\r\n workexperienceForm.get('companyName')?.hasError('required')\">\r\n Company name is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">Job Title</div>\r\n <input type=\"text\" placeholder=\"Enter your job title here\" formControlName=\"jobTitle\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('jobTitle')?.touched &&\r\n workexperienceForm.get('jobTitle')?.hasError('required')\">\r\n Job title is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Country</div>\r\n <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n {{ item.country }}\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n <div class=\"field\">\r\n <div class=\"head\">State</div>\r\n <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select State\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n <div class=\"row form-row\">\r\n <div class=\"field\">\r\n <div class=\"head\">City</div>\r\n <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('city')?.touched &&\r\n workexperienceForm.get('city')?.hasError('required')\">\r\n City is required\r\n </small>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Start Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Start date\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"{ adaptivePosition: true, isAnimated: true, showWeekNumbers: false,\r\n customTodayClass: !workexperienceForm.get('fromDate')?.value ? 'today-highlight' : '' }\" formControlName=\"fromDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('fromDate')?.touched &&\r\n workexperienceForm.get('fromDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !workexperienceForm.get('toDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"toDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('toDate')?.touched &&\r\n workexperienceForm.get('toDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Job Description or duties</div>\r\n <textarea placeholder=\"Description\" formControlName=\"jobDescription\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p class=\"upload-title\">Upload</p>\r\n <p class=\"upload-subtitle\">Add documents below</p>\r\n <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Documents\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n Selected: {{ fileName }}\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\" >\r\n <h3>Work Experiences Preview</h3>\r\n </div>\r\n <div class=\"accordion\" >\r\n\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n class=\"accordion-item border-0\">\r\n\r\n <!-- HEADER (preview) -->\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#edu_' + i\">\r\n\r\n <!-- LEFT : TITLE -->\r\n <span class=\"accordion-title\">\r\n {{ exp.companyName }}\r\n </span>\r\n\r\n <!-- RIGHT : EDIT ICON -->\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n\r\n </button>\r\n </h2>\r\n\r\n\r\n <!-- BODY -->\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n\r\n <!-- GRID DATA (2 or 3 columns) -->\r\n <div class=\"detail-grid\">\r\n <div>\r\n <strong>Company Name</strong><br />\r\n <span class=\"job-title\">{{ exp.companyName }}</span>\r\n </div>\r\n <div>\r\n <strong>Job Title</strong><br />\r\n <span class=\"job-title\">{{ exp.jobTitle }}</span>\r\n </div>\r\n <div>\r\n <strong>From Date</strong><br />\r\n <span class=\"job-title\">{{ exp.fromDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div>\r\n <strong>To Date</strong><br />\r\n <span class=\"job-title\">{{ exp.toDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n\r\n <div>\r\n <strong>Country</strong><br />\r\n <span class=\"job-title\">{{ exp.country }}</span>\r\n </div>\r\n <div>\r\n <strong>State</strong><br />\r\n <span class=\"job-title\">{{ exp.state | stateName }}</span>\r\n </div>\r\n\r\n <div>\r\n <strong>City</strong><br />\r\n <span class=\"job-title\">{{ exp.city }}</span>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Job Description</strong><br />\r\n <span class=\"job-title\"> {{ exp.jobDescription }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary\" (click)=\"add()\" style=\"background-color: #1f4d5f;width: 200px;\">\r\n Add More Experiences\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:18px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input,select,textarea{width:100%;height:44px;padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;margin-bottom:5px;font-weight:500}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;margin-top:25px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin-top:25px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:380px}.accordion{margin:20px 100px}@media screen and (max-width: 767px){.preview-header{margin-left:0}.accordion{margin:20px 0}.actions{flex-direction:column-reverse;gap:5px}.right-actions{gap:15px;justify-content:space-between}.form-row{gap:14px;flex-direction:column}.pointer{display:none}}\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" }] });
|
|
28508
28513
|
}
|
|
28509
28514
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WorkexperienceComponent, decorators: [{
|
|
28510
28515
|
type: Component,
|
|
28511
|
-
args: [{ selector: 'app-workexperience', standalone: false, template: "<div *ngIf=\"!showpreview()\">\r\n <div class=\"education-container\">\r\n <h3>Add Work Experience</h3>\r\n <p class=\"hint\">\r\n Add your prior and current work history below\r\n </p>\r\n <form [formGroup]=\"workexperienceForm\">\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Company Name</div>\r\n <input type=\"text\" placeholder=\"Enter your company name here\" formControlName=\"companyName\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('companyName')?.touched &&\r\n workexperienceForm.get('companyName')?.hasError('required')\">\r\n Company name is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">Job Title</div>\r\n <input type=\"text\" placeholder=\"Enter your job title here\" formControlName=\"jobTitle\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('jobTitle')?.touched &&\r\n workexperienceForm.get('jobTitle')?.hasError('required')\">\r\n Job title is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Country</div>\r\n <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n {{ item.country }}\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n <div class=\"field\">\r\n <div class=\"head\">State</div>\r\n <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select State\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n <div class=\"row form-row\">\r\n <div class=\"field\">\r\n <div class=\"head\">City</div>\r\n <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('city')?.touched &&\r\n workexperienceForm.get('city')?.hasError('required')\">\r\n City is required\r\n </small>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Start Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Start date\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"{ adaptivePosition: true, isAnimated: true, showWeekNumbers: false,\r\n customTodayClass: !workexperienceForm.get('fromDate')?.value ? 'today-highlight' : '' }\" formControlName=\"fromDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('fromDate')?.touched &&\r\n workexperienceForm.get('fromDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !workexperienceForm.get('toDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"toDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('toDate')?.touched &&\r\n workexperienceForm.get('toDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Job Description or duties</div>\r\n <textarea placeholder=\"Description\" formControlName=\"jobDescription\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p class=\"upload-title\">Upload</p>\r\n <p class=\"upload-subtitle\">Add documents below</p>\r\n <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Documents\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n Selected: {{ fileName }}\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\" >\r\n <h3>Work Experiences Preview</h3>\r\n </div>\r\n <div class=\"accordion\" >\r\n\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n class=\"accordion-item border-0\">\r\n\r\n <!-- HEADER (preview) -->\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#edu_' + i\">\r\n\r\n <!-- LEFT : TITLE -->\r\n <span class=\"accordion-title\">\r\n {{ exp.companyName }}\r\n </span>\r\n\r\n <!-- RIGHT : EDIT ICON -->\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n\r\n </button>\r\n </h2>\r\n\r\n\r\n <!-- BODY -->\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n\r\n <!-- GRID DATA (2 or 3 columns) -->\r\n <div class=\"detail-grid\">\r\n <div>\r\n <strong>Company Name</strong><br />\r\n <span class=\"job-title\">{{ exp.companyName }}</span>\r\n </div>\r\n <div>\r\n <strong>Job Title</strong><br />\r\n <span class=\"job-title\">{{ exp.jobTitle }}</span>\r\n </div>\r\n <div>\r\n <strong>From Date</strong><br />\r\n <span class=\"job-title\">{{ exp.fromDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div>\r\n <strong>To Date</strong><br />\r\n <span class=\"job-title\">{{ exp.toDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n\r\n <div>\r\n <strong>Country</strong><br />\r\n <span class=\"job-title\">{{ exp.country }}</span>\r\n </div>\r\n <div>\r\n <strong>State</strong><br />\r\n <span class=\"job-title\">{{ exp.state | stateName }}</span>\r\n </div>\r\n\r\n <div>\r\n <strong>City</strong><br />\r\n <span class=\"job-title\">{{ exp.city }}</span>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Job Description</strong><br />\r\n <span class=\"job-title\"> {{ exp.jobDescription }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary\" (click)=\"add()\" style=\"background-color: #1f4d5f;width: 200px;\">\r\n Add More Experiences\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:18px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input,select,textarea{width:100%;height:44px;padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;margin-bottom:5px;font-weight:500}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;margin-top:25px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin-top:25px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:380px}.accordion{margin:20px 100px}@media screen and (max-width: 767px){.preview-header{margin-left:0}.accordion{margin:20px 0}.actions{flex-direction:column-reverse;gap:10px}.right-actions{gap:43px}}\n"] }]
|
|
28516
|
+
args: [{ selector: 'app-workexperience', standalone: false, template: "<div *ngIf=\"!showpreview()\">\r\n <div class=\"education-container\">\r\n <h3>Add Work Experience</h3>\r\n <p class=\"hint\">\r\n Add your prior and current work history below\r\n </p>\r\n <form [formGroup]=\"workexperienceForm\">\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Company Name</div>\r\n <input type=\"text\" placeholder=\"Enter your company name here\" formControlName=\"companyName\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('companyName')?.touched &&\r\n workexperienceForm.get('companyName')?.hasError('required')\">\r\n Company name is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">Job Title</div>\r\n <input type=\"text\" placeholder=\"Enter your job title here\" formControlName=\"jobTitle\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('jobTitle')?.touched &&\r\n workexperienceForm.get('jobTitle')?.hasError('required')\">\r\n Job title is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Country</div>\r\n <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n {{ item.country }}\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n <div class=\"field\">\r\n <div class=\"head\">State</div>\r\n <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select State\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n <div class=\"row form-row\">\r\n <div class=\"field\">\r\n <div class=\"head\">City</div>\r\n <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('city')?.touched &&\r\n workexperienceForm.get('city')?.hasError('required')\">\r\n City is required\r\n </small>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Start Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Start date\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"{ adaptivePosition: true, isAnimated: true, showWeekNumbers: false,\r\n customTodayClass: !workexperienceForm.get('fromDate')?.value ? 'today-highlight' : '' }\" formControlName=\"fromDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('fromDate')?.touched &&\r\n workexperienceForm.get('fromDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !workexperienceForm.get('toDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"toDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('toDate')?.touched &&\r\n workexperienceForm.get('toDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Job Description or duties</div>\r\n <textarea placeholder=\"Description\" formControlName=\"jobDescription\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p class=\"upload-title\">Upload</p>\r\n <p class=\"upload-subtitle\">Add documents below</p>\r\n <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Documents\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n Selected: {{ fileName }}\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\" >\r\n <h3>Work Experiences Preview</h3>\r\n </div>\r\n <div class=\"accordion\" >\r\n\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n class=\"accordion-item border-0\">\r\n\r\n <!-- HEADER (preview) -->\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#edu_' + i\">\r\n\r\n <!-- LEFT : TITLE -->\r\n <span class=\"accordion-title\">\r\n {{ exp.companyName }}\r\n </span>\r\n\r\n <!-- RIGHT : EDIT ICON -->\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n\r\n </button>\r\n </h2>\r\n\r\n\r\n <!-- BODY -->\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n <div class=\"accordion-body\">\r\n\r\n <!-- GRID DATA (2 or 3 columns) -->\r\n <div class=\"detail-grid\">\r\n <div>\r\n <strong>Company Name</strong><br />\r\n <span class=\"job-title\">{{ exp.companyName }}</span>\r\n </div>\r\n <div>\r\n <strong>Job Title</strong><br />\r\n <span class=\"job-title\">{{ exp.jobTitle }}</span>\r\n </div>\r\n <div>\r\n <strong>From Date</strong><br />\r\n <span class=\"job-title\">{{ exp.fromDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div>\r\n <strong>To Date</strong><br />\r\n <span class=\"job-title\">{{ exp.toDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n\r\n <div>\r\n <strong>Country</strong><br />\r\n <span class=\"job-title\">{{ exp.country }}</span>\r\n </div>\r\n <div>\r\n <strong>State</strong><br />\r\n <span class=\"job-title\">{{ exp.state | stateName }}</span>\r\n </div>\r\n\r\n <div>\r\n <strong>City</strong><br />\r\n <span class=\"job-title\">{{ exp.city }}</span>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n <strong>Document</strong><br />\r\n <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"full-width mt-3\">\r\n <strong>Job Description</strong><br />\r\n <span class=\"job-title\"> {{ exp.jobDescription }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary\" (click)=\"add()\" style=\"background-color: #1f4d5f;width: 200px;\">\r\n Add More Experiences\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:18px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input,select,textarea{width:100%;height:44px;padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;margin-bottom:5px;font-weight:500}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;margin-top:25px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin-top:25px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:380px}.accordion{margin:20px 100px}@media screen and (max-width: 767px){.preview-header{margin-left:0}.accordion{margin:20px 0}.actions{flex-direction:column-reverse;gap:5px}.right-actions{gap:15px;justify-content:space-between}.form-row{gap:14px;flex-direction:column}.pointer{display:none}}\n"] }]
|
|
28512
28517
|
}], ctorParameters: () => [{ type: UserExperienceService }, { type: WorkExperienceStore }, { type: CredentialingStore }, { type: CountryServices }, { type: PostalCodeServices }, { type: i6.TokenService }, { type: i3.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
|
|
28513
28518
|
type: Input
|
|
28514
28519
|
}], providerName: [{
|
|
@@ -29885,13 +29890,13 @@ class InitialProcessComponent {
|
|
|
29885
29890
|
this.destroy$.next();
|
|
29886
29891
|
this.destroy$.complete();
|
|
29887
29892
|
}
|
|
29888
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InitialProcessComponent, deps: [{ token:
|
|
29889
|
-
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 mob 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\" \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 [maxLength]=\"14\" (input)=\"formatPhone($event,companyForm)\"\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 class=\"profile-field\">\r\n <div class=\"form-group mb-2 form\" style=\"margin-left: 26px;margin-right: 52px;\">\r\n <input #uploadLogoInput type=\"file\" accept=\"image/*\" (change)=\"uploadLogo($event)\"\r\n class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n\r\n <input (click)=\"uploadImage2.click()\" [(ngModel)]=\"logoName\" readonly type=\"text\" class=\"form-control\"\r\n placeholder=\"Upload Company Logo\">\r\n\r\n <img #uploadImage2 class=\"upload-image\" (click)=\"uploadLogoInput.click()\" src=\"assets/images/icons/upload.svg\"\r\n alt=\"Logo\">\r\n <div *ngIf=\"isLogoRequired\" class=\"invalid-feedback d-block\">\r\n <div class=\"ms-1\">\r\n Please Upload Company Logo\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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 class=\"btn-mob\">\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\" (input)=\"formatPhone($event,userForm)\"\r\n name=\"inputPhone\" placeholder=\"Phone Number \" id=\"inputPhone\" autocomplete=\"off\"\r\n formControlName=\"phoneNumber\" [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 <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n alt=\"Logo\">\r\n <span *ngIf=\"showLoader\" class=\"spinner position-absolute\"></span>\r\n\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)}.spinner{width:38px;height:38px;border:dotted white;border-top:2px solid #f6f6f6;border-radius:62%;animation:_ngcontent-ng-c3147387837_spin 1.7s linear infinite;margin:-9px 0 0 -28px}@keyframes spin{to{transform:rotate(360deg)}}::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}@media screen and (max-width: 767px){.term-signature{padding-left:3rem;padding-right:0;position:unset;margin:0}.footer-signature{margin-top:0rem}.disabled-btn{position:absolute;bottom:13px;right:24px}.next{height:46px;width:46px;position:absolute;bottom:21px;right:35px}.mob{padding-bottom:4.5rem!important}.checkmark{width:75%}.terms-fixed-modal{width:unset}::ng-deep .privacy-policy-modal .logo-section{margin-bottom:0!important}.add-tab-view{padding:30px 25px 6px;margin-left:0}.user-card{width:96%}.footer .btn-mob{display:flex;align-items:center}.back-btn{position:absolute;bottom:21px;left:10px}.actions{margin:50px 34px 1px}}@media screen and (min-width: 768px) and (max-width: 1024px){.footer-signature{margin-top:3rem}}\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"] }] });
|
|
29893
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InitialProcessComponent, deps: [{ token: i3$1.Router }, { token: UserDetailService }, { token: i3.FormBuilder }, { token: FileService }, { token: ProvidersService$1 }, { 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 });
|
|
29894
|
+
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 mob 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\" \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 [maxLength]=\"14\" (input)=\"formatPhone($event,companyForm)\"\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 class=\"profile-field\">\r\n <div class=\"form-group mb-2 form\" style=\"margin-left: 26px;margin-right: 52px;\">\r\n <input #uploadLogoInput type=\"file\" accept=\"image/*\" (change)=\"uploadLogo($event)\"\r\n class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n\r\n <input (click)=\"uploadImage2.click()\" [(ngModel)]=\"logoName\" readonly type=\"text\" class=\"form-control\"\r\n placeholder=\"Upload Company Logo\">\r\n\r\n <img #uploadImage2 class=\"upload-image\" (click)=\"uploadLogoInput.click()\" src=\"assets/images/icons/upload.svg\"\r\n alt=\"Logo\">\r\n <div *ngIf=\"isLogoRequired\" class=\"invalid-feedback d-block\">\r\n <div class=\"ms-1\">\r\n Please Upload Company Logo\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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 class=\"btn-mob\">\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\" (input)=\"formatPhone($event,userForm)\"\r\n name=\"inputPhone\" placeholder=\"Phone Number \" id=\"inputPhone\" autocomplete=\"off\"\r\n formControlName=\"phoneNumber\" [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 <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n alt=\"Logo\">\r\n <span *ngIf=\"showLoader\" class=\"spinner position-absolute\"></span>\r\n\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)}.spinner{width:38px;height:38px;border:dotted white;border-top:2px solid #f6f6f6;border-radius:62%;animation:_ngcontent-ng-c3147387837_spin 1.7s linear infinite;margin:-9px 0 0 -28px}@keyframes spin{to{transform:rotate(360deg)}}::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:147px;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}@media screen and (max-width: 767px){.term-signature{padding-left:3rem;padding-right:0;position:unset;margin:0}.footer-signature{margin-top:0rem}.disabled-btn{position:absolute;bottom:13px;right:24px}.next{height:46px;width:46px;position:absolute;bottom:21px;right:35px}.mob{padding-bottom:4.5rem!important}.checkmark{width:75%}.terms-fixed-modal{width:unset}::ng-deep .privacy-policy-modal .logo-section{margin-bottom:0!important}.add-tab-view{padding:30px 25px 6px;margin-left:0}.user-card{width:96%}.footer .btn-mob{display:flex;align-items:center}.back-btn{position:absolute;bottom:21px;left:10px}.actions{margin:50px 34px 1px}}@media screen and (min-width: 768px) and (max-width: 1024px){.footer-signature{margin-top:3rem}}\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"] }] });
|
|
29890
29895
|
}
|
|
29891
29896
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InitialProcessComponent, decorators: [{
|
|
29892
29897
|
type: Component,
|
|
29893
|
-
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 mob 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\" \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 [maxLength]=\"14\" (input)=\"formatPhone($event,companyForm)\"\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 class=\"profile-field\">\r\n <div class=\"form-group mb-2 form\" style=\"margin-left: 26px;margin-right: 52px;\">\r\n <input #uploadLogoInput type=\"file\" accept=\"image/*\" (change)=\"uploadLogo($event)\"\r\n class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n\r\n <input (click)=\"uploadImage2.click()\" [(ngModel)]=\"logoName\" readonly type=\"text\" class=\"form-control\"\r\n placeholder=\"Upload Company Logo\">\r\n\r\n <img #uploadImage2 class=\"upload-image\" (click)=\"uploadLogoInput.click()\" src=\"assets/images/icons/upload.svg\"\r\n alt=\"Logo\">\r\n <div *ngIf=\"isLogoRequired\" class=\"invalid-feedback d-block\">\r\n <div class=\"ms-1\">\r\n Please Upload Company Logo\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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 class=\"btn-mob\">\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\" (input)=\"formatPhone($event,userForm)\"\r\n name=\"inputPhone\" placeholder=\"Phone Number \" id=\"inputPhone\" autocomplete=\"off\"\r\n formControlName=\"phoneNumber\" [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 <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n alt=\"Logo\">\r\n <span *ngIf=\"showLoader\" class=\"spinner position-absolute\"></span>\r\n\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)}.spinner{width:38px;height:38px;border:dotted white;border-top:2px solid #f6f6f6;border-radius:62%;animation:_ngcontent-ng-c3147387837_spin 1.7s linear infinite;margin:-9px 0 0 -28px}@keyframes spin{to{transform:rotate(360deg)}}::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}@media screen and (max-width: 767px){.term-signature{padding-left:3rem;padding-right:0;position:unset;margin:0}.footer-signature{margin-top:0rem}.disabled-btn{position:absolute;bottom:13px;right:24px}.next{height:46px;width:46px;position:absolute;bottom:21px;right:35px}.mob{padding-bottom:4.5rem!important}.checkmark{width:75%}.terms-fixed-modal{width:unset}::ng-deep .privacy-policy-modal .logo-section{margin-bottom:0!important}.add-tab-view{padding:30px 25px 6px;margin-left:0}.user-card{width:96%}.footer .btn-mob{display:flex;align-items:center}.back-btn{position:absolute;bottom:21px;left:10px}.actions{margin:50px 34px 1px}}@media screen and (min-width: 768px) and (max-width: 1024px){.footer-signature{margin-top:3rem}}\n"] }]
|
|
29894
|
-
}], ctorParameters: () => [{ type:
|
|
29898
|
+
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 mob 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\" \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 [maxLength]=\"14\" (input)=\"formatPhone($event,companyForm)\"\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 class=\"profile-field\">\r\n <div class=\"form-group mb-2 form\" style=\"margin-left: 26px;margin-right: 52px;\">\r\n <input #uploadLogoInput type=\"file\" accept=\"image/*\" (change)=\"uploadLogo($event)\"\r\n class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n\r\n <input (click)=\"uploadImage2.click()\" [(ngModel)]=\"logoName\" readonly type=\"text\" class=\"form-control\"\r\n placeholder=\"Upload Company Logo\">\r\n\r\n <img #uploadImage2 class=\"upload-image\" (click)=\"uploadLogoInput.click()\" src=\"assets/images/icons/upload.svg\"\r\n alt=\"Logo\">\r\n <div *ngIf=\"isLogoRequired\" class=\"invalid-feedback d-block\">\r\n <div class=\"ms-1\">\r\n Please Upload Company Logo\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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 class=\"btn-mob\">\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\" (input)=\"formatPhone($event,userForm)\"\r\n name=\"inputPhone\" placeholder=\"Phone Number \" id=\"inputPhone\" autocomplete=\"off\"\r\n formControlName=\"phoneNumber\" [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 <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n alt=\"Logo\">\r\n <span *ngIf=\"showLoader\" class=\"spinner position-absolute\"></span>\r\n\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)}.spinner{width:38px;height:38px;border:dotted white;border-top:2px solid #f6f6f6;border-radius:62%;animation:_ngcontent-ng-c3147387837_spin 1.7s linear infinite;margin:-9px 0 0 -28px}@keyframes spin{to{transform:rotate(360deg)}}::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:147px;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}@media screen and (max-width: 767px){.term-signature{padding-left:3rem;padding-right:0;position:unset;margin:0}.footer-signature{margin-top:0rem}.disabled-btn{position:absolute;bottom:13px;right:24px}.next{height:46px;width:46px;position:absolute;bottom:21px;right:35px}.mob{padding-bottom:4.5rem!important}.checkmark{width:75%}.terms-fixed-modal{width:unset}::ng-deep .privacy-policy-modal .logo-section{margin-bottom:0!important}.add-tab-view{padding:30px 25px 6px;margin-left:0}.user-card{width:96%}.footer .btn-mob{display:flex;align-items:center}.back-btn{position:absolute;bottom:21px;left:10px}.actions{margin:50px 34px 1px}}@media screen and (min-width: 768px) and (max-width: 1024px){.footer-signature{margin-top:3rem}}\n"] }]
|
|
29899
|
+
}], ctorParameters: () => [{ type: i3$1.Router }, { type: UserDetailService }, { type: i3.FormBuilder }, { type: FileService }, { type: ProvidersService$1 }, { type: RolesService }, { type: i7.BsModalService }, { type: ProviderContractorSubCategoryService }, { type: ProviderContractorSubCategoryService }, { type: i9.AuthService }, { type: i6.TokenService }, { type: i6.RoleContextService }, { type: undefined, decorators: [{
|
|
29895
29900
|
type: Inject,
|
|
29896
29901
|
args: [LIBRARY_CONFIG]
|
|
29897
29902
|
}] }], propDecorators: { canvasRef: [{
|
|
@@ -30566,17 +30571,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
30566
30571
|
}], ctorParameters: () => [{ type: i3.FormBuilder }, { type: i9.AuthService }, { type: UserDetailService }, { type: i6.TokenService }] });
|
|
30567
30572
|
|
|
30568
30573
|
class VerifyEmailComponent {
|
|
30574
|
+
libConfig;
|
|
30569
30575
|
userService;
|
|
30570
30576
|
authLogoutService;
|
|
30577
|
+
tokenService;
|
|
30578
|
+
router;
|
|
30571
30579
|
loading = false;
|
|
30572
30580
|
successMessage = false;
|
|
30573
30581
|
errorMessage = false;
|
|
30582
|
+
pageLoader = true;
|
|
30574
30583
|
// ✅ cooldown (30 seconds)
|
|
30575
30584
|
cooldown = 0;
|
|
30576
30585
|
interval;
|
|
30577
|
-
constructor(userService, authLogoutService) {
|
|
30586
|
+
constructor(libConfig, userService, authLogoutService, tokenService, router) {
|
|
30587
|
+
this.libConfig = libConfig;
|
|
30578
30588
|
this.userService = userService;
|
|
30579
30589
|
this.authLogoutService = authLogoutService;
|
|
30590
|
+
this.tokenService = tokenService;
|
|
30591
|
+
this.router = router;
|
|
30592
|
+
}
|
|
30593
|
+
async ngOnInit() {
|
|
30594
|
+
debugger;
|
|
30595
|
+
if (this.libConfig.dashboardUrl?.toLowerCase()?.includes('dev')) {
|
|
30596
|
+
if (await this.tokenService.isEmailVerified()) {
|
|
30597
|
+
this.router.navigate(['/dashboard/Dashboard']);
|
|
30598
|
+
}
|
|
30599
|
+
else {
|
|
30600
|
+
this.pageLoader = false;
|
|
30601
|
+
}
|
|
30602
|
+
}
|
|
30603
|
+
else {
|
|
30604
|
+
this.pageLoader = false;
|
|
30605
|
+
}
|
|
30580
30606
|
}
|
|
30581
30607
|
async resendVerification() {
|
|
30582
30608
|
// 🚫 prevent spam clicking
|
|
@@ -30624,13 +30650,16 @@ class VerifyEmailComponent {
|
|
|
30624
30650
|
clearInterval(this.interval);
|
|
30625
30651
|
}
|
|
30626
30652
|
}
|
|
30627
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: VerifyEmailComponent, deps: [{ token: UserDetailService }, { token: i6.AuthLogoutService }], target: i0.ɵɵFactoryTarget.Component });
|
|
30628
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
30653
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: VerifyEmailComponent, deps: [{ token: LIBRARY_CONFIG }, { token: UserDetailService }, { token: i6.AuthLogoutService }, { token: i6.TokenService }, { token: i3$1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
30654
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: VerifyEmailComponent, isStandalone: true, selector: "app-verify-email", ngImport: i0, template: "@if(pageLoader){\r\n<div class=\"align-content-center text-center\" style=\"height: 100vh;\">\r\n <loader [show]=\"true\"></loader>\r\n <div class=\"fs-5 fw-bolder\">Loading... Please wait !</div>\r\n</div>\r\n}@else{\r\n<div class=\"container d-flex justify-content-center align-items-center vh-100\">\r\n <div class=\"card shadow p-4 text-center\" style=\"max-width: 420px; width: 100%;\">\r\n \r\n <div class=\"icon mb-3 text-warning\" style=\"font-size: 60px;\">\r\n \u26A0\r\n </div>\r\n \r\n <h4 class=\"mb-3\">Email Not Verified</h4>\r\n \r\n <p class=\"text-muted\">\r\n Your email is not verified yet. Please check your inbox and click the verification link.\r\n <br><br>\r\n If you didn\u2019t receive the email, click the button below to resend the verification link.\r\n </p>\r\n \r\n <button class=\"btn btn-warning w-100 mt-3\" (click)=\"resendVerification()\" [disabled]=\"loading || cooldown > 0\">\r\n \r\n <!-- Normal -->\r\n <span *ngIf=\"!loading && cooldown === 0\">\r\n Resend Verification Email\r\n </span>\r\n \r\n <!-- Loading -->\r\n <span *ngIf=\"loading\">\r\n Sending...\r\n </span>\r\n \r\n <!-- Cooldown -->\r\n <span *ngIf=\"cooldown > 0 && !loading\">\r\n Retry in {{ cooldown }}s\r\n </span>\r\n \r\n </button>\r\n \r\n <div *ngIf=\"successMessage\" class=\"mt-3 text-success\">\r\n \u2705 Verification email sent! Please check your inbox.\r\n </div>\r\n \r\n <div *ngIf=\"errorMessage\" class=\"mt-3 text-danger\">\r\n \u274C Failed to resend email. Try again.\r\n </div>\r\n \r\n <!-- Optional logout -->\r\n <button class=\"btn btn-link mt-3\" (click)=\"logout()\">\r\n Logout\r\n </button>\r\n \r\n </div>\r\n</div>\r\n}\r\n ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: LoaderModule }, { kind: "component", type: LoaderComponent, selector: "loader", inputs: ["show", "small"] }] });
|
|
30629
30655
|
}
|
|
30630
30656
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: VerifyEmailComponent, decorators: [{
|
|
30631
30657
|
type: Component,
|
|
30632
|
-
args: [{ selector: 'app-verify-email', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule], template: "<div class=\"container d-flex justify-content-center align-items-center vh-100\">\r\n <div class=\"card shadow p-4 text-center\" style=\"max-width: 420px; width: 100%;\">\r\n
|
|
30633
|
-
}], ctorParameters: () => [{ type:
|
|
30658
|
+
args: [{ selector: 'app-verify-email', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, LoaderModule], template: "@if(pageLoader){\r\n<div class=\"align-content-center text-center\" style=\"height: 100vh;\">\r\n <loader [show]=\"true\"></loader>\r\n <div class=\"fs-5 fw-bolder\">Loading... Please wait !</div>\r\n</div>\r\n}@else{\r\n<div class=\"container d-flex justify-content-center align-items-center vh-100\">\r\n <div class=\"card shadow p-4 text-center\" style=\"max-width: 420px; width: 100%;\">\r\n \r\n <div class=\"icon mb-3 text-warning\" style=\"font-size: 60px;\">\r\n \u26A0\r\n </div>\r\n \r\n <h4 class=\"mb-3\">Email Not Verified</h4>\r\n \r\n <p class=\"text-muted\">\r\n Your email is not verified yet. Please check your inbox and click the verification link.\r\n <br><br>\r\n If you didn\u2019t receive the email, click the button below to resend the verification link.\r\n </p>\r\n \r\n <button class=\"btn btn-warning w-100 mt-3\" (click)=\"resendVerification()\" [disabled]=\"loading || cooldown > 0\">\r\n \r\n <!-- Normal -->\r\n <span *ngIf=\"!loading && cooldown === 0\">\r\n Resend Verification Email\r\n </span>\r\n \r\n <!-- Loading -->\r\n <span *ngIf=\"loading\">\r\n Sending...\r\n </span>\r\n \r\n <!-- Cooldown -->\r\n <span *ngIf=\"cooldown > 0 && !loading\">\r\n Retry in {{ cooldown }}s\r\n </span>\r\n \r\n </button>\r\n \r\n <div *ngIf=\"successMessage\" class=\"mt-3 text-success\">\r\n \u2705 Verification email sent! Please check your inbox.\r\n </div>\r\n \r\n <div *ngIf=\"errorMessage\" class=\"mt-3 text-danger\">\r\n \u274C Failed to resend email. Try again.\r\n </div>\r\n \r\n <!-- Optional logout -->\r\n <button class=\"btn btn-link mt-3\" (click)=\"logout()\">\r\n Logout\r\n </button>\r\n \r\n </div>\r\n</div>\r\n}\r\n " }]
|
|
30659
|
+
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
30660
|
+
type: Inject,
|
|
30661
|
+
args: [LIBRARY_CONFIG]
|
|
30662
|
+
}] }, { type: UserDetailService }, { type: i6.AuthLogoutService }, { type: i6.TokenService }, { type: i3$1.Router }] });
|
|
30634
30663
|
|
|
30635
30664
|
// app-type.enum.ts
|
|
30636
30665
|
var AppType;
|