@idsoftsource/initial-process 0.2.3 → 1.0.1

package/fesm2022/idsoftsource-initial-process.mjs

@@ -600,6 +600,12 @@ class SignaturePad {
 // projects/initial-process/src/lib/config/library-config.ts
 const LIBRARY_CONFIG = new InjectionToken('LIBRARY_CONFIG');
 
+class uuid {
+    newId() {
+        return Date.now().toString(36) + Math.random().toString(36).substr(2);
+    }
+}
+
 class UserDetailService {
     http = inject(HttpClient);
     // 🔥 Define base URL manually
@@ -679,6 +685,9 @@ class FileService {
         formData.append('FileId', fileId);
         return this.httpClient.post(`${this.baseUrl}`, formData);
     }
+    DeleteFiles(deletedFiles) {
+        return this.httpClient.get(`${this.baseUrl}/${deletedFiles}`);
+    }
     uploadFileTemplate(sourceId, deleteAndInsert, file, fileId = '') {
         const formData = new FormData();
         formData.append('FromFile', file);
@@ -1389,12 +1398,6 @@ function clearProfile() {
     localStorage.removeItem(STORAGE_KEY);
 }
 
-class uuid {
-    newId() {
-        return Date.now().toString(36) + Math.random().toString(36).substr(2);
-    }
-}
-
 var ReviewStatus;
 (function (ReviewStatus) {
     ReviewStatus[ReviewStatus["Pending"] = 1] = "Pending";
@@ -2360,6 +2363,7 @@ class UserDocumentService {
     httpClient;
     // 🔹 Base controller name
     baseUrl = 'UserDocument';
+    baseUrlUpdated = 'DocumentType';
     constructor(httpClient) {
         this.httpClient = httpClient;
     }
@@ -2398,7 +2402,7 @@ class UserDocumentService {
             filter += `,type=*${searchText}/i`;
         }
         const params = new HttpParams().set('filter', filter);
-        return this.httpClient.get(`${this.baseUrl}/GetDocumentType`, { params });
+        return this.httpClient.get(`${this.baseUrlUpdated}/GetDocumentType`, { params });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: UserDocumentService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: UserDocumentService, providedIn: 'root' });
@@ -4852,38 +4856,6 @@ const UserJobTitlesList = [
     { value: 7, text: 'surveyor', selected: false },
 ];
 
-var ProviderUserMappingStatus;
-(function (ProviderUserMappingStatus) {
-    ProviderUserMappingStatus[ProviderUserMappingStatus["WaitingForApproval"] = 1] = "WaitingForApproval";
-    ProviderUserMappingStatus[ProviderUserMappingStatus["Approved"] = 2] = "Approved";
-    ProviderUserMappingStatus[ProviderUserMappingStatus["Rejected"] = 3] = "Rejected";
-    ProviderUserMappingStatus[ProviderUserMappingStatus["LinkOpened"] = 4] = "LinkOpened";
-    ProviderUserMappingStatus[ProviderUserMappingStatus["Removed"] = 5] = "Removed";
-    ProviderUserMappingStatus[ProviderUserMappingStatus["NonComplained"] = 6] = "NonComplained";
-    ProviderUserMappingStatus[ProviderUserMappingStatus["Verified"] = 7] = "Verified";
-})(ProviderUserMappingStatus || (ProviderUserMappingStatus = {}));
-const ProviderUserMappingStatusList = [
-    { value: 1, text: 'Pending', selected: false },
-    { value: 2, text: 'Approved', selected: false },
-    { value: 3, text: 'Rejected', selected: false },
-    { value: 4, text: 'Link Opened', selected: false },
-    { value: 5, text: 'Removed', selected: false },
-    { value: 6, text: 'Non - Complained', selected: false },
-    { value: 7, text: 'Verified', selected: false },
-];
-
-var UserCategory;
-(function (UserCategory) {
-    UserCategory[UserCategory["ProducerRequestsToProvider"] = 1] = "ProducerRequestsToProvider";
-    UserCategory[UserCategory["ProviderRequestsToProducer"] = 2] = "ProviderRequestsToProducer";
-    UserCategory[UserCategory["ManuallyAdded"] = 3] = "ManuallyAdded";
-})(UserCategory || (UserCategory = {}));
-const UserCategoryList = [
-    { value: 1, text: ' ProducerRequestsToProvider', selected: false },
-    { value: 2, text: '  ProviderRequestsToProducer', selected: false },
-    { value: 3, text: ' ManuallyAdded', selected: false },
-];
-
 class IndustryService {
     http = inject(HttpClient);
     // 🔥 Define base URL manually
@@ -4958,6 +4930,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 
 class RoleSelectComponent {
     store;
+    userDocumentService;
     router;
     industrydata;
     userDetailService;
@@ -4966,11 +4939,17 @@ class RoleSelectComponent {
     tokenService;
     fb;
     previewUrl = null;
+    isImageLoading = false;
+    isresumeLoading = false;
+    isResumeRequired = false;
+    model = { fileId: null, fileUrl: null, fileName: null };
     isMappingCreated = false;
     initialSelectedJobValue;
     previousEmployeeType;
     selectedTab;
+    resumeName;
     industries = [];
+    list = [];
     selectedIndustries = [];
     isIndustriesLoading = false;
     expYears = [];
@@ -4995,7 +4974,6 @@ class RoleSelectComponent {
         },
     };
     userDetails;
-    selectedJobValue = null;
     roleForm;
     userForm;
     fileName;
@@ -5003,13 +4981,15 @@ class RoleSelectComponent {
     signaturePadData = {
         publicUrl: null,
     };
-    initialJobValue = null;
+    previewresumeUrl = null;
     useremail;
+    awsFileUpdate = [];
     selectedJobs = signal([], ...(ngDevMode ? [{ debugName: "selectedJobs" }] : []));
     selectedJobValues = [];
     provider;
-    constructor(store, router, industrydata, userDetailService, fileService, provideruser, tokenService, fb) {
+    constructor(store, userDocumentService, router, industrydata, userDetailService, fileService, provideruser, tokenService, fb) {
         this.store = store;
+        this.userDocumentService = userDocumentService;
         this.router = router;
         this.industrydata = industrydata;
         this.userDetailService = userDetailService;
@@ -5043,6 +5023,7 @@ class RoleSelectComponent {
             industries: new FormControl([], Validators.required),
         });
         this.userId = await this.tokenService.getUserId();
+        // this.userId = 'd03dfde6-49ab-41a1-a11f-017469e06338'
         this.useremail = await this.tokenService.getUserEmail();
         const stored = localStorage.getItem(this.mappingKey());
         if (stored === 'true') {
@@ -5064,33 +5045,6 @@ class RoleSelectComponent {
             });
         }
     }
-    getusermapping() {
-        this.provideruser.getProviderUserMapping({
-            filter: this.providerId === '00000000-0000-0000-0000-000000000000'
-                ? `userId=${this.userId}, providerId=`
-                : `userId=${this.userId}, providerId=${this.providerId}`
-        })
-            .subscribe({
-            next: res => {
-                console.log(res);
-                const employeeType = res?.data?.[0]?.employeeType;
-                this.previousEmployeeType = employeeType;
-                if (employeeType !== undefined && employeeType !== null) {
-                    this.prefillJob(employeeType);
-                }
-            },
-            error: err => {
-                console.error('Agent API error', err);
-            },
-        });
-    }
-    prefillJob(employeeType) {
-        this.jobTypes.forEach(job => {
-            job.selected = job.value === employeeType;
-        });
-        // keep your existing variable untouched
-        this.selectedJobValue = employeeType;
-    }
     getIndustries() {
         this.isIndustriesLoading = true;
         const query = {
@@ -5136,7 +5090,21 @@ class RoleSelectComponent {
     onBackClick() {
         this.backToParent.emit();
     }
+    loadFromApi(userId) {
+        const query = {
+            page: 1,
+            pageSize: 10,
+            orderBy: 'createdDateTime asc',
+            filter: `mainType=4,userId=${userId}`,
+        };
+        this.userDocumentService
+            .getUserDocument(query)
+            .subscribe(res => {
+            const list = res?.data ?? [];
+        });
+    }
     getUserDetail() {
+        this.loadFromApi(this.userId);
         if (!this.userId)
             return;
         this.userForm.patchValue({
@@ -5179,29 +5147,14 @@ class RoleSelectComponent {
             },
             error: (err) => console.log('Error', err)
         });
-        if (this.providerId === '00000000-0000-0000-0000-000000000000') {
-        }
-        else {
-            this.getusermapping();
-        }
     }
     onYearChange(group) {
         this.selectedTab = group;
     }
     hasChanges() {
         const formChanged = this.userForm.dirty;
-        const jobChanged = this.selectedJobValue !== this.initialJobValue;
         const imageChanged = !!this.fileDataUser;
-        return formChanged || jobChanged || imageChanged;
-    }
-    toggleJob(job) {
-        this.jobTypes.forEach((j) => j.selected = false);
-        job.selected = true;
-        this.selectedJobValue = job.value;
-        console.log('Selected job value:', this.selectedJobValue);
-    }
-    isSelected(job) {
-        return this.selectedJobValue === job.value;
+        return formChanged || imageChanged;
     }
     selectRole(role) {
         if (!role)
@@ -5213,6 +5166,7 @@ class RoleSelectComponent {
         return this.userForm.controls;
     }
     uploadUserImage(event) {
+        this.isImageLoading = true;
         const file = event.target.files?.[0];
         if (!file)
             return;
@@ -5225,33 +5179,112 @@ class RoleSelectComponent {
         });
         this.saveAWSHeadShot();
     }
-    uploadFileBrowseHandler() {
-        console.log("123");
-        this.showLoader = true;
-        if (this.uploadToAws) {
-            this.saveAWSHeadShot();
+    selectFile(event) {
+        this.isresumeLoading = true;
+        this.fileData = event.target.files[0];
+        if (this.fileData) {
+            this.resumeName = this.fileData.name;
+            this.model.fileName = this.resumeName;
         }
+        this.saveAWSFile();
     }
-    go() {
-        // if (this.userForm.invalid) return;
-        const saved = profileSignal();
-        const hasExistingImage = saved?.userDetail?.headshotFileId || this.user?.headshotFileId;
-        const hasNewImage = this.fileDataUser;
-        if (!hasExistingImage && !hasNewImage) {
-            this.isImageRequired = true;
-            return;
-        }
-        if (!this.hasChanges()) {
-            this.store.nextStep();
+    async saveAWSFile() {
+        const fileType = this.fileData.type;
+        const fileExtension = fileType.split('/')[1] || fileType.split('/')[0] || 'file';
+        const fileName = `${new uuid().newId()}.${fileExtension}`;
+        const key = `User/${this.userId}/Resume/${fileName}`;
+        const params = { key, contentType: fileType, Expires: 300 };
+        const result = await this.fileService.uploadImageAsync(this.fileData, params);
+        console.log(result);
+        if (!result.success) {
             return;
         }
+        const files = {
+            fileName: this.fileData.name,
+            fileSize: this.fileData.size,
+            fileType: this.fileData.type,
+            fileLocation: result.publicUrl,
+            encrypted: true,
+            publicUrl: result.publicUrl
+        };
+        files.fileLocation = files.fileLocation.replace(/^https?:\/\/[^/]+\//, '');
+        files.publicUrl = files.publicUrl.replace(/^https?:\/\/[^/]+\//, '');
+        console.log(files);
+        this.fileService.awsFileUpload([files]).subscribe((res) => {
+            if (res?.[0]?.fileId) {
+                this.model.fileId = res[0].fileId;
+                this.model.fileUrl = res[0].publicUrl;
+                this.model.fileName = this.fileData.name;
+                this.awsFileUpdate.push({
+                    fileId: res?.[0]?.fileId,
+                    isActive: true,
+                });
+                this.previewresumeUrl = this.cloudfrontUrl + this.model.fileUrl;
+                console.log(this.previewresumeUrl);
+                console.log(this.previewUrl);
+                this.isresumeLoading = false;
+                this.saveResume();
+            }
+        });
+    }
+    saveResume() {
+        const form = this.userForm.value;
+        // this.userForm.patchValue({ reviewStatus: ReviewStatus.Resolved });
+        // const fullValue = this.userForm.getRawValue();
+        const apiPayload = {
+            // id: this.editingIndex >= 0
+            //   ? this.workStore.getExperience(this.editingIndex)?.id
+            //   : '00000000-0000-0000-0000-000000000000',
+            providerName: '',
+            userId: this.userId,
+            userName: form.firstName + form.lastName,
+            issuedState: '',
+            issuedBy: '',
+            issueDate: '',
+            expiryDate: '',
+            notes: '',
+            fileId: this.model?.fileId || null,
+            fileUrl: this.model?.fileUrl || null,
+            fileName: this.model?.fileName || null,
+            status: 2,
+            mainType: 4,
+            forUser: 2,
+            userHeadShotUrl: '',
+            isPrimary: false,
+            emailId: form.email,
+            phoneNumber: form.phoneNumber,
+            profileVisibility: true,
+            notify: true,
+            nationwide: false,
+            number: form.phoneNumber
+        };
+        this.userDocumentService
+            .createUserDocument(apiPayload)
+            .subscribe({
+            next: (res) => {
+                if (res?.failed) {
+                    const errorMsg = res.failures?.[0]?.message ||
+                        res.message ||
+                        'Save failed';
+                    alert(errorMsg);
+                    // this.proposalLoader = false;
+                    return;
+                }
+                this.loadFromApi(this.userId);
+                // this.workStore.loadFromApi(this.userId);
+                // this.isEditing.set(false);
+            },
+            error: () => {
+                // this.proposalLoader = false;
+            },
+        });
+    }
+    uploadFileBrowseHandler() {
+        console.log("123");
         this.showLoader = true;
-        if (hasNewImage) {
+        if (this.uploadToAws) {
             this.saveAWSHeadShot();
         }
-        else {
-            this.saveFinal();
-        }
     }
     async saveAWSHeadShot() {
         const saved = profileSignal();
@@ -5303,11 +5336,12 @@ class RoleSelectComponent {
                     headshotFileId: result.fileId,
                     headshotUrl: result.publicUrl
                 },
-                employeeType: this.selectedJobValue,
                 submitted: true
             });
+            this.isImageLoading = false;
         }
         catch (err) {
+            this.isImageLoading = false;
             console.error('Error uploading headshot:', err);
             this.showLoader = false;
         }
@@ -5328,7 +5362,6 @@ class RoleSelectComponent {
         const model = {
             providerName: this.providerName,
             providerId: this.providerId,
-            employeeType: this.selectedJobValue,
             UserRoleId: this.roleData.roleInfo.id,
             userDetail: this.bindUserDetails()
         };
@@ -5346,75 +5379,12 @@ class RoleSelectComponent {
                     headshotFileId: this.user?.headshotFileId,
                     headshotUrl: this.user?.headshotUrl
                 },
-                employeeType: this.selectedJobValue,
                 submitted: true
             });
             this.userForm.markAsPristine();
-            this.initialJobValue = this.selectedJobValue;
             this.fileDataUser = null;
             this.saveUserIndustries();
-            if (this.providerId === '00000000-0000-0000-0000-000000000000') {
-                this.store.nextStep();
-            }
-            else {
-                this.saveProviderUserMapping();
-            }
-        });
-    }
-    saveProviderUserMapping() {
-        const form = this.userForm.value;
-        const saved = profileSignal();
-        const currentEmployeeType = this.selectedJobValue;
-        const model = {
-            providerId: this.providerId,
-            userId: this.userId,
-            userName: `${form.firstName} ${form.lastName}`.trim(),
-            emailId: form.email,
-            phoneNumber: form.phoneNumber,
-            headshotUrl: saved?.userDetail?.headshotUrl ||
-                this.user?.headshotUrl ||
-                this.previewUrl,
-            address1: form.address1,
-            address2: form.address2,
-            city: form.city,
-            state: form.state,
-            zipcode: form.zipcode,
-            county: form.county,
-            country: form.country,
-            category: UserCategory.ManuallyAdded,
-            employeeType: currentEmployeeType,
-            status: ProviderUserMappingStatus.WaitingForApproval
-        };
-        this.showLoader = true;
-        let apiCall$;
-        if (!this.isMappingCreated) {
-            apiCall$ = this.provideruser.createProviderUserMapping(model);
-        }
-        else if (this.previousEmployeeType !== currentEmployeeType) {
-            apiCall$ = this.provideruser.updateProviderUserMapping(model);
-        }
-        else {
-            this.showLoader = false;
             this.store.nextStep();
-            return;
-        }
-        apiCall$.subscribe({
-            next: (res) => {
-                this.showLoader = false;
-                if (res?.failed) {
-                    this.userError = res.failures?.[0]?.message;
-                    return;
-                }
-                // ✅ persist existence
-                this.isMappingCreated = true;
-                this.previousEmployeeType = currentEmployeeType;
-                localStorage.setItem(this.mappingKey(), 'true');
-                this.store.nextStep();
-            },
-            error: (err) => {
-                this.showLoader = false;
-                this.userError = err?.error?.message || 'Something went wrong';
-            }
         });
     }
     bindUserDetails() {
@@ -5488,7 +5458,7 @@ class RoleSelectComponent {
     }
     AddressChangeUser(address) {
         var doorNumber = address.address_components.find((a) => { return a.types.includes("street_number"); })?.short_name;
-        doorNumber = doorNumber ? doorNumber + ', ' : '';
+        doorNumber = doorNumber ? doorNumber + '  ' : '';
         this.userForm.patchValue({
             address1: doorNumber +
                 address.address_components.find((a) => {
@@ -5528,13 +5498,13 @@ class RoleSelectComponent {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RoleSelectComponent, deps: [{ token: CredentialingStore }, { token: i2.Router }, { token: IndustryService }, { token: UserDetailService }, { token: FileService }, { token: ProvidersService }, { token: i6.TokenService }, { token: i3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    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    <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.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n            type=\"text\" class=\"form-control\" placeholder=\"Fist 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          <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          <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-12 col-sm-12 mt-3 mb-2\">\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>\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n            placeholder=\"Home Address 2\" />\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.city.invalid && (u.city.touched || u.city.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.city.invalid &&\r\n      (u.city.touched || u.city.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n              City is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.state.invalid && (u.state.touched || u.state.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.state.invalid &&\r\n      (u.state.touched || u.state.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n              State is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <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\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=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n            [ngClass]=\"{\r\n      'is-invalid':\r\n        u.country.invalid && (u.country.touched || u.country.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.country.invalid &&\r\n      (u.country.touched || u.country.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n              Country is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control block shadow-none\" id=\"inputPhone\" name=\"inputPhone\"\r\n            placeholder=\"Phone Number\" autocomplete=\"off\" formControlName=\"phoneNumber\" maxlength=\"14\"\r\n            (input)=\"phoneMask($event)\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.phoneNumber.invalid &&\r\n        (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.phoneNumber.invalid &&\r\n      (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n              Phone Number is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12\r\n         mt-3 mb-2\">\r\n          <ng-select class=\"w-100\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\" [multiple]=\"true\"\r\n            [searchable]=\"false\" [clearable]=\"false\" [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\"\r\n            id=\"userJobTitle\" [closeOnSelect]=\"false\" placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n          </ng-select>\r\n          <div *ngIf=\" u.userJobTitle.invalid &&\r\n      (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n              Job title is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n            formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n            bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n            id=\"yearsOfExperince\"></ng-select>\r\n\r\n          <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n      (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n              YearsOfExperience is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <ng-select class=\"w-100\" formControlName=\"industries\" [items]=\"industries\" [multiple]=\"true\"\r\n            [searchable]=\"false\" [clearable]=\"true\" [ngClass]=\"{ 'is-invalid':u?.industries?.errors }\"\r\n            bindLabel=\"industryName\" bindValue=\"id\" [closeOnSelect]=\"false\" id=\"industries\"\r\n            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\r\n          </ng-select>\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\r\n      <div class=\"form-group mb-2 mt-3 position-relative\">\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        <img *ngIf=\"previewUrl\" [src]=\"previewUrl\" alt=\"Profile Preview\" class=\"preview-image mt-2\" />\r\n        <div *ngIf=\"isImageRequired\" class=\"invalid-feedback d-block ms-1\">\r\n          Please Upload Profile Image\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\r\n\r\n    </div>\r\n  </div>\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</div>", styles: [".preview-image{width:250px;height:100px;object-fit:contain;margin-top:5px;border-radius:5px}.upload-icon{position:absolute;right:25px;top:2px;width:18px;height:18px;cursor:pointer}::ng-deep .ng-select .ng-select-container{width:101%}.form-control{font-size:14px}.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;margin-bottom:1rem}.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}::ng-deep .ng-select .ng-select-container{height:45px;border-radius:7px;padding-top:0}ng-select.ng-select-multiple .ng-value-container{align-items:center!important}ng-select.ng-select-multiple .ng-placeholder{position:absolute;top:50%;transform:translateY(-50%);color:#000;font-size:14px;padding-left:2px;padding-top:3px}.profile-field{margin-top:-10px}.profile-field input{line-height:30px;margin:-10px 3px 3px}.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}.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}\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.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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RoleSelectComponent, deps: [{ token: CredentialingStore }, { token: UserDocumentService }, { token: i2.Router }, { token: IndustryService }, { token: UserDetailService }, { token: FileService }, { token: ProvidersService }, { token: i6.TokenService }, { token: i3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    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    <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          <label class=\"note-label\">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\">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\">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\">Home Address 1*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\"\r\n            ngx-google-places-autocomplete [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.address1.invalid && (u.address1.touched || u.address1.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.address1.invalid &&\r\n      (u.address1.touched || u.address1.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n              Home Address 1 is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label\">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\">Country*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n            [ngClass]=\"{\r\n      'is-invalid':\r\n        u.country.invalid && (u.country.touched || u.country.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.country.invalid &&\r\n      (u.country.touched || u.country.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n              Country is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n      <!-- <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n            placeholder=\"Home Address 2\" />\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.city.invalid && (u.city.touched || u.city.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.city.invalid &&\r\n      (u.city.touched || u.city.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n              City is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.state.invalid && (u.state.touched || u.state.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.state.invalid &&\r\n      (u.state.touched || u.state.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n              State is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div> -->\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label\">Phone Number*</label>\r\n\r\n          <input type=\"text\" class=\"form-control block shadow-none\" id=\"inputPhone\" name=\"inputPhone\"\r\n            placeholder=\"Phone Number\" autocomplete=\"off\" formControlName=\"phoneNumber\" maxlength=\"14\"\r\n            (input)=\"phoneMask($event)\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.phoneNumber.invalid &&\r\n        (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.phoneNumber.invalid &&\r\n      (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n              Phone Number is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-2\">\r\n          <label class=\"note-label\">Years of experience*</label>\r\n\r\n          <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n            formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n            bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n            id=\"yearsOfExperince\"></ng-select>\r\n\r\n          <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n      (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n              YearsOfExperience is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-sm-12 col-md-4\">\r\n          <div class=\"form-group mb-2 mt-2 position-relative\">\r\n            <label class=\"note-label\">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 *ngIf=\"isImageRequired\" class=\"invalid-feedback d-block ms-1\">\r\n              Please Upload Profile Image\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n\r\n\r\n      </div>\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12\r\n         mt-3 mb-2\">\r\n          <label class=\"note-label\">Job Title*</label>\r\n\r\n          <ng-select class=\"w-100\" class=\"custom-ng-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n            [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n            [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n            placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n          </ng-select>\r\n          <div *ngIf=\" u.userJobTitle.invalid &&\r\n      (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n              Job title is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label\">Industry*</label>\r\n\r\n          <ng-select class=\"w-100 custom-ng-select\" formControlName=\"industries\" [items]=\"industries\" [multiple]=\"true\"\r\n            [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\" [closeOnSelect]=\"false\"\r\n            id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n\r\n            <!-- Dropdown option -->\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n              <span class=\"form-check\">\r\n                <span class=\"form-check-input-wrapper\">\r\n                  <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                </span>\r\n                {{ item.industryName }}\r\n              </span>\r\n            </ng-template>\r\n\r\n            <!-- Selected label -->\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n              <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n              </span>\r\n            </ng-template>\r\n            <div *ngIf=\"u.industries.invalid &&\r\n      (u.industries.touched || u.industries.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.industries.errors.required\">\r\n                Industry is required\r\n              </div>\r\n            </div>\r\n          </ng-select>\r\n        </div>\r\n        <div class=\"form-group col-sm-12 col-md-4\">\r\n          <div class=\"image-wrapper\">\r\n            <!-- Spinner -->\r\n            <div *ngIf=\"isImageLoading\" class=\"spinner\"></div>\r\n            <!-- Image -->\r\n            <img *ngIf=\"previewUrl\" [src]=\"previewUrl\" alt=\"Profile Preview\" class=\"preview-image mt-2\"\r\n              (load)=\"onImageLoad()\" />\r\n          </div>\r\n          <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n            <div>{{ userError }}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </form>\r\n\r\n\r\n    <div class=\"d-flex flex-wrap justify-content-between row\">\r\n      <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Resume Submission</h2>\r\n      <p class=\"note\">Submit your resume here</p>\r\n      <div class=\"col-sm-12 col-md-8\">\r\n        <div class=\"form-group mb-2 mt-3 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\" (click)=\"fileInput.click()\" />\r\n          <div *ngIf=\"isResumeRequired\" class=\"invalid-feedback d-block ms-1\">\r\n            Upload your resume\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"d-flex flex-wrap justify-content-between row\">\r\n      <div class=\"col-sm-12 col-md-8\" style=\"padding-left: 15px;\">\r\n        <div class=\"resume-wrapper\">\r\n          <div *ngIf=\"isresumeLoading\" class=\"spinner-resume\"></div>\r\n          <a *ngIf=\"previewresumeUrl\" [href]=\"previewresumeUrl\" class=\" mt-2\" target=\"_blank\">\r\n            <span> {{ resumeName }}</span>\r\n          </a>\r\n           <a *ngIf=\"list.length > 0\" [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;margin-bottom:1rem}.role-selection-container .note-label{font-size:.875rem;color:#6b7280;margin-bottom:1rem;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:-20px;margin-left:-20px;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;margin:-10px 3px 3px}.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:28px!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:15px;font-size:14px;color:#6b7280}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i10.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i10.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "directive", type: GooglePlaceDirective, selector: "[ngx-google-places-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RoleSelectComponent, decorators: [{
             type: Component,
-            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    <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.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n            type=\"text\" class=\"form-control\" placeholder=\"Fist 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          <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          <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-12 col-sm-12 mt-3 mb-2\">\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>\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n            placeholder=\"Home Address 2\" />\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.city.invalid && (u.city.touched || u.city.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.city.invalid &&\r\n      (u.city.touched || u.city.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n              City is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.state.invalid && (u.state.touched || u.state.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.state.invalid &&\r\n      (u.state.touched || u.state.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n              State is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <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\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=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n            [ngClass]=\"{\r\n      'is-invalid':\r\n        u.country.invalid && (u.country.touched || u.country.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.country.invalid &&\r\n      (u.country.touched || u.country.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n              Country is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control block shadow-none\" id=\"inputPhone\" name=\"inputPhone\"\r\n            placeholder=\"Phone Number\" autocomplete=\"off\" formControlName=\"phoneNumber\" maxlength=\"14\"\r\n            (input)=\"phoneMask($event)\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.phoneNumber.invalid &&\r\n        (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.phoneNumber.invalid &&\r\n      (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n              Phone Number is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12\r\n         mt-3 mb-2\">\r\n          <ng-select class=\"w-100\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\" [multiple]=\"true\"\r\n            [searchable]=\"false\" [clearable]=\"false\" [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\"\r\n            id=\"userJobTitle\" [closeOnSelect]=\"false\" placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n          </ng-select>\r\n          <div *ngIf=\" u.userJobTitle.invalid &&\r\n      (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n              Job title is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n            formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n            bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n            id=\"yearsOfExperince\"></ng-select>\r\n\r\n          <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n      (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n              YearsOfExperience is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <ng-select class=\"w-100\" formControlName=\"industries\" [items]=\"industries\" [multiple]=\"true\"\r\n            [searchable]=\"false\" [clearable]=\"true\" [ngClass]=\"{ 'is-invalid':u?.industries?.errors }\"\r\n            bindLabel=\"industryName\" bindValue=\"id\" [closeOnSelect]=\"false\" id=\"industries\"\r\n            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\r\n          </ng-select>\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\r\n      <div class=\"form-group mb-2 mt-3 position-relative\">\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        <img *ngIf=\"previewUrl\" [src]=\"previewUrl\" alt=\"Profile Preview\" class=\"preview-image mt-2\" />\r\n        <div *ngIf=\"isImageRequired\" class=\"invalid-feedback d-block ms-1\">\r\n          Please Upload Profile Image\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\r\n\r\n    </div>\r\n  </div>\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</div>", styles: [".preview-image{width:250px;height:100px;object-fit:contain;margin-top:5px;border-radius:5px}.upload-icon{position:absolute;right:25px;top:2px;width:18px;height:18px;cursor:pointer}::ng-deep .ng-select .ng-select-container{width:101%}.form-control{font-size:14px}.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;margin-bottom:1rem}.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}::ng-deep .ng-select .ng-select-container{height:45px;border-radius:7px;padding-top:0}ng-select.ng-select-multiple .ng-value-container{align-items:center!important}ng-select.ng-select-multiple .ng-placeholder{position:absolute;top:50%;transform:translateY(-50%);color:#000;font-size:14px;padding-left:2px;padding-top:3px}.profile-field{margin-top:-10px}.profile-field input{line-height:30px;margin:-10px 3px 3px}.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}.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}\n"] }]
-        }], ctorParameters: () => [{ type: CredentialingStore }, { type: i2.Router }, { type: IndustryService }, { type: UserDetailService }, { type: FileService }, { type: ProvidersService }, { type: i6.TokenService }, { type: i3.FormBuilder }], propDecorators: { backToParent: [{
+            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    <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          <label class=\"note-label\">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\">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\">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\">Home Address 1*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\"\r\n            ngx-google-places-autocomplete [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.address1.invalid && (u.address1.touched || u.address1.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.address1.invalid &&\r\n      (u.address1.touched || u.address1.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n              Home Address 1 is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label\">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\">Country*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n            [ngClass]=\"{\r\n      'is-invalid':\r\n        u.country.invalid && (u.country.touched || u.country.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.country.invalid &&\r\n      (u.country.touched || u.country.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n              Country is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n      <!-- <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n            placeholder=\"Home Address 2\" />\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.city.invalid && (u.city.touched || u.city.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.city.invalid &&\r\n      (u.city.touched || u.city.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n              City is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.state.invalid && (u.state.touched || u.state.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.state.invalid &&\r\n      (u.state.touched || u.state.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n              State is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div> -->\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label\">Phone Number*</label>\r\n\r\n          <input type=\"text\" class=\"form-control block shadow-none\" id=\"inputPhone\" name=\"inputPhone\"\r\n            placeholder=\"Phone Number\" autocomplete=\"off\" formControlName=\"phoneNumber\" maxlength=\"14\"\r\n            (input)=\"phoneMask($event)\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.phoneNumber.invalid &&\r\n        (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.phoneNumber.invalid &&\r\n      (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n              Phone Number is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-2\">\r\n          <label class=\"note-label\">Years of experience*</label>\r\n\r\n          <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n            formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n            bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n            id=\"yearsOfExperince\"></ng-select>\r\n\r\n          <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n      (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n              YearsOfExperience is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-sm-12 col-md-4\">\r\n          <div class=\"form-group mb-2 mt-2 position-relative\">\r\n            <label class=\"note-label\">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 *ngIf=\"isImageRequired\" class=\"invalid-feedback d-block ms-1\">\r\n              Please Upload Profile Image\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n\r\n\r\n      </div>\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12\r\n         mt-3 mb-2\">\r\n          <label class=\"note-label\">Job Title*</label>\r\n\r\n          <ng-select class=\"w-100\" class=\"custom-ng-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n            [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n            [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n            placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n          </ng-select>\r\n          <div *ngIf=\" u.userJobTitle.invalid &&\r\n      (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n              Job title is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label\">Industry*</label>\r\n\r\n          <ng-select class=\"w-100 custom-ng-select\" formControlName=\"industries\" [items]=\"industries\" [multiple]=\"true\"\r\n            [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\" [closeOnSelect]=\"false\"\r\n            id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n\r\n            <!-- Dropdown option -->\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n              <span class=\"form-check\">\r\n                <span class=\"form-check-input-wrapper\">\r\n                  <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                </span>\r\n                {{ item.industryName }}\r\n              </span>\r\n            </ng-template>\r\n\r\n            <!-- Selected label -->\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n              <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n              </span>\r\n            </ng-template>\r\n            <div *ngIf=\"u.industries.invalid &&\r\n      (u.industries.touched || u.industries.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.industries.errors.required\">\r\n                Industry is required\r\n              </div>\r\n            </div>\r\n          </ng-select>\r\n        </div>\r\n        <div class=\"form-group col-sm-12 col-md-4\">\r\n          <div class=\"image-wrapper\">\r\n            <!-- Spinner -->\r\n            <div *ngIf=\"isImageLoading\" class=\"spinner\"></div>\r\n            <!-- Image -->\r\n            <img *ngIf=\"previewUrl\" [src]=\"previewUrl\" alt=\"Profile Preview\" class=\"preview-image mt-2\"\r\n              (load)=\"onImageLoad()\" />\r\n          </div>\r\n          <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n            <div>{{ userError }}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </form>\r\n\r\n\r\n    <div class=\"d-flex flex-wrap justify-content-between row\">\r\n      <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Resume Submission</h2>\r\n      <p class=\"note\">Submit your resume here</p>\r\n      <div class=\"col-sm-12 col-md-8\">\r\n        <div class=\"form-group mb-2 mt-3 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\" (click)=\"fileInput.click()\" />\r\n          <div *ngIf=\"isResumeRequired\" class=\"invalid-feedback d-block ms-1\">\r\n            Upload your resume\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"d-flex flex-wrap justify-content-between row\">\r\n      <div class=\"col-sm-12 col-md-8\" style=\"padding-left: 15px;\">\r\n        <div class=\"resume-wrapper\">\r\n          <div *ngIf=\"isresumeLoading\" class=\"spinner-resume\"></div>\r\n          <a *ngIf=\"previewresumeUrl\" [href]=\"previewresumeUrl\" class=\" mt-2\" target=\"_blank\">\r\n            <span> {{ resumeName }}</span>\r\n          </a>\r\n           <a *ngIf=\"list.length > 0\" [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;margin-bottom:1rem}.role-selection-container .note-label{font-size:.875rem;color:#6b7280;margin-bottom:1rem;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:-20px;margin-left:-20px;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;margin:-10px 3px 3px}.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:28px!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:15px;font-size:14px;color:#6b7280}\n"] }]
+        }], ctorParameters: () => [{ type: CredentialingStore }, { type: UserDocumentService }, { type: i2.Router }, { type: IndustryService }, { type: UserDetailService }, { type: FileService }, { type: ProvidersService }, { type: i6.TokenService }, { type: i3.FormBuilder }], propDecorators: { backToParent: [{
                 type: Output
             }], roleData: [{
                 type: Input
@@ -28120,11 +28090,11 @@ class Step2CoverageComponent {
         }));
     }
     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 });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: Step2CoverageComponent, isStandalone: false, selector: "app-coverage", inputs: { providerId: "providerId", providerName: "providerName" }, ngImport: i0, template: "<div class=\"coverage-container\">\r\n  <div class=\"first-section\">\r\n    <h4 class=\"head\">Coverage Area</h4>\r\n    <!-- <p>Let's start with the basics. Where are you located?</p>\r\n    <span>We use this to match you with jobs nearby</span>\r\n    <div class=\"location-inputs\">\r\n      <input type=\"text\" placeholder=\"City\" [(ngModel)]=\"city\">\r\n      <input type=\"text\" placeholder=\"State\" [(ngModel)]=\"state\">\r\n    </div> -->\r\n  </div>\r\n\r\n  <div class=\"coverage-options\">\r\n    <div class=\"d-flex justify-content-between\">\r\n      <h6 class=\"text-secondary view-card fw-semibold\" style=\"font-size: 14px;\"> Where can you complete assignments?\r\n      </h6>\r\n      <div class=\"d-flex gap-1\">\r\n        <label class=\"form-check-label\">Show Map</label>\r\n        <div class=\"form-check form-switch\">\r\n          <input class=\"form-check-input\" type=\"checkbox\" (change)=\"toggleMap()\" role=\"switch\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <hr class=\"m-0 border-3\">\r\n\r\n    <div class=\"pb-1 d-flex align-items-center mt-2\">\r\n      <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length > 0\"></span>\r\n      <span class=\"view-card text-secondary ms-3\" style=\"font-size: 14px;\">\r\n        My Current Coverage Area\r\n      </span>\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"cursor: pointer;\" (click)=\"skip()\">\r\n      <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length == 0\"></span>\r\n      <span class=\"view-card text-secondary ms-3\" style=\"font-size: 14px;\">\r\n        Not Applicable\r\n      </span>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"state-selector\">\r\n    <div class=\"row pb-2\">\r\n      <div class=\"col-md-12\">\r\n        <div class=\"position-relative\">\r\n          <!-- ng-select -->\r\n          <ng-select [clearable]=\"true\" [multiple]=\"true\" (change)=\"setSelectedStates($event)\" [items]=\"states\"\r\n            [(ngModel)]=\"selectedStates\" bindLabel=\"stateName\" bindValue=\"stateCode\" [closeOnSelect]=\"false\"\r\n            placeholder=\"Select State\" id=\"reqStates\" [loading]=\"isStatesLoading\">\r\n            <!-- Option Template -->\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n              <span class=\"form-check\">\r\n                <span class=\"form-check-input-wrapper\">\r\n                  <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                </span>\r\n                {{ item.stateName }}\r\n              </span>\r\n            </ng-template>\r\n\r\n            <!-- Label Template -->\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <ng-container *ngIf=\"!isStatesLoading\">\r\n                <span class=\"ng-value-label\">{{ item.stateName }}</span>\r\n                <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                  <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n                </span>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-select>\r\n        </div>\r\n\r\n\r\n      </div>\r\n    </div>\r\n    <div class=\"border-0 empty-message mt-4\" *ngIf=\"!isStatesLoading && coverages.length == 0\">\r\n      <div class=\"text-center text-secondary\" style=\"font-size: 14px;\">No States Selected yet</div>\r\n    </div>\r\n    <div class=\"coverage-options\">\r\n      <div class=\"col-md-10 col-12 py-2 map-wrapper\" [class.open]=\"showMap\">\r\n        <us-map [filteredLocations]=\"filteredLocations\"></us-map>\r\n      </div>\r\n    </div>\r\n    <div class=\"col-12 mt-4\" *ngIf=\"!isStatesLoading\">\r\n      <div *ngIf=\"coverages.length > 0\">\r\n        <div class=\"col-8 p-0 ms-2\">\r\n          <h4 class=\"head\">Coverage Area\r\n            Counties</h4>\r\n        </div>\r\n      </div>\r\n      <div class=\"row pt-2 pb-2\">\r\n        <div class=\"col-12 \">\r\n          <div class=\"row\">\r\n            <div class=\"col-12\" *ngFor=\"let coverage of coverages; let coverageIndex = index\">\r\n              <div class=\"row m-0\" style=\"background: #dedede;\">\r\n                <div class=\"col-10\" style=\"margin-left: 0px;padding-left: 5px !important;\">\r\n                  <div class=\"form-group my-2\">\r\n                    <div class=\"custom-control custom-checkbox\">\r\n                      <input type=\"checkbox\" 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=\"ms-4 mt-1 position-absolute\"\r\n       [attr.for]=\"'stateCheckbox' + coverage.state + coverageIndex\">\r\n  {{ coverage.state | stateName }}\r\n</label>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-2\" style=\"display: flex;\r\n    justify-content: flex-end;\r\n    align-items: center;\r\n    height: 21px;\r\n    \">\r\n                  <img\r\n  class=\"mt-2 pt-2 pointer\"\r\n  [src]=\"coverage?.isShow\r\n    ? '/assets/images/icons/arrow-up.svg'\r\n    : '/assets/images/icons/arrow-down.svg'\"\r\n  alt=\"toggle\"\r\n  (click)=\"coverage.isShow = !coverage?.isShow\"\r\n/>\r\n                </div>\r\n                <span></span>\r\n              </div>\r\n              <hr class=\"mt-0\" />\r\n              <ng-container *ngIf=\"coverage?.isShow\">\r\n                <div class=\"form-group mb-1\">\r\n                  <input type=\"text\" class=\"font-default form-check-inline form-control h-37\"\r\n                    placeholder=\"Select Counties In {{ coverage.state | stateName }}\" [(ngModel)]=\"coverage.query\" />\r\n                </div>\r\n                <div class=\"row m-2\" style=\"height: 160px;overflow-y: auto;padding-left: 1.6rem;\">\r\n                  <div class=\"list-group-item col-3 p-1\"\r\n                    *ngFor=\"let county of coverage.counties | SearchBy: 'countyName':coverage.query; let countyIndex = index\">\r\n                    <div class=\"form-check\">\r\n                      <input class=\"form-check-input\" type=\"checkbox\"\r\n                        [id]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\"\r\n                        [(ngModel)]=\"county.checked\"\r\n                        (change)=\"onChangedCounty($event, coverage.state, county.countyName)\" />\r\n                      <label class=\"form-check-label\"\r\n                        [for]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\">\r\n                        {{ county.countyName }}\r\n                      </label>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"previousStep()\">Back</button>\r\n    <div class=\"right-actions\">\r\n  <button type=\"button\" class=\"secondary\" (click)=\"skip()\">\r\n        Skip\r\n      </button>\r\n      <button type=\"button\" class=\"primary\"  [disabled]=\"coverageSave\" [ng2-loading]=\"coverageSave\"\r\n        (click)=\"saveCoverage()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n\r\n</div>", styles: [".coverage-container{max-width:1000px;margin:0 auto;padding:2rem;min-height:300px}.coverage-container .form-check-label{color:#69707d}.coverage-container .head{margin-bottom:.5rem;font-size:20px;font-weight:600;color:#69707d}.coverage-container p{font-size:16px;font-weight:500;color:#6b7280;margin-bottom:7px;margin-top:25px}.coverage-container .first-section span{color:#6b7280}.coverage-container .location-inputs{display:flex;gap:1rem;margin-bottom:5rem;margin-top:20px}.coverage-container .location-inputs input{flex:1;padding:5px 15px;border:1px solid #d1d5db;border-radius:.375rem;height:45px}.coverage-container .state-selector .empty-message{width:100%;padding:1rem;background-color:#f3f4f6;text-align:center;color:#6b7280;border-radius:.375rem}.coverage-container .state-selector .custom-control{font-size:15px;display:flex;align-items:center;gap:7px;color:#69707d;padding-left:13px}.coverage-container .state-selector .custom-control-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .state-selector .form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .coverage-options{margin-bottom:1rem}.coverage-container .coverage-options label{font-size:.875rem;display:flex;align-items:center;gap:.25rem}.coverage-container .coverage-options label .show-map{margin-left:auto}.coverage-container .coverage-options .icon-black{filter:brightness(0) saturate(100%) invert(10%) sepia(47%) saturate(3454%) hue-rotate(184deg) brightness(98%) contrast(101%)}.coverage-container .coverage-options .icon-gray{filter:brightness(0) saturate(100%) invert(100%) sepia(4%) saturate(29%) hue-rotate(68deg) brightness(112%) contrast(80%)}.coverage-container .coverage-options .form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .coverage-options .square-box{width:12px;height:12px;border:2px solid;display:inline-block}.coverage-container .coverage-options .square-box.black{background:#002b49;border:0;width:15px;height:14px}.coverage-container .coverage-options .square-box.gray{border:1px solid rgba(128,128,128,.231372549)!important;border:0;width:15px;height:15px}.coverage-container .coverage-options .map-wrapper{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s ease,opacity .3s ease}.coverage-container .coverage-options .map-wrapper>*{overflow:hidden}.coverage-container .coverage-options .map-wrapper.open{grid-template-rows:1fr;opacity:1}.coverage-container .navigation-buttons{display:flex;justify-content:flex-end;gap:1rem;margin-top:70px;margin-bottom:50px}.coverage-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer;min-width:18%;min-height:50px}.coverage-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer;min-width:18%;min-height:50px}.coverage-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}::ng-deep .ng-select .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:10px}.custom-checkbox1{display:inline-block;width:15px;height:15px;border:1px solid #ccc;margin-right:8px;vertical-align:middle;position:relative;cursor:pointer;border-radius:3px;background-color:#fff}.custom-checkbox2{display:inline-block;width:15px;height:15px;border:1px solid #ccc;vertical-align:middle;position:relative;cursor:pointer;border-radius:3px;background-color:#fff}.custom-checkbox2.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox2.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.custom-checkbox1.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox1.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.select-loader{position:absolute;top:-28px;left:0;font-size:12px;color:#4077ad;display:flex;align-items:center;gap:6px}::ng-deep .form-check{display:block;min-height:1.5rem;margin-bottom:.125rem}.right-actions{display:flex;gap:16px}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border:none;font-size:14px;cursor:pointer;border-radius:5px}button.primary{background-color:#4077ad;color:#fff;border-radius:5px}button.secondary{background-color:#d5d6da;color:#525862;border-radius:5px}button:disabled{background-color:#9ca3af;cursor:not-allowed}.icon-color{cursor:pointer;background:transparent;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UsMapComponent, selector: "us-map", inputs: ["selectedStates", "allowedStates", "isReadOnly", "filteredLocations"], outputs: ["onMapClick"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i10.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i10.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: SearchPipe, name: "SearchBy" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
+    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: 8px;\">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 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}\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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Step2CoverageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-coverage', standalone: false, template: "<div class=\"coverage-container\">\r\n  <div class=\"first-section\">\r\n    <h4 class=\"head\">Coverage Area</h4>\r\n    <!-- <p>Let's start with the basics. Where are you located?</p>\r\n    <span>We use this to match you with jobs nearby</span>\r\n    <div class=\"location-inputs\">\r\n      <input type=\"text\" placeholder=\"City\" [(ngModel)]=\"city\">\r\n      <input type=\"text\" placeholder=\"State\" [(ngModel)]=\"state\">\r\n    </div> -->\r\n  </div>\r\n\r\n  <div class=\"coverage-options\">\r\n    <div class=\"d-flex justify-content-between\">\r\n      <h6 class=\"text-secondary view-card fw-semibold\" style=\"font-size: 14px;\"> Where can you complete assignments?\r\n      </h6>\r\n      <div class=\"d-flex gap-1\">\r\n        <label class=\"form-check-label\">Show Map</label>\r\n        <div class=\"form-check form-switch\">\r\n          <input class=\"form-check-input\" type=\"checkbox\" (change)=\"toggleMap()\" role=\"switch\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <hr class=\"m-0 border-3\">\r\n\r\n    <div class=\"pb-1 d-flex align-items-center mt-2\">\r\n      <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length > 0\"></span>\r\n      <span class=\"view-card text-secondary ms-3\" style=\"font-size: 14px;\">\r\n        My Current Coverage Area\r\n      </span>\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"cursor: pointer;\" (click)=\"skip()\">\r\n      <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length == 0\"></span>\r\n      <span class=\"view-card text-secondary ms-3\" style=\"font-size: 14px;\">\r\n        Not Applicable\r\n      </span>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"state-selector\">\r\n    <div class=\"row pb-2\">\r\n      <div class=\"col-md-12\">\r\n        <div class=\"position-relative\">\r\n          <!-- ng-select -->\r\n          <ng-select [clearable]=\"true\" [multiple]=\"true\" (change)=\"setSelectedStates($event)\" [items]=\"states\"\r\n            [(ngModel)]=\"selectedStates\" bindLabel=\"stateName\" bindValue=\"stateCode\" [closeOnSelect]=\"false\"\r\n            placeholder=\"Select State\" id=\"reqStates\" [loading]=\"isStatesLoading\">\r\n            <!-- Option Template -->\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n              <span class=\"form-check\">\r\n                <span class=\"form-check-input-wrapper\">\r\n                  <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                </span>\r\n                {{ item.stateName }}\r\n              </span>\r\n            </ng-template>\r\n\r\n            <!-- Label Template -->\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <ng-container *ngIf=\"!isStatesLoading\">\r\n                <span class=\"ng-value-label\">{{ item.stateName }}</span>\r\n                <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                  <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n                </span>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-select>\r\n        </div>\r\n\r\n\r\n      </div>\r\n    </div>\r\n    <div class=\"border-0 empty-message mt-4\" *ngIf=\"!isStatesLoading && coverages.length == 0\">\r\n      <div class=\"text-center text-secondary\" style=\"font-size: 14px;\">No States Selected yet</div>\r\n    </div>\r\n    <div class=\"coverage-options\">\r\n      <div class=\"col-md-10 col-12 py-2 map-wrapper\" [class.open]=\"showMap\">\r\n        <us-map [filteredLocations]=\"filteredLocations\"></us-map>\r\n      </div>\r\n    </div>\r\n    <div class=\"col-12 mt-4\" *ngIf=\"!isStatesLoading\">\r\n      <div *ngIf=\"coverages.length > 0\">\r\n        <div class=\"col-8 p-0 ms-2\">\r\n          <h4 class=\"head\">Coverage Area\r\n            Counties</h4>\r\n        </div>\r\n      </div>\r\n      <div class=\"row pt-2 pb-2\">\r\n        <div class=\"col-12 \">\r\n          <div class=\"row\">\r\n            <div class=\"col-12\" *ngFor=\"let coverage of coverages; let coverageIndex = index\">\r\n              <div class=\"row m-0\" style=\"background: #dedede;\">\r\n                <div class=\"col-10\" style=\"margin-left: 0px;padding-left: 5px !important;\">\r\n                  <div class=\"form-group my-2\">\r\n                    <div class=\"custom-control custom-checkbox\">\r\n                      <input type=\"checkbox\" 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=\"ms-4 mt-1 position-absolute\"\r\n       [attr.for]=\"'stateCheckbox' + coverage.state + coverageIndex\">\r\n  {{ coverage.state | stateName }}\r\n</label>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-2\" style=\"display: flex;\r\n    justify-content: flex-end;\r\n    align-items: center;\r\n    height: 21px;\r\n    \">\r\n                  <img\r\n  class=\"mt-2 pt-2 pointer\"\r\n  [src]=\"coverage?.isShow\r\n    ? '/assets/images/icons/arrow-up.svg'\r\n    : '/assets/images/icons/arrow-down.svg'\"\r\n  alt=\"toggle\"\r\n  (click)=\"coverage.isShow = !coverage?.isShow\"\r\n/>\r\n                </div>\r\n                <span></span>\r\n              </div>\r\n              <hr class=\"mt-0\" />\r\n              <ng-container *ngIf=\"coverage?.isShow\">\r\n                <div class=\"form-group mb-1\">\r\n                  <input type=\"text\" class=\"font-default form-check-inline form-control h-37\"\r\n                    placeholder=\"Select Counties In {{ coverage.state | stateName }}\" [(ngModel)]=\"coverage.query\" />\r\n                </div>\r\n                <div class=\"row m-2\" style=\"height: 160px;overflow-y: auto;padding-left: 1.6rem;\">\r\n                  <div class=\"list-group-item col-3 p-1\"\r\n                    *ngFor=\"let county of coverage.counties | SearchBy: 'countyName':coverage.query; let countyIndex = index\">\r\n                    <div class=\"form-check\">\r\n                      <input class=\"form-check-input\" type=\"checkbox\"\r\n                        [id]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\"\r\n                        [(ngModel)]=\"county.checked\"\r\n                        (change)=\"onChangedCounty($event, coverage.state, county.countyName)\" />\r\n                      <label class=\"form-check-label\"\r\n                        [for]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\">\r\n                        {{ county.countyName }}\r\n                      </label>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"previousStep()\">Back</button>\r\n    <div class=\"right-actions\">\r\n  <button type=\"button\" class=\"secondary\" (click)=\"skip()\">\r\n        Skip\r\n      </button>\r\n      <button type=\"button\" class=\"primary\"  [disabled]=\"coverageSave\" [ng2-loading]=\"coverageSave\"\r\n        (click)=\"saveCoverage()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n\r\n</div>", styles: [".coverage-container{max-width:1000px;margin:0 auto;padding:2rem;min-height:300px}.coverage-container .form-check-label{color:#69707d}.coverage-container .head{margin-bottom:.5rem;font-size:20px;font-weight:600;color:#69707d}.coverage-container p{font-size:16px;font-weight:500;color:#6b7280;margin-bottom:7px;margin-top:25px}.coverage-container .first-section span{color:#6b7280}.coverage-container .location-inputs{display:flex;gap:1rem;margin-bottom:5rem;margin-top:20px}.coverage-container .location-inputs input{flex:1;padding:5px 15px;border:1px solid #d1d5db;border-radius:.375rem;height:45px}.coverage-container .state-selector .empty-message{width:100%;padding:1rem;background-color:#f3f4f6;text-align:center;color:#6b7280;border-radius:.375rem}.coverage-container .state-selector .custom-control{font-size:15px;display:flex;align-items:center;gap:7px;color:#69707d;padding-left:13px}.coverage-container .state-selector .custom-control-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .state-selector .form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .coverage-options{margin-bottom:1rem}.coverage-container .coverage-options label{font-size:.875rem;display:flex;align-items:center;gap:.25rem}.coverage-container .coverage-options label .show-map{margin-left:auto}.coverage-container .coverage-options .icon-black{filter:brightness(0) saturate(100%) invert(10%) sepia(47%) saturate(3454%) hue-rotate(184deg) brightness(98%) contrast(101%)}.coverage-container .coverage-options .icon-gray{filter:brightness(0) saturate(100%) invert(100%) sepia(4%) saturate(29%) hue-rotate(68deg) brightness(112%) contrast(80%)}.coverage-container .coverage-options .form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .coverage-options .square-box{width:12px;height:12px;border:2px solid;display:inline-block}.coverage-container .coverage-options .square-box.black{background:#002b49;border:0;width:15px;height:14px}.coverage-container .coverage-options .square-box.gray{border:1px solid rgba(128,128,128,.231372549)!important;border:0;width:15px;height:15px}.coverage-container .coverage-options .map-wrapper{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s ease,opacity .3s ease}.coverage-container .coverage-options .map-wrapper>*{overflow:hidden}.coverage-container .coverage-options .map-wrapper.open{grid-template-rows:1fr;opacity:1}.coverage-container .navigation-buttons{display:flex;justify-content:flex-end;gap:1rem;margin-top:70px;margin-bottom:50px}.coverage-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer;min-width:18%;min-height:50px}.coverage-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer;min-width:18%;min-height:50px}.coverage-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}::ng-deep .ng-select .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:10px}.custom-checkbox1{display:inline-block;width:15px;height:15px;border:1px solid #ccc;margin-right:8px;vertical-align:middle;position:relative;cursor:pointer;border-radius:3px;background-color:#fff}.custom-checkbox2{display:inline-block;width:15px;height:15px;border:1px solid #ccc;vertical-align:middle;position:relative;cursor:pointer;border-radius:3px;background-color:#fff}.custom-checkbox2.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox2.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.custom-checkbox1.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox1.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.select-loader{position:absolute;top:-28px;left:0;font-size:12px;color:#4077ad;display:flex;align-items:center;gap:6px}::ng-deep .form-check{display:block;min-height:1.5rem;margin-bottom:.125rem}.right-actions{display:flex;gap:16px}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border:none;font-size:14px;cursor:pointer;border-radius:5px}button.primary{background-color:#4077ad;color:#fff;border-radius:5px}button.secondary{background-color:#d5d6da;color:#525862;border-radius:5px}button:disabled{background-color:#9ca3af;cursor:not-allowed}.icon-color{cursor:pointer;background:transparent;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}\n"] }]
+            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: 8px;\">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 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}\n"] }]
         }], ctorParameters: () => [{ type: CredentialingStore }, { type: UsMapLatestService }, { type: PostalCodeServices }, { type: UserCoverageAreaService }, { type: AlertService }, { type: i6.TokenService }], propDecorators: { providerId: [{
                 type: Input
             }], providerName: [{
@@ -28753,12 +28723,14 @@ class InitialProcessComponent {
     roleContextService;
     libConfig;
     isAgreeEnabled = false;
+    logo = {};
     uploadToAws = true;
     selectedRoleValue = null;
     selectedRole = null;
     isUserSelected = false;
     title = 'BootOG';
     state;
+    logoName;
     branding = {
         logo: 'assets/icons/header/logo-black-auth.svg',
         displayName: 'BootOG'
@@ -29361,11 +29333,62 @@ class InitialProcessComponent {
         console.log("123");
         this.showLoader = true;
         if (this.uploadToAws) {
-            this.saveAWSHeadShot();
+            this.saveAWSLogo();
         }
         else {
         }
     }
+    async saveAWSLogo() {
+        if (!this.fileDataUser)
+            return false;
+        try {
+            const fileExtension = this.fileDataUser.type.split('/')[1] || this.fileDataUser.type.split('/')[0];
+            const fileName = new uuid().newId() + '.' + fileExtension;
+            // this.logoName = fileName;
+            const path = `Provider/${this.userId}/Profile/`;
+            const key = path + fileName;
+            const uploaded = await this.fileService.uploadImageAsync(this.fileDataUser, {
+                key,
+                contentType: this.fileDataUser.type,
+                Expires: 300, // 5 mins or as required
+            });
+            if (uploaded?.publicUrl) {
+                const fileModel = {
+                    fileName: this.fileDataUser.name,
+                    fileSize: this.fileDataUser.size,
+                    fileType: this.fileDataUser.type,
+                    fileLocation: uploaded.publicUrl,
+                    encrypted: true,
+                    publicUrl: uploaded.publicUrl,
+                };
+                fileModel.fileLocation = fileModel.fileLocation.replace(/^https?:\/\/[^/]+\//, '');
+                fileModel.publicUrl = fileModel.publicUrl.replace(/^https?:\/\/[^/]+\//, '');
+                const response = await this.fileService.awsFileUpload([fileModel]).toPromise();
+                const result = response?.[0];
+                console.log(result);
+                if (result?.fileId) {
+                    this.logo.logoId = result.fileId;
+                    this.logo.logoUrl = result.publicUrl;
+                    this.logo.logoFileName = result.fileName;
+                    this.logoName = result.fileName;
+                    this.saveAWSHeadShot();
+                }
+                else {
+                    this.showLoader = false;
+                }
+                return undefined;
+            }
+            else {
+                this.showLoader = false;
+                return undefined;
+            }
+        }
+        catch (err) {
+            console.error('Error uploading headshot:', err);
+            this.showLoader = false;
+            return undefined;
+        }
+    }
     async saveAWSHeadShot() {
         if (this.user.headshotFileId) {
             this.saveAWSSignature();
@@ -29547,6 +29570,9 @@ class InitialProcessComponent {
             headshotUrl: userDetail.headshotUrl,
             userMobile: userDetail?.phoneNumber,
             userEmailId: this.user?.email,
+            logoId: this.logo.logoId,
+            logoFileName: this.logo.logoFileName,
+            logoUrl: this.logo.logoUrl
         };
     }
     isProviderCall = false;
@@ -29684,7 +29710,14 @@ class InitialProcessComponent {
         });
     }
     dashboard() {
-        this.router.navigate([this.path]);
+        var role = this.userViewRoles?.find(d => d.selected == true)?.name;
+        if (role == "Provider") {
+            var url = this.libConfig.dashboardUrl.replace('/Dashboard', '');
+            this.router.navigate([url + '/membership/package-level']);
+        }
+        else {
+            this.router.navigate([this.libConfig.dashboardUrl]);
+        }
     }
     changeAddressUser() {
         if (this.isCopy) {
@@ -29784,11 +29817,11 @@ class InitialProcessComponent {
         this.destroy$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InitialProcessComponent, deps: [{ token: i2.Router }, { token: UserDetailService }, { token: i3.FormBuilder }, { token: FileService }, { token: ProvidersService$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 });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: InitialProcessComponent, isStandalone: false, selector: "app-initial-process", viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"container\">\r\n  <div class=\"mb-4 logout-container\" *ngIf=\"showlogout\">\r\n    <span class=\"logout-wrapper\" (click)=\"logout()\">\r\n      <span class=\"logout-icon\"></span>\r\n      <span class=\"logout-text\">Logout</span>\r\n    </span>\r\n  </div>\r\n  <div class=\"card pb-2 pr-5\" style=\"margin-bottom: 30px;\">\r\n    <ng-container class=\"load-page\" [style.visibility]=\"view == 1 ? 'visible' : 'hidden' \">\r\n      <ul class=\"term-list para-comma\" [ngClass]=\"view == 1 ? '' : 'hidden-view'\">\r\n        Thanks for joining\r\n        <span class=\"brand-name\">{{ branding.displayName }}</span>.\r\n        Our members and service providers rely on accurate info in your profile to\r\n        connect you with work that suits your capabilities. Keep your profile\r\n        complete, skills updated, licenses current, photos and logos professional,\r\n        and schedule up to date.\r\n      </ul>\r\n      <div class=\"row col-12 mt-4\" [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n        <div class=\"col-md-6 col-lg-6 col-sm-12\">\r\n          <div class=\"form-group form-check agree\">\r\n            <input #acceptTerms=\"ngModel\" [ngClass]=\"{ 'is-invalid': !model.acceptTerms && validatePage==1 }\"\r\n              [(ngModel)]=\"model.acceptTerms\" type=\"checkbox\" name=\"acceptTerms\" id=\"acceptTerms\"\r\n              class=\"form-check-input\" (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\"\r\n              required>\r\n            <label for=\"acceptTerms\" class=\"form-check-label checkmark pointer\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\">\r\n              I agree to Terms and Conditions\r\n            </label>\r\n            <!-- <div *ngIf=\"!model.acceptTerms && validatePage==1\" class=\"invalid-feedback\">\r\n              Accept Terms & Conditions is required\r\n            </div> -->\r\n          </div>\r\n          <div class=\"form-group form-check agree\">\r\n            <input #privacy=\"ngModel\" [ngClass]=\"{ 'is-invalid':!model.privacy  && validatePage==1}\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\" [(ngModel)]=\"model.privacy\"\r\n              type=\"checkbox\" name=\"privacy\" id=\"privacy\" class=\"form-check-input\" required>\r\n            <label for=\"privacy\" class=\"form-check-label checkmark pointer\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\">\r\n              I agree to Privacy Statement\r\n            </label>\r\n            <!-- <div *ngIf=\"!model.privacy && validatePage==1\" class=\"invalid-feedback\">\r\n              Accept Privacy Statement\r\n            </div> -->\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 justify-content-between row footer-signature\"\r\n        [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n        <!-- <div class=\"col-md-3 col-sm-3 slider-tab\">\r\n        </div> -->\r\n\r\n        <div class=\"col-6\"></div>\r\n        <div class=\"col-md-12 col-sm-12 col-xl-3 text-end\">\r\n          <h6>\r\n            <button class=\"next\" (click)=\" next(2)\"\r\n              [ngClass]=\"(((!points || !points?.length || points.length ==0) && !fileData ) || !model.acceptTerms || !model.privacy) ? 'disabled-btn':''\">\r\n              <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n                alt=\"Logo\">\r\n            </button>&nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n      <ng-container>\r\n        <div class=\"term-signature col-md-6 col-lg-6 col-sm-12\" [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n          <h6 class=\"checkmark\">Signature</h6>\r\n          <div [ngClass]=\"{ 'd-none': signaturePadData?.publicUrl }\" class=\"sign-img mb-2\">\r\n            <canvas #canvas [width]=\"255\" [height]=\"90\"></canvas>\r\n          </div>\r\n          <div [ngClass]=\"{ 'd-none': !signaturePadData?.publicUrl }\" class=\"mb-2\">\r\n            <img [width]=\"255\" [height]=\"120\" [src]=\"signaturePadData?.publicUrl\" style=\"position: relative\" alt>\r\n          </div>\r\n          <h6 class=\"d-flex align-items-center gap-2\">\r\n            <button (click)=\"clearPad()\" class=\"btn-clear btn-sm\">\r\n              Clear\r\n            </button>\r\n\r\n            <!-- <button (click)=\"uploadImage.click()\" class=\"save-btn upload btn-sm\">\r\n              <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\">\r\n              Upload\r\n              <input #uploadImage type=\"file\" class=\"image-upload d-none\" accept=\"image/*\"\r\n                (change)=\"uploadSignImage($event)\">\r\n            </button> -->\r\n          </h6>\r\n\r\n          <div *ngIf=\"validatePage==1 && (!points || !points?.length || points.length ==0) && !fileData\"\r\n            class=\"invalid-feedback d-block\">\r\n            Signature is required\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 2\">\r\n      <div class=\"add-tab-view \">\r\n        <ul>\r\n          <h5>\r\n            <b>\r\n              Please choose the relevant sections in which you wish to\r\n              participate\r\n            </b>\r\n          </h5>\r\n          <br>\r\n          <b class=\"para-comma\">\r\n            Choose the areas you'd like to be part of \u2014 whether it's programs, services, events, or collaborations,\r\n            you're in control of your involvement.\r\n            <br>\r\n            connect your business to others and prospective clients.\r\n          </b>\r\n        </ul>\r\n\r\n        <div class=\"row mt-4\">\r\n          <ng-container *ngFor=\"let userType of userViewRoles\">\r\n            <div class=\"card card-design text-center user-card mx-2 my-2\" style=\"width: 12%;\"\r\n              [ngClass]=\"userType.value === selectedRoleValue ? 'user-cards-active' : ''\"\r\n              (click)=\"selectedUserRole(userType)\">\r\n              <img [src]=\"userType?.img\" class=\"mb-2 mt-2\" style=\"width: 70px;height: 70px;\">\r\n              <h6 class=\"m-0 mt-2\">{{userType.name}}</h6>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <!-- <h6 class=\"inspect-add\">\r\n          <button (click)=\"next(3);isBusiness=true;\" class=\"add-btn btn-sm\">\r\n            Yes\r\n          </button>\r\n          &nbsp; &nbsp;\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            &nbsp; &nbsp;\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            &nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 3\">\r\n      <form [formGroup]=\"companyForm\" class=\"form\">\r\n        <div class=\"term-list \">\r\n          <ul>\r\n            <h5>\r\n              <b>\r\n                Enter your business information here.\r\n              </b>\r\n            </h5>\r\n            <br>\r\n          </ul>\r\n          <div class=\"profile-field\">\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-6 col-sm-12  mt-3 mb-2\">\r\n                <input [ngClass]=\"{'is-invalid': ( f.companyName.errors && validatePage == 3) || providerError}\"\r\n                  type=\"text\" class=\"form-control\" id=\"companyName\" placeholder=\"Company Name\"\r\n                  formControlName=\"companyName\">\r\n                <div *ngIf=\" f.companyName.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.companyName.errors.required\">\r\n                    Company Name is required\r\n                  </div>\r\n                  <div *ngIf=\"f.companyName.errors.minlength\">\r\n                    Company Name must be at least 2 characters\r\n                  </div>\r\n                  <div *ngIf=\"f.companyName.errors.maxLength\">\r\n                    Company Name must be less than 100 characters\r\n                  </div>\r\n                </div>\r\n                <div *ngIf=\"providerError\" class=\"invalid-feedback\">\r\n                  <div>\r\n                    {{providerError}}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input class=\"form-control block fw-medium shadow-none\" type=\"text\" name=\"inputPhone\"\r\n                  placeholder=\"Company Phone Number \" id=\"inputPhone\" autocomplete=\"off\" formControlName=\"phoneNumber\"\r\n                  appMobileMask [maxLength]=\"300\"\r\n                  [ngClass]=\"{'is-invalid': ( f.phoneNumber.errors && validatePage == 3) || providerError}\">\r\n                <div *ngIf=\"f.phoneNumber.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.phoneNumber.errors.required\">\r\n                    Phone Number is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.address1.errors&& validatePage == 3 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"businessAddress\" ngx-google-places-autocomplete [options]='options'\r\n                  (onAddressChange)=\"AddressChange($event)\" placeholder=\"Business Address 1\" formControlName=\"address1\">\r\n                <div *ngIf=\" f.address1.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.address1.errors.required\">\r\n                    Business Address 1 is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input type=\"text\" class=\"form-control\" id=\"businessAddress2\" placeholder=\"Business Address 2\">\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.city.errors&& validatePage == 3 }\" type=\"text\" class=\"form-control\"\r\n                  id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n                <div *ngIf=\" f.city.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.city.errors.required\">City is required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.state.errors&& validatePage == 3 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n                <div *ngIf=\" f.state.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.state.errors.required\">State is required</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [textMask]=\"{ mask: zipcodeMask }\"\r\n                  [ngClass]=\"{ 'is-invalid':  f.zipcode.errors&& validatePage == 3 }\" type=\"text\" class=\"form-control\"\r\n                  id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n                <div *ngIf=\" f.zipcode.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.zipcode.errors.required\">Zipcode is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.country.errors && validatePage == 3}\" type=\"text\"\r\n                  class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n                <div *ngIf=\" f.country.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.country.errors.required\">Country is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n      <div *ngIf=\"selectedRole?.name == 'Contractor'\" style=\"padding: 0px 20px;border-radius: 5px;\">\r\n        <div class=\"term-list pt-0\">\r\n          <h5>\r\n            <b>\r\n              Contractor Category\r\n            </b>\r\n          </h5>\r\n          <div class=\"profile-field\">\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-12 col-sm-12  mb-2\">\r\n                <label></label>\r\n                <ng-select [items]=\"contractorSubCategories\" bindLabel=\"name\" [multiple]=\"true\" [closeOnSelect]=\"false\"\r\n                  placeholder=\"Select Contractor Category\" (ngModelChange)=\"changeContractor($event)\"\r\n                  [(ngModel)]=\"selectedContractorCategories\">\r\n                </ng-select>\r\n              </div>\r\n            </div>\r\n            <accordion [isAnimated]=\"false\">\r\n              <ng-container *ngFor=\"let item of selectedContractorCategories;let i=index\">\r\n                <accordion-group [isOpen]=\"true\">\r\n                  <button accordion-heading class=\"w-100\" style=\"font-size: 16px;font-weight: 600;\">\r\n                    <div class=\"w-100 mt-2\">\r\n                      <div class=\"backdrop\">\r\n                        <input type=\"checkbox\" [(ngModel)]=\"item.selectAll\" [name]=\"item?.id\" [id]=\"item?.id\"\r\n                          (change)=\"selectAll($event,item?.items)\">\r\n                        <label [for]=\"item?.id\">&nbsp;{{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\">&nbsp;{{subItem?.name}}</label>\r\n                    </div>\r\n                  </div>\r\n                </accordion-group>\r\n              </ng-container>\r\n            </accordion>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n        <!-- <div class=\"col-md-3 col-sm-12 slider-tab text-center\">\r\n          <img class=\"slider-view\" src=\"assets/images/icons/stepper-2.svg\" alt=\"Logo\">\r\n        </div> -->\r\n        <div class=\"col-5\"></div>\r\n        <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n          <h6>\r\n            <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n              Back\r\n            </button>\r\n            &nbsp; &nbsp;\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            &nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 4\">\r\n\r\n      <div class=\"add-tab \">\r\n        <ul>\r\n          <h5 class=\"p-4 pb-2\">\r\n            <b>\r\n              We need basic information's and headshot for your profile\r\n            </b>\r\n            <div class=\"form-group form-check agree p-0 mt-3\" *ngIf=\"isBusiness\">\r\n              <input [(ngModel)]=\"isCopy\" type=\"checkbox\" name=\"isCopy\" id=\"isCopy\" class=\"form-check-input mt-2\"\r\n                (change)=\"changeAddressUser()\">\r\n              <label for=\"isCopy\" class=\"form-check-label checkmark\">\r\n                Copy From Provider Infromation\r\n              </label>\r\n            </div>\r\n          </h5>\r\n        </ul>\r\n        <div class=\"profile-field\">\r\n          <form [formGroup]=\"userForm\" class=\"form pb-0\">\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.firstName.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" placeholder=\"Fist Name\" formControlName=\"firstName\" id=\"firstName\">\r\n                <div *ngIf=\" u.firstName.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n                    First Name is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.lastName.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\">\r\n                <div *ngIf=\" u.lastName.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.lastName.errors.required\">\r\n                    Last Name is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.email.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\">\r\n                <div *ngIf=\" u.email.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.email.errors.required\">\r\n                    Emai is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-12 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.address1.errors && validatePage == 4 }\" [options]=\"options\"\r\n                  (onAddressChange)=\"AddressChangeUser($event)\" type=\"text\" class=\"form-control\"\r\n                  placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete>\r\n                <div *ngIf=\" u.address1.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.address1.errors.required\">\r\n                    Home Address 1 is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n                  placeholder=\"Home Address 2\">\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.city.errors && validatePage == 4}\" type=\"text\" class=\"form-control\"\r\n                  id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n                <div *ngIf=\" u.city.errors && validatePage ==4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.city.errors.required\">City is required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.state.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n                <div *ngIf=\" u.state.errors  && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.state.errors.required\">State is required</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [textMask]=\"{ mask: zipcodeMask }\"\r\n                  [ngClass]=\"{ 'is-invalid':  u.zipcode.errors  && validatePage == 4 }\" type=\"text\" class=\"form-control\"\r\n                  id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n                <div *ngIf=\" u.zipcode.errors  && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.zipcode.errors.required\">Zipcode is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.country.errors  && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n                <div *ngIf=\" u.country.errors  && validatePage ==4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.country.errors.required\">Country is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input class=\"form-control block shadow-none\" type=\"text\" name=\"inputPhone\" placeholder=\"Phone Number \"\r\n                  id=\"inputPhone\" autocomplete=\"off\" formControlName=\"phoneNumber\" appMobileMask [maxLength]=\"300\"\r\n                  [ngClass]=\"{'is-invalid': ( u.phoneNumber.errors && validatePage == 4)}\">\r\n                <div *ngIf=\"u.phoneNumber.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors.required\">\r\n                    Phone Number is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </form>\r\n          <div class=\"form-group mb-2 form\">\r\n            <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\"\r\n              class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n            <input (click)=\"uploadImage1.click()\" [(ngModel)]=\"fileName\" readonly type=\"text\" class=\"form-control\"\r\n              id=\"upload\" accept=\"image/*\" placeholder=\"Upload Profile Picture\">\r\n            <img #uploadImage1 class=\"upload-image\" (click)=\"uploadFile.click()\" type=\"file\"\r\n              src=\"assets/images/icons/upload.svg\" alt=\"Logo\">\r\n            <div *ngIf=\"isImageRequired\" class=\"invalid-feedback d-block\">\r\n              <div class=\"ms-1\">\r\n                Please Upload Profile Image\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n            <div>\r\n              {{userError}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n        <!-- <div class=\"col-md-3 col-sm-12 pt-3 slider-tab text-center\">\r\n          <img class=\"slider-view\" src=\"assets/images/icons/stepper-3.svg\" alt=\"Logo\">\r\n        </div> -->\r\n        <div class=\"col-5\"></div>\r\n        <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n          <h6>\r\n            <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n              Back\r\n            </button>\r\n            &nbsp; &nbsp;\r\n            <button class=\"next\" (click)=\"next(5)\" [disabled]=\"showLoader\" [config]=\"DefaultButtonSpinnerConfig\">\r\n              <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n                alt=\"Logo\">\r\n            </button>\r\n            &nbsp; &nbsp;\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          &nbsp; &nbsp;\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&nbsp;&nbsp;\r\n                <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\"\r\n                  src=\"assets/images/icons/next.svg\" alt=\"Logo\">\r\n              </button>\r\n            </h6>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <!-- <div>test</div> -->\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 10\">\r\n      <app-credentialing (back)=\"onCredentialingBack()\" [data]=\"credentialingData\"></app-credentialing>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #termsAndConditionsModel>\r\n  <div class=\"modal-dialog modal-dialog-centered\">\r\n    <div class=\"modal-content terms-fixed-modal\">\r\n\r\n      <!-- HEADER -->\r\n      <div class=\"modal-header\">\r\n        <h4 class=\"modal-title fw-bold title-popup\">\r\n          {{ termsAndConditionTitle }}\r\n        </h4>\r\n      </div>\r\n\r\n      <!-- SCROLLABLE CONTENT ONLY -->\r\n      <div class=\"modal-body terms-scroll-area\" (scroll)=\"onTermsScroll($event)\">\r\n        <ng-container *ngIf=\"termsAndConditionTitle == 'Terms and Conditions'\">\r\n          <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n          </app-terms-conditions>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"termsAndConditionTitle != 'Terms and Conditions'\">\r\n          <app-privacy-policy [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n          </app-privacy-policy>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- FOOTER (NOT SCROLLING) -->\r\n      <div>\r\n        <div class=\"modal-footer text-end\" style=\"display: block;\">\r\n          <!-- YOUR BUTTONS \u2014 UNCHANGED -->\r\n          <button type=\"button\" class=\"btn btn-primary btn-sm px-4\"\r\n            style=\"background: #d3dae6; color: #98a2b3; border: #D3DAE6 !important;\"\r\n            (click)=\"decline(termsAndConditionTitle); modelRef.hide();\">\r\n            Decline\r\n          </button>\r\n\r\n          <button type=\"button\" class=\"btn btn-primary btn-sm px-4\" style=\"color:white;background: #4077AD;\"\r\n            [disabled]=\"!isAgreeEnabled\" (click)=\"agree(termsAndConditionTitle); modelRef.hide();\">\r\n            Agree\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".brand-name{font-weight:700;font-size:calc(100% + 4px)}::ng-deep .backdrop{background-color:transparent!important}.filter-black{filter:brightness(.4)!important}.footer-view{margin-top:3rem;margin-left:0;margin-right:0}.footer-signature{margin-top:9rem}.slider-view{width:11rem;margin-left:1px}.container{margin-top:30px}.container .card{border-radius:1.25rem}.container .header{padding:33px 10px 0}.container .header .logo{width:15%;height:80%}.container .form-control{padding:.75rem 1rem;border-color:#a1a1a1}.container .form-control:focus{color:#000;box-shadow:none;border-color:#a1a1a1!important}.container .form-control::placeholder{font-weight:500;font-size:12px;color:#a1a1a1}.container .link{color:#4077ad}.container .link-signup{font-weight:bolder}.container .form-check-label{margin-bottom:0;padding-top:9px}.container .content-view{margin-top:10%}.container .content-description{margin-top:25%}.container .tag-content{color:#fff9e8;margin-left:9%}.container .tag-content p{color:#fff9e8}.container .form-check-input:checked{background-color:#000;border-color:#000}.container .img-tick{margin:-31px 12px 0 -35px}.container .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #000000}.container .form-check-input:focus{box-shadow:none}.container input[type=checkbox]{accent-color:#000000}.term-list{padding:48px 60px 6px 0;margin-left:30px;color:\"#1f1f1fdb\"}.add-tab{padding:75px 75px 6px 1px;margin-left:50px;color:\"#1f1f1fdb\"}.add-tab-view{padding:75px 75px 6px 1px;margin-left:80px;color:\"#1f1f1fdb\"}.inspect-add{margin-top:3rem}.add-btn{font-size:16px;border-radius:5px;transition:.2s;padding:.25rem .5rem;background:#fff;border:1px solid rgba(148,147,147,.1882352941);color:#444;line-height:48px;box-shadow:0 1px 9px #98a2b3;width:9rem}.add-btn:hover{border:1px solid rgba(148,147,147,.1882352941);box-shadow:none}.agree{padding:0 0 8px 47px}.agree .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #98A2B3;width:14px;height:14px;margin:5px 9px 0 -35px}.agree .form-check-input:focus{box-shadow:none}.agree .form-check-input:checked{background-color:#000;border-color:#000}.agree .invalid-feedback{font-size:10px!important;margin:0 0 0 21px}.checkmark{vertical-align:text-bottom;color:#98a2b3;font-weight:500;font-size:12px}.term-signature{padding-left:16rem;padding-right:65px;position:absolute;margin:150px 0 0 50%}.participate-tab{height:135px;width:142px}.card-design{height:147px;width:160px;padding-left:10px;margin-left:42px;background:#fff0;border:2px solid #98A2B3;box-shadow:0 0 4px #98a2b3;border-radius:27px;margin-bottom:42px}.upload{height:39px;margin-top:-4px;width:126px;font-size:12px}.participate-tab{margin-top:-25px}.slider{width:14rem;margin-left:69px}.btn-clear{background:#d3dae6;color:#98a2b3;font-size:12px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;width:46%;line-height:28px}.btn-close{background:#f1f4fa;color:#98a2b3;font-size:17px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;font-weight:500;width:116px;color:#737a87;line-height:28px}.view-logo{padding-top:1%;padding-bottom:4%;text-align:center}.back-btn{border-radius:45px;height:41px}.next{background:#4077ad;border-radius:30px;height:60px;width:60px;border:white}.profile-field{margin-top:-10px}.profile-field input{line-height:30px;margin:-10px 3px 3px}.load-page{padding:21px 49px 13px 34px}.sign-img{width:291px;height:95px;border-radius:8px;border:1px solid rgba(179,178,178,.33);margin-top:19px}.upload-image{height:16px;width:16px;position:absolute;margin-left:66rem;margin-top:-39px}.para-comma{font-weight:500}.go-btn{border-radius:45px;height:50px;padding:0 20px;background:#4077ad;border:1px solid #4077ad;color:#fff;line-height:28px;font-size:14px;font-weight:500}.text-label{color:#747b83;font-weight:500}.form{padding:20px;border-radius:5px}.form-control:focus{color:#000;box-shadow:none;border-color:#848484!important}.form-control::placeholder{font-weight:500;font-size:12px;color:#bec1be;padding-left:10px}.btn-primary:active{background-color:#50575e}@media screen and (min-width: 500px) and (max-width: 769px){.content-view{background:#0c1620;width:44rem;margin:31px 0 0!important;padding:28px 32px 17px 71px!important;border-radius:29px}.upload-image{margin-left:25rem!important}}@media screen and (min-width: 768px) and (max-width: 1024px){.back-btn{height:31px;width:82px;position:absolute;margin-left:-53px}.back-tab{position:absolute;margin-left:-87px;height:37px}.go-btn{width:175px;height:44px}.term-signature{padding-left:10px}.upload-image{margin-left:40rem}}@media screen and (min-width: 374px) and (max-width: 426px){.head-logo{width:216px;padding-bottom:16px}.slider{visibility:hidden}.back-btn{height:31px;width:82px;position:absolute;margin-left:73px;margin-top:23px}.go-btn{width:175px;height:44px}.upload-image{margin-left:16rem}.term-signature{margin:84% 0 7px 4%}}@media screen and (min-width: 320px) and (max-width: 426px){.footer-signature{margin-top:20rem}.login .head-logo{padding:16px 2px 0;width:38%!important;height:40%!important}.container{margin-top:5px!important}.card{padding:2px!important}.tag-content{margin:3% 0 0!important;background-color:#121b24;border-radius:13px}.img-tick{margin:3px!important}.slider{visibility:hidden}.load-page{padding:0}.head-logo{width:216px;padding-bottom:16px}.back-btn{height:26px;width:71px;position:absolute;margin-left:-17rem!important;font-size:10px;margin-top:23px}.go-btn{width:142px;height:36px;margin-right:-28px;font-size:10px}.add-tab,.add-tab-view{padding:30px 33px 2px 3px;margin-left:15px}.add-btn{width:6rem}.slider-tab{visibility:hidden}.back-tab{margin-left:-14rem;margin-top:1px;font-size:14px;height:39px}.participate-tab{height:96px;width:87px}.card-design{height:124px;width:125px;padding-left:17px;margin-left:30px}.term-signature{padding:22px 22px 13px 27px}.term-list{padding:43px 10px 10px 3px;margin-left:0;text-align:-webkit-center}}@media screen and (min-width: 320px) and (max-width: 376px){.agree{padding:0 0 8px 25px}.participate-tab{height:96px;width:87px}.card-design{height:109px;width:97px;padding-left:4px;margin-left:10px}.card-design h6{font-size:10px;padding-left:14px;font-weight:600}.sign-img{width:270px}.term-list{padding:20px 20px 6px 4px;margin-left:13px}}@media screen and (min-width: 320px) and (max-width: 350px){.upload-image{height:13px;width:11px;margin-left:10rem;margin-top:-35px}.btn-clear{width:92px}.term-signature{margin:84% 0 7px 4%}}.disabled-btn{cursor:not-allowed!important;background:#4077ad!important;color:#fff!important}.modal-dialog .modal-content{border-radius:12px;background:#fff!important;border:1px solid rgba(128,128,128,.3294117647)!important}.title-popup{font-size:18px;color:#0c1620}ul.term-list-data li{padding-bottom:5px;font-size:13px;font-weight:500;line-height:21px}ol,ul,dl{margin-top:0;margin-bottom:1rem}::ng-deep .modal-content{background:none!important;width:100%;border:none}.hidden-view{display:none}.header-container{position:relative;padding:20px}.view-logo{text-align:center}.logout-button{top:20px;right:20px;position:absolute}.logout-button button{background:none;border:none;font-size:16px;display:flex;align-items:center;cursor:pointer}.logout-button img{margin-right:5px;height:20px}.user-card{align-items:center;color:#4077ad;cursor:pointer}.user-cards-active{background:#4077ad;color:#fff}.save-btn.upload{border:1px solid #4077AD;background-color:#4077ad;color:#fff;border-radius:5px;background:#4077ad;padding:4px 10px;display:inline-flex;align-items:center;gap:6px}.save-btn.upload img{filter:brightness(0) invert(1)}.form-check.agree{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}.form-check.agree .form-check-input{margin-top:4px;flex-shrink:0}.form-check.agree .form-check-label{line-height:1.4;cursor:pointer;white-space:normal}.spinner-16{width:16px;height:16px}.h6-buttons{display:flex;align-items:center;gap:8px}.form-check.agree{display:flex;align-items:flex-start;margin-bottom:14px}.form-check-input{position:absolute;opacity:0;cursor:pointer}.form-check-label{position:relative;padding-left:28px;cursor:pointer;font-size:14px;line-height:20px;color:#212529;-webkit-user-select:none;user-select:none}.form-check-label:before{content:\"\";position:absolute;left:0;top:8px;width:18px;height:18px;border:2px solid #adb5bd;border-radius:4px;background:#fff;transition:all .2s ease}.form-check-label:after{content:\"\";position:absolute;left:5px;top:10px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .15s ease}.form-check-input:checked+.form-check-label:before{background-color:#4077ad;border-color:#4077ad}.form-check-input:checked+.form-check-label:after{transform:rotate(45deg) scale(1)}.form-check-label:hover:before{border-color:#4077ad}.form-check-input:focus+.form-check-label:before{box-shadow:0 0 0 3px #0d6efd40}.form-check-input.is-invalid+.form-check-label:before{border-color:#dc3545}.form-check-input.is-invalid:checked+.form-check-label:before{background-color:#dc3545}.invalid-feedback{display:block;font-size:12px;margin-left:7px;margin-top:4px}::ng-deep .modal-dialog{max-width:750px}.user-cards-active{background-color:#4077ad;color:#fff;border:2px solid #4077AD}.terms-fixed-modal{width:1080px;height:700px;display:flex;flex-direction:column}.terms-scroll-area{flex:1 1 auto;overflow-y:auto;padding:16px}body.modal-open{overflow:hidden!important}.modal{z-index:1055!important}.modal-backdrop{z-index:1050!important}.modal-dialog{margin:auto;pointer-events:auto}.modal-content{position:relative;z-index:1060}.logout-container{display:flex;justify-content:flex-end}.logout-wrapper{display:flex;align-items:center;cursor:pointer;gap:6px}.logout-icon{width:20px;height:20px;background:url(/assets/images/icons/logoutt.svg) no-repeat center;background-size:contain}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i13.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i13.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }, { kind: "directive", type: GooglePlaceDirective, selector: "[ngx-google-places-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { kind: "component", type: TermsConditionsComponent, selector: "app-terms-conditions", inputs: ["title", "branding", "PrivacyAndTerms"] }, { kind: "component", type: PrivacyPolicyComponent, selector: "app-privacy-policy", inputs: ["title", "branding", "PrivacyAndTerms"] }, { kind: "component", type: CredentialingComponent, selector: "app-credentialing", inputs: ["data"], outputs: ["back"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: InitialProcessComponent, isStandalone: false, selector: "app-initial-process", viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"container\">\r\n  <div class=\"mb-4 logout-container\" *ngIf=\"showlogout\">\r\n    <span class=\"logout-wrapper\" (click)=\"logout()\">\r\n      <span class=\"logout-icon\"></span>\r\n      <span class=\"logout-text\">Logout</span>\r\n    </span>\r\n  </div>\r\n  <div class=\"card pb-2 pr-5\" style=\"margin-bottom: 30px;\">\r\n    <ng-container class=\"load-page\" [style.visibility]=\"view == 1 ? 'visible' : 'hidden' \">\r\n      <ul class=\"term-list para-comma\" [ngClass]=\"view == 1 ? '' : 'hidden-view'\">\r\n        Thanks for joining\r\n        <span class=\"brand-name\">{{ branding.displayName }}</span>.\r\n        Our members and service providers rely on accurate info in your profile to\r\n        connect you with work that suits your capabilities. Keep your profile\r\n        complete, skills updated, licenses current, photos and logos professional,\r\n        and schedule up to date.\r\n      </ul>\r\n      <div class=\"row col-12 mt-4\" [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n        <div class=\"col-md-6 col-lg-6 col-sm-12\">\r\n          <div class=\"form-group form-check agree\">\r\n            <input #acceptTerms=\"ngModel\" [ngClass]=\"{ 'is-invalid': !model.acceptTerms && validatePage==1 }\"\r\n              [(ngModel)]=\"model.acceptTerms\" type=\"checkbox\" name=\"acceptTerms\" id=\"acceptTerms\"\r\n              class=\"form-check-input\" (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\"\r\n              required>\r\n            <label for=\"acceptTerms\" class=\"form-check-label checkmark pointer\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\">\r\n              I agree to Terms and Conditions\r\n            </label>\r\n            <!-- <div *ngIf=\"!model.acceptTerms && validatePage==1\" class=\"invalid-feedback\">\r\n              Accept Terms & Conditions is required\r\n            </div> -->\r\n          </div>\r\n          <div class=\"form-group form-check agree\">\r\n            <input #privacy=\"ngModel\" [ngClass]=\"{ 'is-invalid':!model.privacy  && validatePage==1}\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\" [(ngModel)]=\"model.privacy\"\r\n              type=\"checkbox\" name=\"privacy\" id=\"privacy\" class=\"form-check-input\" required>\r\n            <label for=\"privacy\" class=\"form-check-label checkmark pointer\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\">\r\n              I agree to Privacy Statement\r\n            </label>\r\n            <!-- <div *ngIf=\"!model.privacy && validatePage==1\" class=\"invalid-feedback\">\r\n              Accept Privacy Statement\r\n            </div> -->\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 justify-content-between row footer-signature\"\r\n        [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n        <!-- <div class=\"col-md-3 col-sm-3 slider-tab\">\r\n        </div> -->\r\n\r\n        <div class=\"col-6\"></div>\r\n        <div class=\"col-md-12 col-sm-12 col-xl-3 text-end\">\r\n          <h6>\r\n            <button class=\"next\" (click)=\" next(2)\"\r\n              [ngClass]=\"(((!points || !points?.length || points.length ==0) && !fileData ) || !model.acceptTerms || !model.privacy) ? 'disabled-btn':''\">\r\n              <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n                alt=\"Logo\">\r\n            </button>&nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n      <ng-container>\r\n        <div class=\"term-signature col-md-6 col-lg-6 col-sm-12\" [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n          <h6 class=\"checkmark\">Signature</h6>\r\n          <div [ngClass]=\"{ 'd-none': signaturePadData?.publicUrl }\" class=\"sign-img mb-2\">\r\n            <canvas #canvas [width]=\"255\" [height]=\"90\"></canvas>\r\n          </div>\r\n          <div [ngClass]=\"{ 'd-none': !signaturePadData?.publicUrl }\" class=\"mb-2\">\r\n            <img [width]=\"255\" [height]=\"120\" [src]=\"signaturePadData?.publicUrl\" style=\"position: relative\" alt>\r\n          </div>\r\n          <h6 class=\"d-flex align-items-center gap-2\">\r\n            <button (click)=\"clearPad()\" class=\"btn-clear btn-sm\">\r\n              Clear\r\n            </button>\r\n\r\n            <!-- <button (click)=\"uploadImage.click()\" class=\"save-btn upload btn-sm\">\r\n              <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\">\r\n              Upload\r\n              <input #uploadImage type=\"file\" class=\"image-upload d-none\" accept=\"image/*\"\r\n                (change)=\"uploadSignImage($event)\">\r\n            </button> -->\r\n          </h6>\r\n\r\n          <div *ngIf=\"validatePage==1 && (!points || !points?.length || points.length ==0) && !fileData\"\r\n            class=\"invalid-feedback d-block\">\r\n            Signature is required\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 2\">\r\n      <div class=\"add-tab-view \">\r\n        <ul>\r\n          <h5>\r\n            <b>\r\n              Please choose the relevant sections in which you wish to\r\n              participate\r\n            </b>\r\n          </h5>\r\n          <br>\r\n          <b class=\"para-comma\">\r\n            Choose the areas you'd like to be part of \u2014 whether it's programs, services, events, or collaborations,\r\n            you're in control of your involvement.\r\n            <br>\r\n            connect your business to others and prospective clients.\r\n          </b>\r\n        </ul>\r\n\r\n        <div class=\"row mt-4\">\r\n          <ng-container *ngFor=\"let userType of userViewRoles\">\r\n            <div class=\"card card-design text-center user-card mx-2 my-2\" style=\"width: 12%;\"\r\n              [ngClass]=\"userType.value === selectedRoleValue ? 'user-cards-active' : ''\"\r\n              (click)=\"selectedUserRole(userType)\">\r\n              <img [src]=\"userType?.img\" class=\"mb-2 mt-2\" style=\"width: 70px;height: 70px;\">\r\n              <h6 class=\"m-0 mt-2\">{{userType.name}}</h6>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <!-- <h6 class=\"inspect-add\">\r\n          <button (click)=\"next(3);isBusiness=true;\" class=\"add-btn btn-sm\">\r\n            Yes\r\n          </button>\r\n          &nbsp; &nbsp;\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            &nbsp; &nbsp;\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            &nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 3\">\r\n      <form [formGroup]=\"companyForm\" class=\"form\">\r\n        <div class=\"term-list \">\r\n          <ul>\r\n            <h5>\r\n              <b>\r\n                Enter your business information here.\r\n              </b>\r\n            </h5>\r\n            <br>\r\n          </ul>\r\n          <div class=\"profile-field\">\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-6 col-sm-12  mt-3 mb-2\">\r\n                <input [ngClass]=\"{'is-invalid': ( f.companyName.errors && validatePage == 3) || providerError}\"\r\n                  type=\"text\" class=\"form-control\" id=\"companyName\" placeholder=\"Company Name\"\r\n                  formControlName=\"companyName\">\r\n                <div *ngIf=\" f.companyName.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.companyName.errors.required\">\r\n                    Company Name is required\r\n                  </div>\r\n                  <div *ngIf=\"f.companyName.errors.minlength\">\r\n                    Company Name must be at least 2 characters\r\n                  </div>\r\n                  <div *ngIf=\"f.companyName.errors.maxLength\">\r\n                    Company Name must be less than 100 characters\r\n                  </div>\r\n                </div>\r\n                <div *ngIf=\"providerError\" class=\"invalid-feedback\">\r\n                  <div>\r\n                    {{providerError}}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input class=\"form-control block fw-medium shadow-none\" type=\"text\" name=\"inputPhone\"\r\n                  placeholder=\"Company Phone Number \" id=\"inputPhone\" autocomplete=\"off\" formControlName=\"phoneNumber\"\r\n                  appMobileMask [maxLength]=\"300\"\r\n                  [ngClass]=\"{'is-invalid': ( f.phoneNumber.errors && validatePage == 3) || providerError}\">\r\n                <div *ngIf=\"f.phoneNumber.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.phoneNumber.errors.required\">\r\n                    Phone Number is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.address1.errors&& validatePage == 3 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"businessAddress\" ngx-google-places-autocomplete [options]='options'\r\n                  (onAddressChange)=\"AddressChange($event)\" placeholder=\"Business Address 1\" formControlName=\"address1\">\r\n                <div *ngIf=\" f.address1.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.address1.errors.required\">\r\n                    Business Address 1 is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input type=\"text\" class=\"form-control\" id=\"businessAddress2\" placeholder=\"Business Address 2\">\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.city.errors&& validatePage == 3 }\" type=\"text\" class=\"form-control\"\r\n                  id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n                <div *ngIf=\" f.city.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.city.errors.required\">City is required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.state.errors&& validatePage == 3 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n                <div *ngIf=\" f.state.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.state.errors.required\">State is required</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [textMask]=\"{ mask: zipcodeMask }\"\r\n                  [ngClass]=\"{ 'is-invalid':  f.zipcode.errors&& validatePage == 3 }\" type=\"text\" class=\"form-control\"\r\n                  id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n                <div *ngIf=\" f.zipcode.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.zipcode.errors.required\">Zipcode is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.country.errors && validatePage == 3}\" type=\"text\"\r\n                  class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n                <div *ngIf=\" f.country.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.country.errors.required\">Country is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n            <div 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\">&nbsp;{{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\">&nbsp;{{subItem?.name}}</label>\r\n                    </div>\r\n                  </div>\r\n                </accordion-group>\r\n              </ng-container>\r\n            </accordion>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n        <!-- <div class=\"col-md-3 col-sm-12 slider-tab text-center\">\r\n          <img class=\"slider-view\" src=\"assets/images/icons/stepper-2.svg\" alt=\"Logo\">\r\n        </div> -->\r\n        <div class=\"col-5\"></div>\r\n        <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n          <h6>\r\n            <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n              Back\r\n            </button>\r\n            &nbsp; &nbsp;\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            &nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 4\">\r\n\r\n      <div class=\"add-tab \">\r\n        <ul>\r\n          <h5 class=\"p-4 pb-2\">\r\n            <b>\r\n              We need basic information's and headshot for your profile\r\n            </b>\r\n            <div class=\"form-group form-check agree p-0 mt-3\" *ngIf=\"isBusiness\">\r\n              <input [(ngModel)]=\"isCopy\" type=\"checkbox\" name=\"isCopy\" id=\"isCopy\" class=\"form-check-input mt-2\"\r\n                (change)=\"changeAddressUser()\">\r\n              <label for=\"isCopy\" class=\"form-check-label checkmark\">\r\n                Copy From Provider Infromation\r\n              </label>\r\n            </div>\r\n          </h5>\r\n        </ul>\r\n        <div class=\"profile-field\">\r\n          <form [formGroup]=\"userForm\" class=\"form pb-0\">\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.firstName.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" placeholder=\"Fist Name\" formControlName=\"firstName\" id=\"firstName\">\r\n                <div *ngIf=\" u.firstName.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n                    First Name is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.lastName.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\">\r\n                <div *ngIf=\" u.lastName.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.lastName.errors.required\">\r\n                    Last Name is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.email.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\">\r\n                <div *ngIf=\" u.email.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.email.errors.required\">\r\n                    Emai is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-12 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.address1.errors && validatePage == 4 }\" [options]=\"options\"\r\n                  (onAddressChange)=\"AddressChangeUser($event)\" type=\"text\" class=\"form-control\"\r\n                  placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete>\r\n                <div *ngIf=\" u.address1.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.address1.errors.required\">\r\n                    Home Address 1 is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n                  placeholder=\"Home Address 2\">\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.city.errors && validatePage == 4}\" type=\"text\" class=\"form-control\"\r\n                  id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n                <div *ngIf=\" u.city.errors && validatePage ==4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.city.errors.required\">City is required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.state.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n                <div *ngIf=\" u.state.errors  && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.state.errors.required\">State is required</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [textMask]=\"{ mask: zipcodeMask }\"\r\n                  [ngClass]=\"{ 'is-invalid':  u.zipcode.errors  && validatePage == 4 }\" type=\"text\" class=\"form-control\"\r\n                  id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n                <div *ngIf=\" u.zipcode.errors  && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.zipcode.errors.required\">Zipcode is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.country.errors  && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n                <div *ngIf=\" u.country.errors  && validatePage ==4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.country.errors.required\">Country is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input class=\"form-control block shadow-none\" type=\"text\" name=\"inputPhone\" placeholder=\"Phone Number \"\r\n                  id=\"inputPhone\" autocomplete=\"off\" formControlName=\"phoneNumber\" appMobileMask [maxLength]=\"300\"\r\n                  [ngClass]=\"{'is-invalid': ( u.phoneNumber.errors && validatePage == 4)}\">\r\n                <div *ngIf=\"u.phoneNumber.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors.required\">\r\n                    Phone Number is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </form>\r\n          <div class=\"form-group mb-2 form\">\r\n            <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\"\r\n              class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n            <input (click)=\"uploadImage1.click()\" [(ngModel)]=\"fileName\" readonly type=\"text\" class=\"form-control\"\r\n              id=\"upload\" accept=\"image/*\" placeholder=\"Upload Profile Picture\">\r\n            <img #uploadImage1 class=\"upload-image\" (click)=\"uploadFile.click()\" type=\"file\"\r\n              src=\"assets/images/icons/upload.svg\" alt=\"Logo\">\r\n            <div *ngIf=\"isImageRequired\" class=\"invalid-feedback d-block\">\r\n              <div class=\"ms-1\">\r\n                Please Upload Profile Image\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n            <div>\r\n              {{userError}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n        <!-- <div class=\"col-md-3 col-sm-12 pt-3 slider-tab text-center\">\r\n          <img class=\"slider-view\" src=\"assets/images/icons/stepper-3.svg\" alt=\"Logo\">\r\n        </div> -->\r\n        <div class=\"col-5\"></div>\r\n        <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n          <h6>\r\n            <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n              Back\r\n            </button>\r\n            &nbsp; &nbsp;\r\n            <button class=\"next\" (click)=\"next(5)\" [disabled]=\"showLoader\" [config]=\"DefaultButtonSpinnerConfig\">\r\n              <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n                alt=\"Logo\">\r\n            </button>\r\n            &nbsp; &nbsp;\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          &nbsp; &nbsp;\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&nbsp;&nbsp;\r\n                <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\"\r\n                  src=\"assets/images/icons/next.svg\" alt=\"Logo\">\r\n              </button>\r\n            </h6>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <!-- <div>test</div> -->\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 10\">\r\n      <app-credentialing (back)=\"onCredentialingBack()\" [data]=\"credentialingData\"></app-credentialing>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #termsAndConditionsModel>\r\n  <div class=\"modal-dialog modal-dialog-centered\">\r\n    <div class=\"modal-content terms-fixed-modal\">\r\n\r\n      <!-- HEADER -->\r\n      <div class=\"modal-header\">\r\n        <h4 class=\"modal-title fw-bold title-popup\">\r\n          {{ termsAndConditionTitle }}\r\n        </h4>\r\n      </div>\r\n\r\n      <!-- SCROLLABLE CONTENT ONLY -->\r\n      <div class=\"modal-body terms-scroll-area\" (scroll)=\"onTermsScroll($event)\">\r\n        <ng-container *ngIf=\"termsAndConditionTitle == 'Terms and Conditions'\">\r\n          <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n          </app-terms-conditions>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"termsAndConditionTitle != 'Terms and Conditions'\">\r\n          <app-privacy-policy [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n          </app-privacy-policy>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- FOOTER (NOT SCROLLING) -->\r\n      <div>\r\n        <div class=\"modal-footer text-end\" style=\"display: block;\">\r\n          <!-- YOUR BUTTONS \u2014 UNCHANGED -->\r\n          <button type=\"button\" class=\"btn btn-primary btn-sm px-4\"\r\n            style=\"background: #d3dae6; color: #98a2b3; border: #D3DAE6 !important;\"\r\n            (click)=\"decline(termsAndConditionTitle); modelRef.hide();\">\r\n            Decline\r\n          </button>\r\n\r\n          <button type=\"button\" class=\"btn btn-primary btn-sm px-4\" style=\"color:white;background: #4077AD;\"\r\n            [disabled]=\"!isAgreeEnabled\" (click)=\"agree(termsAndConditionTitle); modelRef.hide();\">\r\n            Agree\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".brand-name{font-weight:700;font-size:calc(100% + 4px)}::ng-deep .backdrop{background-color:transparent!important}.filter-black{filter:brightness(.4)!important}.footer-view{margin-top:3rem;margin-left:0;margin-right:0}.footer-signature{margin-top:9rem}.slider-view{width:11rem;margin-left:1px}.container{margin-top:30px}.container .card{border-radius:1.25rem}.container .header{padding:33px 10px 0}.container .header .logo{width:15%;height:80%}.container .form-control{padding:.75rem 1rem;border-color:#a1a1a1}.container .form-control:focus{color:#000;box-shadow:none;border-color:#a1a1a1!important}.container .form-control::placeholder{font-weight:500;font-size:12px;color:#a1a1a1}.container .link{color:#4077ad}.container .link-signup{font-weight:bolder}.container .form-check-label{margin-bottom:0;padding-top:9px}.container .content-view{margin-top:10%}.container .content-description{margin-top:25%}.container .tag-content{color:#fff9e8;margin-left:9%}.container .tag-content p{color:#fff9e8}.container .form-check-input:checked{background-color:#000;border-color:#000}.container .img-tick{margin:-31px 12px 0 -35px}.container .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #000000}.container .form-check-input:focus{box-shadow:none}.container input[type=checkbox]{accent-color:#000000}.term-list{padding:48px 60px 6px 0;margin-left:30px;color:\"#1f1f1fdb\"}.add-tab{padding:75px 75px 6px 1px;margin-left:50px;color:\"#1f1f1fdb\"}.add-tab-view{padding:75px 75px 6px 1px;margin-left:80px;color:\"#1f1f1fdb\"}.inspect-add{margin-top:3rem}.add-btn{font-size:16px;border-radius:5px;transition:.2s;padding:.25rem .5rem;background:#fff;border:1px solid rgba(148,147,147,.1882352941);color:#444;line-height:48px;box-shadow:0 1px 9px #98a2b3;width:9rem}.add-btn:hover{border:1px solid rgba(148,147,147,.1882352941);box-shadow:none}.agree{padding:0 0 8px 47px}.agree .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #98A2B3;width:14px;height:14px;margin:5px 9px 0 -35px}.agree .form-check-input:focus{box-shadow:none}.agree .form-check-input:checked{background-color:#000;border-color:#000}.agree .invalid-feedback{font-size:10px!important;margin:0 0 0 21px}.checkmark{vertical-align:text-bottom;color:#98a2b3;font-weight:500;font-size:12px}.term-signature{padding-left:16rem;padding-right:65px;position:absolute;margin:150px 0 0 50%}.participate-tab{height:135px;width:142px}.card-design{height:147px;width:160px;padding-left:10px;margin-left:42px;background:#fff0;border:2px solid #98A2B3;box-shadow:0 0 4px #98a2b3;border-radius:27px;margin-bottom:42px}.upload{height:39px;margin-top:-4px;width:126px;font-size:12px}.participate-tab{margin-top:-25px}.slider{width:14rem;margin-left:69px}.btn-clear{background:#d3dae6;color:#98a2b3;font-size:12px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;width:46%;line-height:28px}.btn-close{background:#f1f4fa;color:#98a2b3;font-size:17px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;font-weight:500;width:116px;color:#737a87;line-height:28px}.view-logo{padding-top:1%;padding-bottom:4%;text-align:center}.back-btn{border-radius:45px;height:41px}.next{background:#4077ad;border-radius:30px;height:60px;width:60px;border:white}.profile-field{margin-top:-10px}.profile-field input{line-height:30px;margin:-10px 3px 3px}.load-page{padding:21px 49px 13px 34px}.sign-img{width:291px;height:95px;border-radius:8px;border:1px solid rgba(179,178,178,.33);margin-top:19px}.upload-image{height:16px;width:16px;position:absolute;margin-left:66rem;margin-top:-39px}.para-comma{font-weight:500}.go-btn{border-radius:45px;height:50px;padding:0 20px;background:#4077ad;border:1px solid #4077ad;color:#fff;line-height:28px;font-size:14px;font-weight:500}.text-label{color:#747b83;font-weight:500}.form{padding:20px;border-radius:5px}.form-control:focus{color:#000;box-shadow:none;border-color:#848484!important}.form-control::placeholder{font-weight:500;font-size:12px;color:#bec1be;padding-left:10px}.btn-primary:active{background-color:#50575e}@media screen and (min-width: 500px) and (max-width: 769px){.content-view{background:#0c1620;width:44rem;margin:31px 0 0!important;padding:28px 32px 17px 71px!important;border-radius:29px}.upload-image{margin-left:25rem!important}}@media screen and (min-width: 768px) and (max-width: 1024px){.back-btn{height:31px;width:82px;position:absolute;margin-left:-53px}.back-tab{position:absolute;margin-left:-87px;height:37px}.go-btn{width:175px;height:44px}.term-signature{padding-left:10px}.upload-image{margin-left:40rem}}@media screen and (min-width: 374px) and (max-width: 426px){.head-logo{width:216px;padding-bottom:16px}.slider{visibility:hidden}.back-btn{height:31px;width:82px;position:absolute;margin-left:73px;margin-top:23px}.go-btn{width:175px;height:44px}.upload-image{margin-left:16rem}.term-signature{margin:84% 0 7px 4%}}@media screen and (min-width: 320px) and (max-width: 426px){.footer-signature{margin-top:20rem}.login .head-logo{padding:16px 2px 0;width:38%!important;height:40%!important}.container{margin-top:5px!important}.card{padding:2px!important}.tag-content{margin:3% 0 0!important;background-color:#121b24;border-radius:13px}.img-tick{margin:3px!important}.slider{visibility:hidden}.load-page{padding:0}.head-logo{width:216px;padding-bottom:16px}.back-btn{height:26px;width:71px;position:absolute;margin-left:-17rem!important;font-size:10px;margin-top:23px}.go-btn{width:142px;height:36px;margin-right:-28px;font-size:10px}.add-tab,.add-tab-view{padding:30px 33px 2px 3px;margin-left:15px}.add-btn{width:6rem}.slider-tab{visibility:hidden}.back-tab{margin-left:-14rem;margin-top:1px;font-size:14px;height:39px}.participate-tab{height:96px;width:87px}.card-design{height:124px;width:125px;padding-left:17px;margin-left:30px}.term-signature{padding:22px 22px 13px 27px}.term-list{padding:43px 10px 10px 3px;margin-left:0;text-align:-webkit-center}}@media screen and (min-width: 320px) and (max-width: 376px){.agree{padding:0 0 8px 25px}.participate-tab{height:96px;width:87px}.card-design{height:109px;width:97px;padding-left:4px;margin-left:10px}.card-design h6{font-size:10px;padding-left:14px;font-weight:600}.sign-img{width:270px}.term-list{padding:20px 20px 6px 4px;margin-left:13px}}@media screen and (min-width: 320px) and (max-width: 350px){.upload-image{height:13px;width:11px;margin-left:10rem;margin-top:-35px}.btn-clear{width:92px}.term-signature{margin:84% 0 7px 4%}}.disabled-btn{cursor:not-allowed!important;background:#4077ad!important;color:#fff!important}.modal-dialog .modal-content{border-radius:12px;background:#fff!important;border:1px solid rgba(128,128,128,.3294117647)!important}.title-popup{font-size:18px;color:#0c1620}ul.term-list-data li{padding-bottom:5px;font-size:13px;font-weight:500;line-height:21px}ol,ul,dl{margin-top:0;margin-bottom:1rem}::ng-deep .modal-content{background:none!important;width:100%;border:none}.hidden-view{display:none}.header-container{position:relative;padding:20px}.view-logo{text-align:center}.logout-button{top:20px;right:20px;position:absolute}.logout-button button{background:none;border:none;font-size:16px;display:flex;align-items:center;cursor:pointer}.logout-button img{margin-right:5px;height:20px}.user-card{align-items:center;color:#4077ad;cursor:pointer}.user-cards-active{background:#4077ad;color:#fff}.save-btn.upload{border:1px solid #4077AD;background-color:#4077ad;color:#fff;border-radius:5px;background:#4077ad;padding:4px 10px;display:inline-flex;align-items:center;gap:6px}.save-btn.upload img{filter:brightness(0) invert(1)}.form-check.agree{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}.form-check.agree .form-check-input{margin-top:4px;flex-shrink:0}.form-check.agree .form-check-label{line-height:1.4;cursor:pointer;white-space:normal}.spinner-16{width:16px;height:16px}.h6-buttons{display:flex;align-items:center;gap:8px}.form-check.agree{display:flex;align-items:flex-start;margin-bottom:14px}.form-check-input{position:absolute;opacity:0;cursor:pointer}.form-check-label{position:relative;padding-left:28px;cursor:pointer;font-size:14px;line-height:20px;color:#212529;-webkit-user-select:none;user-select:none}.form-check-label:before{content:\"\";position:absolute;left:0;top:8px;width:18px;height:18px;border:2px solid #adb5bd;border-radius:4px;background:#fff;transition:all .2s ease}.form-check-label:after{content:\"\";position:absolute;left:5px;top:10px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .15s ease}.form-check-input:checked+.form-check-label:before{background-color:#4077ad;border-color:#4077ad}.form-check-input:checked+.form-check-label:after{transform:rotate(45deg) scale(1)}.form-check-label:hover:before{border-color:#4077ad}.form-check-input:focus+.form-check-label:before{box-shadow:0 0 0 3px #0d6efd40}.form-check-input.is-invalid+.form-check-label:before{border-color:#dc3545}.form-check-input.is-invalid:checked+.form-check-label:before{background-color:#dc3545}.invalid-feedback{display:block;font-size:12px;margin-left:7px;margin-top:4px}::ng-deep .modal-dialog{max-width:750px}.user-cards-active{background-color:#4077ad;color:#fff;border:2px solid #4077AD}.terms-fixed-modal{width:1080px;height:700px;display:flex;flex-direction:column}.terms-scroll-area{flex:1 1 auto;overflow-y:auto;padding:16px}body.modal-open{overflow:hidden!important}.modal{z-index:1055!important}.modal-backdrop{z-index:1050!important}.modal-dialog{margin:auto;pointer-events:auto}.modal-content{position:relative;z-index:1060}.logout-container{display:flex;justify-content:flex-end}.logout-wrapper{display:flex;align-items:center;cursor:pointer;gap:6px}.logout-icon{width:20px;height:20px;background:url(/assets/images/icons/logoutt.svg) no-repeat center;background-size:contain}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i13.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i13.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }, { kind: "directive", type: GooglePlaceDirective, selector: "[ngx-google-places-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { kind: "component", type: TermsConditionsComponent, selector: "app-terms-conditions", inputs: ["title", "branding", "PrivacyAndTerms"] }, { kind: "component", type: PrivacyPolicyComponent, selector: "app-privacy-policy", inputs: ["title", "branding", "PrivacyAndTerms"] }, { kind: "component", type: CredentialingComponent, selector: "app-credentialing", inputs: ["data"], outputs: ["back"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InitialProcessComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-initial-process', standalone: false, template: "<div class=\"container\">\r\n  <div class=\"mb-4 logout-container\" *ngIf=\"showlogout\">\r\n    <span class=\"logout-wrapper\" (click)=\"logout()\">\r\n      <span class=\"logout-icon\"></span>\r\n      <span class=\"logout-text\">Logout</span>\r\n    </span>\r\n  </div>\r\n  <div class=\"card pb-2 pr-5\" style=\"margin-bottom: 30px;\">\r\n    <ng-container class=\"load-page\" [style.visibility]=\"view == 1 ? 'visible' : 'hidden' \">\r\n      <ul class=\"term-list para-comma\" [ngClass]=\"view == 1 ? '' : 'hidden-view'\">\r\n        Thanks for joining\r\n        <span class=\"brand-name\">{{ branding.displayName }}</span>.\r\n        Our members and service providers rely on accurate info in your profile to\r\n        connect you with work that suits your capabilities. Keep your profile\r\n        complete, skills updated, licenses current, photos and logos professional,\r\n        and schedule up to date.\r\n      </ul>\r\n      <div class=\"row col-12 mt-4\" [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n        <div class=\"col-md-6 col-lg-6 col-sm-12\">\r\n          <div class=\"form-group form-check agree\">\r\n            <input #acceptTerms=\"ngModel\" [ngClass]=\"{ 'is-invalid': !model.acceptTerms && validatePage==1 }\"\r\n              [(ngModel)]=\"model.acceptTerms\" type=\"checkbox\" name=\"acceptTerms\" id=\"acceptTerms\"\r\n              class=\"form-check-input\" (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\"\r\n              required>\r\n            <label for=\"acceptTerms\" class=\"form-check-label checkmark pointer\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\">\r\n              I agree to Terms and Conditions\r\n            </label>\r\n            <!-- <div *ngIf=\"!model.acceptTerms && validatePage==1\" class=\"invalid-feedback\">\r\n              Accept Terms & Conditions is required\r\n            </div> -->\r\n          </div>\r\n          <div class=\"form-group form-check agree\">\r\n            <input #privacy=\"ngModel\" [ngClass]=\"{ 'is-invalid':!model.privacy  && validatePage==1}\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\" [(ngModel)]=\"model.privacy\"\r\n              type=\"checkbox\" name=\"privacy\" id=\"privacy\" class=\"form-check-input\" required>\r\n            <label for=\"privacy\" class=\"form-check-label checkmark pointer\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\">\r\n              I agree to Privacy Statement\r\n            </label>\r\n            <!-- <div *ngIf=\"!model.privacy && validatePage==1\" class=\"invalid-feedback\">\r\n              Accept Privacy Statement\r\n            </div> -->\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 justify-content-between row footer-signature\"\r\n        [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n        <!-- <div class=\"col-md-3 col-sm-3 slider-tab\">\r\n        </div> -->\r\n\r\n        <div class=\"col-6\"></div>\r\n        <div class=\"col-md-12 col-sm-12 col-xl-3 text-end\">\r\n          <h6>\r\n            <button class=\"next\" (click)=\" next(2)\"\r\n              [ngClass]=\"(((!points || !points?.length || points.length ==0) && !fileData ) || !model.acceptTerms || !model.privacy) ? 'disabled-btn':''\">\r\n              <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n                alt=\"Logo\">\r\n            </button>&nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n      <ng-container>\r\n        <div class=\"term-signature col-md-6 col-lg-6 col-sm-12\" [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n          <h6 class=\"checkmark\">Signature</h6>\r\n          <div [ngClass]=\"{ 'd-none': signaturePadData?.publicUrl }\" class=\"sign-img mb-2\">\r\n            <canvas #canvas [width]=\"255\" [height]=\"90\"></canvas>\r\n          </div>\r\n          <div [ngClass]=\"{ 'd-none': !signaturePadData?.publicUrl }\" class=\"mb-2\">\r\n            <img [width]=\"255\" [height]=\"120\" [src]=\"signaturePadData?.publicUrl\" style=\"position: relative\" alt>\r\n          </div>\r\n          <h6 class=\"d-flex align-items-center gap-2\">\r\n            <button (click)=\"clearPad()\" class=\"btn-clear btn-sm\">\r\n              Clear\r\n            </button>\r\n\r\n            <!-- <button (click)=\"uploadImage.click()\" class=\"save-btn upload btn-sm\">\r\n              <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\">\r\n              Upload\r\n              <input #uploadImage type=\"file\" class=\"image-upload d-none\" accept=\"image/*\"\r\n                (change)=\"uploadSignImage($event)\">\r\n            </button> -->\r\n          </h6>\r\n\r\n          <div *ngIf=\"validatePage==1 && (!points || !points?.length || points.length ==0) && !fileData\"\r\n            class=\"invalid-feedback d-block\">\r\n            Signature is required\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 2\">\r\n      <div class=\"add-tab-view \">\r\n        <ul>\r\n          <h5>\r\n            <b>\r\n              Please choose the relevant sections in which you wish to\r\n              participate\r\n            </b>\r\n          </h5>\r\n          <br>\r\n          <b class=\"para-comma\">\r\n            Choose the areas you'd like to be part of \u2014 whether it's programs, services, events, or collaborations,\r\n            you're in control of your involvement.\r\n            <br>\r\n            connect your business to others and prospective clients.\r\n          </b>\r\n        </ul>\r\n\r\n        <div class=\"row mt-4\">\r\n          <ng-container *ngFor=\"let userType of userViewRoles\">\r\n            <div class=\"card card-design text-center user-card mx-2 my-2\" style=\"width: 12%;\"\r\n              [ngClass]=\"userType.value === selectedRoleValue ? 'user-cards-active' : ''\"\r\n              (click)=\"selectedUserRole(userType)\">\r\n              <img [src]=\"userType?.img\" class=\"mb-2 mt-2\" style=\"width: 70px;height: 70px;\">\r\n              <h6 class=\"m-0 mt-2\">{{userType.name}}</h6>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <!-- <h6 class=\"inspect-add\">\r\n          <button (click)=\"next(3);isBusiness=true;\" class=\"add-btn btn-sm\">\r\n            Yes\r\n          </button>\r\n          &nbsp; &nbsp;\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            &nbsp; &nbsp;\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            &nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 3\">\r\n      <form [formGroup]=\"companyForm\" class=\"form\">\r\n        <div class=\"term-list \">\r\n          <ul>\r\n            <h5>\r\n              <b>\r\n                Enter your business information here.\r\n              </b>\r\n            </h5>\r\n            <br>\r\n          </ul>\r\n          <div class=\"profile-field\">\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-6 col-sm-12  mt-3 mb-2\">\r\n                <input [ngClass]=\"{'is-invalid': ( f.companyName.errors && validatePage == 3) || providerError}\"\r\n                  type=\"text\" class=\"form-control\" id=\"companyName\" placeholder=\"Company Name\"\r\n                  formControlName=\"companyName\">\r\n                <div *ngIf=\" f.companyName.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.companyName.errors.required\">\r\n                    Company Name is required\r\n                  </div>\r\n                  <div *ngIf=\"f.companyName.errors.minlength\">\r\n                    Company Name must be at least 2 characters\r\n                  </div>\r\n                  <div *ngIf=\"f.companyName.errors.maxLength\">\r\n                    Company Name must be less than 100 characters\r\n                  </div>\r\n                </div>\r\n                <div *ngIf=\"providerError\" class=\"invalid-feedback\">\r\n                  <div>\r\n                    {{providerError}}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input class=\"form-control block fw-medium shadow-none\" type=\"text\" name=\"inputPhone\"\r\n                  placeholder=\"Company Phone Number \" id=\"inputPhone\" autocomplete=\"off\" formControlName=\"phoneNumber\"\r\n                  appMobileMask [maxLength]=\"300\"\r\n                  [ngClass]=\"{'is-invalid': ( f.phoneNumber.errors && validatePage == 3) || providerError}\">\r\n                <div *ngIf=\"f.phoneNumber.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.phoneNumber.errors.required\">\r\n                    Phone Number is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.address1.errors&& validatePage == 3 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"businessAddress\" ngx-google-places-autocomplete [options]='options'\r\n                  (onAddressChange)=\"AddressChange($event)\" placeholder=\"Business Address 1\" formControlName=\"address1\">\r\n                <div *ngIf=\" f.address1.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.address1.errors.required\">\r\n                    Business Address 1 is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input type=\"text\" class=\"form-control\" id=\"businessAddress2\" placeholder=\"Business Address 2\">\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.city.errors&& validatePage == 3 }\" type=\"text\" class=\"form-control\"\r\n                  id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n                <div *ngIf=\" f.city.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.city.errors.required\">City is required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.state.errors&& validatePage == 3 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n                <div *ngIf=\" f.state.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.state.errors.required\">State is required</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [textMask]=\"{ mask: zipcodeMask }\"\r\n                  [ngClass]=\"{ 'is-invalid':  f.zipcode.errors&& validatePage == 3 }\" type=\"text\" class=\"form-control\"\r\n                  id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n                <div *ngIf=\" f.zipcode.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.zipcode.errors.required\">Zipcode is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.country.errors && validatePage == 3}\" type=\"text\"\r\n                  class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n                <div *ngIf=\" f.country.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.country.errors.required\">Country is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n      <div *ngIf=\"selectedRole?.name == 'Contractor'\" style=\"padding: 0px 20px;border-radius: 5px;\">\r\n        <div class=\"term-list pt-0\">\r\n          <h5>\r\n            <b>\r\n              Contractor Category\r\n            </b>\r\n          </h5>\r\n          <div class=\"profile-field\">\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-12 col-sm-12  mb-2\">\r\n                <label></label>\r\n                <ng-select [items]=\"contractorSubCategories\" bindLabel=\"name\" [multiple]=\"true\" [closeOnSelect]=\"false\"\r\n                  placeholder=\"Select Contractor Category\" (ngModelChange)=\"changeContractor($event)\"\r\n                  [(ngModel)]=\"selectedContractorCategories\">\r\n                </ng-select>\r\n              </div>\r\n            </div>\r\n            <accordion [isAnimated]=\"false\">\r\n              <ng-container *ngFor=\"let item of selectedContractorCategories;let i=index\">\r\n                <accordion-group [isOpen]=\"true\">\r\n                  <button accordion-heading class=\"w-100\" style=\"font-size: 16px;font-weight: 600;\">\r\n                    <div class=\"w-100 mt-2\">\r\n                      <div class=\"backdrop\">\r\n                        <input type=\"checkbox\" [(ngModel)]=\"item.selectAll\" [name]=\"item?.id\" [id]=\"item?.id\"\r\n                          (change)=\"selectAll($event,item?.items)\">\r\n                        <label [for]=\"item?.id\">&nbsp;{{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\">&nbsp;{{subItem?.name}}</label>\r\n                    </div>\r\n                  </div>\r\n                </accordion-group>\r\n              </ng-container>\r\n            </accordion>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n        <!-- <div class=\"col-md-3 col-sm-12 slider-tab text-center\">\r\n          <img class=\"slider-view\" src=\"assets/images/icons/stepper-2.svg\" alt=\"Logo\">\r\n        </div> -->\r\n        <div class=\"col-5\"></div>\r\n        <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n          <h6>\r\n            <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n              Back\r\n            </button>\r\n            &nbsp; &nbsp;\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            &nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 4\">\r\n\r\n      <div class=\"add-tab \">\r\n        <ul>\r\n          <h5 class=\"p-4 pb-2\">\r\n            <b>\r\n              We need basic information's and headshot for your profile\r\n            </b>\r\n            <div class=\"form-group form-check agree p-0 mt-3\" *ngIf=\"isBusiness\">\r\n              <input [(ngModel)]=\"isCopy\" type=\"checkbox\" name=\"isCopy\" id=\"isCopy\" class=\"form-check-input mt-2\"\r\n                (change)=\"changeAddressUser()\">\r\n              <label for=\"isCopy\" class=\"form-check-label checkmark\">\r\n                Copy From Provider Infromation\r\n              </label>\r\n            </div>\r\n          </h5>\r\n        </ul>\r\n        <div class=\"profile-field\">\r\n          <form [formGroup]=\"userForm\" class=\"form pb-0\">\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.firstName.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" placeholder=\"Fist Name\" formControlName=\"firstName\" id=\"firstName\">\r\n                <div *ngIf=\" u.firstName.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n                    First Name is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.lastName.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\">\r\n                <div *ngIf=\" u.lastName.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.lastName.errors.required\">\r\n                    Last Name is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.email.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\">\r\n                <div *ngIf=\" u.email.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.email.errors.required\">\r\n                    Emai is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-12 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.address1.errors && validatePage == 4 }\" [options]=\"options\"\r\n                  (onAddressChange)=\"AddressChangeUser($event)\" type=\"text\" class=\"form-control\"\r\n                  placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete>\r\n                <div *ngIf=\" u.address1.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.address1.errors.required\">\r\n                    Home Address 1 is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n                  placeholder=\"Home Address 2\">\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.city.errors && validatePage == 4}\" type=\"text\" class=\"form-control\"\r\n                  id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n                <div *ngIf=\" u.city.errors && validatePage ==4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.city.errors.required\">City is required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.state.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n                <div *ngIf=\" u.state.errors  && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.state.errors.required\">State is required</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [textMask]=\"{ mask: zipcodeMask }\"\r\n                  [ngClass]=\"{ 'is-invalid':  u.zipcode.errors  && validatePage == 4 }\" type=\"text\" class=\"form-control\"\r\n                  id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n                <div *ngIf=\" u.zipcode.errors  && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.zipcode.errors.required\">Zipcode is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.country.errors  && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n                <div *ngIf=\" u.country.errors  && validatePage ==4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.country.errors.required\">Country is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input class=\"form-control block shadow-none\" type=\"text\" name=\"inputPhone\" placeholder=\"Phone Number \"\r\n                  id=\"inputPhone\" autocomplete=\"off\" formControlName=\"phoneNumber\" appMobileMask [maxLength]=\"300\"\r\n                  [ngClass]=\"{'is-invalid': ( u.phoneNumber.errors && validatePage == 4)}\">\r\n                <div *ngIf=\"u.phoneNumber.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors.required\">\r\n                    Phone Number is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </form>\r\n          <div class=\"form-group mb-2 form\">\r\n            <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\"\r\n              class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n            <input (click)=\"uploadImage1.click()\" [(ngModel)]=\"fileName\" readonly type=\"text\" class=\"form-control\"\r\n              id=\"upload\" accept=\"image/*\" placeholder=\"Upload Profile Picture\">\r\n            <img #uploadImage1 class=\"upload-image\" (click)=\"uploadFile.click()\" type=\"file\"\r\n              src=\"assets/images/icons/upload.svg\" alt=\"Logo\">\r\n            <div *ngIf=\"isImageRequired\" class=\"invalid-feedback d-block\">\r\n              <div class=\"ms-1\">\r\n                Please Upload Profile Image\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n            <div>\r\n              {{userError}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n        <!-- <div class=\"col-md-3 col-sm-12 pt-3 slider-tab text-center\">\r\n          <img class=\"slider-view\" src=\"assets/images/icons/stepper-3.svg\" alt=\"Logo\">\r\n        </div> -->\r\n        <div class=\"col-5\"></div>\r\n        <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n          <h6>\r\n            <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n              Back\r\n            </button>\r\n            &nbsp; &nbsp;\r\n            <button class=\"next\" (click)=\"next(5)\" [disabled]=\"showLoader\" [config]=\"DefaultButtonSpinnerConfig\">\r\n              <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n                alt=\"Logo\">\r\n            </button>\r\n            &nbsp; &nbsp;\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          &nbsp; &nbsp;\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&nbsp;&nbsp;\r\n                <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\"\r\n                  src=\"assets/images/icons/next.svg\" alt=\"Logo\">\r\n              </button>\r\n            </h6>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <!-- <div>test</div> -->\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 10\">\r\n      <app-credentialing (back)=\"onCredentialingBack()\" [data]=\"credentialingData\"></app-credentialing>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #termsAndConditionsModel>\r\n  <div class=\"modal-dialog modal-dialog-centered\">\r\n    <div class=\"modal-content terms-fixed-modal\">\r\n\r\n      <!-- HEADER -->\r\n      <div class=\"modal-header\">\r\n        <h4 class=\"modal-title fw-bold title-popup\">\r\n          {{ termsAndConditionTitle }}\r\n        </h4>\r\n      </div>\r\n\r\n      <!-- SCROLLABLE CONTENT ONLY -->\r\n      <div class=\"modal-body terms-scroll-area\" (scroll)=\"onTermsScroll($event)\">\r\n        <ng-container *ngIf=\"termsAndConditionTitle == 'Terms and Conditions'\">\r\n          <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n          </app-terms-conditions>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"termsAndConditionTitle != 'Terms and Conditions'\">\r\n          <app-privacy-policy [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n          </app-privacy-policy>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- FOOTER (NOT SCROLLING) -->\r\n      <div>\r\n        <div class=\"modal-footer text-end\" style=\"display: block;\">\r\n          <!-- YOUR BUTTONS \u2014 UNCHANGED -->\r\n          <button type=\"button\" class=\"btn btn-primary btn-sm px-4\"\r\n            style=\"background: #d3dae6; color: #98a2b3; border: #D3DAE6 !important;\"\r\n            (click)=\"decline(termsAndConditionTitle); modelRef.hide();\">\r\n            Decline\r\n          </button>\r\n\r\n          <button type=\"button\" class=\"btn btn-primary btn-sm px-4\" style=\"color:white;background: #4077AD;\"\r\n            [disabled]=\"!isAgreeEnabled\" (click)=\"agree(termsAndConditionTitle); modelRef.hide();\">\r\n            Agree\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".brand-name{font-weight:700;font-size:calc(100% + 4px)}::ng-deep .backdrop{background-color:transparent!important}.filter-black{filter:brightness(.4)!important}.footer-view{margin-top:3rem;margin-left:0;margin-right:0}.footer-signature{margin-top:9rem}.slider-view{width:11rem;margin-left:1px}.container{margin-top:30px}.container .card{border-radius:1.25rem}.container .header{padding:33px 10px 0}.container .header .logo{width:15%;height:80%}.container .form-control{padding:.75rem 1rem;border-color:#a1a1a1}.container .form-control:focus{color:#000;box-shadow:none;border-color:#a1a1a1!important}.container .form-control::placeholder{font-weight:500;font-size:12px;color:#a1a1a1}.container .link{color:#4077ad}.container .link-signup{font-weight:bolder}.container .form-check-label{margin-bottom:0;padding-top:9px}.container .content-view{margin-top:10%}.container .content-description{margin-top:25%}.container .tag-content{color:#fff9e8;margin-left:9%}.container .tag-content p{color:#fff9e8}.container .form-check-input:checked{background-color:#000;border-color:#000}.container .img-tick{margin:-31px 12px 0 -35px}.container .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #000000}.container .form-check-input:focus{box-shadow:none}.container input[type=checkbox]{accent-color:#000000}.term-list{padding:48px 60px 6px 0;margin-left:30px;color:\"#1f1f1fdb\"}.add-tab{padding:75px 75px 6px 1px;margin-left:50px;color:\"#1f1f1fdb\"}.add-tab-view{padding:75px 75px 6px 1px;margin-left:80px;color:\"#1f1f1fdb\"}.inspect-add{margin-top:3rem}.add-btn{font-size:16px;border-radius:5px;transition:.2s;padding:.25rem .5rem;background:#fff;border:1px solid rgba(148,147,147,.1882352941);color:#444;line-height:48px;box-shadow:0 1px 9px #98a2b3;width:9rem}.add-btn:hover{border:1px solid rgba(148,147,147,.1882352941);box-shadow:none}.agree{padding:0 0 8px 47px}.agree .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #98A2B3;width:14px;height:14px;margin:5px 9px 0 -35px}.agree .form-check-input:focus{box-shadow:none}.agree .form-check-input:checked{background-color:#000;border-color:#000}.agree .invalid-feedback{font-size:10px!important;margin:0 0 0 21px}.checkmark{vertical-align:text-bottom;color:#98a2b3;font-weight:500;font-size:12px}.term-signature{padding-left:16rem;padding-right:65px;position:absolute;margin:150px 0 0 50%}.participate-tab{height:135px;width:142px}.card-design{height:147px;width:160px;padding-left:10px;margin-left:42px;background:#fff0;border:2px solid #98A2B3;box-shadow:0 0 4px #98a2b3;border-radius:27px;margin-bottom:42px}.upload{height:39px;margin-top:-4px;width:126px;font-size:12px}.participate-tab{margin-top:-25px}.slider{width:14rem;margin-left:69px}.btn-clear{background:#d3dae6;color:#98a2b3;font-size:12px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;width:46%;line-height:28px}.btn-close{background:#f1f4fa;color:#98a2b3;font-size:17px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;font-weight:500;width:116px;color:#737a87;line-height:28px}.view-logo{padding-top:1%;padding-bottom:4%;text-align:center}.back-btn{border-radius:45px;height:41px}.next{background:#4077ad;border-radius:30px;height:60px;width:60px;border:white}.profile-field{margin-top:-10px}.profile-field input{line-height:30px;margin:-10px 3px 3px}.load-page{padding:21px 49px 13px 34px}.sign-img{width:291px;height:95px;border-radius:8px;border:1px solid rgba(179,178,178,.33);margin-top:19px}.upload-image{height:16px;width:16px;position:absolute;margin-left:66rem;margin-top:-39px}.para-comma{font-weight:500}.go-btn{border-radius:45px;height:50px;padding:0 20px;background:#4077ad;border:1px solid #4077ad;color:#fff;line-height:28px;font-size:14px;font-weight:500}.text-label{color:#747b83;font-weight:500}.form{padding:20px;border-radius:5px}.form-control:focus{color:#000;box-shadow:none;border-color:#848484!important}.form-control::placeholder{font-weight:500;font-size:12px;color:#bec1be;padding-left:10px}.btn-primary:active{background-color:#50575e}@media screen and (min-width: 500px) and (max-width: 769px){.content-view{background:#0c1620;width:44rem;margin:31px 0 0!important;padding:28px 32px 17px 71px!important;border-radius:29px}.upload-image{margin-left:25rem!important}}@media screen and (min-width: 768px) and (max-width: 1024px){.back-btn{height:31px;width:82px;position:absolute;margin-left:-53px}.back-tab{position:absolute;margin-left:-87px;height:37px}.go-btn{width:175px;height:44px}.term-signature{padding-left:10px}.upload-image{margin-left:40rem}}@media screen and (min-width: 374px) and (max-width: 426px){.head-logo{width:216px;padding-bottom:16px}.slider{visibility:hidden}.back-btn{height:31px;width:82px;position:absolute;margin-left:73px;margin-top:23px}.go-btn{width:175px;height:44px}.upload-image{margin-left:16rem}.term-signature{margin:84% 0 7px 4%}}@media screen and (min-width: 320px) and (max-width: 426px){.footer-signature{margin-top:20rem}.login .head-logo{padding:16px 2px 0;width:38%!important;height:40%!important}.container{margin-top:5px!important}.card{padding:2px!important}.tag-content{margin:3% 0 0!important;background-color:#121b24;border-radius:13px}.img-tick{margin:3px!important}.slider{visibility:hidden}.load-page{padding:0}.head-logo{width:216px;padding-bottom:16px}.back-btn{height:26px;width:71px;position:absolute;margin-left:-17rem!important;font-size:10px;margin-top:23px}.go-btn{width:142px;height:36px;margin-right:-28px;font-size:10px}.add-tab,.add-tab-view{padding:30px 33px 2px 3px;margin-left:15px}.add-btn{width:6rem}.slider-tab{visibility:hidden}.back-tab{margin-left:-14rem;margin-top:1px;font-size:14px;height:39px}.participate-tab{height:96px;width:87px}.card-design{height:124px;width:125px;padding-left:17px;margin-left:30px}.term-signature{padding:22px 22px 13px 27px}.term-list{padding:43px 10px 10px 3px;margin-left:0;text-align:-webkit-center}}@media screen and (min-width: 320px) and (max-width: 376px){.agree{padding:0 0 8px 25px}.participate-tab{height:96px;width:87px}.card-design{height:109px;width:97px;padding-left:4px;margin-left:10px}.card-design h6{font-size:10px;padding-left:14px;font-weight:600}.sign-img{width:270px}.term-list{padding:20px 20px 6px 4px;margin-left:13px}}@media screen and (min-width: 320px) and (max-width: 350px){.upload-image{height:13px;width:11px;margin-left:10rem;margin-top:-35px}.btn-clear{width:92px}.term-signature{margin:84% 0 7px 4%}}.disabled-btn{cursor:not-allowed!important;background:#4077ad!important;color:#fff!important}.modal-dialog .modal-content{border-radius:12px;background:#fff!important;border:1px solid rgba(128,128,128,.3294117647)!important}.title-popup{font-size:18px;color:#0c1620}ul.term-list-data li{padding-bottom:5px;font-size:13px;font-weight:500;line-height:21px}ol,ul,dl{margin-top:0;margin-bottom:1rem}::ng-deep .modal-content{background:none!important;width:100%;border:none}.hidden-view{display:none}.header-container{position:relative;padding:20px}.view-logo{text-align:center}.logout-button{top:20px;right:20px;position:absolute}.logout-button button{background:none;border:none;font-size:16px;display:flex;align-items:center;cursor:pointer}.logout-button img{margin-right:5px;height:20px}.user-card{align-items:center;color:#4077ad;cursor:pointer}.user-cards-active{background:#4077ad;color:#fff}.save-btn.upload{border:1px solid #4077AD;background-color:#4077ad;color:#fff;border-radius:5px;background:#4077ad;padding:4px 10px;display:inline-flex;align-items:center;gap:6px}.save-btn.upload img{filter:brightness(0) invert(1)}.form-check.agree{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}.form-check.agree .form-check-input{margin-top:4px;flex-shrink:0}.form-check.agree .form-check-label{line-height:1.4;cursor:pointer;white-space:normal}.spinner-16{width:16px;height:16px}.h6-buttons{display:flex;align-items:center;gap:8px}.form-check.agree{display:flex;align-items:flex-start;margin-bottom:14px}.form-check-input{position:absolute;opacity:0;cursor:pointer}.form-check-label{position:relative;padding-left:28px;cursor:pointer;font-size:14px;line-height:20px;color:#212529;-webkit-user-select:none;user-select:none}.form-check-label:before{content:\"\";position:absolute;left:0;top:8px;width:18px;height:18px;border:2px solid #adb5bd;border-radius:4px;background:#fff;transition:all .2s ease}.form-check-label:after{content:\"\";position:absolute;left:5px;top:10px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .15s ease}.form-check-input:checked+.form-check-label:before{background-color:#4077ad;border-color:#4077ad}.form-check-input:checked+.form-check-label:after{transform:rotate(45deg) scale(1)}.form-check-label:hover:before{border-color:#4077ad}.form-check-input:focus+.form-check-label:before{box-shadow:0 0 0 3px #0d6efd40}.form-check-input.is-invalid+.form-check-label:before{border-color:#dc3545}.form-check-input.is-invalid:checked+.form-check-label:before{background-color:#dc3545}.invalid-feedback{display:block;font-size:12px;margin-left:7px;margin-top:4px}::ng-deep .modal-dialog{max-width:750px}.user-cards-active{background-color:#4077ad;color:#fff;border:2px solid #4077AD}.terms-fixed-modal{width:1080px;height:700px;display:flex;flex-direction:column}.terms-scroll-area{flex:1 1 auto;overflow-y:auto;padding:16px}body.modal-open{overflow:hidden!important}.modal{z-index:1055!important}.modal-backdrop{z-index:1050!important}.modal-dialog{margin:auto;pointer-events:auto}.modal-content{position:relative;z-index:1060}.logout-container{display:flex;justify-content:flex-end}.logout-wrapper{display:flex;align-items:center;cursor:pointer;gap:6px}.logout-icon{width:20px;height:20px;background:url(/assets/images/icons/logoutt.svg) no-repeat center;background-size:contain}\n"] }]
+            args: [{ selector: 'app-initial-process', standalone: false, template: "<div class=\"container\">\r\n  <div class=\"mb-4 logout-container\" *ngIf=\"showlogout\">\r\n    <span class=\"logout-wrapper\" (click)=\"logout()\">\r\n      <span class=\"logout-icon\"></span>\r\n      <span class=\"logout-text\">Logout</span>\r\n    </span>\r\n  </div>\r\n  <div class=\"card pb-2 pr-5\" style=\"margin-bottom: 30px;\">\r\n    <ng-container class=\"load-page\" [style.visibility]=\"view == 1 ? 'visible' : 'hidden' \">\r\n      <ul class=\"term-list para-comma\" [ngClass]=\"view == 1 ? '' : 'hidden-view'\">\r\n        Thanks for joining\r\n        <span class=\"brand-name\">{{ branding.displayName }}</span>.\r\n        Our members and service providers rely on accurate info in your profile to\r\n        connect you with work that suits your capabilities. Keep your profile\r\n        complete, skills updated, licenses current, photos and logos professional,\r\n        and schedule up to date.\r\n      </ul>\r\n      <div class=\"row col-12 mt-4\" [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n        <div class=\"col-md-6 col-lg-6 col-sm-12\">\r\n          <div class=\"form-group form-check agree\">\r\n            <input #acceptTerms=\"ngModel\" [ngClass]=\"{ 'is-invalid': !model.acceptTerms && validatePage==1 }\"\r\n              [(ngModel)]=\"model.acceptTerms\" type=\"checkbox\" name=\"acceptTerms\" id=\"acceptTerms\"\r\n              class=\"form-check-input\" (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\"\r\n              required>\r\n            <label for=\"acceptTerms\" class=\"form-check-label checkmark pointer\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\">\r\n              I agree to Terms and Conditions\r\n            </label>\r\n            <!-- <div *ngIf=\"!model.acceptTerms && validatePage==1\" class=\"invalid-feedback\">\r\n              Accept Terms & Conditions is required\r\n            </div> -->\r\n          </div>\r\n          <div class=\"form-group form-check agree\">\r\n            <input #privacy=\"ngModel\" [ngClass]=\"{ 'is-invalid':!model.privacy  && validatePage==1}\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\" [(ngModel)]=\"model.privacy\"\r\n              type=\"checkbox\" name=\"privacy\" id=\"privacy\" class=\"form-check-input\" required>\r\n            <label for=\"privacy\" class=\"form-check-label checkmark pointer\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\">\r\n              I agree to Privacy Statement\r\n            </label>\r\n            <!-- <div *ngIf=\"!model.privacy && validatePage==1\" class=\"invalid-feedback\">\r\n              Accept Privacy Statement\r\n            </div> -->\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 justify-content-between row footer-signature\"\r\n        [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n        <!-- <div class=\"col-md-3 col-sm-3 slider-tab\">\r\n        </div> -->\r\n\r\n        <div class=\"col-6\"></div>\r\n        <div class=\"col-md-12 col-sm-12 col-xl-3 text-end\">\r\n          <h6>\r\n            <button class=\"next\" (click)=\" next(2)\"\r\n              [ngClass]=\"(((!points || !points?.length || points.length ==0) && !fileData ) || !model.acceptTerms || !model.privacy) ? 'disabled-btn':''\">\r\n              <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n                alt=\"Logo\">\r\n            </button>&nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n      <ng-container>\r\n        <div class=\"term-signature col-md-6 col-lg-6 col-sm-12\" [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n          <h6 class=\"checkmark\">Signature</h6>\r\n          <div [ngClass]=\"{ 'd-none': signaturePadData?.publicUrl }\" class=\"sign-img mb-2\">\r\n            <canvas #canvas [width]=\"255\" [height]=\"90\"></canvas>\r\n          </div>\r\n          <div [ngClass]=\"{ 'd-none': !signaturePadData?.publicUrl }\" class=\"mb-2\">\r\n            <img [width]=\"255\" [height]=\"120\" [src]=\"signaturePadData?.publicUrl\" style=\"position: relative\" alt>\r\n          </div>\r\n          <h6 class=\"d-flex align-items-center gap-2\">\r\n            <button (click)=\"clearPad()\" class=\"btn-clear btn-sm\">\r\n              Clear\r\n            </button>\r\n\r\n            <!-- <button (click)=\"uploadImage.click()\" class=\"save-btn upload btn-sm\">\r\n              <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\">\r\n              Upload\r\n              <input #uploadImage type=\"file\" class=\"image-upload d-none\" accept=\"image/*\"\r\n                (change)=\"uploadSignImage($event)\">\r\n            </button> -->\r\n          </h6>\r\n\r\n          <div *ngIf=\"validatePage==1 && (!points || !points?.length || points.length ==0) && !fileData\"\r\n            class=\"invalid-feedback d-block\">\r\n            Signature is required\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 2\">\r\n      <div class=\"add-tab-view \">\r\n        <ul>\r\n          <h5>\r\n            <b>\r\n              Please choose the relevant sections in which you wish to\r\n              participate\r\n            </b>\r\n          </h5>\r\n          <br>\r\n          <b class=\"para-comma\">\r\n            Choose the areas you'd like to be part of \u2014 whether it's programs, services, events, or collaborations,\r\n            you're in control of your involvement.\r\n            <br>\r\n            connect your business to others and prospective clients.\r\n          </b>\r\n        </ul>\r\n\r\n        <div class=\"row mt-4\">\r\n          <ng-container *ngFor=\"let userType of userViewRoles\">\r\n            <div class=\"card card-design text-center user-card mx-2 my-2\" style=\"width: 12%;\"\r\n              [ngClass]=\"userType.value === selectedRoleValue ? 'user-cards-active' : ''\"\r\n              (click)=\"selectedUserRole(userType)\">\r\n              <img [src]=\"userType?.img\" class=\"mb-2 mt-2\" style=\"width: 70px;height: 70px;\">\r\n              <h6 class=\"m-0 mt-2\">{{userType.name}}</h6>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <!-- <h6 class=\"inspect-add\">\r\n          <button (click)=\"next(3);isBusiness=true;\" class=\"add-btn btn-sm\">\r\n            Yes\r\n          </button>\r\n          &nbsp; &nbsp;\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            &nbsp; &nbsp;\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            &nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 3\">\r\n      <form [formGroup]=\"companyForm\" class=\"form\">\r\n        <div class=\"term-list \">\r\n          <ul>\r\n            <h5>\r\n              <b>\r\n                Enter your business information here.\r\n              </b>\r\n            </h5>\r\n            <br>\r\n          </ul>\r\n          <div class=\"profile-field\">\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-6 col-sm-12  mt-3 mb-2\">\r\n                <input [ngClass]=\"{'is-invalid': ( f.companyName.errors && validatePage == 3) || providerError}\"\r\n                  type=\"text\" class=\"form-control\" id=\"companyName\" placeholder=\"Company Name\"\r\n                  formControlName=\"companyName\">\r\n                <div *ngIf=\" f.companyName.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.companyName.errors.required\">\r\n                    Company Name is required\r\n                  </div>\r\n                  <div *ngIf=\"f.companyName.errors.minlength\">\r\n                    Company Name must be at least 2 characters\r\n                  </div>\r\n                  <div *ngIf=\"f.companyName.errors.maxLength\">\r\n                    Company Name must be less than 100 characters\r\n                  </div>\r\n                </div>\r\n                <div *ngIf=\"providerError\" class=\"invalid-feedback\">\r\n                  <div>\r\n                    {{providerError}}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input class=\"form-control block fw-medium shadow-none\" type=\"text\" name=\"inputPhone\"\r\n                  placeholder=\"Company Phone Number \" id=\"inputPhone\" autocomplete=\"off\" formControlName=\"phoneNumber\"\r\n                  appMobileMask [maxLength]=\"300\"\r\n                  [ngClass]=\"{'is-invalid': ( f.phoneNumber.errors && validatePage == 3) || providerError}\">\r\n                <div *ngIf=\"f.phoneNumber.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.phoneNumber.errors.required\">\r\n                    Phone Number is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.address1.errors&& validatePage == 3 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"businessAddress\" ngx-google-places-autocomplete [options]='options'\r\n                  (onAddressChange)=\"AddressChange($event)\" placeholder=\"Business Address 1\" formControlName=\"address1\">\r\n                <div *ngIf=\" f.address1.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.address1.errors.required\">\r\n                    Business Address 1 is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input type=\"text\" class=\"form-control\" id=\"businessAddress2\" placeholder=\"Business Address 2\">\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.city.errors&& validatePage == 3 }\" type=\"text\" class=\"form-control\"\r\n                  id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n                <div *ngIf=\" f.city.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.city.errors.required\">City is required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.state.errors&& validatePage == 3 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n                <div *ngIf=\" f.state.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.state.errors.required\">State is required</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [textMask]=\"{ mask: zipcodeMask }\"\r\n                  [ngClass]=\"{ 'is-invalid':  f.zipcode.errors&& validatePage == 3 }\" type=\"text\" class=\"form-control\"\r\n                  id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n                <div *ngIf=\" f.zipcode.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.zipcode.errors.required\">Zipcode is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.country.errors && validatePage == 3}\" type=\"text\"\r\n                  class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n                <div *ngIf=\" f.country.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.country.errors.required\">Country is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n            <div 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\">&nbsp;{{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\">&nbsp;{{subItem?.name}}</label>\r\n                    </div>\r\n                  </div>\r\n                </accordion-group>\r\n              </ng-container>\r\n            </accordion>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n        <!-- <div class=\"col-md-3 col-sm-12 slider-tab text-center\">\r\n          <img class=\"slider-view\" src=\"assets/images/icons/stepper-2.svg\" alt=\"Logo\">\r\n        </div> -->\r\n        <div class=\"col-5\"></div>\r\n        <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n          <h6>\r\n            <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n              Back\r\n            </button>\r\n            &nbsp; &nbsp;\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            &nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 4\">\r\n\r\n      <div class=\"add-tab \">\r\n        <ul>\r\n          <h5 class=\"p-4 pb-2\">\r\n            <b>\r\n              We need basic information's and headshot for your profile\r\n            </b>\r\n            <div class=\"form-group form-check agree p-0 mt-3\" *ngIf=\"isBusiness\">\r\n              <input [(ngModel)]=\"isCopy\" type=\"checkbox\" name=\"isCopy\" id=\"isCopy\" class=\"form-check-input mt-2\"\r\n                (change)=\"changeAddressUser()\">\r\n              <label for=\"isCopy\" class=\"form-check-label checkmark\">\r\n                Copy From Provider Infromation\r\n              </label>\r\n            </div>\r\n          </h5>\r\n        </ul>\r\n        <div class=\"profile-field\">\r\n          <form [formGroup]=\"userForm\" class=\"form pb-0\">\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.firstName.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" placeholder=\"Fist Name\" formControlName=\"firstName\" id=\"firstName\">\r\n                <div *ngIf=\" u.firstName.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n                    First Name is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.lastName.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\">\r\n                <div *ngIf=\" u.lastName.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.lastName.errors.required\">\r\n                    Last Name is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.email.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\">\r\n                <div *ngIf=\" u.email.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.email.errors.required\">\r\n                    Emai is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-12 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.address1.errors && validatePage == 4 }\" [options]=\"options\"\r\n                  (onAddressChange)=\"AddressChangeUser($event)\" type=\"text\" class=\"form-control\"\r\n                  placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete>\r\n                <div *ngIf=\" u.address1.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.address1.errors.required\">\r\n                    Home Address 1 is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n                  placeholder=\"Home Address 2\">\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.city.errors && validatePage == 4}\" type=\"text\" class=\"form-control\"\r\n                  id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n                <div *ngIf=\" u.city.errors && validatePage ==4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.city.errors.required\">City is required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.state.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n                <div *ngIf=\" u.state.errors  && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.state.errors.required\">State is required</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [textMask]=\"{ mask: zipcodeMask }\"\r\n                  [ngClass]=\"{ 'is-invalid':  u.zipcode.errors  && validatePage == 4 }\" type=\"text\" class=\"form-control\"\r\n                  id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n                <div *ngIf=\" u.zipcode.errors  && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.zipcode.errors.required\">Zipcode is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.country.errors  && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n                <div *ngIf=\" u.country.errors  && validatePage ==4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.country.errors.required\">Country is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input class=\"form-control block shadow-none\" type=\"text\" name=\"inputPhone\" placeholder=\"Phone Number \"\r\n                  id=\"inputPhone\" autocomplete=\"off\" formControlName=\"phoneNumber\" appMobileMask [maxLength]=\"300\"\r\n                  [ngClass]=\"{'is-invalid': ( u.phoneNumber.errors && validatePage == 4)}\">\r\n                <div *ngIf=\"u.phoneNumber.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors.required\">\r\n                    Phone Number is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </form>\r\n          <div class=\"form-group mb-2 form\">\r\n            <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\"\r\n              class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n            <input (click)=\"uploadImage1.click()\" [(ngModel)]=\"fileName\" readonly type=\"text\" class=\"form-control\"\r\n              id=\"upload\" accept=\"image/*\" placeholder=\"Upload Profile Picture\">\r\n            <img #uploadImage1 class=\"upload-image\" (click)=\"uploadFile.click()\" type=\"file\"\r\n              src=\"assets/images/icons/upload.svg\" alt=\"Logo\">\r\n            <div *ngIf=\"isImageRequired\" class=\"invalid-feedback d-block\">\r\n              <div class=\"ms-1\">\r\n                Please Upload Profile Image\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n            <div>\r\n              {{userError}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n        <!-- <div class=\"col-md-3 col-sm-12 pt-3 slider-tab text-center\">\r\n          <img class=\"slider-view\" src=\"assets/images/icons/stepper-3.svg\" alt=\"Logo\">\r\n        </div> -->\r\n        <div class=\"col-5\"></div>\r\n        <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n          <h6>\r\n            <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n              Back\r\n            </button>\r\n            &nbsp; &nbsp;\r\n            <button class=\"next\" (click)=\"next(5)\" [disabled]=\"showLoader\" [config]=\"DefaultButtonSpinnerConfig\">\r\n              <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n                alt=\"Logo\">\r\n            </button>\r\n            &nbsp; &nbsp;\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          &nbsp; &nbsp;\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&nbsp;&nbsp;\r\n                <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\"\r\n                  src=\"assets/images/icons/next.svg\" alt=\"Logo\">\r\n              </button>\r\n            </h6>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <!-- <div>test</div> -->\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 10\">\r\n      <app-credentialing (back)=\"onCredentialingBack()\" [data]=\"credentialingData\"></app-credentialing>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #termsAndConditionsModel>\r\n  <div class=\"modal-dialog modal-dialog-centered\">\r\n    <div class=\"modal-content terms-fixed-modal\">\r\n\r\n      <!-- HEADER -->\r\n      <div class=\"modal-header\">\r\n        <h4 class=\"modal-title fw-bold title-popup\">\r\n          {{ termsAndConditionTitle }}\r\n        </h4>\r\n      </div>\r\n\r\n      <!-- SCROLLABLE CONTENT ONLY -->\r\n      <div class=\"modal-body terms-scroll-area\" (scroll)=\"onTermsScroll($event)\">\r\n        <ng-container *ngIf=\"termsAndConditionTitle == 'Terms and Conditions'\">\r\n          <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n          </app-terms-conditions>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"termsAndConditionTitle != 'Terms and Conditions'\">\r\n          <app-privacy-policy [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n          </app-privacy-policy>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- FOOTER (NOT SCROLLING) -->\r\n      <div>\r\n        <div class=\"modal-footer text-end\" style=\"display: block;\">\r\n          <!-- YOUR BUTTONS \u2014 UNCHANGED -->\r\n          <button type=\"button\" class=\"btn btn-primary btn-sm px-4\"\r\n            style=\"background: #d3dae6; color: #98a2b3; border: #D3DAE6 !important;\"\r\n            (click)=\"decline(termsAndConditionTitle); modelRef.hide();\">\r\n            Decline\r\n          </button>\r\n\r\n          <button type=\"button\" class=\"btn btn-primary btn-sm px-4\" style=\"color:white;background: #4077AD;\"\r\n            [disabled]=\"!isAgreeEnabled\" (click)=\"agree(termsAndConditionTitle); modelRef.hide();\">\r\n            Agree\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".brand-name{font-weight:700;font-size:calc(100% + 4px)}::ng-deep .backdrop{background-color:transparent!important}.filter-black{filter:brightness(.4)!important}.footer-view{margin-top:3rem;margin-left:0;margin-right:0}.footer-signature{margin-top:9rem}.slider-view{width:11rem;margin-left:1px}.container{margin-top:30px}.container .card{border-radius:1.25rem}.container .header{padding:33px 10px 0}.container .header .logo{width:15%;height:80%}.container .form-control{padding:.75rem 1rem;border-color:#a1a1a1}.container .form-control:focus{color:#000;box-shadow:none;border-color:#a1a1a1!important}.container .form-control::placeholder{font-weight:500;font-size:12px;color:#a1a1a1}.container .link{color:#4077ad}.container .link-signup{font-weight:bolder}.container .form-check-label{margin-bottom:0;padding-top:9px}.container .content-view{margin-top:10%}.container .content-description{margin-top:25%}.container .tag-content{color:#fff9e8;margin-left:9%}.container .tag-content p{color:#fff9e8}.container .form-check-input:checked{background-color:#000;border-color:#000}.container .img-tick{margin:-31px 12px 0 -35px}.container .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #000000}.container .form-check-input:focus{box-shadow:none}.container input[type=checkbox]{accent-color:#000000}.term-list{padding:48px 60px 6px 0;margin-left:30px;color:\"#1f1f1fdb\"}.add-tab{padding:75px 75px 6px 1px;margin-left:50px;color:\"#1f1f1fdb\"}.add-tab-view{padding:75px 75px 6px 1px;margin-left:80px;color:\"#1f1f1fdb\"}.inspect-add{margin-top:3rem}.add-btn{font-size:16px;border-radius:5px;transition:.2s;padding:.25rem .5rem;background:#fff;border:1px solid rgba(148,147,147,.1882352941);color:#444;line-height:48px;box-shadow:0 1px 9px #98a2b3;width:9rem}.add-btn:hover{border:1px solid rgba(148,147,147,.1882352941);box-shadow:none}.agree{padding:0 0 8px 47px}.agree .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #98A2B3;width:14px;height:14px;margin:5px 9px 0 -35px}.agree .form-check-input:focus{box-shadow:none}.agree .form-check-input:checked{background-color:#000;border-color:#000}.agree .invalid-feedback{font-size:10px!important;margin:0 0 0 21px}.checkmark{vertical-align:text-bottom;color:#98a2b3;font-weight:500;font-size:12px}.term-signature{padding-left:16rem;padding-right:65px;position:absolute;margin:150px 0 0 50%}.participate-tab{height:135px;width:142px}.card-design{height:147px;width:160px;padding-left:10px;margin-left:42px;background:#fff0;border:2px solid #98A2B3;box-shadow:0 0 4px #98a2b3;border-radius:27px;margin-bottom:42px}.upload{height:39px;margin-top:-4px;width:126px;font-size:12px}.participate-tab{margin-top:-25px}.slider{width:14rem;margin-left:69px}.btn-clear{background:#d3dae6;color:#98a2b3;font-size:12px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;width:46%;line-height:28px}.btn-close{background:#f1f4fa;color:#98a2b3;font-size:17px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;font-weight:500;width:116px;color:#737a87;line-height:28px}.view-logo{padding-top:1%;padding-bottom:4%;text-align:center}.back-btn{border-radius:45px;height:41px}.next{background:#4077ad;border-radius:30px;height:60px;width:60px;border:white}.profile-field{margin-top:-10px}.profile-field input{line-height:30px;margin:-10px 3px 3px}.load-page{padding:21px 49px 13px 34px}.sign-img{width:291px;height:95px;border-radius:8px;border:1px solid rgba(179,178,178,.33);margin-top:19px}.upload-image{height:16px;width:16px;position:absolute;margin-left:66rem;margin-top:-39px}.para-comma{font-weight:500}.go-btn{border-radius:45px;height:50px;padding:0 20px;background:#4077ad;border:1px solid #4077ad;color:#fff;line-height:28px;font-size:14px;font-weight:500}.text-label{color:#747b83;font-weight:500}.form{padding:20px;border-radius:5px}.form-control:focus{color:#000;box-shadow:none;border-color:#848484!important}.form-control::placeholder{font-weight:500;font-size:12px;color:#bec1be;padding-left:10px}.btn-primary:active{background-color:#50575e}@media screen and (min-width: 500px) and (max-width: 769px){.content-view{background:#0c1620;width:44rem;margin:31px 0 0!important;padding:28px 32px 17px 71px!important;border-radius:29px}.upload-image{margin-left:25rem!important}}@media screen and (min-width: 768px) and (max-width: 1024px){.back-btn{height:31px;width:82px;position:absolute;margin-left:-53px}.back-tab{position:absolute;margin-left:-87px;height:37px}.go-btn{width:175px;height:44px}.term-signature{padding-left:10px}.upload-image{margin-left:40rem}}@media screen and (min-width: 374px) and (max-width: 426px){.head-logo{width:216px;padding-bottom:16px}.slider{visibility:hidden}.back-btn{height:31px;width:82px;position:absolute;margin-left:73px;margin-top:23px}.go-btn{width:175px;height:44px}.upload-image{margin-left:16rem}.term-signature{margin:84% 0 7px 4%}}@media screen and (min-width: 320px) and (max-width: 426px){.footer-signature{margin-top:20rem}.login .head-logo{padding:16px 2px 0;width:38%!important;height:40%!important}.container{margin-top:5px!important}.card{padding:2px!important}.tag-content{margin:3% 0 0!important;background-color:#121b24;border-radius:13px}.img-tick{margin:3px!important}.slider{visibility:hidden}.load-page{padding:0}.head-logo{width:216px;padding-bottom:16px}.back-btn{height:26px;width:71px;position:absolute;margin-left:-17rem!important;font-size:10px;margin-top:23px}.go-btn{width:142px;height:36px;margin-right:-28px;font-size:10px}.add-tab,.add-tab-view{padding:30px 33px 2px 3px;margin-left:15px}.add-btn{width:6rem}.slider-tab{visibility:hidden}.back-tab{margin-left:-14rem;margin-top:1px;font-size:14px;height:39px}.participate-tab{height:96px;width:87px}.card-design{height:124px;width:125px;padding-left:17px;margin-left:30px}.term-signature{padding:22px 22px 13px 27px}.term-list{padding:43px 10px 10px 3px;margin-left:0;text-align:-webkit-center}}@media screen and (min-width: 320px) and (max-width: 376px){.agree{padding:0 0 8px 25px}.participate-tab{height:96px;width:87px}.card-design{height:109px;width:97px;padding-left:4px;margin-left:10px}.card-design h6{font-size:10px;padding-left:14px;font-weight:600}.sign-img{width:270px}.term-list{padding:20px 20px 6px 4px;margin-left:13px}}@media screen and (min-width: 320px) and (max-width: 350px){.upload-image{height:13px;width:11px;margin-left:10rem;margin-top:-35px}.btn-clear{width:92px}.term-signature{margin:84% 0 7px 4%}}.disabled-btn{cursor:not-allowed!important;background:#4077ad!important;color:#fff!important}.modal-dialog .modal-content{border-radius:12px;background:#fff!important;border:1px solid rgba(128,128,128,.3294117647)!important}.title-popup{font-size:18px;color:#0c1620}ul.term-list-data li{padding-bottom:5px;font-size:13px;font-weight:500;line-height:21px}ol,ul,dl{margin-top:0;margin-bottom:1rem}::ng-deep .modal-content{background:none!important;width:100%;border:none}.hidden-view{display:none}.header-container{position:relative;padding:20px}.view-logo{text-align:center}.logout-button{top:20px;right:20px;position:absolute}.logout-button button{background:none;border:none;font-size:16px;display:flex;align-items:center;cursor:pointer}.logout-button img{margin-right:5px;height:20px}.user-card{align-items:center;color:#4077ad;cursor:pointer}.user-cards-active{background:#4077ad;color:#fff}.save-btn.upload{border:1px solid #4077AD;background-color:#4077ad;color:#fff;border-radius:5px;background:#4077ad;padding:4px 10px;display:inline-flex;align-items:center;gap:6px}.save-btn.upload img{filter:brightness(0) invert(1)}.form-check.agree{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}.form-check.agree .form-check-input{margin-top:4px;flex-shrink:0}.form-check.agree .form-check-label{line-height:1.4;cursor:pointer;white-space:normal}.spinner-16{width:16px;height:16px}.h6-buttons{display:flex;align-items:center;gap:8px}.form-check.agree{display:flex;align-items:flex-start;margin-bottom:14px}.form-check-input{position:absolute;opacity:0;cursor:pointer}.form-check-label{position:relative;padding-left:28px;cursor:pointer;font-size:14px;line-height:20px;color:#212529;-webkit-user-select:none;user-select:none}.form-check-label:before{content:\"\";position:absolute;left:0;top:8px;width:18px;height:18px;border:2px solid #adb5bd;border-radius:4px;background:#fff;transition:all .2s ease}.form-check-label:after{content:\"\";position:absolute;left:5px;top:10px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .15s ease}.form-check-input:checked+.form-check-label:before{background-color:#4077ad;border-color:#4077ad}.form-check-input:checked+.form-check-label:after{transform:rotate(45deg) scale(1)}.form-check-label:hover:before{border-color:#4077ad}.form-check-input:focus+.form-check-label:before{box-shadow:0 0 0 3px #0d6efd40}.form-check-input.is-invalid+.form-check-label:before{border-color:#dc3545}.form-check-input.is-invalid:checked+.form-check-label:before{background-color:#dc3545}.invalid-feedback{display:block;font-size:12px;margin-left:7px;margin-top:4px}::ng-deep .modal-dialog{max-width:750px}.user-cards-active{background-color:#4077ad;color:#fff;border:2px solid #4077AD}.terms-fixed-modal{width:1080px;height:700px;display:flex;flex-direction:column}.terms-scroll-area{flex:1 1 auto;overflow-y:auto;padding:16px}body.modal-open{overflow:hidden!important}.modal{z-index:1055!important}.modal-backdrop{z-index:1050!important}.modal-dialog{margin:auto;pointer-events:auto}.modal-content{position:relative;z-index:1060}.logout-container{display:flex;justify-content:flex-end}.logout-wrapper{display:flex;align-items:center;cursor:pointer;gap:6px}.logout-icon{width:20px;height:20px;background:url(/assets/images/icons/logoutt.svg) no-repeat center;background-size:contain}\n"] }]
         }], ctorParameters: () => [{ type: i2.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: [{
                     type: Inject,
                     args: [LIBRARY_CONFIG]