@idsoftsource/initial-process 1.3.9 → 1.4.0

package/fesm2022/idsoftsource-initial-process.mjs

@@ -1293,6 +1293,14 @@ class CredentialingStore {
     currentCoverage = signal(false, ...(ngDevMode ? [{ debugName: "currentCoverage" }] : []));
     notApplicable = signal(false, ...(ngDevMode ? [{ debugName: "notApplicable" }] : []));
     selectedStates = signal([], ...(ngDevMode ? [{ debugName: "selectedStates" }] : []));
+    isUploadSuccess = signal(null, ...(ngDevMode ? [{ debugName: "isUploadSuccess" }] : []));
+    profileSignal = signal(null, ...(ngDevMode ? [{ debugName: "profileSignal" }] : []));
+    // Extra per-skill details for the resume-preview flow (indexed by skill position)
+    resumeSkillMeta = signal({}, ...(ngDevMode ? [{ debugName: "resumeSkillMeta" }] : []));
+    // Extra per-tool details for the resume-preview flow (indexed by tool position)
+    resumeToolMeta = signal({}, ...(ngDevMode ? [{ debugName: "resumeToolMeta" }] : []));
+    // Expose it as a read-only signal for components
+    profile = this.profileSignal();
     // Step 3: Producer Type / Jobs
     selectInitial(value) {
         this.initialSelection.set(value);
@@ -1306,6 +1314,12 @@ class CredentialingStore {
         if (!roles.includes(role))
             this.selectedRoles.set([...roles, role]);
     }
+    setResumeSkillMeta(index, meta) {
+        this.resumeSkillMeta.update(curr => ({ ...curr, [index]: meta }));
+    }
+    setResumeToolMeta(index, meta) {
+        this.resumeToolMeta.update(curr => ({ ...curr, [index]: meta }));
+    }
     removeRole(role) {
         const roles = this.selectedRoles().filter(r => r !== role);
         this.selectedRoles.set(roles);
@@ -1350,6 +1364,12 @@ class CredentialingStore {
         const updated = this.selectedTools().map(t => t.name === toolName ? { ...t, ...data } : t);
         this.selectedTools.set(updated);
     }
+    addSuccess(value) {
+        this.isUploadSuccess.set(value);
+    }
+    setProfile(data) {
+        this.profileSignal.set(data);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CredentialingStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CredentialingStore, providedIn: 'root' });
 }
@@ -5906,12 +5926,15 @@ class RoleSelectComponent {
             });
         }
     }
+    back() {
+        this.store.previousStep();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RoleSelectComponent, deps: [{ token: CredentialingStore }, { token: UserService }, { token: UserDocumentService }, { token: i2.Router }, { token: IndustryService }, { token: UserDetailService }, { token: FileService }, { token: ProvidersService }, { token: i6.TokenService }, { token: i8.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    <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n      <div class=\"spinner-border\"></div>\r\n    </div>\r\n    <form *ngIf=\"isLoaded\" [formGroup]=\"userForm\" class=\"form pb-0\">\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2 mb-3\">First Name*</label>\r\n          <input [ngClass]=\"{ 'is-invalid':  u.firstName.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n            type=\"text\" class=\"form-control\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n          <div *ngIf=\" u?.firstName?.invalid &&\r\n      (u?.firstName?.touched || u?.firstName?.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n              First Name is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2 mb-3\">Last Name*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\"\r\n            [ngClass]=\"{\r\n    'is-invalid':\r\n      u.lastName.invalid && (u.lastName.touched || u.lastName.dirty)\r\n  }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n    u.lastName.invalid &&\r\n    (u.lastName.touched || u.lastName.dirty)\r\n  \">\r\n            <div class=\"ms-1\" *ngIf=\"u.lastName.errors?.required\">\r\n              Last Name is required\r\n            </div>\r\n          </div>\r\n\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Email*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.email.invalid && (u.email.touched || u.email.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.email.invalid &&\r\n      (u.email.touched || u.email.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.email.errors?.required\">\r\n              Email is required\r\n            </div>\r\n            <div class=\"ms-1\" *ngIf=\"u.email.errors?.email\">\r\n              Please enter a valid email address\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Home Address 1*</label>\r\n\r\n          <input type=\"text\" autocomplete=\"new-address-view\" name=\"random-address-{{randomId}}\" class=\"form-control\"\r\n            placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete\r\n            [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.address1.invalid && (u.address1.touched || u.address1.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.address1.invalid &&\r\n      (u.address1.touched || u.address1.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n              Home Address 1 is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">City*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.city.invalid && (u.city.touched || u.city.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.city.invalid &&\r\n      (u.city.touched || u.city.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n              City is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">State*</label>\r\n\r\n          <input type=\"text\" autocomplete=\"new-state-view\" name=\"random-state-{{randomId}}\" class=\"form-control\"\r\n            id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.state.invalid && (u.state.touched || u.state.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.state.invalid &&\r\n      (u.state.touched || u.state.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n              State is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n\r\n\r\n\r\n\r\n      </div>\r\n      <!-- <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n            placeholder=\"Home Address 2\" />\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.city.invalid && (u.city.touched || u.city.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.city.invalid &&\r\n      (u.city.touched || u.city.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n              City is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.state.invalid && (u.state.touched || u.state.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.state.invalid &&\r\n      (u.state.touched || u.state.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n              State is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div> -->\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Zip Code*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n            [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.zipcode.invalid && (u.zipcode.touched || u.zipcode.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.zipcode.invalid &&\r\n      (u.zipcode.touched || u.zipcode.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.zipcode.errors?.required\">\r\n              Zipcode is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Country*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n            [ngClass]=\"{\r\n      'is-invalid':\r\n        u.country.invalid && (u.country.touched || u.country.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.country.invalid &&\r\n      (u.country.touched || u.country.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n              Country is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Phone Number*</label>\r\n\r\n          <input type=\"text\" autocomplete=\"new-phone-view\" name=\"random-phone-{{randomId}}\"\r\n            class=\"form-control block shadow-none\" id=\"inputPhone\" placeholder=\"Phone Number\" autocomplete=\"off\"\r\n            formControlName=\"phoneNumber\" maxlength=\"14\" (input)=\"phoneMask($event)\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.phoneNumber.invalid &&\r\n        (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.phoneNumber.invalid &&\r\n      (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n              Phone Number is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n      </div>\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n          <label class=\"note-label mb-2\">Years of experience*</label>\r\n\r\n          <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n            formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n            bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n            id=\"yearsOfExperince\"></ng-select>\r\n\r\n          <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n      (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n              Years Of Experience is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12\r\n         mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Job Title*</label>\r\n\r\n          <ng-select class=\"w-100\" class=\"custom-ng-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n            [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n            [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n            placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n          </ng-select>\r\n          <div *ngIf=\" u.userJobTitle.invalid &&\r\n      (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n              Job title is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n          <label class=\"note-label mb-2\">Profile image</label>\r\n\r\n          <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\" class=\"d-none\" />\r\n          <input [(ngModel)]=\"fileName\"  [ngModelOptions]=\"{ standalone: true }\" readonly type=\"text\" class=\"form-control pe-5\"\r\n            placeholder=\"Upload Profile Picture\" (click)=\"uploadFile.click()\" />\r\n          <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n        </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n        <div class=\"res d-flex justify-content-between\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Industry</label>\r\n\r\n            <ng-select class=\"w-100 custom-ng-select\" formControlName=\"industries\" [items]=\"industries\"\r\n              [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\"\r\n              [closeOnSelect]=\"false\" id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n\r\n              <!-- Dropdown option -->\r\n              <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                <span class=\"form-check\">\r\n                  <span class=\"form-check-input-wrapper\">\r\n                    <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                  </span>\r\n                  {{ item.industryName }}\r\n                </span>\r\n              </ng-template>\r\n\r\n              <!-- Selected label -->\r\n              <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n                <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                  <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n                </span>\r\n              </ng-template>\r\n              <div *ngIf=\"u.industries.invalid &&\r\n      (u.industries.touched || u.industries.dirty)\" class=\"invalid-feedback\">\r\n                <div class=\"ms-1\" *ngIf=\"u.industries.errors.required\">\r\n                  Industry is required\r\n                </div>\r\n              </div>\r\n            </ng-select>\r\n          </div>\r\n          <div class=\"form-group col-sm-12 col-md-4\">\r\n            <div class=\"image-wrapper\">\r\n              <!-- Spinner -->\r\n              <div *ngIf=\"isImageLoading\" class=\"spinner\"></div>\r\n              <!-- Image -->\r\n              <div *ngIf=\"previewUrl\">\r\n                <img [src]=\"cloudfrontUrl+previewUrl\" class=\"preview-image mt-2\" />\r\n              </div>\r\n\r\n            </div>\r\n            <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n              <div>{{ userError }}</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </form>\r\n\r\n\r\n    <!-- <div class=\"d-flex flex-wrap justify-content-between row\">\r\n      <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Resume Submission</h2>\r\n      <p class=\"note mb-2\">Submit your resume here</p>\r\n      <div class=\"col-sm-12 col-md-8\">\r\n        <div class=\"form-group mb-2 position-relative\">\r\n          <input #fileInput type=\"file\" accept=\"/*\" (change)=\"selectFile($event)\" class=\"d-none\" />\r\n          <input [(ngModel)]=\"resumeName\" readonly type=\"text\" class=\"form-control pe-5\"\r\n            placeholder=\"Upload Resume Here\" (click)=\"fileInput.click()\" />\r\n\r\n          <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon-resume\"\r\n            (click)=\"fileInput.click()\" />\r\n          <div *ngIf=\"isResumeRequired\" class=\"invalid-feedback d-block ms-1\">\r\n            Upload your resume\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"d-flex flex-wrap justify-content-between row\">\r\n      <div class=\"col-sm-12 col-md-8\" style=\"padding-left: 15px;\">\r\n        <div class=\"resume-wrapper\">\r\n          <div *ngIf=\"isresumeLoading\" class=\"spinner-resume\"></div>\r\n\r\n          <a *ngIf=\"list\" [href]=\"cloudfrontUrl+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 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 ct-btn\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\"\r\n        (click)=\"saveFinal()\">\r\n        Continue\r\n      </button>\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> -->", styles: [".preview-image{width:250px;height:100px;object-fit:contain;margin-top:5px;border-radius:5px}.upload-icon-resume{position:absolute;right:25px;top:17px;width:18px;height:18px;cursor:pointer}.upload-icon{position:absolute;right:25px;top:45px;width:18px;height:18px;cursor:pointer}::ng-deep .ng-select .ng-select-container{width:101%;border-radius:7px}.form-control{font-size:14px;color:#6b7280}.role-selection-container{max-width:950px;margin:0 auto;min-height:300px;padding:2rem}.role-selection-container h2{margin-bottom:.5rem;font-size:1.5rem;font-weight:600}.role-selection-container .note{font-size:.875rem;color:#6b7280}.role-selection-container .note-label{font-size:.875rem;color:#6b7280;padding-left:5px}.role-selection-container .dropdown-wrapper{display:flex;gap:.5rem;margin-bottom:1rem}.role-selection-container .dropdown-wrapper select{flex:1;padding:.5rem;border:1px solid #d1d5db;border-radius:.375rem}.role-selection-container .dropdown-wrapper .add-btn{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border:none;border-radius:.375rem;cursor:pointer}.role-selection-container .dropdown-wrapper .add-btn:disabled{background-color:#d1d5db;cursor:not-allowed}.role-selection-container .selected-roles{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.role-selection-container .selected-roles .role-card{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-radius:.375rem;background-color:#fef3c7;color:#92400e}.role-selection-container .selected-roles .role-card .remove-btn{background:none;border:none;font-size:1.2rem;font-weight:700;cursor:pointer;color:#b91c1c}.role-selection-container .navigation-buttons{display:flex;justify-content:flex-end;gap:1rem;margin-top:70px;margin-bottom:50px}.role-selection-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.image-wrapper{position:relative;width:150px;height:150px}.resume-wrapper{position:relative;width:550px;height:1px}.spinner{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:163%;margin-top:-2px;margin-left:-7px;animation:spin 1s linear infinite}.spinner-resume{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:99%;margin-top:-51px;margin-left:-20px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.profile-field{margin-top:-10px}.profile-field input{line-height:30px}.producer-type-container{max-width:1000px;margin:0 auto;min-height:300px}.producer-type-container h2{font-size:1.5rem;font-weight:600;margin-bottom:.5rem}.producer-type-container p{font-size:.875rem;color:#6b7280;margin-bottom:1.5rem}.producer-type-container .job-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem}.producer-type-container .job-list .job-item{padding:.75rem 1rem;font-size:14px;border:1px solid #d1d5db;border-radius:.375rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s}.producer-type-container .job-list .job-item.selected{border-color:#4077ad;background-color:#eff6ff}.producer-type-container .job-list .job-item .plus{font-weight:700}.producer-type-container .navigation-buttons{display:flex;justify-content:flex-end;gap:.5rem;margin:50px 0}.producer-type-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer}.producer-type-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer}.producer-type-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.actions{display:flex;justify-content:space-between;margin:50px 0 27px}.right-actions{display:flex;gap:16px}button{height:44px;min-width:120px;border:none;font-size:14px;cursor:pointer;border-radius:5px}button.primary{background-color:#4077ad;color:#fff;border-radius:5px}button.secondary{background-color:#d5d6da;color:#525862;border-radius:5px}button:disabled{background-color:#9ca3af;cursor:not-allowed}::ng-deep .custom-ng-select.ng-select-multiple .ng-select-container{min-height:45px!important;height:auto!important;display:flex;align-items:center;overflow:visible!important}::ng-deep .custom-ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap!important;overflow:visible!important;padding-top:2px;padding-bottom:2px}::ng-deep .custom-ng-select.ng-select-multiple .ng-value{margin-bottom:4px}::ng-deep .custom-ng-select.ng-select-multiple .ng-arrow-wrapper{display:flex;align-items:center;height:100%}:host ::ng-deep .custom-ng-select .ng-select-container{padding:0!important;font-size:13px!important}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-top:3px;font-size:14px;color:#6b7280}::ng-deep .ng-select .ng-select-container{padding-top:3px;font-size:14px;color:#6b7280}@media screen and (max-width: 767px){.actions{margin:10px 0;flex-direction:column-reverse;gap:5px}.res{flex-direction:column-reverse}.spinner{width:24px;height:24px;top:-22%;left:180%}.spinner-resume{width:25px;height:25px;top:-22%;left:32%}.ct-btn{width:100%;margin-top:45px}}\n"], dependencies: [{ kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: RoleSelectComponent, isStandalone: false, selector: "app-role-select", inputs: { roleData: "roleData", cloudfrontUrl: "cloudfrontUrl", providerId: "providerId", providerName: "providerName" }, outputs: { backToParent: "backToParent" }, ngImport: i0, template: "<div class=\"role-selection-container\">\r\n  <h2>Basic Details</h2>\r\n  <p class=\"note\">We need basic information and a headshot for your profile</p>\r\n  <div class=\"profile-field\">\r\n    <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n      <div class=\"spinner-border\"></div>\r\n    </div>\r\n    <form *ngIf=\"isLoaded\" [formGroup]=\"userForm\" class=\"form pb-0\">\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2 mb-3\">First Name*</label>\r\n          <input [ngClass]=\"{ 'is-invalid':  u.firstName.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n            type=\"text\" class=\"form-control\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n          <div *ngIf=\" u?.firstName?.invalid &&\r\n      (u?.firstName?.touched || u?.firstName?.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n              First Name is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2 mb-3\">Last Name*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\"\r\n            [ngClass]=\"{\r\n    'is-invalid':\r\n      u.lastName.invalid && (u.lastName.touched || u.lastName.dirty)\r\n  }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n    u.lastName.invalid &&\r\n    (u.lastName.touched || u.lastName.dirty)\r\n  \">\r\n            <div class=\"ms-1\" *ngIf=\"u.lastName.errors?.required\">\r\n              Last Name is required\r\n            </div>\r\n          </div>\r\n\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Email*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.email.invalid && (u.email.touched || u.email.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.email.invalid &&\r\n      (u.email.touched || u.email.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.email.errors?.required\">\r\n              Email is required\r\n            </div>\r\n            <div class=\"ms-1\" *ngIf=\"u.email.errors?.email\">\r\n              Please enter a valid email address\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Home Address 1*</label>\r\n\r\n          <input type=\"text\" autocomplete=\"new-address-view\" name=\"random-address-{{randomId}}\" class=\"form-control\"\r\n            placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete\r\n            [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.address1.invalid && (u.address1.touched || u.address1.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.address1.invalid &&\r\n      (u.address1.touched || u.address1.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n              Home Address 1 is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">City*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.city.invalid && (u.city.touched || u.city.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.city.invalid &&\r\n      (u.city.touched || u.city.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n              City is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">State*</label>\r\n\r\n          <input type=\"text\" autocomplete=\"new-state-view\" name=\"random-state-{{randomId}}\" class=\"form-control\"\r\n            id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.state.invalid && (u.state.touched || u.state.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.state.invalid &&\r\n      (u.state.touched || u.state.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n              State is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n\r\n\r\n\r\n\r\n      </div>\r\n      <!-- <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n            placeholder=\"Home Address 2\" />\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.city.invalid && (u.city.touched || u.city.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.city.invalid &&\r\n      (u.city.touched || u.city.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n              City is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.state.invalid && (u.state.touched || u.state.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.state.invalid &&\r\n      (u.state.touched || u.state.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n              State is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div> -->\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Zip Code*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n            [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.zipcode.invalid && (u.zipcode.touched || u.zipcode.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.zipcode.invalid &&\r\n      (u.zipcode.touched || u.zipcode.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.zipcode.errors?.required\">\r\n              Zipcode is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Country*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n            [ngClass]=\"{\r\n      'is-invalid':\r\n        u.country.invalid && (u.country.touched || u.country.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.country.invalid &&\r\n      (u.country.touched || u.country.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n              Country is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Phone Number*</label>\r\n\r\n          <input type=\"text\" autocomplete=\"new-phone-view\" name=\"random-phone-{{randomId}}\"\r\n            class=\"form-control block shadow-none\" id=\"inputPhone\" placeholder=\"Phone Number\" autocomplete=\"off\"\r\n            formControlName=\"phoneNumber\" maxlength=\"14\" (input)=\"phoneMask($event)\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.phoneNumber.invalid &&\r\n        (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.phoneNumber.invalid &&\r\n      (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n              Phone Number is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n      </div>\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n          <label class=\"note-label mb-2\">Years of experience*</label>\r\n\r\n          <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n            formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n            bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n            id=\"yearsOfExperince\"></ng-select>\r\n\r\n          <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n      (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n              Years Of Experience is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12\r\n         mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Job Title*</label>\r\n\r\n          <ng-select class=\"w-100\" class=\"custom-ng-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n            [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n            [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n            placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n          </ng-select>\r\n          <div *ngIf=\" u.userJobTitle.invalid &&\r\n      (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n              Job title is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n          <label class=\"note-label mb-2\">Profile image</label>\r\n\r\n          <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\" class=\"d-none\" />\r\n          <input [(ngModel)]=\"fileName\"  [ngModelOptions]=\"{ standalone: true }\" readonly type=\"text\" class=\"form-control pe-5\"\r\n            placeholder=\"Upload Profile Picture\" (click)=\"uploadFile.click()\" />\r\n          <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n        </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n        <div class=\"res d-flex justify-content-between\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Industry</label>\r\n\r\n            <ng-select class=\"w-100 custom-ng-select\" formControlName=\"industries\" [items]=\"industries\"\r\n              [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\"\r\n              [closeOnSelect]=\"false\" id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n\r\n              <!-- Dropdown option -->\r\n              <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                <span class=\"form-check\">\r\n                  <span class=\"form-check-input-wrapper\">\r\n                    <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                  </span>\r\n                  {{ item.industryName }}\r\n                </span>\r\n              </ng-template>\r\n\r\n              <!-- Selected label -->\r\n              <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n                <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                  <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n                </span>\r\n              </ng-template>\r\n              <div *ngIf=\"u.industries.invalid &&\r\n      (u.industries.touched || u.industries.dirty)\" class=\"invalid-feedback\">\r\n                <div class=\"ms-1\" *ngIf=\"u.industries.errors.required\">\r\n                  Industry is required\r\n                </div>\r\n              </div>\r\n            </ng-select>\r\n          </div>\r\n          <div class=\"form-group col-sm-12 col-md-4\">\r\n            <div class=\"image-wrapper\">\r\n              <!-- Spinner -->\r\n              <div *ngIf=\"isImageLoading\" class=\"spinner\"></div>\r\n              <!-- Image -->\r\n              <div *ngIf=\"previewUrl\">\r\n                <img [src]=\"cloudfrontUrl+previewUrl\" class=\"preview-image mt-2\" />\r\n              </div>\r\n\r\n            </div>\r\n            <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n              <div>{{ userError }}</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </form>\r\n\r\n\r\n    <!-- <div class=\"d-flex flex-wrap justify-content-between row\">\r\n      <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Resume Submission</h2>\r\n      <p class=\"note mb-2\">Submit your resume here</p>\r\n      <div class=\"col-sm-12 col-md-8\">\r\n        <div class=\"form-group mb-2 position-relative\">\r\n          <input #fileInput type=\"file\" accept=\"/*\" (change)=\"selectFile($event)\" class=\"d-none\" />\r\n          <input [(ngModel)]=\"resumeName\" readonly type=\"text\" class=\"form-control pe-5\"\r\n            placeholder=\"Upload Resume Here\" (click)=\"fileInput.click()\" />\r\n\r\n          <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon-resume\"\r\n            (click)=\"fileInput.click()\" />\r\n          <div *ngIf=\"isResumeRequired\" class=\"invalid-feedback d-block ms-1\">\r\n            Upload your resume\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"d-flex flex-wrap justify-content-between row\">\r\n      <div class=\"col-sm-12 col-md-8\" style=\"padding-left: 15px;\">\r\n        <div class=\"resume-wrapper\">\r\n          <div *ngIf=\"isresumeLoading\" class=\"spinner-resume\"></div>\r\n\r\n          <a *ngIf=\"list\" [href]=\"cloudfrontUrl+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 class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n\r\n      <button type=\"button\" class=\"primary ct-btn\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\"\r\n        (click)=\"saveFinal()\">\r\n        Continue\r\n      </button>\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> -->", styles: [".preview-image{width:250px;height:100px;object-fit:contain;margin-top:5px;border-radius:5px}.upload-icon-resume{position:absolute;right:25px;top:17px;width:18px;height:18px;cursor:pointer}.upload-icon{position:absolute;right:25px;top:45px;width:18px;height:18px;cursor:pointer}::ng-deep .ng-select .ng-select-container{width:101%;border-radius:7px}.form-control{font-size:14px;color:#6b7280}.role-selection-container{max-width:950px;margin:0 auto;min-height:300px;padding:2rem}.role-selection-container h2{margin-bottom:.5rem;font-size:1.5rem;font-weight:600}.role-selection-container .note{font-size:.875rem;color:#6b7280}.role-selection-container .note-label{font-size:.875rem;color:#6b7280;padding-left:5px}.role-selection-container .dropdown-wrapper{display:flex;gap:.5rem;margin-bottom:1rem}.role-selection-container .dropdown-wrapper select{flex:1;padding:.5rem;border:1px solid #d1d5db;border-radius:.375rem}.role-selection-container .dropdown-wrapper .add-btn{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border:none;border-radius:.375rem;cursor:pointer}.role-selection-container .dropdown-wrapper .add-btn:disabled{background-color:#d1d5db;cursor:not-allowed}.role-selection-container .selected-roles{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.role-selection-container .selected-roles .role-card{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-radius:.375rem;background-color:#fef3c7;color:#92400e}.role-selection-container .selected-roles .role-card .remove-btn{background:none;border:none;font-size:1.2rem;font-weight:700;cursor:pointer;color:#b91c1c}.role-selection-container .navigation-buttons{display:flex;justify-content:flex-end;gap:1rem;margin-top:70px;margin-bottom:50px}.role-selection-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.image-wrapper{position:relative;width:150px;height:150px}.resume-wrapper{position:relative;width:550px;height:1px}.spinner{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:163%;margin-top:-2px;margin-left:-7px;animation:spin 1s linear infinite}.spinner-resume{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:99%;margin-top:-51px;margin-left:-20px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.profile-field{margin-top:-10px}.profile-field input{line-height:30px}.producer-type-container{max-width:1000px;margin:0 auto;min-height:300px}.producer-type-container h2{font-size:1.5rem;font-weight:600;margin-bottom:.5rem}.producer-type-container p{font-size:.875rem;color:#6b7280;margin-bottom:1.5rem}.producer-type-container .job-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem}.producer-type-container .job-list .job-item{padding:.75rem 1rem;font-size:14px;border:1px solid #d1d5db;border-radius:.375rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s}.producer-type-container .job-list .job-item.selected{border-color:#4077ad;background-color:#eff6ff}.producer-type-container .job-list .job-item .plus{font-weight:700}.producer-type-container .navigation-buttons{display:flex;justify-content:flex-end;gap:.5rem;margin:50px 0}.producer-type-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer}.producer-type-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer}.producer-type-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.actions{display:flex;justify-content:space-between;margin:50px 0 27px}.right-actions{display:flex;gap:16px}button{height:44px;min-width:120px;border:none;font-size:14px;cursor:pointer;border-radius:5px}button.primary{background-color:#4077ad;color:#fff;border-radius:5px}button.secondary{background-color:#d5d6da;color:#525862;border-radius:5px}button:disabled{background-color:#9ca3af;cursor:not-allowed}::ng-deep .custom-ng-select.ng-select-multiple .ng-select-container{min-height:45px!important;height:auto!important;display:flex;align-items:center;overflow:visible!important}::ng-deep .custom-ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap!important;overflow:visible!important;padding-top:2px;padding-bottom:2px}::ng-deep .custom-ng-select.ng-select-multiple .ng-value{margin-bottom:4px}::ng-deep .custom-ng-select.ng-select-multiple .ng-arrow-wrapper{display:flex;align-items:center;height:100%}:host ::ng-deep .custom-ng-select .ng-select-container{padding:0!important;font-size:13px!important}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-top:3px;font-size:14px;color:#6b7280}::ng-deep .ng-select .ng-select-container{padding-top:3px;font-size:14px;color:#6b7280}@media screen and (max-width: 767px){.actions{margin:10px 0;flex-direction:column-reverse;gap:5px}.res{flex-direction:column-reverse}.spinner{width:24px;height:24px;top:-22%;left:180%}.spinner-resume{width:25px;height:25px;top:-22%;left:32%}.ct-btn{width:100%;margin-top:45px}}\n"], dependencies: [{ kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: 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    <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n      <div class=\"spinner-border\"></div>\r\n    </div>\r\n    <form *ngIf=\"isLoaded\" [formGroup]=\"userForm\" class=\"form pb-0\">\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2 mb-3\">First Name*</label>\r\n          <input [ngClass]=\"{ 'is-invalid':  u.firstName.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n            type=\"text\" class=\"form-control\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n          <div *ngIf=\" u?.firstName?.invalid &&\r\n      (u?.firstName?.touched || u?.firstName?.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n              First Name is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2 mb-3\">Last Name*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\"\r\n            [ngClass]=\"{\r\n    'is-invalid':\r\n      u.lastName.invalid && (u.lastName.touched || u.lastName.dirty)\r\n  }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n    u.lastName.invalid &&\r\n    (u.lastName.touched || u.lastName.dirty)\r\n  \">\r\n            <div class=\"ms-1\" *ngIf=\"u.lastName.errors?.required\">\r\n              Last Name is required\r\n            </div>\r\n          </div>\r\n\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Email*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.email.invalid && (u.email.touched || u.email.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.email.invalid &&\r\n      (u.email.touched || u.email.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.email.errors?.required\">\r\n              Email is required\r\n            </div>\r\n            <div class=\"ms-1\" *ngIf=\"u.email.errors?.email\">\r\n              Please enter a valid email address\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Home Address 1*</label>\r\n\r\n          <input type=\"text\" autocomplete=\"new-address-view\" name=\"random-address-{{randomId}}\" class=\"form-control\"\r\n            placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete\r\n            [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.address1.invalid && (u.address1.touched || u.address1.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.address1.invalid &&\r\n      (u.address1.touched || u.address1.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n              Home Address 1 is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">City*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.city.invalid && (u.city.touched || u.city.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.city.invalid &&\r\n      (u.city.touched || u.city.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n              City is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">State*</label>\r\n\r\n          <input type=\"text\" autocomplete=\"new-state-view\" name=\"random-state-{{randomId}}\" class=\"form-control\"\r\n            id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.state.invalid && (u.state.touched || u.state.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.state.invalid &&\r\n      (u.state.touched || u.state.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n              State is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n\r\n\r\n\r\n\r\n      </div>\r\n      <!-- <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n            placeholder=\"Home Address 2\" />\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.city.invalid && (u.city.touched || u.city.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.city.invalid &&\r\n      (u.city.touched || u.city.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n              City is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.state.invalid && (u.state.touched || u.state.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.state.invalid &&\r\n      (u.state.touched || u.state.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n              State is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div> -->\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Zip Code*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n            [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.zipcode.invalid && (u.zipcode.touched || u.zipcode.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.zipcode.invalid &&\r\n      (u.zipcode.touched || u.zipcode.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.zipcode.errors?.required\">\r\n              Zipcode is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Country*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n            [ngClass]=\"{\r\n      'is-invalid':\r\n        u.country.invalid && (u.country.touched || u.country.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.country.invalid &&\r\n      (u.country.touched || u.country.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n              Country is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Phone Number*</label>\r\n\r\n          <input type=\"text\" autocomplete=\"new-phone-view\" name=\"random-phone-{{randomId}}\"\r\n            class=\"form-control block shadow-none\" id=\"inputPhone\" placeholder=\"Phone Number\" autocomplete=\"off\"\r\n            formControlName=\"phoneNumber\" maxlength=\"14\" (input)=\"phoneMask($event)\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.phoneNumber.invalid &&\r\n        (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.phoneNumber.invalid &&\r\n      (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n              Phone Number is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n      </div>\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n          <label class=\"note-label mb-2\">Years of experience*</label>\r\n\r\n          <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n            formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n            bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n            id=\"yearsOfExperince\"></ng-select>\r\n\r\n          <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n      (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n              Years Of Experience is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12\r\n         mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Job Title*</label>\r\n\r\n          <ng-select class=\"w-100\" class=\"custom-ng-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n            [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n            [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n            placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n          </ng-select>\r\n          <div *ngIf=\" u.userJobTitle.invalid &&\r\n      (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n              Job title is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n          <label class=\"note-label mb-2\">Profile image</label>\r\n\r\n          <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\" class=\"d-none\" />\r\n          <input [(ngModel)]=\"fileName\"  [ngModelOptions]=\"{ standalone: true }\" readonly type=\"text\" class=\"form-control pe-5\"\r\n            placeholder=\"Upload Profile Picture\" (click)=\"uploadFile.click()\" />\r\n          <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n        </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n        <div class=\"res d-flex justify-content-between\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Industry</label>\r\n\r\n            <ng-select class=\"w-100 custom-ng-select\" formControlName=\"industries\" [items]=\"industries\"\r\n              [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\"\r\n              [closeOnSelect]=\"false\" id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n\r\n              <!-- Dropdown option -->\r\n              <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                <span class=\"form-check\">\r\n                  <span class=\"form-check-input-wrapper\">\r\n                    <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                  </span>\r\n                  {{ item.industryName }}\r\n                </span>\r\n              </ng-template>\r\n\r\n              <!-- Selected label -->\r\n              <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n                <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                  <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n                </span>\r\n              </ng-template>\r\n              <div *ngIf=\"u.industries.invalid &&\r\n      (u.industries.touched || u.industries.dirty)\" class=\"invalid-feedback\">\r\n                <div class=\"ms-1\" *ngIf=\"u.industries.errors.required\">\r\n                  Industry is required\r\n                </div>\r\n              </div>\r\n            </ng-select>\r\n          </div>\r\n          <div class=\"form-group col-sm-12 col-md-4\">\r\n            <div class=\"image-wrapper\">\r\n              <!-- Spinner -->\r\n              <div *ngIf=\"isImageLoading\" class=\"spinner\"></div>\r\n              <!-- Image -->\r\n              <div *ngIf=\"previewUrl\">\r\n                <img [src]=\"cloudfrontUrl+previewUrl\" class=\"preview-image mt-2\" />\r\n              </div>\r\n\r\n            </div>\r\n            <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n              <div>{{ userError }}</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </form>\r\n\r\n\r\n    <!-- <div class=\"d-flex flex-wrap justify-content-between row\">\r\n      <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Resume Submission</h2>\r\n      <p class=\"note mb-2\">Submit your resume here</p>\r\n      <div class=\"col-sm-12 col-md-8\">\r\n        <div class=\"form-group mb-2 position-relative\">\r\n          <input #fileInput type=\"file\" accept=\"/*\" (change)=\"selectFile($event)\" class=\"d-none\" />\r\n          <input [(ngModel)]=\"resumeName\" readonly type=\"text\" class=\"form-control pe-5\"\r\n            placeholder=\"Upload Resume Here\" (click)=\"fileInput.click()\" />\r\n\r\n          <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon-resume\"\r\n            (click)=\"fileInput.click()\" />\r\n          <div *ngIf=\"isResumeRequired\" class=\"invalid-feedback d-block ms-1\">\r\n            Upload your resume\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"d-flex flex-wrap justify-content-between row\">\r\n      <div class=\"col-sm-12 col-md-8\" style=\"padding-left: 15px;\">\r\n        <div class=\"resume-wrapper\">\r\n          <div *ngIf=\"isresumeLoading\" class=\"spinner-resume\"></div>\r\n\r\n          <a *ngIf=\"list\" [href]=\"cloudfrontUrl+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 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 ct-btn\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\"\r\n        (click)=\"saveFinal()\">\r\n        Continue\r\n      </button>\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> -->", styles: [".preview-image{width:250px;height:100px;object-fit:contain;margin-top:5px;border-radius:5px}.upload-icon-resume{position:absolute;right:25px;top:17px;width:18px;height:18px;cursor:pointer}.upload-icon{position:absolute;right:25px;top:45px;width:18px;height:18px;cursor:pointer}::ng-deep .ng-select .ng-select-container{width:101%;border-radius:7px}.form-control{font-size:14px;color:#6b7280}.role-selection-container{max-width:950px;margin:0 auto;min-height:300px;padding:2rem}.role-selection-container h2{margin-bottom:.5rem;font-size:1.5rem;font-weight:600}.role-selection-container .note{font-size:.875rem;color:#6b7280}.role-selection-container .note-label{font-size:.875rem;color:#6b7280;padding-left:5px}.role-selection-container .dropdown-wrapper{display:flex;gap:.5rem;margin-bottom:1rem}.role-selection-container .dropdown-wrapper select{flex:1;padding:.5rem;border:1px solid #d1d5db;border-radius:.375rem}.role-selection-container .dropdown-wrapper .add-btn{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border:none;border-radius:.375rem;cursor:pointer}.role-selection-container .dropdown-wrapper .add-btn:disabled{background-color:#d1d5db;cursor:not-allowed}.role-selection-container .selected-roles{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.role-selection-container .selected-roles .role-card{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-radius:.375rem;background-color:#fef3c7;color:#92400e}.role-selection-container .selected-roles .role-card .remove-btn{background:none;border:none;font-size:1.2rem;font-weight:700;cursor:pointer;color:#b91c1c}.role-selection-container .navigation-buttons{display:flex;justify-content:flex-end;gap:1rem;margin-top:70px;margin-bottom:50px}.role-selection-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.image-wrapper{position:relative;width:150px;height:150px}.resume-wrapper{position:relative;width:550px;height:1px}.spinner{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:163%;margin-top:-2px;margin-left:-7px;animation:spin 1s linear infinite}.spinner-resume{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:99%;margin-top:-51px;margin-left:-20px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.profile-field{margin-top:-10px}.profile-field input{line-height:30px}.producer-type-container{max-width:1000px;margin:0 auto;min-height:300px}.producer-type-container h2{font-size:1.5rem;font-weight:600;margin-bottom:.5rem}.producer-type-container p{font-size:.875rem;color:#6b7280;margin-bottom:1.5rem}.producer-type-container .job-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem}.producer-type-container .job-list .job-item{padding:.75rem 1rem;font-size:14px;border:1px solid #d1d5db;border-radius:.375rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s}.producer-type-container .job-list .job-item.selected{border-color:#4077ad;background-color:#eff6ff}.producer-type-container .job-list .job-item .plus{font-weight:700}.producer-type-container .navigation-buttons{display:flex;justify-content:flex-end;gap:.5rem;margin:50px 0}.producer-type-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer}.producer-type-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer}.producer-type-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.actions{display:flex;justify-content:space-between;margin:50px 0 27px}.right-actions{display:flex;gap:16px}button{height:44px;min-width:120px;border:none;font-size:14px;cursor:pointer;border-radius:5px}button.primary{background-color:#4077ad;color:#fff;border-radius:5px}button.secondary{background-color:#d5d6da;color:#525862;border-radius:5px}button:disabled{background-color:#9ca3af;cursor:not-allowed}::ng-deep .custom-ng-select.ng-select-multiple .ng-select-container{min-height:45px!important;height:auto!important;display:flex;align-items:center;overflow:visible!important}::ng-deep .custom-ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap!important;overflow:visible!important;padding-top:2px;padding-bottom:2px}::ng-deep .custom-ng-select.ng-select-multiple .ng-value{margin-bottom:4px}::ng-deep .custom-ng-select.ng-select-multiple .ng-arrow-wrapper{display:flex;align-items:center;height:100%}:host ::ng-deep .custom-ng-select .ng-select-container{padding:0!important;font-size:13px!important}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-top:3px;font-size:14px;color:#6b7280}::ng-deep .ng-select .ng-select-container{padding-top:3px;font-size:14px;color:#6b7280}@media screen and (max-width: 767px){.actions{margin:10px 0;flex-direction:column-reverse;gap:5px}.res{flex-direction:column-reverse}.spinner{width:24px;height:24px;top:-22%;left:180%}.spinner-resume{width:25px;height:25px;top:-22%;left:32%}.ct-btn{width:100%;margin-top:45px}}\n"] }]
+            args: [{ selector: 'app-role-select', standalone: false, template: "<div class=\"role-selection-container\">\r\n  <h2>Basic Details</h2>\r\n  <p class=\"note\">We need basic information and a headshot for your profile</p>\r\n  <div class=\"profile-field\">\r\n    <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n      <div class=\"spinner-border\"></div>\r\n    </div>\r\n    <form *ngIf=\"isLoaded\" [formGroup]=\"userForm\" class=\"form pb-0\">\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2 mb-3\">First Name*</label>\r\n          <input [ngClass]=\"{ 'is-invalid':  u.firstName.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n            type=\"text\" class=\"form-control\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n          <div *ngIf=\" u?.firstName?.invalid &&\r\n      (u?.firstName?.touched || u?.firstName?.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n              First Name is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2 mb-3\">Last Name*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\"\r\n            [ngClass]=\"{\r\n    'is-invalid':\r\n      u.lastName.invalid && (u.lastName.touched || u.lastName.dirty)\r\n  }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n    u.lastName.invalid &&\r\n    (u.lastName.touched || u.lastName.dirty)\r\n  \">\r\n            <div class=\"ms-1\" *ngIf=\"u.lastName.errors?.required\">\r\n              Last Name is required\r\n            </div>\r\n          </div>\r\n\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Email*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.email.invalid && (u.email.touched || u.email.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.email.invalid &&\r\n      (u.email.touched || u.email.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.email.errors?.required\">\r\n              Email is required\r\n            </div>\r\n            <div class=\"ms-1\" *ngIf=\"u.email.errors?.email\">\r\n              Please enter a valid email address\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Home Address 1*</label>\r\n\r\n          <input type=\"text\" autocomplete=\"new-address-view\" name=\"random-address-{{randomId}}\" class=\"form-control\"\r\n            placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete\r\n            [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.address1.invalid && (u.address1.touched || u.address1.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.address1.invalid &&\r\n      (u.address1.touched || u.address1.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n              Home Address 1 is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">City*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.city.invalid && (u.city.touched || u.city.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.city.invalid &&\r\n      (u.city.touched || u.city.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n              City is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">State*</label>\r\n\r\n          <input type=\"text\" autocomplete=\"new-state-view\" name=\"random-state-{{randomId}}\" class=\"form-control\"\r\n            id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.state.invalid && (u.state.touched || u.state.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.state.invalid &&\r\n      (u.state.touched || u.state.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n              State is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n\r\n\r\n\r\n\r\n      </div>\r\n      <!-- <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n            placeholder=\"Home Address 2\" />\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.city.invalid && (u.city.touched || u.city.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.city.invalid &&\r\n      (u.city.touched || u.city.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n              City is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.state.invalid && (u.state.touched || u.state.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.state.invalid &&\r\n      (u.state.touched || u.state.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n              State is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div> -->\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Zip Code*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n            [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.zipcode.invalid && (u.zipcode.touched || u.zipcode.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.zipcode.invalid &&\r\n      (u.zipcode.touched || u.zipcode.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.zipcode.errors?.required\">\r\n              Zipcode is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Country*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n            [ngClass]=\"{\r\n      'is-invalid':\r\n        u.country.invalid && (u.country.touched || u.country.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.country.invalid &&\r\n      (u.country.touched || u.country.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n              Country is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Phone Number*</label>\r\n\r\n          <input type=\"text\" autocomplete=\"new-phone-view\" name=\"random-phone-{{randomId}}\"\r\n            class=\"form-control block shadow-none\" id=\"inputPhone\" placeholder=\"Phone Number\" autocomplete=\"off\"\r\n            formControlName=\"phoneNumber\" maxlength=\"14\" (input)=\"phoneMask($event)\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.phoneNumber.invalid &&\r\n        (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.phoneNumber.invalid &&\r\n      (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n              Phone Number is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n      </div>\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n          <label class=\"note-label mb-2\">Years of experience*</label>\r\n\r\n          <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n            formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n            bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n            id=\"yearsOfExperince\"></ng-select>\r\n\r\n          <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n      (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n              Years Of Experience is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12\r\n         mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Job Title*</label>\r\n\r\n          <ng-select class=\"w-100\" class=\"custom-ng-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n            [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n            [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n            placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n          </ng-select>\r\n          <div *ngIf=\" u.userJobTitle.invalid &&\r\n      (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n              Job title is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n          <label class=\"note-label mb-2\">Profile image</label>\r\n\r\n          <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\" class=\"d-none\" />\r\n          <input [(ngModel)]=\"fileName\"  [ngModelOptions]=\"{ standalone: true }\" readonly type=\"text\" class=\"form-control pe-5\"\r\n            placeholder=\"Upload Profile Picture\" (click)=\"uploadFile.click()\" />\r\n          <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n        </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n        <div class=\"res d-flex justify-content-between\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Industry</label>\r\n\r\n            <ng-select class=\"w-100 custom-ng-select\" formControlName=\"industries\" [items]=\"industries\"\r\n              [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\"\r\n              [closeOnSelect]=\"false\" id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n\r\n              <!-- Dropdown option -->\r\n              <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                <span class=\"form-check\">\r\n                  <span class=\"form-check-input-wrapper\">\r\n                    <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                  </span>\r\n                  {{ item.industryName }}\r\n                </span>\r\n              </ng-template>\r\n\r\n              <!-- Selected label -->\r\n              <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n                <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                  <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n                </span>\r\n              </ng-template>\r\n              <div *ngIf=\"u.industries.invalid &&\r\n      (u.industries.touched || u.industries.dirty)\" class=\"invalid-feedback\">\r\n                <div class=\"ms-1\" *ngIf=\"u.industries.errors.required\">\r\n                  Industry is required\r\n                </div>\r\n              </div>\r\n            </ng-select>\r\n          </div>\r\n          <div class=\"form-group col-sm-12 col-md-4\">\r\n            <div class=\"image-wrapper\">\r\n              <!-- Spinner -->\r\n              <div *ngIf=\"isImageLoading\" class=\"spinner\"></div>\r\n              <!-- Image -->\r\n              <div *ngIf=\"previewUrl\">\r\n                <img [src]=\"cloudfrontUrl+previewUrl\" class=\"preview-image mt-2\" />\r\n              </div>\r\n\r\n            </div>\r\n            <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n              <div>{{ userError }}</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </form>\r\n\r\n\r\n    <!-- <div class=\"d-flex flex-wrap justify-content-between row\">\r\n      <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Resume Submission</h2>\r\n      <p class=\"note mb-2\">Submit your resume here</p>\r\n      <div class=\"col-sm-12 col-md-8\">\r\n        <div class=\"form-group mb-2 position-relative\">\r\n          <input #fileInput type=\"file\" accept=\"/*\" (change)=\"selectFile($event)\" class=\"d-none\" />\r\n          <input [(ngModel)]=\"resumeName\" readonly type=\"text\" class=\"form-control pe-5\"\r\n            placeholder=\"Upload Resume Here\" (click)=\"fileInput.click()\" />\r\n\r\n          <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon-resume\"\r\n            (click)=\"fileInput.click()\" />\r\n          <div *ngIf=\"isResumeRequired\" class=\"invalid-feedback d-block ms-1\">\r\n            Upload your resume\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"d-flex flex-wrap justify-content-between row\">\r\n      <div class=\"col-sm-12 col-md-8\" style=\"padding-left: 15px;\">\r\n        <div class=\"resume-wrapper\">\r\n          <div *ngIf=\"isresumeLoading\" class=\"spinner-resume\"></div>\r\n\r\n          <a *ngIf=\"list\" [href]=\"cloudfrontUrl+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 class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n\r\n      <button type=\"button\" class=\"primary ct-btn\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\"\r\n        (click)=\"saveFinal()\">\r\n        Continue\r\n      </button>\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> -->", styles: [".preview-image{width:250px;height:100px;object-fit:contain;margin-top:5px;border-radius:5px}.upload-icon-resume{position:absolute;right:25px;top:17px;width:18px;height:18px;cursor:pointer}.upload-icon{position:absolute;right:25px;top:45px;width:18px;height:18px;cursor:pointer}::ng-deep .ng-select .ng-select-container{width:101%;border-radius:7px}.form-control{font-size:14px;color:#6b7280}.role-selection-container{max-width:950px;margin:0 auto;min-height:300px;padding:2rem}.role-selection-container h2{margin-bottom:.5rem;font-size:1.5rem;font-weight:600}.role-selection-container .note{font-size:.875rem;color:#6b7280}.role-selection-container .note-label{font-size:.875rem;color:#6b7280;padding-left:5px}.role-selection-container .dropdown-wrapper{display:flex;gap:.5rem;margin-bottom:1rem}.role-selection-container .dropdown-wrapper select{flex:1;padding:.5rem;border:1px solid #d1d5db;border-radius:.375rem}.role-selection-container .dropdown-wrapper .add-btn{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border:none;border-radius:.375rem;cursor:pointer}.role-selection-container .dropdown-wrapper .add-btn:disabled{background-color:#d1d5db;cursor:not-allowed}.role-selection-container .selected-roles{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.role-selection-container .selected-roles .role-card{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-radius:.375rem;background-color:#fef3c7;color:#92400e}.role-selection-container .selected-roles .role-card .remove-btn{background:none;border:none;font-size:1.2rem;font-weight:700;cursor:pointer;color:#b91c1c}.role-selection-container .navigation-buttons{display:flex;justify-content:flex-end;gap:1rem;margin-top:70px;margin-bottom:50px}.role-selection-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.image-wrapper{position:relative;width:150px;height:150px}.resume-wrapper{position:relative;width:550px;height:1px}.spinner{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:163%;margin-top:-2px;margin-left:-7px;animation:spin 1s linear infinite}.spinner-resume{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:99%;margin-top:-51px;margin-left:-20px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.profile-field{margin-top:-10px}.profile-field input{line-height:30px}.producer-type-container{max-width:1000px;margin:0 auto;min-height:300px}.producer-type-container h2{font-size:1.5rem;font-weight:600;margin-bottom:.5rem}.producer-type-container p{font-size:.875rem;color:#6b7280;margin-bottom:1.5rem}.producer-type-container .job-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem}.producer-type-container .job-list .job-item{padding:.75rem 1rem;font-size:14px;border:1px solid #d1d5db;border-radius:.375rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s}.producer-type-container .job-list .job-item.selected{border-color:#4077ad;background-color:#eff6ff}.producer-type-container .job-list .job-item .plus{font-weight:700}.producer-type-container .navigation-buttons{display:flex;justify-content:flex-end;gap:.5rem;margin:50px 0}.producer-type-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer}.producer-type-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer}.producer-type-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.actions{display:flex;justify-content:space-between;margin:50px 0 27px}.right-actions{display:flex;gap:16px}button{height:44px;min-width:120px;border:none;font-size:14px;cursor:pointer;border-radius:5px}button.primary{background-color:#4077ad;color:#fff;border-radius:5px}button.secondary{background-color:#d5d6da;color:#525862;border-radius:5px}button:disabled{background-color:#9ca3af;cursor:not-allowed}::ng-deep .custom-ng-select.ng-select-multiple .ng-select-container{min-height:45px!important;height:auto!important;display:flex;align-items:center;overflow:visible!important}::ng-deep .custom-ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap!important;overflow:visible!important;padding-top:2px;padding-bottom:2px}::ng-deep .custom-ng-select.ng-select-multiple .ng-value{margin-bottom:4px}::ng-deep .custom-ng-select.ng-select-multiple .ng-arrow-wrapper{display:flex;align-items:center;height:100%}:host ::ng-deep .custom-ng-select .ng-select-container{padding:0!important;font-size:13px!important}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-top:3px;font-size:14px;color:#6b7280}::ng-deep .ng-select .ng-select-container{padding-top:3px;font-size:14px;color:#6b7280}@media screen and (max-width: 767px){.actions{margin:10px 0;flex-direction:column-reverse;gap:5px}.res{flex-direction:column-reverse}.spinner{width:24px;height:24px;top:-22%;left:180%}.spinner-resume{width:25px;height:25px;top:-22%;left:32%}.ct-btn{width:100%;margin-top:45px}}\n"] }]
         }], ctorParameters: () => [{ type: CredentialingStore }, { type: UserService }, { type: UserDocumentService }, { type: i2.Router }, { type: IndustryService }, { type: UserDetailService }, { type: FileService }, { type: ProvidersService }, { type: i6.TokenService }, { type: i8.FormBuilder }], propDecorators: { backToParent: [{
                 type: Output
             }], roleData: [{
@@ -29021,7 +29044,7 @@ class CredentialingComponent {
         console.log(this.states);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CredentialingComponent, deps: [{ token: CredentialingStore }, { token: PostalCodeServices }, { token: LIBRARY_CONFIG }, { token: i11.ViewportScroller }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CredentialingComponent, isStandalone: false, selector: "app-credentialing", inputs: { data: "data" }, outputs: { back: "back" }, ngImport: i0, template: "<div class=\"credentialing-container\">\r\n  <app-stepper></app-stepper>\r\n  <div class=\"step-content\" [@stepTransition]=\"store.currentStep()\">\r\n    <app-role-select (backToParent)=\"goBackToInitialProcess()\" [providerName] = \"providerName\" [providerId]=\"providerId\" [cloudfrontUrl]=\"cloudfrontUrl\" [roleData]=\"data\"\r\n      *ngIf=\"store.currentStep() === 1\"></app-role-select>\r\n      <app-coverage [states]=\"states\" [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 2\"></app-coverage>\r\n      <app-workexperience [states]=\"states\" [cloudfrontUrl]=\"cloudfrontUrl\" [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 3\"></app-workexperience>\r\n      <app-education [states]=\"states\" [cloudfrontUrl]=\"cloudfrontUrl\" [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 4\"></app-education>\r\n      <app-certification [states]=\"states\" [cloudfrontUrl]=\"cloudfrontUrl\" [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 5\"></app-certification>\r\n      <app-licenses [states]=\"states\" [cloudfrontUrl]=\"cloudfrontUrl\" [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 6\"></app-licenses>\r\n      <app-skills [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 7\"></app-skills>\r\n      <app-tools [providerName] = \"providerName\" [providerId]=\"providerId\" [roleData]=\"data\" *ngIf=\"store.currentStep() === 8\"></app-tools>\r\n  </div>\r\n</div>", styles: ["::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px!important;border:1px solid #dee2e6}.step-content{position:relative;min-height:400px}\n"], dependencies: [{ kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: StepperComponent, selector: "app-stepper" }, { kind: "component", type: EducationComponent, selector: "app-education", inputs: ["providerId", "providerName", "cloudfrontUrl"] }, { kind: "component", type: CertificationComponent, selector: "app-certification", inputs: ["states", "providerId", "providerName", "cloudfrontUrl"] }, { kind: "component", type: SkillsComponent, selector: "app-skills", inputs: ["providerId", "providerName"] }, { kind: "component", type: LicensesComponent, selector: "app-licenses", inputs: ["providerId", "providerName", "cloudfrontUrl", "states"] }, { kind: "component", type: ToolsComponent, selector: "app-tools", inputs: ["roleData", "providerId", "providerName"] }, { kind: "component", type: RoleSelectComponent, selector: "app-role-select", inputs: ["roleData", "cloudfrontUrl", "providerId", "providerName"], outputs: ["backToParent"] }, { kind: "component", type: Step2CoverageComponent, selector: "app-coverage", inputs: ["providerId", "providerName", "states"] }, { kind: "component", type: WorkexperienceComponent, selector: "app-workexperience", inputs: ["providerId", "providerName", "cloudfrontUrl"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CredentialingComponent, isStandalone: false, selector: "app-credentialing", inputs: { data: "data" }, outputs: { back: "back" }, ngImport: i0, template: "<div class=\"credentialing-container\">\r\n  <app-stepper *ngIf=\"!store.isUploadSuccess()\"></app-stepper>\r\n  <div class=\"step-content\" [@stepTransition]=\"store.currentStep()\">\r\n    <app-first *ngIf=\"store.currentStep() === 1\" (backToParent)=\"goBackToInitialProcess()\" [roleData]=\"data\">\r\n    </app-first>\r\n    <ng-container *ngIf=\"store.isUploadSuccess()\">\r\n      <app-preview *ngIf=\"store.currentStep() === 2\"></app-preview>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!store.isUploadSuccess()\">\r\n      <app-role-select  [providerName]=\"providerName\" [providerId]=\"providerId\"\r\n        [cloudfrontUrl]=\"cloudfrontUrl\" [roleData]=\"data\" *ngIf=\"store.currentStep() === 1\"></app-role-select>\r\n      <app-coverage [states]=\"states\" [providerName]=\"providerName\" [providerId]=\"providerId\"\r\n        *ngIf=\"store.currentStep() === 2\"></app-coverage>\r\n      <app-workexperience [states]=\"states\" [cloudfrontUrl]=\"cloudfrontUrl\" [providerName]=\"providerName\"\r\n        [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 3\"></app-workexperience>\r\n      <app-education [states]=\"states\" [cloudfrontUrl]=\"cloudfrontUrl\" [providerName]=\"providerName\"\r\n        [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 4\"></app-education>\r\n      <app-certification [states]=\"states\" [cloudfrontUrl]=\"cloudfrontUrl\" [providerName]=\"providerName\"\r\n        [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 5\"></app-certification>\r\n      <app-licenses [states]=\"states\" [cloudfrontUrl]=\"cloudfrontUrl\" [providerName]=\"providerName\"\r\n        [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 6\"></app-licenses>\r\n      <app-skills [providerName]=\"providerName\" [providerId]=\"providerId\"\r\n        *ngIf=\"store.currentStep() === 7\"></app-skills>\r\n      <app-tools [providerName]=\"providerName\" [providerId]=\"providerId\" [roleData]=\"data\"\r\n        *ngIf=\"store.currentStep() === 8\"></app-tools>\r\n    </ng-container>\r\n  </div>\r\n</div>", styles: ["::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px!important;border:1px solid #dee2e6}.step-content{position:relative;min-height:400px}\n"], dependencies: [{ kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: StepperComponent, selector: "app-stepper" }, { kind: "component", type: EducationComponent, selector: "app-education", inputs: ["providerId", "providerName", "cloudfrontUrl"] }, { kind: "component", type: CertificationComponent, selector: "app-certification", inputs: ["states", "providerId", "providerName", "cloudfrontUrl"] }, { kind: "component", type: SkillsComponent, selector: "app-skills", inputs: ["providerId", "providerName"] }, { kind: "component", type: LicensesComponent, selector: "app-licenses", inputs: ["providerId", "providerName", "cloudfrontUrl", "states"] }, { kind: "component", type: ToolsComponent, selector: "app-tools", inputs: ["roleData", "providerId", "providerName"] }, { kind: "component", type: RoleSelectComponent, selector: "app-role-select", inputs: ["roleData", "cloudfrontUrl", "providerId", "providerName"], outputs: ["backToParent"] }, { kind: "component", type: Step2CoverageComponent, selector: "app-coverage", inputs: ["providerId", "providerName", "states"] }, { kind: "component", type: WorkexperienceComponent, selector: "app-workexperience", inputs: ["providerId", "providerName", "cloudfrontUrl"] }], animations: [
             trigger('stepTransition', [
                 transition('* <=> *', [
                     style({
@@ -29051,7 +29074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                                 }))
                             ])
                         ])
-                    ], template: "<div class=\"credentialing-container\">\r\n  <app-stepper></app-stepper>\r\n  <div class=\"step-content\" [@stepTransition]=\"store.currentStep()\">\r\n    <app-role-select (backToParent)=\"goBackToInitialProcess()\" [providerName] = \"providerName\" [providerId]=\"providerId\" [cloudfrontUrl]=\"cloudfrontUrl\" [roleData]=\"data\"\r\n      *ngIf=\"store.currentStep() === 1\"></app-role-select>\r\n      <app-coverage [states]=\"states\" [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 2\"></app-coverage>\r\n      <app-workexperience [states]=\"states\" [cloudfrontUrl]=\"cloudfrontUrl\" [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 3\"></app-workexperience>\r\n      <app-education [states]=\"states\" [cloudfrontUrl]=\"cloudfrontUrl\" [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 4\"></app-education>\r\n      <app-certification [states]=\"states\" [cloudfrontUrl]=\"cloudfrontUrl\" [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 5\"></app-certification>\r\n      <app-licenses [states]=\"states\" [cloudfrontUrl]=\"cloudfrontUrl\" [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 6\"></app-licenses>\r\n      <app-skills [providerName] = \"providerName\" [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 7\"></app-skills>\r\n      <app-tools [providerName] = \"providerName\" [providerId]=\"providerId\" [roleData]=\"data\" *ngIf=\"store.currentStep() === 8\"></app-tools>\r\n  </div>\r\n</div>", styles: ["::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px!important;border:1px solid #dee2e6}.step-content{position:relative;min-height:400px}\n"] }]
+                    ], template: "<div class=\"credentialing-container\">\r\n  <app-stepper *ngIf=\"!store.isUploadSuccess()\"></app-stepper>\r\n  <div class=\"step-content\" [@stepTransition]=\"store.currentStep()\">\r\n    <app-first *ngIf=\"store.currentStep() === 1\" (backToParent)=\"goBackToInitialProcess()\" [roleData]=\"data\">\r\n    </app-first>\r\n    <ng-container *ngIf=\"store.isUploadSuccess()\">\r\n      <app-preview *ngIf=\"store.currentStep() === 2\"></app-preview>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!store.isUploadSuccess()\">\r\n      <app-role-select  [providerName]=\"providerName\" [providerId]=\"providerId\"\r\n        [cloudfrontUrl]=\"cloudfrontUrl\" [roleData]=\"data\" *ngIf=\"store.currentStep() === 1\"></app-role-select>\r\n      <app-coverage [states]=\"states\" [providerName]=\"providerName\" [providerId]=\"providerId\"\r\n        *ngIf=\"store.currentStep() === 2\"></app-coverage>\r\n      <app-workexperience [states]=\"states\" [cloudfrontUrl]=\"cloudfrontUrl\" [providerName]=\"providerName\"\r\n        [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 3\"></app-workexperience>\r\n      <app-education [states]=\"states\" [cloudfrontUrl]=\"cloudfrontUrl\" [providerName]=\"providerName\"\r\n        [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 4\"></app-education>\r\n      <app-certification [states]=\"states\" [cloudfrontUrl]=\"cloudfrontUrl\" [providerName]=\"providerName\"\r\n        [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 5\"></app-certification>\r\n      <app-licenses [states]=\"states\" [cloudfrontUrl]=\"cloudfrontUrl\" [providerName]=\"providerName\"\r\n        [providerId]=\"providerId\" *ngIf=\"store.currentStep() === 6\"></app-licenses>\r\n      <app-skills [providerName]=\"providerName\" [providerId]=\"providerId\"\r\n        *ngIf=\"store.currentStep() === 7\"></app-skills>\r\n      <app-tools [providerName]=\"providerName\" [providerId]=\"providerId\" [roleData]=\"data\"\r\n        *ngIf=\"store.currentStep() === 8\"></app-tools>\r\n    </ng-container>\r\n  </div>\r\n</div>", styles: ["::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px!important;border:1px solid #dee2e6}.step-content{position:relative;min-height:400px}\n"] }]
         }], ctorParameters: () => [{ type: CredentialingStore }, { type: PostalCodeServices }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LIBRARY_CONFIG]