@idsoftsource/initial-process 3.3.9 → 3.4.0

package/fesm2022/idsoftsource-initial-process.mjs

@@ -9616,16 +9616,21 @@ class SkillsComponent {
     emailId = '';
     userId = '';
     showAllSkills = false;
-    professions = [];
+    // "Select Profession" filter — sourced from the user's own saved profession
+    // records (getUserProfession), not the master profession-type catalog. Picking
+    // one both filters the skill-set browse list (via its linked master professionId)
+    // and gets stamped onto every skill row's userProfessionId/professionName.
     selectedProfessionId = null;
     selectedProfessionValue = '';
-    // The user's own saved profession records (from the Professions step), used to link
-    // a skill to a userProfessionId — separate from `professions` above, which is the
-    // master profession-type catalog used only to filter the skill-set browse list.
+    selectedUserProfessionId = null;
+    selectedUserProfessionName = '';
     userProfessionOptions = [];
+    // "+ Add new profession" flow off the "Select Profession" filter. Group/Type are
+    // attributes of the master profession-type taxonomy, so — unlike the filter's own
+    // item list — these options still come from ProfessionService, just to populate
+    // this modal's Group/Type pickers, not to browse/select professions by.
     professionGroupOptions = [];
     professionTypeOptions = [];
-    // "+ Add new profession" inline flow
     showCustomProfessionForm = false;
     customProfessionName = '';
     customProfessionGroup = null;
@@ -9633,9 +9638,8 @@ class SkillsComponent {
     customProfessionStars = 0;
     customProfessionYear = null;
     isSavingCustomProfession = false;
-    customProfessionTargetGroup = null;
-    skillDetailList;
     professionService = inject(ProfessionService);
+    skillDetailList;
     constructor(skillSetService, userSkillSetService, userProfessionService, userService, formBuilder, utils, roleContextService, store, tokenService) {
         this.skillSetService = skillSetService;
         this.userSkillSetService = userSkillSetService;
@@ -9685,8 +9689,8 @@ class SkillsComponent {
             userName: [this.user.fullName],
             skillSetId: [skillSetId ?? null],
             skillSetName: [skillName ?? null],
-            professionId: [null],
-            professionName: [''],
+            professionId: [this.selectedUserProfessionId ?? null],
+            professionName: [this.selectedUserProfessionName ?? ''],
             notes: [''],
             year: [null],
             starRating: [null],
@@ -9763,11 +9767,12 @@ class SkillsComponent {
         this.initialData();
         this.selectedTab = null;
         this.markTabPristine();
-        this.loadProfessions();
         this.loadUserProfessionOptions();
+        this.loadProfessionTaxonomy();
     }
-    // Loads the user's own saved profession records (created in the Professions step)
-    // so a skill can be linked to one via userProfessionId, the same way Preview does.
+    // Loads the user's own saved profession records (created in the Professions step).
+    // Feeds the "Select Profession" filter dropdown — replacing the master
+    // profession-type catalog — and lets a skill be linked via userProfessionId.
     loadUserProfessionOptions() {
         if (!this.userId)
             return;
@@ -9779,31 +9784,32 @@ class SkillsComponent {
             orderBy: 'professionName asc',
         }).subscribe({
             next: (res) => {
-                this.userProfessionOptions = Array.isArray(res?.data) ? res.data : [];
+                const saved = Array.isArray(res?.data) ? res.data : [];
+                this.userProfessionOptions = [{ id: '', professionName: 'All' }, ...saved];
+                this.selectedProfessionValue = '';
             },
             error: () => {
-                this.userProfessionOptions = [];
+                this.userProfessionOptions = [{ id: '', professionName: 'All' }];
+                this.selectedProfessionValue = '';
             }
         });
     }
-    onSkillProfessionChange(item, group) {
-        group.patchValue({
-            professionId: item?.id ?? null,
-            professionName: item?.professionName ?? '',
+    // Master profession-type taxonomy, fetched only to populate the Group/Type
+    // pickers in the "Add New Profession" modal — not used to browse/select professions.
+    loadProfessionTaxonomy() {
+        this.professionService.getProfessions({ filter: 'isActive=true', orderBy: 'professionName asc' }).subscribe({
+            next: (res) => {
+                const all = Array.isArray(res?.data) ? res.data : [];
+                this.professionGroupOptions = Array.from(new Set(all.map((p) => p.professionGroup).filter((g) => !!g))).sort();
+                this.professionTypeOptions = Array.from(new Set(all.map((p) => p.residentialCommercial).filter((t) => !!t))).sort();
+            },
+            error: () => {
+                this.professionGroupOptions = [];
+                this.professionTypeOptions = [];
+            }
         });
     }
-    isBlank(value) {
-        return typeof value !== 'string' || value.trim().length === 0;
-    }
-    recomputeProfessionGroupAndTypeOptions() {
-        const real = this.professions.filter((p) => !!p.id);
-        const groups = real.map((p) => p.professionGroup).filter((g) => !!g);
-        this.professionGroupOptions = Array.from(new Set(groups)).sort();
-        const types = real.map((p) => p.residentialCommercial).filter((t) => !!t);
-        this.professionTypeOptions = Array.from(new Set(types)).sort();
-    }
-    openCustomProfessionForm(group) {
-        this.customProfessionTargetGroup = group;
+    openCustomProfessionForm() {
         this.customProfessionName = '';
         this.customProfessionGroup = null;
         this.customProfessionType = null;
@@ -9816,10 +9822,9 @@ class SkillsComponent {
     }
     cancelCustomProfessionForm() {
         this.showCustomProfessionForm = false;
-        this.customProfessionTargetGroup = null;
     }
     get canSaveCustomProfession() {
-        return !this.isBlank(this.customProfessionName) && !!this.customProfessionGroup && !!this.customProfessionType;
+        return !!this.customProfessionName?.trim() && !!this.customProfessionGroup && !!this.customProfessionType;
     }
     async saveCustomProfession() {
         if (!this.canSaveCustomProfession || this.isSavingCustomProfession)
@@ -9852,16 +9857,14 @@ class SkillsComponent {
                 targetUserId: this.userId,
                 orderBy: 'professionName asc',
             }));
-            this.userProfessionOptions = Array.isArray(refreshed?.data) ? refreshed.data : [];
-            const created = this.userProfessionOptions.find((o) => (o.professionName || '').trim().toLowerCase() === name.toLowerCase());
-            if (created && this.customProfessionTargetGroup) {
-                this.customProfessionTargetGroup.patchValue({
-                    professionId: created.id,
-                    professionName: created.professionName,
-                });
+            const saved = Array.isArray(refreshed?.data) ? refreshed.data : [];
+            this.userProfessionOptions = [{ id: '', professionName: 'All' }, ...saved];
+            const created = saved.find((o) => (o.professionName || '').trim().toLowerCase() === name.toLowerCase());
+            if (created) {
+                this.selectedProfessionValue = created.id;
+                this.onProfessionChange(created);
             }
             this.showCustomProfessionForm = false;
-            this.customProfessionTargetGroup = null;
         }
         catch (err) {
             console.error('Unable to add custom profession', err);
@@ -10053,22 +10056,13 @@ class SkillsComponent {
         }
         this.searchSkillQry = null;
     }
-    loadProfessions() {
-        this.professionService.getProfessions({ filter: 'isActive=true', orderBy: 'professionName  asc' }).subscribe({
-            next: (res) => {
-                this.professions = [{ id: '', professionName: 'All' }, ...(res?.data || [])];
-                this.selectedProfessionValue = '';
-                this.recomputeProfessionGroupAndTypeOptions();
-            },
-            error: () => {
-                this.professions = [{ id: '', professionName: 'All' }];
-                this.selectedProfessionValue = '';
-                this.recomputeProfessionGroupAndTypeOptions();
-            }
-        });
-    }
     onProfessionChange(profession) {
-        this.selectedProfessionId = profession?.id || null;
+        // profession.id is the saved UserProfession record's own id (used to stamp
+        // userProfessionId onto new skill rows); profession.professionId is the link
+        // to the master ProfessionType, which the skill-set browse list is filtered by.
+        this.selectedProfessionId = profession?.professionId || null;
+        this.selectedUserProfessionId = profession?.id || null;
+        this.selectedUserProfessionName = profession?.professionName || '';
         this.getSkillSets();
     }
     getSkillSets() {
@@ -10237,7 +10231,7 @@ class SkillsComponent {
         this.userSkillsSub?.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SkillsComponent, deps: [{ token: SkillSetService }, { token: UserSkillSetService }, { token: UserProfessionService }, { token: UserService }, { token: i7.UntypedFormBuilder }, { token: UtilsService }, { token: i1$4.RoleContextService }, { token: CredentialingStore }, { token: i1$4.TokenService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SkillsComponent, isStandalone: false, selector: "app-skills", inputs: { providerId: "providerId", providerName: "providerName" }, viewQueries: [{ propertyName: "skillDetailList", first: true, predicate: ["skillDetailList"], descendants: true }], ngImport: i0, template: "<!-- \u2500\u2500\u2500 Skills Preview \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'preview'\">\r\n  <div class=\"preview-header\">\r\n    <div class=\"preview-header-icon\">\r\n      <img src=\"/assets/images/icons/stars.svg\" alt=\"skills\" width=\"20\" height=\"20\" />\r\n    </div>\r\n    <div>\r\n      <h3 class=\"preview-header-title\">Skills</h3>\r\n      <p class=\"preview-subtitle\">{{ userSkillsPreview.length }} skill{{ userSkillsPreview.length !== 1 ? 's' : '' }} added</p>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"sk-grid\">\r\n    <div *ngFor=\"let skill of userSkillsPreview; let i = index\" class=\"sk-card\">\r\n      <div class=\"sk-card-body\">\r\n\r\n        <div class=\"sk-head\">\r\n          <div class=\"sk-avatar\">{{ (skill.skillSetName || '?').charAt(0).toUpperCase() }}</div>\r\n          <div class=\"sk-title-block\">\r\n            <span class=\"sk-name\">{{ skill.skillSetName }}</span>\r\n            <span class=\"sk-sub\" *ngIf=\"skill.providerName\">{{ skill.providerName }}</span>\r\n          </div>\r\n          <div class=\"sk-top-actions\">\r\n            <ng-container *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\">\r\n              <button class=\"sk-text-btn cancel\" type=\"button\" (click)=\"backToSkill(null)\">Cancel</button>\r\n              <button class=\"sk-text-btn save\" type=\"button\" (click)=\"saveUserSkillset()\" [disabled]=\"showLoader\">Update</button>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n              <button class=\"icon-btn edit-btn\" (click)=\"editSkillFromPreview(skill, null, $event)\" title=\"Edit\">\r\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n              </button>\r\n              <button class=\"icon-btn delete-btn\" (click)=\"deleteSkillFromPreview(skill, $event)\" title=\"Delete\">\r\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n              </button>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- View mode -->\r\n        <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n          <div class=\"detail-row\">\r\n            <div class=\"detail-item\" *ngIf=\"skill.year\">\r\n              <span class=\"detail-label\">Years of Experience</span>\r\n              <span class=\"detail-value\">{{ skill.year }} yr(s)</span>\r\n            </div>\r\n            <div class=\"detail-item\" *ngIf=\"skill.profileVisibility\">\r\n              <span class=\"detail-label\">Visibility</span>\r\n              <span class=\"detail-value\">Visible</span>\r\n            </div>\r\n          </div>\r\n          <div class=\"sk-stars-row stars-readonly\">\r\n            <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n          </div>\r\n          <p class=\"sk-description\" *ngIf=\"skill.notes\">{{ skill.notes }}</p>\r\n        </ng-container>\r\n\r\n        <!-- Edit mode (inline) -->\r\n        <div *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\"\r\n          [formGroup]=\"tab.at(0)\" class=\"sk-edit-panel\">\r\n          <div class=\"sk-edit-row\">\r\n            <div class=\"sk-edit-field\">\r\n              <label class=\"sk-label\">Self Ability Rating</label>\r\n              <ngx-stars *ngIf=\"tab.at(0)?.get('starRating')?.value !== null\"\r\n                [key]=\"tab.at(0).get('starRating')?.value\"\r\n                [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\"\r\n                [maxStars]=\"5\"\r\n                (ratingOutput)=\"onEditRating($event)\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div class=\"sk-edit-field\">\r\n              <label class=\"sk-label\">Years of Experience</label>\r\n              <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\"\r\n                bindLabel=\"text\" formControlName=\"year\"\r\n                bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\"\r\n                [appendTo]=\"'body'\"></ng-select>\r\n            </div>\r\n            <div class=\"sk-edit-field sk-toggle-field\">\r\n              <label class=\"sk-label\">Visible</label>\r\n              <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n            </div>\r\n          </div>\r\n          <div class=\"sk-edit-field sk-edit-full\">\r\n            <label class=\"sk-label\">Description</label>\r\n            <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\" placeholder=\"Enter notes\"></textarea>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Skills Add \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'add'\">\r\n  <div class=\"step-card-header mb-4\" style=\"border-radius: 10px;\">\r\n    <div class=\"step-card-header-icon\">\r\n      <img src=\"/assets/images/icons/stars.svg\" alt=\"skills\" width=\"22\" height=\"22\" />\r\n    </div>\r\n    <div>\r\n      <h3 class=\"step-card-title\">Add Skills</h3>\r\n      <p class=\"step-card-subtitle\">Select your skill areas and rate your proficiency</p>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Step 1: Select skills -->\r\n  <div class=\"sk-section\">\r\n    <div class=\"sk-select-row\">\r\n      <div class=\"sk-select-col\">\r\n        <label class=\"sk-label\">Select Profession</label>\r\n        <ng-select\r\n          [items]=\"professions\"\r\n          bindLabel=\"professionName\"\r\n          bindValue=\"id\"\r\n          [(ngModel)]=\"selectedProfessionValue\"\r\n           placeholder=\"Select Profession\"\r\n          [clearable]=\"true\"\r\n          (change)=\"onProfessionChange($event)\">\r\n        </ng-select>\r\n      </div>\r\n      <div class=\"sk-select-col\">\r\n        <label class=\"sk-label\">Select Skill</label>\r\n        <div class=\"search-part\">\r\n          <input type=\"text\" placeholder=\"Search / Add Skillsets here\" [(ngModel)]=\"searchSkillQry\"\r\n            (input)=\"getSkillSets()\" />\r\n          <button class=\"btn\" (click)=\"createNewSkills()\" tooltip=\"Add Skillset\">\r\n            <img src=\"/assets/images/icons/plus.svg\" alt=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"errMsg\" class=\"invalid-feedback is-invalid d-block\">Please Enter Skillsets Name</div>\r\n    <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">{{ nameError }}</div>\r\n    <div class=\"skill-chips-wrapper\" [ngClass]=\"showLoading && !isEditMode ? 'loader' : ''\"\r\n      [class.chips-collapsed]=\"!showAllSkills\">\r\n      <div class=\"skill-chips\" [class.collapsed]=\"!showAllSkills\"\r\n        [ngStyle]=\"showLoader && !isEditMode ? {'min-height': '120px'} : {}\">\r\n        <label class=\"skill-chip\" *ngFor=\"let skill of skillSets\"\r\n          [class.selected]=\"skill.selected\"\r\n          [attr.for]=\"skill.id\">\r\n          <input type=\"checkbox\" [checked]=\"skill.selected\"\r\n            (change)=\"onSelectedSkillsets($event, skill)\"\r\n            [id]=\"skill.id\" [name]=\"skill.id\" />\r\n          <svg *ngIf=\"skill.selected\" class=\"chip-check-icon\" width=\"11\" height=\"11\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n            <path d=\"M2 6l3 3 5-5\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>\r\n          {{ skill.name }}\r\n        </label>\r\n      </div>\r\n    </div>\r\n    <button *ngIf=\"!showLoading && skillSets.length > 0\" type=\"button\"\r\n      class=\"show-more-btn\" (click)=\"showAllSkills = !showAllSkills\">\r\n      {{ showAllSkills ? 'Show Less' : 'Show More' }}\r\n      <svg [class.rotated]=\"showAllSkills\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M6 9l6 6 6-6\"/>\r\n      </svg>\r\n    </button>\r\n  </div>\r\n\r\n  <!-- Step 2: Per-skill detail cards (replaces tabset) -->\r\n  <div class=\"sk-detail-list\" #skillDetailList\r\n    *ngIf=\"tab.controls.length > 0\"\r\n    [ngClass]=\"{ 'loader': showLoading && !isEditMode, 'edit-mode': isEditMode }\">\r\n    <div class=\"sk-detail-list-header\">\r\n      <span class=\"sk-section-label\">Skill Details</span>\r\n      <span class=\"sk-count-badge\">{{ tab.controls.length }} selected</span>\r\n    </div>\r\n\r\n    <div *ngFor=\"let group of tab.controls; let index = index\"\r\n      [formGroup]=\"group\" class=\"sk-detail-card\">\r\n      <div class=\"sk-detail-card-hd\">\r\n        <div class=\"sk-detail-avatar\">{{ (tabs[index] || '?').charAt(0).toUpperCase() }}</div>\r\n        <span class=\"sk-detail-card-name\">{{ tabs[index] }}</span>\r\n        <div class=\"sk-detail-card-actions\">\r\n          <label class=\"sk-copy-toggle\" *ngIf=\"tab.controls.length > 1 && index === 0\" title=\"Copy these values to all skills\">\r\n            <input type=\"checkbox\" class=\"form-check-input\"\r\n              (click)=\"setCopyToAllTabs(index, group.value)\" role=\"switch\" />\r\n            Copy to all\r\n          </label>\r\n          <button *ngIf=\"!isEditMode\" class=\"icon-btn delete-btn\" type=\"button\"\r\n            (click)=\"removeTab(index, group.controls.skillSetId.value)\" title=\"Remove\">\r\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <div class=\"sk-detail-fields\">\r\n        <div class=\"sk-field sk-field-full\">\r\n          <label class=\"sk-label\">Profession Type</label>\r\n          <div class=\"d-flex align-items-start gap-2\">\r\n            <ng-select class=\"flex-grow-1\" [items]=\"userProfessionOptions\" bindLabel=\"professionName\" bindValue=\"id\"\r\n              formControlName=\"professionId\" placeholder=\"Select or search profession type\" [clearable]=\"true\"\r\n              [appendTo]=\"'body'\" (change)=\"onSkillProfessionChange($event, group)\"></ng-select>\r\n            <button type=\"button\" class=\"btn btn-outline-primary btn-sm\" title=\"Add new profession\"\r\n              (click)=\"openCustomProfessionForm(group)\">+</button>\r\n          </div>\r\n        </div>\r\n        <div class=\"sk-fields-row\">\r\n          <div class=\"sk-field\">\r\n            <label class=\"sk-label\">Self Ability Rating</label>\r\n            <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event, index)\"\r\n              [maxStars]=\"5\">\r\n            </ngx-stars>\r\n          </div>\r\n          <div class=\"sk-field\">\r\n            <label class=\"sk-label\">Years of Experience</label>\r\n            <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\"\r\n              bindLabel=\"text\" formControlName=\"year\"\r\n              bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\"\r\n              [appendTo]=\"'body'\" (change)=\"onYearChange(group)\"></ng-select>\r\n          </div>\r\n          <div class=\"sk-field sk-toggle-field\">\r\n            <label class=\"sk-label\">Profile Visibility</label>\r\n            <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n          </div>\r\n        </div>\r\n        <div class=\"sk-field sk-field-full\">\r\n          <label class=\"sk-label\">Description</label>\r\n          <textarea placeholder=\"Describe your skill...\" formControlName=\"notes\" class=\"form-control\"\r\n            [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.notes?.errors }\" rows=\"2\"></textarea>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Footer: Add mode -->\r\n<div *ngIf=\"store.stepView() === 'add'\" class=\"skills-container last footer-actions\">\r\n  <button class=\"back-btn\" (click)=\"userSkillsPreview.length > 0 ? cancel() : back()\">\r\n    <svg *ngIf=\"userSkillsPreview.length > 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n    <svg *ngIf=\"userSkillsPreview.length === 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n    {{ userSkillsPreview.length > 0 ? 'Cancel' : 'Back' }}\r\n  </button>\r\n  <div class=\"mb-res\">\r\n    <button class=\"back-btn me-3\" *ngIf=\"userSkillsPreview.length === 0\" (click)=\"next()\">\r\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n      Skip\r\n    </button>\r\n    <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n      Continue\r\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<!-- Footer: Preview mode -->\r\n<div *ngIf=\"store.stepView() !== 'add'\" class=\"skills-container last footer-actions\">\r\n  <button class=\"back-btn\" (click)=\"back()\">\r\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n    Back\r\n  </button>\r\n  <div class=\"mb-res\">\r\n    <button class=\"continue-btn add me-3\" *ngIf=\"store.stepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\r\n      Add More Skills\r\n    </button>\r\n    <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n      Continue\r\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showCustomProfessionForm\">\r\n  <div class=\"confirm-modal-card add-profession-card\" style=\"max-width: 420px;\">\r\n    <h4 class=\"mb-1\">Add New Profession</h4>\r\n    <p class=\"text-muted small mb-4\">This profession isn't in the list yet. Add it here so you can link it to this skill.</p>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Profession Name <span class=\"text-danger\">*</span></label>\r\n      <input type=\"text\" class=\"form-control\" [(ngModel)]=\"customProfessionName\" name=\"customProfessionName\"\r\n        placeholder=\"Enter profession name\" />\r\n    </div>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Group <span class=\"text-danger\">*</span></label>\r\n      <ng-select class=\"add-profession-select\" [items]=\"professionGroupOptions\" [(ngModel)]=\"customProfessionGroup\" name=\"customProfessionGroup\"\r\n        placeholder=\"Select group\" [clearable]=\"false\" [appendTo]=\"'body'\">\r\n      </ng-select>\r\n    </div>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Type <span class=\"text-danger\">*</span></label>\r\n      <ng-select class=\"add-profession-select\" [items]=\"professionTypeOptions\" [(ngModel)]=\"customProfessionType\" name=\"customProfessionType\"\r\n        placeholder=\"Select type\" [clearable]=\"false\" [appendTo]=\"'body'\">\r\n      </ng-select>\r\n    </div>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Self-ability Rating</label>\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n          (click)=\"setCustomProfessionStars(s)\" [attr.aria-label]=\"'Set rating ' + s\">\r\n          <span [class]=\"customProfessionStars >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n            {{ customProfessionStars >= s ? '\u2605' : '\u2606' }}\r\n          </span>\r\n        </button>\r\n        <span class=\"small text-muted\">{{ customProfessionStars }}/5</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"mb-4\">\r\n      <label class=\"small text-muted d-block mb-1\">Years of Experience</label>\r\n      <input type=\"number\" class=\"form-control\" [(ngModel)]=\"customProfessionYear\" name=\"customProfessionYear\"\r\n        min=\"0\" max=\"30\" placeholder=\"Years of Experience\" />\r\n    </div>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"cancelCustomProfessionForm()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary h-auto\" [disabled]=\"!canSaveCustomProfession || isSavingCustomProfession\"\r\n        (click)=\"saveCustomProfession()\">\r\n        <span *ngIf=\"isSavingCustomProfession\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n        {{ isSavingCustomProfession ? 'Saving...' : 'Add Profession' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".skills-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}.skills-container.last{min-height:unset}.title{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.subtitle{font-size:14px;color:#69707d;margin-bottom:24px}.content-part{background:#fff}.content-part p{font-size:13px;color:#69707d}.content-part div{font-size:13px}.content-part .card{margin-top:15px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.content-part .card .row{margin-top:-15px}.content-part .card .sub-section{padding:0 10px}.content-part .card .sub-section .title{font-size:15px;font-weight:500;color:#1e293b}.content-part .card .sub-section .info-title{font-size:12px;font-weight:400;color:#69707d;margin-left:5px}.content-part .card .sub-section .content{font-size:13px;color:#69707d}.content-part .card .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px;color:#69707d}.content-part .card .sub-section .subsection input{width:30%}.content-part .card .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#1e293b;margin-top:15px}.content-part .tab-card .row{margin-top:2px}.search-part{width:100%;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;height:42px;background:#f9fafb;transition:all .2s ease}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.search-part input::placeholder{color:#69707d}.search-part .btn{background:#4077ad;border-radius:5px;padding:0;width:42px;height:40px;display:flex;align-items:center;justify-content:center;margin-right:0;border:none;cursor:pointer;transition:all .2s ease}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}textarea{width:100%;height:100px;min-height:96px;background:#f9fafb;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-size:14px;color:#1e293b;resize:vertical;outline:none;transition:all .2s ease}textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.skill-chips-wrapper{margin:8px 0 4px;position:relative;max-height:300px;overflow-y:auto}.skill-chips-wrapper.chips-collapsed:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:52px;background:linear-gradient(to bottom,transparent,#ffffff);pointer-events:none}.skill-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.skill-chips.collapsed{max-height:190px;overflow:hidden}.show-more-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:1.5px solid #e2e8f0;border-radius:5px;color:#4077ad;font-size:14px;font-weight:600;padding:5px 14px;cursor:pointer;transition:all .2s ease;margin-bottom:12px}.show-more-btn:hover{background:#ebf2f9;border-color:#4077ad}.show-more-btn svg{transition:transform .2s ease}.show-more-btn svg.rotated{transform:rotate(180deg)}.skill-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:5px;border:1.5px solid #e2e8f0;background:#fff;color:#69707d;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4;position:relative}.skill-chip input[type=checkbox]{display:none}.skill-chip .chip-check-icon{flex-shrink:0}.skill-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.skill-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.skill-chip .chip-popover{position:fixed;transform:translate(-50%,-100%);background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;padding:10px 14px;min-width:220px;max-width:300px;z-index:99999;text-align:left;pointer-events:none;white-space:normal}.skill-chip .chip-popover:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:7px solid transparent;border-top-color:#e2e8f0}.skill-chip .chip-popover:before{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:-1px;border:6px solid transparent;border-top-color:#fff;z-index:1}.chip-popover-row{display:flex;flex-direction:column;gap:2px;padding:5px 0;border-bottom:1px solid #e2e8f0}.chip-popover-row:last-child{border-bottom:none;padding-bottom:0}.chip-popover-row:first-child{padding-top:0}.chip-popover-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#69707d;line-height:1.3}.chip-popover-value{font-size:12px;font-weight:500;color:#1e293b;line-height:1.45;word-break:break-word}.form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#4077ad!important;border:1px solid #4077AD!important}.sk-toggle-field .form-check-input{margin-top:8px}::ng-deep .ng-dropdown-panel{min-width:180px}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{max-height:210px}::ng-deep .ng-select .ng-select-container{min-height:42px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:14px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .ng-select.ng-select-focused .ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f}.label{font-size:12px;font-weight:700;color:#69707d;text-transform:uppercase;letter-spacing:.05em;padding-bottom:6px;display:block;margin-bottom:2px}.form-control{color:#1e293b;background:#f9fafb!important;min-height:36px;font-size:14px;height:42px;border:1.5px solid #e2e8f0;border-radius:8px;transition:all .2s ease}.form-control:focus{border-color:#4077ad;background:#fff!important;box-shadow:0 0 0 3px #4077ad1f!important}.form-control:focus{border:1.5px solid #4077AD;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .nav-link{color:#69707d!important}::ng-deep .nav-link.active{color:#4077ad!important;font-weight:600}.loader{filter:blur(3px);height:40px}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.close-popup{position:absolute;right:7px;top:4px;width:25px;cursor:pointer;opacity:.6;transition:all .2s ease}.close-popup:hover{opacity:1}.back-btn,.skip-btn{height:42px;min-width:130px;background:#69707d;color:#fff;border:1.5px solid #69707D;border-radius:5px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover,.skip-btn:hover{border-color:#565c66;color:#fff;background:#565c66}.back-btn.edit,.skip-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.mb-res .back-btn{background:#f2f4fa;color:#69707d;border:1.5px solid #F2F4FA}.mb-res .back-btn:hover{background:#e4e8f2;border-color:#e4e8f2;color:#69707d}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:5px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-left:15px}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.save-btn:disabled{background:#69707d;cursor:not-allowed;transform:none}.create-btn{height:42px;min-width:9rem;background:#4077ad;color:#fff;border:none;border-radius:5px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.create-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.create-btn:active{transform:translateY(0)}.continue-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:5px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.continue-btn:hover{background:#2d5a8a;transform:translateY(-1px)}.continue-btn:active{transform:translateY(0)}.continue-btn:disabled{background:#69707d;cursor:not-allowed;transform:none}.continue-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn.add{background:#f2f4fa;color:#69707d}.continue-btn.add:hover{background:#e4e8f2}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:64px}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#ebf2f9;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:12px;color:#69707d;margin:0}.sk-grid{display:grid;gap:14px;margin-bottom:24px}.sk-card{display:flex;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;transition:box-shadow .18s ease,transform .18s ease}.sk-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.sk-card-body{flex:1;padding:14px 16px;min-width:0}.sk-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.sk-avatar{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#4077ad,#2d5a8a);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}.sk-title-block{flex:1;min-width:0}.sk-name{display:block;font-size:16px;font-weight:700;color:#4077ad;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-sub{display:block;font-size:12px;color:#69707d;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-top-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.sk-text-btn{height:28px;padding:0 12px;border-radius:5px;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:all .2s ease}.sk-text-btn.cancel{background:#d4dae6;color:#69707d;border:1px solid #D4DAE6}.sk-text-btn.cancel:hover{border-color:#c2cbde;color:#69707d;background:#c2cbde}.sk-text-btn.save{background:#4077ad;color:#fff;margin-left:4px}.sk-text-btn.save:hover{background:#2d5a8a}.sk-text-btn.save:disabled{background:#69707d;cursor:not-allowed}.icon-btn{width:28px;height:28px;border:none;min-width:unset!important;border-radius:5px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.sk-meta-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-year{background:#ebf2f9;color:#4077ad}.chip.chip-visible{background:#f0fdf4;color:#15803d}.chip.chip-make{background:#fff7ed;color:#c2410c}.chip.chip-model{background:#f5f3ff;color:#6d28d9}.chip.chip-serial{background:#f8fafc;color:#69707d;font-family:monospace;font-size:11px}.sk-stars-row{margin-bottom:6px}.sk-description{font-size:12px;color:#69707d;line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sk-edit-panel{margin-top:10px;padding-top:10px;border-top:1px solid #e2e8f0}.sk-edit-row{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;margin-bottom:10px}.sk-edit-field{display:flex;flex-direction:column;gap:4px}.sk-edit-full{grid-column:1/-1;margin-top:4px}.sk-toggle-field{align-items:center;justify-content:center}.sk-label{font-size:12px;font-weight:700;color:#69707d;text-transform:uppercase;letter-spacing:.05em}.sk-section{margin-bottom:20px}.sk-select-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:12px}.sk-select-col{display:flex;flex-direction:column;gap:6px}.sk-select-col .search-part{margin-bottom:0}.sk-section-label{font-size:12px;font-weight:700;color:#1e293b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;display:block}.sk-detail-list{display:flex;flex-direction:column;gap:12px;margin-top:8px}.sk-detail-list-header{display:flex;align-items:center;gap:10px;margin-bottom:4px}.sk-count-badge{display:inline-flex;align-items:center;padding:2px 8px;background:#ebf2f9;color:#4077ad;border-radius:20px;font-size:12px;font-weight:600}.sk-detail-card{border:1px solid #e2e8f0;border-radius:12px;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden}.sk-detail-card-hd{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#ebf2f9;border-bottom:1px solid #e2e8f0}.sk-detail-avatar{width:32px;height:32px;border-radius:8px;background:#4077ad;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.sk-detail-card-name{flex:1;font-size:14px;font-weight:700;color:#4077ad;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-detail-card-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.sk-copy-toggle{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#69707d;cursor:pointer;-webkit-user-select:none;user-select:none}.sk-detail-fields{padding:14px 16px}.sk-fields-row{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;margin-bottom:12px}.sk-field{display:flex;flex-direction:column;gap:4px}.sk-field-full{grid-column:1/-1}.skill-preview-wrapper{margin-bottom:24px}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;margin-bottom:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease}.skill-preview-wrapper{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff;transition:box-shadow .25s ease}.skill-preview-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;font-size:15px;font-weight:700;color:#1e293b;border-bottom:1px solid transparent;cursor:pointer}.skill-preview-header.open{background:#ebf2f9;color:#2d5a8a;border-bottom:1px solid #e2e8f0}.skill-preview-body{padding:0;background:#fff}.skill-preview-body>div{padding:16px 20px;border-bottom:1px solid #e2e8f0}.skill-preview-body>div:last-child{border-bottom:none}.skill-preview-body label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#69707d;margin-bottom:5px}.skill-preview-body p{margin:0;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5}h5.title{font-size:22px;font-weight:700;color:#1e293b!important;margin-bottom:4px}.preview-detail-grid,.preview-edit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.preview-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0;border-right:1px solid #e2e8f0}.preview-cell:nth-child(3n){border-right:none}.preview-full{grid-column:1/-1;border-right:none;border-bottom:none}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#69707d;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.stars-readonly{pointer-events:none;display:block}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.rotate{transform:rotate(-180deg)}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:16px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:14px;color:#69707d;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:12px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:5px;border:1.5px solid #e2e8f0;background:#fff;color:#69707d;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.detail-row{display:flex;flex-wrap:wrap;column-gap:22px;row-gap:6px;margin-bottom:8px}.detail-item{display:flex;align-items:baseline;gap:6px;white-space:nowrap}.detail-label{font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:#4077ad}.detail-value{font-size:12.5px;font-weight:600;color:#1e293b}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:5px;box-shadow:none}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#69707d;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@media screen and (max-width: 767px){.step-card-header{padding:14px 16px}.step-card-body{padding:16px 16px 8px}.step-toast{right:12px;bottom:16px;min-width:calc(100vw - 24px);max-width:calc(100vw - 24px)}}@media screen and (max-width: 767px){.skills-container{padding:16px}.title,h5.title{font-size:18px}.form-control,textarea{font-size:16px}.footer-actions{flex-direction:column-reverse;gap:8px;margin-top:48px}.back-btn,.skip-btn{width:100%}.continue-btn{padding:10px 22px;width:100%}.mb-res{display:flex;flex-direction:column-reverse;gap:8px;width:100%}.preview-detail-grid,.preview-edit-grid{grid-template-columns:1fr}.preview-cell{border-right:none}.sk-grid,.sk-edit-row,.sk-fields-row,.sk-select-row{grid-template-columns:1fr}}.modal-overlay{position:fixed;inset:0;background:#11182773;display:flex;align-items:center;justify-content:center;z-index:2500;padding:20px}.confirm-modal-card{width:min(520px,96vw);max-height:85vh;overflow-y:auto;background:#fff;border-radius:5px;border:1px solid #e5e7eb;padding:24px}.add-profession-card label,.add-profession-card .form-control{font-size:12px}.add-profession-card .form-control::placeholder{font-size:12px}.add-profession-card .btn{font-size:14px}.add-profession-card ::ng-deep .add-profession-select .ng-select-container,.add-profession-card ::ng-deep .add-profession-select .ng-placeholder,.add-profession-card ::ng-deep .add-profession-select .ng-value-label{font-size:12px}::ng-deep .add-profession-select .ng-option,::ng-deep .add-profession-select .ng-placeholder{font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i7.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: i7.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i7.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i7.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.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: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "component", type: NgxStarsComponent, selector: "ngx-stars", inputs: ["maxStars", "initialStars", "readonly", "size", "color", "animation", "animationSpeed", "customPadding", "wholeStars", "customStarIcons"], outputs: ["ratingOutput"] }, { kind: "directive", type: i13.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SkillsComponent, isStandalone: false, selector: "app-skills", inputs: { providerId: "providerId", providerName: "providerName" }, viewQueries: [{ propertyName: "skillDetailList", first: true, predicate: ["skillDetailList"], descendants: true }], ngImport: i0, template: "<!-- \u2500\u2500\u2500 Skills Preview \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'preview'\">\r\n  <div class=\"preview-header\">\r\n    <div class=\"preview-header-icon\">\r\n      <img src=\"/assets/images/icons/stars.svg\" alt=\"skills\" width=\"20\" height=\"20\" />\r\n    </div>\r\n    <div>\r\n      <h3 class=\"preview-header-title\">Skills</h3>\r\n      <p class=\"preview-subtitle\">{{ userSkillsPreview.length }} skill{{ userSkillsPreview.length !== 1 ? 's' : '' }} added</p>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"sk-grid\">\r\n    <div *ngFor=\"let skill of userSkillsPreview; let i = index\" class=\"sk-card\">\r\n      <div class=\"sk-card-body\">\r\n\r\n        <div class=\"sk-head\">\r\n          <div class=\"sk-avatar\">{{ (skill.skillSetName || '?').charAt(0).toUpperCase() }}</div>\r\n          <div class=\"sk-title-block\">\r\n            <span class=\"sk-name\">{{ skill.skillSetName }}</span>\r\n            <span class=\"sk-sub\" *ngIf=\"skill.providerName\">{{ skill.providerName }}</span>\r\n          </div>\r\n          <div class=\"sk-top-actions\">\r\n            <ng-container *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\">\r\n              <button class=\"sk-text-btn cancel\" type=\"button\" (click)=\"backToSkill(null)\">Cancel</button>\r\n              <button class=\"sk-text-btn save\" type=\"button\" (click)=\"saveUserSkillset()\" [disabled]=\"showLoader\">Update</button>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n              <button class=\"icon-btn edit-btn\" (click)=\"editSkillFromPreview(skill, null, $event)\" title=\"Edit\">\r\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n              </button>\r\n              <button class=\"icon-btn delete-btn\" (click)=\"deleteSkillFromPreview(skill, $event)\" title=\"Delete\">\r\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n              </button>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- View mode -->\r\n        <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n          <div class=\"detail-row\">\r\n            <div class=\"detail-item\" *ngIf=\"skill.year\">\r\n              <span class=\"detail-label\">Years of Experience</span>\r\n              <span class=\"detail-value\">{{ skill.year }} yr(s)</span>\r\n            </div>\r\n            <div class=\"detail-item\" *ngIf=\"skill.profileVisibility\">\r\n              <span class=\"detail-label\">Visibility</span>\r\n              <span class=\"detail-value\">Visible</span>\r\n            </div>\r\n          </div>\r\n          <div class=\"sk-stars-row stars-readonly\">\r\n            <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n          </div>\r\n          <p class=\"sk-description\" *ngIf=\"skill.notes\">{{ skill.notes }}</p>\r\n        </ng-container>\r\n\r\n        <!-- Edit mode (inline) -->\r\n        <div *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\"\r\n          [formGroup]=\"tab.at(0)\" class=\"sk-edit-panel\">\r\n          <div class=\"sk-edit-row\">\r\n            <div class=\"sk-edit-field\">\r\n              <label class=\"sk-label\">Self Ability Rating</label>\r\n              <ngx-stars *ngIf=\"tab.at(0)?.get('starRating')?.value !== null\"\r\n                [key]=\"tab.at(0).get('starRating')?.value\"\r\n                [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\"\r\n                [maxStars]=\"5\"\r\n                (ratingOutput)=\"onEditRating($event)\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div class=\"sk-edit-field\">\r\n              <label class=\"sk-label\">Years of Experience</label>\r\n              <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\"\r\n                bindLabel=\"text\" formControlName=\"year\"\r\n                bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\"\r\n                [appendTo]=\"'body'\"></ng-select>\r\n            </div>\r\n            <div class=\"sk-edit-field sk-toggle-field\">\r\n              <label class=\"sk-label\">Visible</label>\r\n              <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n            </div>\r\n          </div>\r\n          <div class=\"sk-edit-field sk-edit-full\">\r\n            <label class=\"sk-label\">Description</label>\r\n            <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\" placeholder=\"Enter notes\"></textarea>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Skills Add \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'add'\">\r\n  <div class=\"step-card-header mb-4\" style=\"border-radius: 10px;\">\r\n    <div class=\"step-card-header-icon\">\r\n      <img src=\"/assets/images/icons/stars.svg\" alt=\"skills\" width=\"22\" height=\"22\" />\r\n    </div>\r\n    <div>\r\n      <h3 class=\"step-card-title\">Add Skills</h3>\r\n      <p class=\"step-card-subtitle\">Select your skill areas and rate your proficiency</p>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Step 1: Select skills -->\r\n  <div class=\"sk-section\">\r\n    <div class=\"sk-select-row\">\r\n      <div class=\"sk-select-col\">\r\n        <label class=\"sk-label\">Select Profession</label>\r\n        <div class=\"search-part\">\r\n          <ng-select class=\"flex-grow-1 w-100\"\r\n            [items]=\"userProfessionOptions\"\r\n            bindLabel=\"professionName\"\r\n            bindValue=\"id\"\r\n            [(ngModel)]=\"selectedProfessionValue\"\r\n            placeholder=\"Search / Add Profession here\"\r\n            [clearable]=\"true\"\r\n            (change)=\"onProfessionChange($event)\">\r\n          </ng-select>\r\n          <button class=\"btn\" type=\"button\" (click)=\"openCustomProfessionForm()\" tooltip=\"Add Profession\">\r\n            <img src=\"/assets/images/icons/plus.svg\" alt=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <div class=\"sk-select-col\">\r\n        <label class=\"sk-label\">Select Skill</label>\r\n        <div class=\"search-part\">\r\n          <input type=\"text\" placeholder=\"Search / Add Skillsets here\" [(ngModel)]=\"searchSkillQry\"\r\n            (input)=\"getSkillSets()\" />\r\n          <button class=\"btn\" (click)=\"createNewSkills()\" tooltip=\"Add Skillset\">\r\n            <img src=\"/assets/images/icons/plus.svg\" alt=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"errMsg\" class=\"invalid-feedback is-invalid d-block\">Please Enter Skillsets Name</div>\r\n    <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">{{ nameError }}</div>\r\n    <div class=\"skill-chips-wrapper\" [ngClass]=\"showLoading && !isEditMode ? 'loader' : ''\"\r\n      [class.chips-collapsed]=\"!showAllSkills\">\r\n      <div class=\"skill-chips\" [class.collapsed]=\"!showAllSkills\"\r\n        [ngStyle]=\"showLoader && !isEditMode ? {'min-height': '120px'} : {}\">\r\n        <label class=\"skill-chip\" *ngFor=\"let skill of skillSets\"\r\n          [class.selected]=\"skill.selected\"\r\n          [attr.for]=\"skill.id\">\r\n          <input type=\"checkbox\" [checked]=\"skill.selected\"\r\n            (change)=\"onSelectedSkillsets($event, skill)\"\r\n            [id]=\"skill.id\" [name]=\"skill.id\" />\r\n          <svg *ngIf=\"skill.selected\" class=\"chip-check-icon\" width=\"11\" height=\"11\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n            <path d=\"M2 6l3 3 5-5\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>\r\n          {{ skill.name }}\r\n        </label>\r\n      </div>\r\n    </div>\r\n    <button *ngIf=\"!showLoading && skillSets.length > 0\" type=\"button\"\r\n      class=\"show-more-btn\" (click)=\"showAllSkills = !showAllSkills\">\r\n      {{ showAllSkills ? 'Show Less' : 'Show More' }}\r\n      <svg [class.rotated]=\"showAllSkills\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M6 9l6 6 6-6\"/>\r\n      </svg>\r\n    </button>\r\n  </div>\r\n\r\n  <!-- Step 2: Per-skill detail cards (replaces tabset) -->\r\n  <div class=\"sk-detail-list\" #skillDetailList\r\n    *ngIf=\"tab.controls.length > 0\"\r\n    [ngClass]=\"{ 'loader': showLoading && !isEditMode, 'edit-mode': isEditMode }\">\r\n    <div class=\"sk-detail-list-header\">\r\n      <span class=\"sk-section-label\">Skill Details</span>\r\n      <span class=\"sk-count-badge\">{{ tab.controls.length }} selected</span>\r\n    </div>\r\n\r\n    <div *ngFor=\"let group of tab.controls; let index = index\"\r\n      [formGroup]=\"group\" class=\"sk-detail-card\">\r\n      <div class=\"sk-detail-card-hd\">\r\n        <div class=\"sk-detail-avatar\">{{ (tabs[index] || '?').charAt(0).toUpperCase() }}</div>\r\n        <span class=\"sk-detail-card-name\">{{ tabs[index] }}</span>\r\n        <div class=\"sk-detail-card-actions\">\r\n          <label class=\"sk-copy-toggle\" *ngIf=\"tab.controls.length > 1 && index === 0\" title=\"Copy these values to all skills\">\r\n            <input type=\"checkbox\" class=\"form-check-input\"\r\n              (click)=\"setCopyToAllTabs(index, group.value)\" role=\"switch\" />\r\n            Copy to all\r\n          </label>\r\n          <button *ngIf=\"!isEditMode\" class=\"icon-btn delete-btn\" type=\"button\"\r\n            (click)=\"removeTab(index, group.controls.skillSetId.value)\" title=\"Remove\">\r\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <div class=\"sk-detail-fields\">\r\n        <div class=\"sk-fields-row\">\r\n          <div class=\"sk-field\">\r\n            <label class=\"sk-label\">Self Ability Rating</label>\r\n            <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event, index)\"\r\n              [maxStars]=\"5\">\r\n            </ngx-stars>\r\n          </div>\r\n          <div class=\"sk-field\">\r\n            <label class=\"sk-label\">Years of Experience</label>\r\n            <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\"\r\n              bindLabel=\"text\" formControlName=\"year\"\r\n              bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\"\r\n              [appendTo]=\"'body'\" (change)=\"onYearChange(group)\"></ng-select>\r\n          </div>\r\n          <div class=\"sk-field sk-toggle-field\">\r\n            <label class=\"sk-label\">Profile Visibility</label>\r\n            <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n          </div>\r\n        </div>\r\n        <div class=\"sk-field sk-field-full\">\r\n          <label class=\"sk-label\">Description</label>\r\n          <textarea placeholder=\"Describe your skill...\" formControlName=\"notes\" class=\"form-control\"\r\n            [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.notes?.errors }\" rows=\"2\"></textarea>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Footer: Add mode -->\r\n<div *ngIf=\"store.stepView() === 'add'\" class=\"skills-container last footer-actions\">\r\n  <button class=\"back-btn\" (click)=\"userSkillsPreview.length > 0 ? cancel() : back()\">\r\n    <svg *ngIf=\"userSkillsPreview.length > 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n    <svg *ngIf=\"userSkillsPreview.length === 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n    {{ userSkillsPreview.length > 0 ? 'Cancel' : 'Back' }}\r\n  </button>\r\n  <div class=\"mb-res\">\r\n    <button class=\"back-btn me-3\" *ngIf=\"userSkillsPreview.length === 0\" (click)=\"next()\">\r\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n      Skip\r\n    </button>\r\n    <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n      Continue\r\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<!-- Footer: Preview mode -->\r\n<div *ngIf=\"store.stepView() !== 'add'\" class=\"skills-container last footer-actions\">\r\n  <button class=\"back-btn\" (click)=\"back()\">\r\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n    Back\r\n  </button>\r\n  <div class=\"mb-res\">\r\n    <button class=\"continue-btn add me-3\" *ngIf=\"store.stepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\r\n      Add More Skills\r\n    </button>\r\n    <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n      Continue\r\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showCustomProfessionForm\">\r\n  <div class=\"confirm-modal-card add-profession-card\" style=\"max-width: 420px;\">\r\n    <h4 class=\"mb-1\">Add New Profession</h4>\r\n    <p class=\"text-muted small mb-4\">This profession isn't in the list yet. Add it here so you can select it above.</p>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Profession Name <span class=\"text-danger\">*</span></label>\r\n      <input type=\"text\" class=\"form-control\" [(ngModel)]=\"customProfessionName\" name=\"customProfessionName\"\r\n        placeholder=\"Enter profession name\" />\r\n    </div>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Group <span class=\"text-danger\">*</span></label>\r\n      <ng-select class=\"add-profession-select\" [items]=\"professionGroupOptions\" [(ngModel)]=\"customProfessionGroup\" name=\"customProfessionGroup\"\r\n        placeholder=\"Select group\" [clearable]=\"false\" [appendTo]=\"'body'\">\r\n      </ng-select>\r\n    </div>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Type <span class=\"text-danger\">*</span></label>\r\n      <ng-select class=\"add-profession-select\" [items]=\"professionTypeOptions\" [(ngModel)]=\"customProfessionType\" name=\"customProfessionType\"\r\n        placeholder=\"Select type\" [clearable]=\"false\" [appendTo]=\"'body'\">\r\n      </ng-select>\r\n    </div>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Self-ability Rating</label>\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n          (click)=\"setCustomProfessionStars(s)\" [attr.aria-label]=\"'Set rating ' + s\">\r\n          <span [class]=\"customProfessionStars >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n            {{ customProfessionStars >= s ? '\u2605' : '\u2606' }}\r\n          </span>\r\n        </button>\r\n        <span class=\"small text-muted\">{{ customProfessionStars }}/5</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"mb-4\">\r\n      <label class=\"small text-muted d-block mb-1\">Years of Experience</label>\r\n      <input type=\"number\" class=\"form-control\" [(ngModel)]=\"customProfessionYear\" name=\"customProfessionYear\"\r\n        min=\"0\" max=\"30\" placeholder=\"Years of Experience\" />\r\n    </div>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"cancelCustomProfessionForm()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary h-auto\" [disabled]=\"!canSaveCustomProfession || isSavingCustomProfession\"\r\n        (click)=\"saveCustomProfession()\">\r\n        <span *ngIf=\"isSavingCustomProfession\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n        {{ isSavingCustomProfession ? 'Saving...' : 'Add Profession' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".skills-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}.skills-container.last{min-height:unset}.title{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.subtitle{font-size:14px;color:#69707d;margin-bottom:24px}.content-part{background:#fff}.content-part p{font-size:13px;color:#69707d}.content-part div{font-size:13px}.content-part .card{margin-top:15px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.content-part .card .row{margin-top:-15px}.content-part .card .sub-section{padding:0 10px}.content-part .card .sub-section .title{font-size:15px;font-weight:500;color:#1e293b}.content-part .card .sub-section .info-title{font-size:12px;font-weight:400;color:#69707d;margin-left:5px}.content-part .card .sub-section .content{font-size:13px;color:#69707d}.content-part .card .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px;color:#69707d}.content-part .card .sub-section .subsection input{width:30%}.content-part .card .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#1e293b;margin-top:15px}.content-part .tab-card .row{margin-top:2px}.search-part{width:100%;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;height:42px;background:#f9fafb;transition:all .2s ease}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.search-part input::placeholder{color:#69707d}.search-part .btn{background:#4077ad;border-radius:5px;padding:0;width:42px;height:40px;display:flex;align-items:center;justify-content:center;margin-right:0;border:none;cursor:pointer;transition:all .2s ease}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.search-part ::ng-deep .ng-select .ng-select-container{border:none!important;background:transparent!important;min-height:40px!important;box-shadow:none!important}.search-part ::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:0}.search-part ::ng-deep .ng-select.ng-select-focused .ng-select-container,.search-part ::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:transparent!important;box-shadow:none!important}textarea{width:100%;height:100px;min-height:96px;background:#f9fafb;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-size:14px;color:#1e293b;resize:vertical;outline:none;transition:all .2s ease}textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.skill-chips-wrapper{margin:8px 0 4px;position:relative;max-height:300px;overflow-y:auto}.skill-chips-wrapper.chips-collapsed:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:52px;background:linear-gradient(to bottom,transparent,#ffffff);pointer-events:none}.skill-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.skill-chips.collapsed{max-height:190px;overflow:hidden}.show-more-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:1.5px solid #e2e8f0;border-radius:5px;color:#4077ad;font-size:14px;font-weight:600;padding:5px 14px;cursor:pointer;transition:all .2s ease;margin-bottom:12px}.show-more-btn:hover{background:#ebf2f9;border-color:#4077ad}.show-more-btn svg{transition:transform .2s ease}.show-more-btn svg.rotated{transform:rotate(180deg)}.skill-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:5px;border:1.5px solid #e2e8f0;background:#fff;color:#69707d;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4;position:relative}.skill-chip input[type=checkbox]{display:none}.skill-chip .chip-check-icon{flex-shrink:0}.skill-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.skill-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.skill-chip .chip-popover{position:fixed;transform:translate(-50%,-100%);background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;padding:10px 14px;min-width:220px;max-width:300px;z-index:99999;text-align:left;pointer-events:none;white-space:normal}.skill-chip .chip-popover:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:7px solid transparent;border-top-color:#e2e8f0}.skill-chip .chip-popover:before{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:-1px;border:6px solid transparent;border-top-color:#fff;z-index:1}.chip-popover-row{display:flex;flex-direction:column;gap:2px;padding:5px 0;border-bottom:1px solid #e2e8f0}.chip-popover-row:last-child{border-bottom:none;padding-bottom:0}.chip-popover-row:first-child{padding-top:0}.chip-popover-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#69707d;line-height:1.3}.chip-popover-value{font-size:12px;font-weight:500;color:#1e293b;line-height:1.45;word-break:break-word}.form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#4077ad!important;border:1px solid #4077AD!important}.sk-toggle-field .form-check-input{position:relative;top:8px;margin-top:8px}.sk-copy-toggle .form-check-input{position:relative;top:3px}::ng-deep .ng-dropdown-panel{min-width:180px}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{max-height:210px}::ng-deep .ng-select .ng-select-container{min-height:42px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:14px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .ng-select.ng-select-focused .ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f}.label{font-size:12px;font-weight:700;color:#69707d;text-transform:uppercase;letter-spacing:.05em;padding-bottom:6px;display:block;margin-bottom:2px}.form-control{color:#1e293b;background:#f9fafb!important;min-height:36px;font-size:14px;height:42px;border:1.5px solid #e2e8f0;border-radius:8px;transition:all .2s ease}.form-control:focus{border-color:#4077ad;background:#fff!important;box-shadow:0 0 0 3px #4077ad1f!important}.form-control:focus{border:1.5px solid #4077AD;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .nav-link{color:#69707d!important}::ng-deep .nav-link.active{color:#4077ad!important;font-weight:600}.loader{filter:blur(3px);height:40px}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.close-popup{position:absolute;right:7px;top:4px;width:25px;cursor:pointer;opacity:.6;transition:all .2s ease}.close-popup:hover{opacity:1}.back-btn,.skip-btn{height:42px;min-width:130px;background:#69707d;color:#fff;border:1.5px solid #69707D;border-radius:5px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover,.skip-btn:hover{border-color:#565c66;color:#fff;background:#565c66}.back-btn.edit,.skip-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.mb-res .back-btn{background:#f2f4fa;color:#69707d;border:1.5px solid #F2F4FA}.mb-res .back-btn:hover{background:#e4e8f2;border-color:#e4e8f2;color:#69707d}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:5px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-left:15px}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.save-btn:disabled{background:#69707d;cursor:not-allowed;transform:none}.create-btn{height:42px;min-width:9rem;background:#4077ad;color:#fff;border:none;border-radius:5px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.create-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.create-btn:active{transform:translateY(0)}.continue-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:5px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.continue-btn:hover{background:#2d5a8a;transform:translateY(-1px)}.continue-btn:active{transform:translateY(0)}.continue-btn:disabled{background:#69707d;cursor:not-allowed;transform:none}.continue-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn.add{background:#f2f4fa;color:#69707d}.continue-btn.add:hover{background:#e4e8f2}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:64px}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#ebf2f9;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:12px;color:#69707d;margin:0}.sk-grid{display:grid;gap:14px;margin-bottom:24px}.sk-card{display:flex;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;transition:box-shadow .18s ease,transform .18s ease}.sk-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.sk-card-body{flex:1;padding:14px 16px;min-width:0}.sk-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.sk-avatar{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#4077ad,#2d5a8a);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}.sk-title-block{flex:1;min-width:0}.sk-name{display:block;font-size:16px;font-weight:700;color:#4077ad;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-sub{display:block;font-size:12px;color:#69707d;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-top-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.sk-text-btn{height:28px;padding:0 12px;border-radius:5px;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:all .2s ease}.sk-text-btn.cancel{background:#d4dae6;color:#69707d;border:1px solid #D4DAE6}.sk-text-btn.cancel:hover{border-color:#c2cbde;color:#69707d;background:#c2cbde}.sk-text-btn.save{background:#4077ad;color:#fff;margin-left:4px}.sk-text-btn.save:hover{background:#2d5a8a}.sk-text-btn.save:disabled{background:#69707d;cursor:not-allowed}.icon-btn{width:28px;height:28px;border:none;min-width:unset!important;border-radius:5px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.sk-meta-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-year{background:#ebf2f9;color:#4077ad}.chip.chip-visible{background:#f0fdf4;color:#15803d}.chip.chip-make{background:#fff7ed;color:#c2410c}.chip.chip-model{background:#f5f3ff;color:#6d28d9}.chip.chip-serial{background:#f8fafc;color:#69707d;font-family:monospace;font-size:11px}.sk-stars-row{margin-bottom:6px}.sk-description{font-size:12px;color:#69707d;line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sk-edit-panel{margin-top:10px;padding-top:10px;border-top:1px solid #e2e8f0}.sk-edit-row{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;margin-bottom:10px}.sk-edit-field{display:flex;flex-direction:column;gap:4px}.sk-edit-full{grid-column:1/-1;margin-top:4px}.sk-toggle-field{align-items:center;justify-content:center}.sk-label{font-size:12px;font-weight:700;color:#69707d;text-transform:uppercase;letter-spacing:.05em}.sk-section{margin-bottom:20px}.sk-select-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:12px}.sk-select-col{display:flex;flex-direction:column;gap:6px}.sk-select-col .search-part{margin-bottom:0}.sk-section-label{font-size:12px;font-weight:700;color:#1e293b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;display:block}.sk-detail-list{display:flex;flex-direction:column;gap:12px;margin-top:8px}.sk-detail-list-header{display:flex;align-items:center;gap:10px;margin-bottom:4px}.sk-count-badge{display:inline-flex;align-items:center;padding:2px 8px;background:#ebf2f9;color:#4077ad;border-radius:20px;font-size:12px;font-weight:600}.sk-detail-card{border:1px solid #e2e8f0;border-radius:12px;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden}.sk-detail-card-hd{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#ebf2f9;border-bottom:1px solid #e2e8f0}.sk-detail-avatar{width:32px;height:32px;border-radius:8px;background:#4077ad;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.sk-detail-card-name{flex:1;font-size:14px;font-weight:700;color:#4077ad;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-detail-card-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.sk-copy-toggle{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#69707d;cursor:pointer;-webkit-user-select:none;user-select:none}.sk-detail-fields{padding:14px 16px}.sk-fields-row{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;margin-bottom:12px}.sk-field{display:flex;flex-direction:column;gap:4px}.sk-field-full{grid-column:1/-1}.skill-preview-wrapper{margin-bottom:24px}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;margin-bottom:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease}.skill-preview-wrapper{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff;transition:box-shadow .25s ease}.skill-preview-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;font-size:15px;font-weight:700;color:#1e293b;border-bottom:1px solid transparent;cursor:pointer}.skill-preview-header.open{background:#ebf2f9;color:#2d5a8a;border-bottom:1px solid #e2e8f0}.skill-preview-body{padding:0;background:#fff}.skill-preview-body>div{padding:16px 20px;border-bottom:1px solid #e2e8f0}.skill-preview-body>div:last-child{border-bottom:none}.skill-preview-body label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#69707d;margin-bottom:5px}.skill-preview-body p{margin:0;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5}h5.title{font-size:22px;font-weight:700;color:#1e293b!important;margin-bottom:4px}.preview-detail-grid,.preview-edit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.preview-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0;border-right:1px solid #e2e8f0}.preview-cell:nth-child(3n){border-right:none}.preview-full{grid-column:1/-1;border-right:none;border-bottom:none}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#69707d;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.stars-readonly{pointer-events:none;display:block}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.rotate{transform:rotate(-180deg)}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:16px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:14px;color:#69707d;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:12px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:5px;border:1.5px solid #e2e8f0;background:#fff;color:#69707d;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.detail-row{display:flex;flex-wrap:wrap;column-gap:22px;row-gap:6px;margin-bottom:8px}.detail-item{display:flex;align-items:baseline;gap:6px;white-space:nowrap}.detail-label{font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:#4077ad}.detail-value{font-size:12.5px;font-weight:600;color:#1e293b}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:5px;box-shadow:none}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#69707d;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@media screen and (max-width: 767px){.step-card-header{padding:14px 16px}.step-card-body{padding:16px 16px 8px}.step-toast{right:12px;bottom:16px;min-width:calc(100vw - 24px);max-width:calc(100vw - 24px)}}@media screen and (max-width: 767px){.skills-container{padding:16px}.title,h5.title{font-size:18px}.form-control,textarea{font-size:16px}.footer-actions{flex-direction:column-reverse;gap:8px;margin-top:48px}.back-btn,.skip-btn{width:100%}.continue-btn{padding:10px 22px;width:100%}.mb-res{display:flex;flex-direction:column-reverse;gap:8px;width:100%}.preview-detail-grid,.preview-edit-grid{grid-template-columns:1fr}.preview-cell{border-right:none}.sk-grid,.sk-edit-row,.sk-fields-row,.sk-select-row{grid-template-columns:1fr}}.modal-overlay{position:fixed;inset:0;background:#11182773;display:flex;align-items:center;justify-content:center;z-index:2500;padding:20px}.confirm-modal-card{width:min(520px,96vw);max-height:85vh;overflow-y:auto;background:#fff;border-radius:5px;border:1px solid #e5e7eb;padding:24px}.add-profession-card label,.add-profession-card .form-control{font-size:12px}.add-profession-card .form-control::placeholder{font-size:12px}.add-profession-card .btn{font-size:14px}.add-profession-card ::ng-deep .add-profession-select .ng-select-container,.add-profession-card ::ng-deep .add-profession-select .ng-placeholder,.add-profession-card ::ng-deep .add-profession-select .ng-value-label{font-size:12px}::ng-deep .add-profession-select .ng-option,::ng-deep .add-profession-select .ng-placeholder{font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i7.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: i7.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i7.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i7.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.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: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "component", type: NgxStarsComponent, selector: "ngx-stars", inputs: ["maxStars", "initialStars", "readonly", "size", "color", "animation", "animationSpeed", "customPadding", "wholeStars", "customStarIcons"], outputs: ["ratingOutput"] }, { kind: "directive", type: i13.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }], animations: [
             trigger('expandCollapse', [
                 state('open', style({
                     height: '*',
@@ -10275,7 +10269,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             })),
                             transition('open <=> closed', animate('300ms ease'))
                         ])
-                    ], template: "<!-- \u2500\u2500\u2500 Skills Preview \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'preview'\">\r\n  <div class=\"preview-header\">\r\n    <div class=\"preview-header-icon\">\r\n      <img src=\"/assets/images/icons/stars.svg\" alt=\"skills\" width=\"20\" height=\"20\" />\r\n    </div>\r\n    <div>\r\n      <h3 class=\"preview-header-title\">Skills</h3>\r\n      <p class=\"preview-subtitle\">{{ userSkillsPreview.length }} skill{{ userSkillsPreview.length !== 1 ? 's' : '' }} added</p>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"sk-grid\">\r\n    <div *ngFor=\"let skill of userSkillsPreview; let i = index\" class=\"sk-card\">\r\n      <div class=\"sk-card-body\">\r\n\r\n        <div class=\"sk-head\">\r\n          <div class=\"sk-avatar\">{{ (skill.skillSetName || '?').charAt(0).toUpperCase() }}</div>\r\n          <div class=\"sk-title-block\">\r\n            <span class=\"sk-name\">{{ skill.skillSetName }}</span>\r\n            <span class=\"sk-sub\" *ngIf=\"skill.providerName\">{{ skill.providerName }}</span>\r\n          </div>\r\n          <div class=\"sk-top-actions\">\r\n            <ng-container *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\">\r\n              <button class=\"sk-text-btn cancel\" type=\"button\" (click)=\"backToSkill(null)\">Cancel</button>\r\n              <button class=\"sk-text-btn save\" type=\"button\" (click)=\"saveUserSkillset()\" [disabled]=\"showLoader\">Update</button>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n              <button class=\"icon-btn edit-btn\" (click)=\"editSkillFromPreview(skill, null, $event)\" title=\"Edit\">\r\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n              </button>\r\n              <button class=\"icon-btn delete-btn\" (click)=\"deleteSkillFromPreview(skill, $event)\" title=\"Delete\">\r\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n              </button>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- View mode -->\r\n        <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n          <div class=\"detail-row\">\r\n            <div class=\"detail-item\" *ngIf=\"skill.year\">\r\n              <span class=\"detail-label\">Years of Experience</span>\r\n              <span class=\"detail-value\">{{ skill.year }} yr(s)</span>\r\n            </div>\r\n            <div class=\"detail-item\" *ngIf=\"skill.profileVisibility\">\r\n              <span class=\"detail-label\">Visibility</span>\r\n              <span class=\"detail-value\">Visible</span>\r\n            </div>\r\n          </div>\r\n          <div class=\"sk-stars-row stars-readonly\">\r\n            <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n          </div>\r\n          <p class=\"sk-description\" *ngIf=\"skill.notes\">{{ skill.notes }}</p>\r\n        </ng-container>\r\n\r\n        <!-- Edit mode (inline) -->\r\n        <div *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\"\r\n          [formGroup]=\"tab.at(0)\" class=\"sk-edit-panel\">\r\n          <div class=\"sk-edit-row\">\r\n            <div class=\"sk-edit-field\">\r\n              <label class=\"sk-label\">Self Ability Rating</label>\r\n              <ngx-stars *ngIf=\"tab.at(0)?.get('starRating')?.value !== null\"\r\n                [key]=\"tab.at(0).get('starRating')?.value\"\r\n                [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\"\r\n                [maxStars]=\"5\"\r\n                (ratingOutput)=\"onEditRating($event)\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div class=\"sk-edit-field\">\r\n              <label class=\"sk-label\">Years of Experience</label>\r\n              <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\"\r\n                bindLabel=\"text\" formControlName=\"year\"\r\n                bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\"\r\n                [appendTo]=\"'body'\"></ng-select>\r\n            </div>\r\n            <div class=\"sk-edit-field sk-toggle-field\">\r\n              <label class=\"sk-label\">Visible</label>\r\n              <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n            </div>\r\n          </div>\r\n          <div class=\"sk-edit-field sk-edit-full\">\r\n            <label class=\"sk-label\">Description</label>\r\n            <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\" placeholder=\"Enter notes\"></textarea>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Skills Add \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'add'\">\r\n  <div class=\"step-card-header mb-4\" style=\"border-radius: 10px;\">\r\n    <div class=\"step-card-header-icon\">\r\n      <img src=\"/assets/images/icons/stars.svg\" alt=\"skills\" width=\"22\" height=\"22\" />\r\n    </div>\r\n    <div>\r\n      <h3 class=\"step-card-title\">Add Skills</h3>\r\n      <p class=\"step-card-subtitle\">Select your skill areas and rate your proficiency</p>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Step 1: Select skills -->\r\n  <div class=\"sk-section\">\r\n    <div class=\"sk-select-row\">\r\n      <div class=\"sk-select-col\">\r\n        <label class=\"sk-label\">Select Profession</label>\r\n        <ng-select\r\n          [items]=\"professions\"\r\n          bindLabel=\"professionName\"\r\n          bindValue=\"id\"\r\n          [(ngModel)]=\"selectedProfessionValue\"\r\n           placeholder=\"Select Profession\"\r\n          [clearable]=\"true\"\r\n          (change)=\"onProfessionChange($event)\">\r\n        </ng-select>\r\n      </div>\r\n      <div class=\"sk-select-col\">\r\n        <label class=\"sk-label\">Select Skill</label>\r\n        <div class=\"search-part\">\r\n          <input type=\"text\" placeholder=\"Search / Add Skillsets here\" [(ngModel)]=\"searchSkillQry\"\r\n            (input)=\"getSkillSets()\" />\r\n          <button class=\"btn\" (click)=\"createNewSkills()\" tooltip=\"Add Skillset\">\r\n            <img src=\"/assets/images/icons/plus.svg\" alt=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"errMsg\" class=\"invalid-feedback is-invalid d-block\">Please Enter Skillsets Name</div>\r\n    <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">{{ nameError }}</div>\r\n    <div class=\"skill-chips-wrapper\" [ngClass]=\"showLoading && !isEditMode ? 'loader' : ''\"\r\n      [class.chips-collapsed]=\"!showAllSkills\">\r\n      <div class=\"skill-chips\" [class.collapsed]=\"!showAllSkills\"\r\n        [ngStyle]=\"showLoader && !isEditMode ? {'min-height': '120px'} : {}\">\r\n        <label class=\"skill-chip\" *ngFor=\"let skill of skillSets\"\r\n          [class.selected]=\"skill.selected\"\r\n          [attr.for]=\"skill.id\">\r\n          <input type=\"checkbox\" [checked]=\"skill.selected\"\r\n            (change)=\"onSelectedSkillsets($event, skill)\"\r\n            [id]=\"skill.id\" [name]=\"skill.id\" />\r\n          <svg *ngIf=\"skill.selected\" class=\"chip-check-icon\" width=\"11\" height=\"11\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n            <path d=\"M2 6l3 3 5-5\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>\r\n          {{ skill.name }}\r\n        </label>\r\n      </div>\r\n    </div>\r\n    <button *ngIf=\"!showLoading && skillSets.length > 0\" type=\"button\"\r\n      class=\"show-more-btn\" (click)=\"showAllSkills = !showAllSkills\">\r\n      {{ showAllSkills ? 'Show Less' : 'Show More' }}\r\n      <svg [class.rotated]=\"showAllSkills\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M6 9l6 6 6-6\"/>\r\n      </svg>\r\n    </button>\r\n  </div>\r\n\r\n  <!-- Step 2: Per-skill detail cards (replaces tabset) -->\r\n  <div class=\"sk-detail-list\" #skillDetailList\r\n    *ngIf=\"tab.controls.length > 0\"\r\n    [ngClass]=\"{ 'loader': showLoading && !isEditMode, 'edit-mode': isEditMode }\">\r\n    <div class=\"sk-detail-list-header\">\r\n      <span class=\"sk-section-label\">Skill Details</span>\r\n      <span class=\"sk-count-badge\">{{ tab.controls.length }} selected</span>\r\n    </div>\r\n\r\n    <div *ngFor=\"let group of tab.controls; let index = index\"\r\n      [formGroup]=\"group\" class=\"sk-detail-card\">\r\n      <div class=\"sk-detail-card-hd\">\r\n        <div class=\"sk-detail-avatar\">{{ (tabs[index] || '?').charAt(0).toUpperCase() }}</div>\r\n        <span class=\"sk-detail-card-name\">{{ tabs[index] }}</span>\r\n        <div class=\"sk-detail-card-actions\">\r\n          <label class=\"sk-copy-toggle\" *ngIf=\"tab.controls.length > 1 && index === 0\" title=\"Copy these values to all skills\">\r\n            <input type=\"checkbox\" class=\"form-check-input\"\r\n              (click)=\"setCopyToAllTabs(index, group.value)\" role=\"switch\" />\r\n            Copy to all\r\n          </label>\r\n          <button *ngIf=\"!isEditMode\" class=\"icon-btn delete-btn\" type=\"button\"\r\n            (click)=\"removeTab(index, group.controls.skillSetId.value)\" title=\"Remove\">\r\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <div class=\"sk-detail-fields\">\r\n        <div class=\"sk-field sk-field-full\">\r\n          <label class=\"sk-label\">Profession Type</label>\r\n          <div class=\"d-flex align-items-start gap-2\">\r\n            <ng-select class=\"flex-grow-1\" [items]=\"userProfessionOptions\" bindLabel=\"professionName\" bindValue=\"id\"\r\n              formControlName=\"professionId\" placeholder=\"Select or search profession type\" [clearable]=\"true\"\r\n              [appendTo]=\"'body'\" (change)=\"onSkillProfessionChange($event, group)\"></ng-select>\r\n            <button type=\"button\" class=\"btn btn-outline-primary btn-sm\" title=\"Add new profession\"\r\n              (click)=\"openCustomProfessionForm(group)\">+</button>\r\n          </div>\r\n        </div>\r\n        <div class=\"sk-fields-row\">\r\n          <div class=\"sk-field\">\r\n            <label class=\"sk-label\">Self Ability Rating</label>\r\n            <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event, index)\"\r\n              [maxStars]=\"5\">\r\n            </ngx-stars>\r\n          </div>\r\n          <div class=\"sk-field\">\r\n            <label class=\"sk-label\">Years of Experience</label>\r\n            <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\"\r\n              bindLabel=\"text\" formControlName=\"year\"\r\n              bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\"\r\n              [appendTo]=\"'body'\" (change)=\"onYearChange(group)\"></ng-select>\r\n          </div>\r\n          <div class=\"sk-field sk-toggle-field\">\r\n            <label class=\"sk-label\">Profile Visibility</label>\r\n            <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n          </div>\r\n        </div>\r\n        <div class=\"sk-field sk-field-full\">\r\n          <label class=\"sk-label\">Description</label>\r\n          <textarea placeholder=\"Describe your skill...\" formControlName=\"notes\" class=\"form-control\"\r\n            [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.notes?.errors }\" rows=\"2\"></textarea>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Footer: Add mode -->\r\n<div *ngIf=\"store.stepView() === 'add'\" class=\"skills-container last footer-actions\">\r\n  <button class=\"back-btn\" (click)=\"userSkillsPreview.length > 0 ? cancel() : back()\">\r\n    <svg *ngIf=\"userSkillsPreview.length > 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n    <svg *ngIf=\"userSkillsPreview.length === 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n    {{ userSkillsPreview.length > 0 ? 'Cancel' : 'Back' }}\r\n  </button>\r\n  <div class=\"mb-res\">\r\n    <button class=\"back-btn me-3\" *ngIf=\"userSkillsPreview.length === 0\" (click)=\"next()\">\r\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n      Skip\r\n    </button>\r\n    <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n      Continue\r\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<!-- Footer: Preview mode -->\r\n<div *ngIf=\"store.stepView() !== 'add'\" class=\"skills-container last footer-actions\">\r\n  <button class=\"back-btn\" (click)=\"back()\">\r\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n    Back\r\n  </button>\r\n  <div class=\"mb-res\">\r\n    <button class=\"continue-btn add me-3\" *ngIf=\"store.stepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\r\n      Add More Skills\r\n    </button>\r\n    <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n      Continue\r\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showCustomProfessionForm\">\r\n  <div class=\"confirm-modal-card add-profession-card\" style=\"max-width: 420px;\">\r\n    <h4 class=\"mb-1\">Add New Profession</h4>\r\n    <p class=\"text-muted small mb-4\">This profession isn't in the list yet. Add it here so you can link it to this skill.</p>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Profession Name <span class=\"text-danger\">*</span></label>\r\n      <input type=\"text\" class=\"form-control\" [(ngModel)]=\"customProfessionName\" name=\"customProfessionName\"\r\n        placeholder=\"Enter profession name\" />\r\n    </div>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Group <span class=\"text-danger\">*</span></label>\r\n      <ng-select class=\"add-profession-select\" [items]=\"professionGroupOptions\" [(ngModel)]=\"customProfessionGroup\" name=\"customProfessionGroup\"\r\n        placeholder=\"Select group\" [clearable]=\"false\" [appendTo]=\"'body'\">\r\n      </ng-select>\r\n    </div>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Type <span class=\"text-danger\">*</span></label>\r\n      <ng-select class=\"add-profession-select\" [items]=\"professionTypeOptions\" [(ngModel)]=\"customProfessionType\" name=\"customProfessionType\"\r\n        placeholder=\"Select type\" [clearable]=\"false\" [appendTo]=\"'body'\">\r\n      </ng-select>\r\n    </div>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Self-ability Rating</label>\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n          (click)=\"setCustomProfessionStars(s)\" [attr.aria-label]=\"'Set rating ' + s\">\r\n          <span [class]=\"customProfessionStars >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n            {{ customProfessionStars >= s ? '\u2605' : '\u2606' }}\r\n          </span>\r\n        </button>\r\n        <span class=\"small text-muted\">{{ customProfessionStars }}/5</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"mb-4\">\r\n      <label class=\"small text-muted d-block mb-1\">Years of Experience</label>\r\n      <input type=\"number\" class=\"form-control\" [(ngModel)]=\"customProfessionYear\" name=\"customProfessionYear\"\r\n        min=\"0\" max=\"30\" placeholder=\"Years of Experience\" />\r\n    </div>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"cancelCustomProfessionForm()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary h-auto\" [disabled]=\"!canSaveCustomProfession || isSavingCustomProfession\"\r\n        (click)=\"saveCustomProfession()\">\r\n        <span *ngIf=\"isSavingCustomProfession\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n        {{ isSavingCustomProfession ? 'Saving...' : 'Add Profession' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".skills-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}.skills-container.last{min-height:unset}.title{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.subtitle{font-size:14px;color:#69707d;margin-bottom:24px}.content-part{background:#fff}.content-part p{font-size:13px;color:#69707d}.content-part div{font-size:13px}.content-part .card{margin-top:15px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.content-part .card .row{margin-top:-15px}.content-part .card .sub-section{padding:0 10px}.content-part .card .sub-section .title{font-size:15px;font-weight:500;color:#1e293b}.content-part .card .sub-section .info-title{font-size:12px;font-weight:400;color:#69707d;margin-left:5px}.content-part .card .sub-section .content{font-size:13px;color:#69707d}.content-part .card .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px;color:#69707d}.content-part .card .sub-section .subsection input{width:30%}.content-part .card .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#1e293b;margin-top:15px}.content-part .tab-card .row{margin-top:2px}.search-part{width:100%;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;height:42px;background:#f9fafb;transition:all .2s ease}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.search-part input::placeholder{color:#69707d}.search-part .btn{background:#4077ad;border-radius:5px;padding:0;width:42px;height:40px;display:flex;align-items:center;justify-content:center;margin-right:0;border:none;cursor:pointer;transition:all .2s ease}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}textarea{width:100%;height:100px;min-height:96px;background:#f9fafb;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-size:14px;color:#1e293b;resize:vertical;outline:none;transition:all .2s ease}textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.skill-chips-wrapper{margin:8px 0 4px;position:relative;max-height:300px;overflow-y:auto}.skill-chips-wrapper.chips-collapsed:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:52px;background:linear-gradient(to bottom,transparent,#ffffff);pointer-events:none}.skill-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.skill-chips.collapsed{max-height:190px;overflow:hidden}.show-more-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:1.5px solid #e2e8f0;border-radius:5px;color:#4077ad;font-size:14px;font-weight:600;padding:5px 14px;cursor:pointer;transition:all .2s ease;margin-bottom:12px}.show-more-btn:hover{background:#ebf2f9;border-color:#4077ad}.show-more-btn svg{transition:transform .2s ease}.show-more-btn svg.rotated{transform:rotate(180deg)}.skill-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:5px;border:1.5px solid #e2e8f0;background:#fff;color:#69707d;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4;position:relative}.skill-chip input[type=checkbox]{display:none}.skill-chip .chip-check-icon{flex-shrink:0}.skill-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.skill-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.skill-chip .chip-popover{position:fixed;transform:translate(-50%,-100%);background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;padding:10px 14px;min-width:220px;max-width:300px;z-index:99999;text-align:left;pointer-events:none;white-space:normal}.skill-chip .chip-popover:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:7px solid transparent;border-top-color:#e2e8f0}.skill-chip .chip-popover:before{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:-1px;border:6px solid transparent;border-top-color:#fff;z-index:1}.chip-popover-row{display:flex;flex-direction:column;gap:2px;padding:5px 0;border-bottom:1px solid #e2e8f0}.chip-popover-row:last-child{border-bottom:none;padding-bottom:0}.chip-popover-row:first-child{padding-top:0}.chip-popover-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#69707d;line-height:1.3}.chip-popover-value{font-size:12px;font-weight:500;color:#1e293b;line-height:1.45;word-break:break-word}.form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#4077ad!important;border:1px solid #4077AD!important}.sk-toggle-field .form-check-input{margin-top:8px}::ng-deep .ng-dropdown-panel{min-width:180px}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{max-height:210px}::ng-deep .ng-select .ng-select-container{min-height:42px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:14px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .ng-select.ng-select-focused .ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f}.label{font-size:12px;font-weight:700;color:#69707d;text-transform:uppercase;letter-spacing:.05em;padding-bottom:6px;display:block;margin-bottom:2px}.form-control{color:#1e293b;background:#f9fafb!important;min-height:36px;font-size:14px;height:42px;border:1.5px solid #e2e8f0;border-radius:8px;transition:all .2s ease}.form-control:focus{border-color:#4077ad;background:#fff!important;box-shadow:0 0 0 3px #4077ad1f!important}.form-control:focus{border:1.5px solid #4077AD;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .nav-link{color:#69707d!important}::ng-deep .nav-link.active{color:#4077ad!important;font-weight:600}.loader{filter:blur(3px);height:40px}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.close-popup{position:absolute;right:7px;top:4px;width:25px;cursor:pointer;opacity:.6;transition:all .2s ease}.close-popup:hover{opacity:1}.back-btn,.skip-btn{height:42px;min-width:130px;background:#69707d;color:#fff;border:1.5px solid #69707D;border-radius:5px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover,.skip-btn:hover{border-color:#565c66;color:#fff;background:#565c66}.back-btn.edit,.skip-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.mb-res .back-btn{background:#f2f4fa;color:#69707d;border:1.5px solid #F2F4FA}.mb-res .back-btn:hover{background:#e4e8f2;border-color:#e4e8f2;color:#69707d}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:5px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-left:15px}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.save-btn:disabled{background:#69707d;cursor:not-allowed;transform:none}.create-btn{height:42px;min-width:9rem;background:#4077ad;color:#fff;border:none;border-radius:5px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.create-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.create-btn:active{transform:translateY(0)}.continue-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:5px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.continue-btn:hover{background:#2d5a8a;transform:translateY(-1px)}.continue-btn:active{transform:translateY(0)}.continue-btn:disabled{background:#69707d;cursor:not-allowed;transform:none}.continue-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn.add{background:#f2f4fa;color:#69707d}.continue-btn.add:hover{background:#e4e8f2}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:64px}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#ebf2f9;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:12px;color:#69707d;margin:0}.sk-grid{display:grid;gap:14px;margin-bottom:24px}.sk-card{display:flex;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;transition:box-shadow .18s ease,transform .18s ease}.sk-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.sk-card-body{flex:1;padding:14px 16px;min-width:0}.sk-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.sk-avatar{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#4077ad,#2d5a8a);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}.sk-title-block{flex:1;min-width:0}.sk-name{display:block;font-size:16px;font-weight:700;color:#4077ad;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-sub{display:block;font-size:12px;color:#69707d;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-top-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.sk-text-btn{height:28px;padding:0 12px;border-radius:5px;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:all .2s ease}.sk-text-btn.cancel{background:#d4dae6;color:#69707d;border:1px solid #D4DAE6}.sk-text-btn.cancel:hover{border-color:#c2cbde;color:#69707d;background:#c2cbde}.sk-text-btn.save{background:#4077ad;color:#fff;margin-left:4px}.sk-text-btn.save:hover{background:#2d5a8a}.sk-text-btn.save:disabled{background:#69707d;cursor:not-allowed}.icon-btn{width:28px;height:28px;border:none;min-width:unset!important;border-radius:5px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.sk-meta-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-year{background:#ebf2f9;color:#4077ad}.chip.chip-visible{background:#f0fdf4;color:#15803d}.chip.chip-make{background:#fff7ed;color:#c2410c}.chip.chip-model{background:#f5f3ff;color:#6d28d9}.chip.chip-serial{background:#f8fafc;color:#69707d;font-family:monospace;font-size:11px}.sk-stars-row{margin-bottom:6px}.sk-description{font-size:12px;color:#69707d;line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sk-edit-panel{margin-top:10px;padding-top:10px;border-top:1px solid #e2e8f0}.sk-edit-row{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;margin-bottom:10px}.sk-edit-field{display:flex;flex-direction:column;gap:4px}.sk-edit-full{grid-column:1/-1;margin-top:4px}.sk-toggle-field{align-items:center;justify-content:center}.sk-label{font-size:12px;font-weight:700;color:#69707d;text-transform:uppercase;letter-spacing:.05em}.sk-section{margin-bottom:20px}.sk-select-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:12px}.sk-select-col{display:flex;flex-direction:column;gap:6px}.sk-select-col .search-part{margin-bottom:0}.sk-section-label{font-size:12px;font-weight:700;color:#1e293b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;display:block}.sk-detail-list{display:flex;flex-direction:column;gap:12px;margin-top:8px}.sk-detail-list-header{display:flex;align-items:center;gap:10px;margin-bottom:4px}.sk-count-badge{display:inline-flex;align-items:center;padding:2px 8px;background:#ebf2f9;color:#4077ad;border-radius:20px;font-size:12px;font-weight:600}.sk-detail-card{border:1px solid #e2e8f0;border-radius:12px;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden}.sk-detail-card-hd{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#ebf2f9;border-bottom:1px solid #e2e8f0}.sk-detail-avatar{width:32px;height:32px;border-radius:8px;background:#4077ad;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.sk-detail-card-name{flex:1;font-size:14px;font-weight:700;color:#4077ad;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-detail-card-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.sk-copy-toggle{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#69707d;cursor:pointer;-webkit-user-select:none;user-select:none}.sk-detail-fields{padding:14px 16px}.sk-fields-row{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;margin-bottom:12px}.sk-field{display:flex;flex-direction:column;gap:4px}.sk-field-full{grid-column:1/-1}.skill-preview-wrapper{margin-bottom:24px}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;margin-bottom:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease}.skill-preview-wrapper{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff;transition:box-shadow .25s ease}.skill-preview-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;font-size:15px;font-weight:700;color:#1e293b;border-bottom:1px solid transparent;cursor:pointer}.skill-preview-header.open{background:#ebf2f9;color:#2d5a8a;border-bottom:1px solid #e2e8f0}.skill-preview-body{padding:0;background:#fff}.skill-preview-body>div{padding:16px 20px;border-bottom:1px solid #e2e8f0}.skill-preview-body>div:last-child{border-bottom:none}.skill-preview-body label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#69707d;margin-bottom:5px}.skill-preview-body p{margin:0;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5}h5.title{font-size:22px;font-weight:700;color:#1e293b!important;margin-bottom:4px}.preview-detail-grid,.preview-edit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.preview-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0;border-right:1px solid #e2e8f0}.preview-cell:nth-child(3n){border-right:none}.preview-full{grid-column:1/-1;border-right:none;border-bottom:none}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#69707d;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.stars-readonly{pointer-events:none;display:block}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.rotate{transform:rotate(-180deg)}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:16px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:14px;color:#69707d;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:12px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:5px;border:1.5px solid #e2e8f0;background:#fff;color:#69707d;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.detail-row{display:flex;flex-wrap:wrap;column-gap:22px;row-gap:6px;margin-bottom:8px}.detail-item{display:flex;align-items:baseline;gap:6px;white-space:nowrap}.detail-label{font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:#4077ad}.detail-value{font-size:12.5px;font-weight:600;color:#1e293b}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:5px;box-shadow:none}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#69707d;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@media screen and (max-width: 767px){.step-card-header{padding:14px 16px}.step-card-body{padding:16px 16px 8px}.step-toast{right:12px;bottom:16px;min-width:calc(100vw - 24px);max-width:calc(100vw - 24px)}}@media screen and (max-width: 767px){.skills-container{padding:16px}.title,h5.title{font-size:18px}.form-control,textarea{font-size:16px}.footer-actions{flex-direction:column-reverse;gap:8px;margin-top:48px}.back-btn,.skip-btn{width:100%}.continue-btn{padding:10px 22px;width:100%}.mb-res{display:flex;flex-direction:column-reverse;gap:8px;width:100%}.preview-detail-grid,.preview-edit-grid{grid-template-columns:1fr}.preview-cell{border-right:none}.sk-grid,.sk-edit-row,.sk-fields-row,.sk-select-row{grid-template-columns:1fr}}.modal-overlay{position:fixed;inset:0;background:#11182773;display:flex;align-items:center;justify-content:center;z-index:2500;padding:20px}.confirm-modal-card{width:min(520px,96vw);max-height:85vh;overflow-y:auto;background:#fff;border-radius:5px;border:1px solid #e5e7eb;padding:24px}.add-profession-card label,.add-profession-card .form-control{font-size:12px}.add-profession-card .form-control::placeholder{font-size:12px}.add-profession-card .btn{font-size:14px}.add-profession-card ::ng-deep .add-profession-select .ng-select-container,.add-profession-card ::ng-deep .add-profession-select .ng-placeholder,.add-profession-card ::ng-deep .add-profession-select .ng-value-label{font-size:12px}::ng-deep .add-profession-select .ng-option,::ng-deep .add-profession-select .ng-placeholder{font-size:12px}\n"] }]
+                    ], template: "<!-- \u2500\u2500\u2500 Skills Preview \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'preview'\">\r\n  <div class=\"preview-header\">\r\n    <div class=\"preview-header-icon\">\r\n      <img src=\"/assets/images/icons/stars.svg\" alt=\"skills\" width=\"20\" height=\"20\" />\r\n    </div>\r\n    <div>\r\n      <h3 class=\"preview-header-title\">Skills</h3>\r\n      <p class=\"preview-subtitle\">{{ userSkillsPreview.length }} skill{{ userSkillsPreview.length !== 1 ? 's' : '' }} added</p>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"sk-grid\">\r\n    <div *ngFor=\"let skill of userSkillsPreview; let i = index\" class=\"sk-card\">\r\n      <div class=\"sk-card-body\">\r\n\r\n        <div class=\"sk-head\">\r\n          <div class=\"sk-avatar\">{{ (skill.skillSetName || '?').charAt(0).toUpperCase() }}</div>\r\n          <div class=\"sk-title-block\">\r\n            <span class=\"sk-name\">{{ skill.skillSetName }}</span>\r\n            <span class=\"sk-sub\" *ngIf=\"skill.providerName\">{{ skill.providerName }}</span>\r\n          </div>\r\n          <div class=\"sk-top-actions\">\r\n            <ng-container *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\">\r\n              <button class=\"sk-text-btn cancel\" type=\"button\" (click)=\"backToSkill(null)\">Cancel</button>\r\n              <button class=\"sk-text-btn save\" type=\"button\" (click)=\"saveUserSkillset()\" [disabled]=\"showLoader\">Update</button>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n              <button class=\"icon-btn edit-btn\" (click)=\"editSkillFromPreview(skill, null, $event)\" title=\"Edit\">\r\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n              </button>\r\n              <button class=\"icon-btn delete-btn\" (click)=\"deleteSkillFromPreview(skill, $event)\" title=\"Delete\">\r\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n              </button>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- View mode -->\r\n        <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n          <div class=\"detail-row\">\r\n            <div class=\"detail-item\" *ngIf=\"skill.year\">\r\n              <span class=\"detail-label\">Years of Experience</span>\r\n              <span class=\"detail-value\">{{ skill.year }} yr(s)</span>\r\n            </div>\r\n            <div class=\"detail-item\" *ngIf=\"skill.profileVisibility\">\r\n              <span class=\"detail-label\">Visibility</span>\r\n              <span class=\"detail-value\">Visible</span>\r\n            </div>\r\n          </div>\r\n          <div class=\"sk-stars-row stars-readonly\">\r\n            <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n          </div>\r\n          <p class=\"sk-description\" *ngIf=\"skill.notes\">{{ skill.notes }}</p>\r\n        </ng-container>\r\n\r\n        <!-- Edit mode (inline) -->\r\n        <div *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\"\r\n          [formGroup]=\"tab.at(0)\" class=\"sk-edit-panel\">\r\n          <div class=\"sk-edit-row\">\r\n            <div class=\"sk-edit-field\">\r\n              <label class=\"sk-label\">Self Ability Rating</label>\r\n              <ngx-stars *ngIf=\"tab.at(0)?.get('starRating')?.value !== null\"\r\n                [key]=\"tab.at(0).get('starRating')?.value\"\r\n                [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\"\r\n                [maxStars]=\"5\"\r\n                (ratingOutput)=\"onEditRating($event)\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div class=\"sk-edit-field\">\r\n              <label class=\"sk-label\">Years of Experience</label>\r\n              <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\"\r\n                bindLabel=\"text\" formControlName=\"year\"\r\n                bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\"\r\n                [appendTo]=\"'body'\"></ng-select>\r\n            </div>\r\n            <div class=\"sk-edit-field sk-toggle-field\">\r\n              <label class=\"sk-label\">Visible</label>\r\n              <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n            </div>\r\n          </div>\r\n          <div class=\"sk-edit-field sk-edit-full\">\r\n            <label class=\"sk-label\">Description</label>\r\n            <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\" placeholder=\"Enter notes\"></textarea>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Skills Add \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'add'\">\r\n  <div class=\"step-card-header mb-4\" style=\"border-radius: 10px;\">\r\n    <div class=\"step-card-header-icon\">\r\n      <img src=\"/assets/images/icons/stars.svg\" alt=\"skills\" width=\"22\" height=\"22\" />\r\n    </div>\r\n    <div>\r\n      <h3 class=\"step-card-title\">Add Skills</h3>\r\n      <p class=\"step-card-subtitle\">Select your skill areas and rate your proficiency</p>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Step 1: Select skills -->\r\n  <div class=\"sk-section\">\r\n    <div class=\"sk-select-row\">\r\n      <div class=\"sk-select-col\">\r\n        <label class=\"sk-label\">Select Profession</label>\r\n        <div class=\"search-part\">\r\n          <ng-select class=\"flex-grow-1 w-100\"\r\n            [items]=\"userProfessionOptions\"\r\n            bindLabel=\"professionName\"\r\n            bindValue=\"id\"\r\n            [(ngModel)]=\"selectedProfessionValue\"\r\n            placeholder=\"Search / Add Profession here\"\r\n            [clearable]=\"true\"\r\n            (change)=\"onProfessionChange($event)\">\r\n          </ng-select>\r\n          <button class=\"btn\" type=\"button\" (click)=\"openCustomProfessionForm()\" tooltip=\"Add Profession\">\r\n            <img src=\"/assets/images/icons/plus.svg\" alt=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <div class=\"sk-select-col\">\r\n        <label class=\"sk-label\">Select Skill</label>\r\n        <div class=\"search-part\">\r\n          <input type=\"text\" placeholder=\"Search / Add Skillsets here\" [(ngModel)]=\"searchSkillQry\"\r\n            (input)=\"getSkillSets()\" />\r\n          <button class=\"btn\" (click)=\"createNewSkills()\" tooltip=\"Add Skillset\">\r\n            <img src=\"/assets/images/icons/plus.svg\" alt=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"errMsg\" class=\"invalid-feedback is-invalid d-block\">Please Enter Skillsets Name</div>\r\n    <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">{{ nameError }}</div>\r\n    <div class=\"skill-chips-wrapper\" [ngClass]=\"showLoading && !isEditMode ? 'loader' : ''\"\r\n      [class.chips-collapsed]=\"!showAllSkills\">\r\n      <div class=\"skill-chips\" [class.collapsed]=\"!showAllSkills\"\r\n        [ngStyle]=\"showLoader && !isEditMode ? {'min-height': '120px'} : {}\">\r\n        <label class=\"skill-chip\" *ngFor=\"let skill of skillSets\"\r\n          [class.selected]=\"skill.selected\"\r\n          [attr.for]=\"skill.id\">\r\n          <input type=\"checkbox\" [checked]=\"skill.selected\"\r\n            (change)=\"onSelectedSkillsets($event, skill)\"\r\n            [id]=\"skill.id\" [name]=\"skill.id\" />\r\n          <svg *ngIf=\"skill.selected\" class=\"chip-check-icon\" width=\"11\" height=\"11\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n            <path d=\"M2 6l3 3 5-5\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>\r\n          {{ skill.name }}\r\n        </label>\r\n      </div>\r\n    </div>\r\n    <button *ngIf=\"!showLoading && skillSets.length > 0\" type=\"button\"\r\n      class=\"show-more-btn\" (click)=\"showAllSkills = !showAllSkills\">\r\n      {{ showAllSkills ? 'Show Less' : 'Show More' }}\r\n      <svg [class.rotated]=\"showAllSkills\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M6 9l6 6 6-6\"/>\r\n      </svg>\r\n    </button>\r\n  </div>\r\n\r\n  <!-- Step 2: Per-skill detail cards (replaces tabset) -->\r\n  <div class=\"sk-detail-list\" #skillDetailList\r\n    *ngIf=\"tab.controls.length > 0\"\r\n    [ngClass]=\"{ 'loader': showLoading && !isEditMode, 'edit-mode': isEditMode }\">\r\n    <div class=\"sk-detail-list-header\">\r\n      <span class=\"sk-section-label\">Skill Details</span>\r\n      <span class=\"sk-count-badge\">{{ tab.controls.length }} selected</span>\r\n    </div>\r\n\r\n    <div *ngFor=\"let group of tab.controls; let index = index\"\r\n      [formGroup]=\"group\" class=\"sk-detail-card\">\r\n      <div class=\"sk-detail-card-hd\">\r\n        <div class=\"sk-detail-avatar\">{{ (tabs[index] || '?').charAt(0).toUpperCase() }}</div>\r\n        <span class=\"sk-detail-card-name\">{{ tabs[index] }}</span>\r\n        <div class=\"sk-detail-card-actions\">\r\n          <label class=\"sk-copy-toggle\" *ngIf=\"tab.controls.length > 1 && index === 0\" title=\"Copy these values to all skills\">\r\n            <input type=\"checkbox\" class=\"form-check-input\"\r\n              (click)=\"setCopyToAllTabs(index, group.value)\" role=\"switch\" />\r\n            Copy to all\r\n          </label>\r\n          <button *ngIf=\"!isEditMode\" class=\"icon-btn delete-btn\" type=\"button\"\r\n            (click)=\"removeTab(index, group.controls.skillSetId.value)\" title=\"Remove\">\r\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <div class=\"sk-detail-fields\">\r\n        <div class=\"sk-fields-row\">\r\n          <div class=\"sk-field\">\r\n            <label class=\"sk-label\">Self Ability Rating</label>\r\n            <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event, index)\"\r\n              [maxStars]=\"5\">\r\n            </ngx-stars>\r\n          </div>\r\n          <div class=\"sk-field\">\r\n            <label class=\"sk-label\">Years of Experience</label>\r\n            <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\"\r\n              bindLabel=\"text\" formControlName=\"year\"\r\n              bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\"\r\n              [appendTo]=\"'body'\" (change)=\"onYearChange(group)\"></ng-select>\r\n          </div>\r\n          <div class=\"sk-field sk-toggle-field\">\r\n            <label class=\"sk-label\">Profile Visibility</label>\r\n            <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n          </div>\r\n        </div>\r\n        <div class=\"sk-field sk-field-full\">\r\n          <label class=\"sk-label\">Description</label>\r\n          <textarea placeholder=\"Describe your skill...\" formControlName=\"notes\" class=\"form-control\"\r\n            [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.notes?.errors }\" rows=\"2\"></textarea>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Footer: Add mode -->\r\n<div *ngIf=\"store.stepView() === 'add'\" class=\"skills-container last footer-actions\">\r\n  <button class=\"back-btn\" (click)=\"userSkillsPreview.length > 0 ? cancel() : back()\">\r\n    <svg *ngIf=\"userSkillsPreview.length > 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n    <svg *ngIf=\"userSkillsPreview.length === 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n    {{ userSkillsPreview.length > 0 ? 'Cancel' : 'Back' }}\r\n  </button>\r\n  <div class=\"mb-res\">\r\n    <button class=\"back-btn me-3\" *ngIf=\"userSkillsPreview.length === 0\" (click)=\"next()\">\r\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n      Skip\r\n    </button>\r\n    <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n      Continue\r\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<!-- Footer: Preview mode -->\r\n<div *ngIf=\"store.stepView() !== 'add'\" class=\"skills-container last footer-actions\">\r\n  <button class=\"back-btn\" (click)=\"back()\">\r\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n    Back\r\n  </button>\r\n  <div class=\"mb-res\">\r\n    <button class=\"continue-btn add me-3\" *ngIf=\"store.stepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\r\n      Add More Skills\r\n    </button>\r\n    <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n      Continue\r\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showCustomProfessionForm\">\r\n  <div class=\"confirm-modal-card add-profession-card\" style=\"max-width: 420px;\">\r\n    <h4 class=\"mb-1\">Add New Profession</h4>\r\n    <p class=\"text-muted small mb-4\">This profession isn't in the list yet. Add it here so you can select it above.</p>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Profession Name <span class=\"text-danger\">*</span></label>\r\n      <input type=\"text\" class=\"form-control\" [(ngModel)]=\"customProfessionName\" name=\"customProfessionName\"\r\n        placeholder=\"Enter profession name\" />\r\n    </div>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Group <span class=\"text-danger\">*</span></label>\r\n      <ng-select class=\"add-profession-select\" [items]=\"professionGroupOptions\" [(ngModel)]=\"customProfessionGroup\" name=\"customProfessionGroup\"\r\n        placeholder=\"Select group\" [clearable]=\"false\" [appendTo]=\"'body'\">\r\n      </ng-select>\r\n    </div>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Type <span class=\"text-danger\">*</span></label>\r\n      <ng-select class=\"add-profession-select\" [items]=\"professionTypeOptions\" [(ngModel)]=\"customProfessionType\" name=\"customProfessionType\"\r\n        placeholder=\"Select type\" [clearable]=\"false\" [appendTo]=\"'body'\">\r\n      </ng-select>\r\n    </div>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Self-ability Rating</label>\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n          (click)=\"setCustomProfessionStars(s)\" [attr.aria-label]=\"'Set rating ' + s\">\r\n          <span [class]=\"customProfessionStars >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n            {{ customProfessionStars >= s ? '\u2605' : '\u2606' }}\r\n          </span>\r\n        </button>\r\n        <span class=\"small text-muted\">{{ customProfessionStars }}/5</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"mb-4\">\r\n      <label class=\"small text-muted d-block mb-1\">Years of Experience</label>\r\n      <input type=\"number\" class=\"form-control\" [(ngModel)]=\"customProfessionYear\" name=\"customProfessionYear\"\r\n        min=\"0\" max=\"30\" placeholder=\"Years of Experience\" />\r\n    </div>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"cancelCustomProfessionForm()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary h-auto\" [disabled]=\"!canSaveCustomProfession || isSavingCustomProfession\"\r\n        (click)=\"saveCustomProfession()\">\r\n        <span *ngIf=\"isSavingCustomProfession\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n        {{ isSavingCustomProfession ? 'Saving...' : 'Add Profession' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".skills-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}.skills-container.last{min-height:unset}.title{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.subtitle{font-size:14px;color:#69707d;margin-bottom:24px}.content-part{background:#fff}.content-part p{font-size:13px;color:#69707d}.content-part div{font-size:13px}.content-part .card{margin-top:15px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.content-part .card .row{margin-top:-15px}.content-part .card .sub-section{padding:0 10px}.content-part .card .sub-section .title{font-size:15px;font-weight:500;color:#1e293b}.content-part .card .sub-section .info-title{font-size:12px;font-weight:400;color:#69707d;margin-left:5px}.content-part .card .sub-section .content{font-size:13px;color:#69707d}.content-part .card .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px;color:#69707d}.content-part .card .sub-section .subsection input{width:30%}.content-part .card .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#1e293b;margin-top:15px}.content-part .tab-card .row{margin-top:2px}.search-part{width:100%;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;height:42px;background:#f9fafb;transition:all .2s ease}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.search-part input::placeholder{color:#69707d}.search-part .btn{background:#4077ad;border-radius:5px;padding:0;width:42px;height:40px;display:flex;align-items:center;justify-content:center;margin-right:0;border:none;cursor:pointer;transition:all .2s ease}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.search-part ::ng-deep .ng-select .ng-select-container{border:none!important;background:transparent!important;min-height:40px!important;box-shadow:none!important}.search-part ::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:0}.search-part ::ng-deep .ng-select.ng-select-focused .ng-select-container,.search-part ::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:transparent!important;box-shadow:none!important}textarea{width:100%;height:100px;min-height:96px;background:#f9fafb;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-size:14px;color:#1e293b;resize:vertical;outline:none;transition:all .2s ease}textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.skill-chips-wrapper{margin:8px 0 4px;position:relative;max-height:300px;overflow-y:auto}.skill-chips-wrapper.chips-collapsed:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:52px;background:linear-gradient(to bottom,transparent,#ffffff);pointer-events:none}.skill-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.skill-chips.collapsed{max-height:190px;overflow:hidden}.show-more-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:1.5px solid #e2e8f0;border-radius:5px;color:#4077ad;font-size:14px;font-weight:600;padding:5px 14px;cursor:pointer;transition:all .2s ease;margin-bottom:12px}.show-more-btn:hover{background:#ebf2f9;border-color:#4077ad}.show-more-btn svg{transition:transform .2s ease}.show-more-btn svg.rotated{transform:rotate(180deg)}.skill-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:5px;border:1.5px solid #e2e8f0;background:#fff;color:#69707d;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4;position:relative}.skill-chip input[type=checkbox]{display:none}.skill-chip .chip-check-icon{flex-shrink:0}.skill-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.skill-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.skill-chip .chip-popover{position:fixed;transform:translate(-50%,-100%);background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;padding:10px 14px;min-width:220px;max-width:300px;z-index:99999;text-align:left;pointer-events:none;white-space:normal}.skill-chip .chip-popover:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:7px solid transparent;border-top-color:#e2e8f0}.skill-chip .chip-popover:before{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:-1px;border:6px solid transparent;border-top-color:#fff;z-index:1}.chip-popover-row{display:flex;flex-direction:column;gap:2px;padding:5px 0;border-bottom:1px solid #e2e8f0}.chip-popover-row:last-child{border-bottom:none;padding-bottom:0}.chip-popover-row:first-child{padding-top:0}.chip-popover-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#69707d;line-height:1.3}.chip-popover-value{font-size:12px;font-weight:500;color:#1e293b;line-height:1.45;word-break:break-word}.form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#4077ad!important;border:1px solid #4077AD!important}.sk-toggle-field .form-check-input{position:relative;top:8px;margin-top:8px}.sk-copy-toggle .form-check-input{position:relative;top:3px}::ng-deep .ng-dropdown-panel{min-width:180px}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{max-height:210px}::ng-deep .ng-select .ng-select-container{min-height:42px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:14px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .ng-select.ng-select-focused .ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f}.label{font-size:12px;font-weight:700;color:#69707d;text-transform:uppercase;letter-spacing:.05em;padding-bottom:6px;display:block;margin-bottom:2px}.form-control{color:#1e293b;background:#f9fafb!important;min-height:36px;font-size:14px;height:42px;border:1.5px solid #e2e8f0;border-radius:8px;transition:all .2s ease}.form-control:focus{border-color:#4077ad;background:#fff!important;box-shadow:0 0 0 3px #4077ad1f!important}.form-control:focus{border:1.5px solid #4077AD;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .nav-link{color:#69707d!important}::ng-deep .nav-link.active{color:#4077ad!important;font-weight:600}.loader{filter:blur(3px);height:40px}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.close-popup{position:absolute;right:7px;top:4px;width:25px;cursor:pointer;opacity:.6;transition:all .2s ease}.close-popup:hover{opacity:1}.back-btn,.skip-btn{height:42px;min-width:130px;background:#69707d;color:#fff;border:1.5px solid #69707D;border-radius:5px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover,.skip-btn:hover{border-color:#565c66;color:#fff;background:#565c66}.back-btn.edit,.skip-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.mb-res .back-btn{background:#f2f4fa;color:#69707d;border:1.5px solid #F2F4FA}.mb-res .back-btn:hover{background:#e4e8f2;border-color:#e4e8f2;color:#69707d}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:5px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-left:15px}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.save-btn:disabled{background:#69707d;cursor:not-allowed;transform:none}.create-btn{height:42px;min-width:9rem;background:#4077ad;color:#fff;border:none;border-radius:5px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.create-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.create-btn:active{transform:translateY(0)}.continue-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:5px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.continue-btn:hover{background:#2d5a8a;transform:translateY(-1px)}.continue-btn:active{transform:translateY(0)}.continue-btn:disabled{background:#69707d;cursor:not-allowed;transform:none}.continue-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn.add{background:#f2f4fa;color:#69707d}.continue-btn.add:hover{background:#e4e8f2}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:64px}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#ebf2f9;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:12px;color:#69707d;margin:0}.sk-grid{display:grid;gap:14px;margin-bottom:24px}.sk-card{display:flex;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;transition:box-shadow .18s ease,transform .18s ease}.sk-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.sk-card-body{flex:1;padding:14px 16px;min-width:0}.sk-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.sk-avatar{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#4077ad,#2d5a8a);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}.sk-title-block{flex:1;min-width:0}.sk-name{display:block;font-size:16px;font-weight:700;color:#4077ad;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-sub{display:block;font-size:12px;color:#69707d;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-top-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.sk-text-btn{height:28px;padding:0 12px;border-radius:5px;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:all .2s ease}.sk-text-btn.cancel{background:#d4dae6;color:#69707d;border:1px solid #D4DAE6}.sk-text-btn.cancel:hover{border-color:#c2cbde;color:#69707d;background:#c2cbde}.sk-text-btn.save{background:#4077ad;color:#fff;margin-left:4px}.sk-text-btn.save:hover{background:#2d5a8a}.sk-text-btn.save:disabled{background:#69707d;cursor:not-allowed}.icon-btn{width:28px;height:28px;border:none;min-width:unset!important;border-radius:5px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.sk-meta-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-year{background:#ebf2f9;color:#4077ad}.chip.chip-visible{background:#f0fdf4;color:#15803d}.chip.chip-make{background:#fff7ed;color:#c2410c}.chip.chip-model{background:#f5f3ff;color:#6d28d9}.chip.chip-serial{background:#f8fafc;color:#69707d;font-family:monospace;font-size:11px}.sk-stars-row{margin-bottom:6px}.sk-description{font-size:12px;color:#69707d;line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sk-edit-panel{margin-top:10px;padding-top:10px;border-top:1px solid #e2e8f0}.sk-edit-row{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;margin-bottom:10px}.sk-edit-field{display:flex;flex-direction:column;gap:4px}.sk-edit-full{grid-column:1/-1;margin-top:4px}.sk-toggle-field{align-items:center;justify-content:center}.sk-label{font-size:12px;font-weight:700;color:#69707d;text-transform:uppercase;letter-spacing:.05em}.sk-section{margin-bottom:20px}.sk-select-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:12px}.sk-select-col{display:flex;flex-direction:column;gap:6px}.sk-select-col .search-part{margin-bottom:0}.sk-section-label{font-size:12px;font-weight:700;color:#1e293b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;display:block}.sk-detail-list{display:flex;flex-direction:column;gap:12px;margin-top:8px}.sk-detail-list-header{display:flex;align-items:center;gap:10px;margin-bottom:4px}.sk-count-badge{display:inline-flex;align-items:center;padding:2px 8px;background:#ebf2f9;color:#4077ad;border-radius:20px;font-size:12px;font-weight:600}.sk-detail-card{border:1px solid #e2e8f0;border-radius:12px;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden}.sk-detail-card-hd{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#ebf2f9;border-bottom:1px solid #e2e8f0}.sk-detail-avatar{width:32px;height:32px;border-radius:8px;background:#4077ad;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.sk-detail-card-name{flex:1;font-size:14px;font-weight:700;color:#4077ad;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-detail-card-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.sk-copy-toggle{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#69707d;cursor:pointer;-webkit-user-select:none;user-select:none}.sk-detail-fields{padding:14px 16px}.sk-fields-row{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;margin-bottom:12px}.sk-field{display:flex;flex-direction:column;gap:4px}.sk-field-full{grid-column:1/-1}.skill-preview-wrapper{margin-bottom:24px}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;margin-bottom:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease}.skill-preview-wrapper{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff;transition:box-shadow .25s ease}.skill-preview-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;font-size:15px;font-weight:700;color:#1e293b;border-bottom:1px solid transparent;cursor:pointer}.skill-preview-header.open{background:#ebf2f9;color:#2d5a8a;border-bottom:1px solid #e2e8f0}.skill-preview-body{padding:0;background:#fff}.skill-preview-body>div{padding:16px 20px;border-bottom:1px solid #e2e8f0}.skill-preview-body>div:last-child{border-bottom:none}.skill-preview-body label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#69707d;margin-bottom:5px}.skill-preview-body p{margin:0;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5}h5.title{font-size:22px;font-weight:700;color:#1e293b!important;margin-bottom:4px}.preview-detail-grid,.preview-edit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.preview-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0;border-right:1px solid #e2e8f0}.preview-cell:nth-child(3n){border-right:none}.preview-full{grid-column:1/-1;border-right:none;border-bottom:none}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#69707d;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.stars-readonly{pointer-events:none;display:block}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.rotate{transform:rotate(-180deg)}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:16px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:14px;color:#69707d;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:12px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:5px;border:1.5px solid #e2e8f0;background:#fff;color:#69707d;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.detail-row{display:flex;flex-wrap:wrap;column-gap:22px;row-gap:6px;margin-bottom:8px}.detail-item{display:flex;align-items:baseline;gap:6px;white-space:nowrap}.detail-label{font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:#4077ad}.detail-value{font-size:12.5px;font-weight:600;color:#1e293b}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:5px;box-shadow:none}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#69707d;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@media screen and (max-width: 767px){.step-card-header{padding:14px 16px}.step-card-body{padding:16px 16px 8px}.step-toast{right:12px;bottom:16px;min-width:calc(100vw - 24px);max-width:calc(100vw - 24px)}}@media screen and (max-width: 767px){.skills-container{padding:16px}.title,h5.title{font-size:18px}.form-control,textarea{font-size:16px}.footer-actions{flex-direction:column-reverse;gap:8px;margin-top:48px}.back-btn,.skip-btn{width:100%}.continue-btn{padding:10px 22px;width:100%}.mb-res{display:flex;flex-direction:column-reverse;gap:8px;width:100%}.preview-detail-grid,.preview-edit-grid{grid-template-columns:1fr}.preview-cell{border-right:none}.sk-grid,.sk-edit-row,.sk-fields-row,.sk-select-row{grid-template-columns:1fr}}.modal-overlay{position:fixed;inset:0;background:#11182773;display:flex;align-items:center;justify-content:center;z-index:2500;padding:20px}.confirm-modal-card{width:min(520px,96vw);max-height:85vh;overflow-y:auto;background:#fff;border-radius:5px;border:1px solid #e5e7eb;padding:24px}.add-profession-card label,.add-profession-card .form-control{font-size:12px}.add-profession-card .form-control::placeholder{font-size:12px}.add-profession-card .btn{font-size:14px}.add-profession-card ::ng-deep .add-profession-select .ng-select-container,.add-profession-card ::ng-deep .add-profession-select .ng-placeholder,.add-profession-card ::ng-deep .add-profession-select .ng-value-label{font-size:12px}::ng-deep .add-profession-select .ng-option,::ng-deep .add-profession-select .ng-placeholder{font-size:12px}\n"] }]
         }], ctorParameters: () => [{ type: SkillSetService }, { type: UserSkillSetService }, { type: UserProfessionService }, { type: UserService }, { type: i7.UntypedFormBuilder }, { type: UtilsService }, { type: i1$4.RoleContextService }, { type: CredentialingStore }, { type: i1$4.TokenService }], propDecorators: { providerId: [{
                 type: Input
             }], providerName: [{
@@ -12564,11 +12558,11 @@ class RoleSelectComponent {
         this.store.previousStep();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RoleSelectComponent, deps: [{ token: CredentialingStore }, { token: ProvidersService }, { token: UserService }, { token: UserDocumentService }, { token: i2.Router }, { token: IndustryService }, { token: UserDetailService }, { token: FileService }, { token: i1$4.TokenService }, { token: i1$4.RoleContextService }, { token: FrontEndProvidersService }, { token: i7.FormBuilder }, { token: i0.ChangeDetectorRef }], 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", providerSaved: "providerSaved" }, ngImport: i0, template: "<div class=\"role-selection-container\" [class.provider-layout]=\"roleData?.role?.name === 'Provider'\">\r\n\r\n  <!-- NON-PROVIDER LAYOUT -->\r\n  <ng-container *ngIf=\"roleData?.role?.name !== 'Provider'\">\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<span class=\"req\">*</span></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<span class=\"req\">*</span></label>\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            <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          </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<span class=\"req\">*</span></label>\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            <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        </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<span class=\"req\">*</span></label>\r\n            <im-address-verify-field formControlName=\"address1\" inputId=\"address1\" [name]=\"'random-address-' + randomId\"\r\n              autocompleteAttr=\"new-address-view\" placeholder=\"Home Address 1\" [options]=\"options\"\r\n              [invalid]=\"u.address1.invalid && (u.address1.touched || u.address1.dirty)\"\r\n              [initialLat]=\"u.latitude.value\" [initialLng]=\"u.longitude.value\"\r\n              (addressResolved)=\"onUserAddressResolved($event)\"\r\n              (manualEdit)=\"onUserAddressManualEdit()\"></im-address-verify-field>\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.address1.invalid &&\r\n        (u.address1.touched || u.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City<span class=\"req\">*</span></label>\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            <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          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">State<span class=\"req\">*</span></label>\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            <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        </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\">Zip Code<span class=\"req\">*</span></label>\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            <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<span class=\"req\">*</span></label>\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            <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<span class=\"req\">*</span></label>\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, 'user')\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.phoneNumber.invalid &&\r\n          (u.phoneNumber.touched || u.phoneNumber.dirty)\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 class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.pattern\">\r\n                Phone Number must be 10 digits\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n            <label class=\"note-label mb-2\">Years of experience<span class=\"req\">*</span></label>\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            <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          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Job Title<span class=\"req\">*</span></label>\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            <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg\" (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            <small class=\"text-muted d-block\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n            <img *ngIf=\"!isImageLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n            <div *ngIf=\"isImageLoading\" class=\"upload-spinner\">\r\n              <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n            </div>\r\n          </div>\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              <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                <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                <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              </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                <img *ngIf=\"previewUrl\" [src]=\"cloudfrontUrl+previewUrl\" class=\"preview-image mt-2\" />\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    </div>\r\n    <div class=\"actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">\r\n        <button type=\"button\" class=\"primary 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  </ng-container>\r\n\r\n  <!-- PROVIDER LAYOUT: one card with Business Information + User Information -->\r\n  <ng-container *ngIf=\"roleData?.role?.name === 'Provider'\">\r\n\r\n    <!-- Business Information -->\r\n    <h2>Business Information</h2>\r\n    <p class=\"note\">We need company information</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]=\"companyForm\" 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\">Company Name<span class=\"req\">*</span></label>\r\n            <input [ngClass]=\"{ 'is-invalid':  c.companyName.invalid && (c.companyName.touched || c.companyName.dirty) }\"\r\n              type=\"text\" class=\"form-control\" placeholder=\"Company Name\" formControlName=\"companyName\" id=\"companyName\">\r\n            <div *ngIf=\" c.companyName.invalid &&\r\n        (c.companyName.touched || c.companyName.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"c.companyName.errors.required\">\r\n                Company 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\">Company Phone Number<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control block shadow-none\" id=\"inputPhone\" name=\"inputPhone\"\r\n              placeholder=\"Phone Number\" autocomplete=\"off\" formControlName=\"companyPhoneNumber\" maxlength=\"14\"\r\n              (input)=\"phoneMask($event, 'company')\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.companyPhoneNumber.invalid &&\r\n          (c.companyPhoneNumber.touched || c.companyPhoneNumber.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.companyPhoneNumber.invalid &&\r\n        (c.companyPhoneNumber.touched || c.companyPhoneNumber.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.companyPhoneNumber.errors?.required\">\r\n                Company Phone Number is required\r\n              </div>\r\n              <div class=\"ms-1\" *ngIf=\"c.companyPhoneNumber.errors?.pattern\">\r\n                Company Phone Number must be 10 digits\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\">Address 1<span class=\"req\">*</span></label>\r\n            <im-address-verify-field formControlName=\"address1\" inputId=\"companyAddress1\" placeholder=\"Home Address 1\"\r\n              [options]=\"options\" [invalid]=\"c.address1.invalid && (c.address1.touched || c.address1.dirty)\"\r\n              [initialLat]=\"c.latitude.value\" [initialLng]=\"c.longitude.value\"\r\n              (addressResolved)=\"onCompanyAddressResolved($event)\"\r\n              (manualEdit)=\"onCompanyAddressManualEdit()\"></im-address-verify-field>\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.address1.invalid &&\r\n        (c.address1.touched || c.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.city.invalid && (c.city.touched || c.city.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.city.invalid &&\r\n        (c.city.touched || c.city.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.city.errors?.required\">\r\n                City 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\">State<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.state.invalid && (c.state.touched || c.state.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.state.invalid &&\r\n        (c.state.touched || c.state.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.state.errors?.required\">\r\n                State is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Zip Code<span class=\"req\">*</span></label>\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          c.zipcode.invalid && (c.zipcode.touched || c.zipcode.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.zipcode.invalid &&\r\n        (c.zipcode.touched || c.zipcode.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.zipcode.errors?.required\">\r\n                Zipcode is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"d-flex flex-wrap justify-content-between row\">\r\n            <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n              <label class=\"note-label mb-2\">Country<span class=\"req\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n                [ngClass]=\"{\r\n        'is-invalid':\r\n          c.country.invalid && (c.country.touched || c.country.dirty)\r\n      }\" />\r\n              <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.country.invalid &&\r\n        (c.country.touched || c.country.dirty)\r\n      \">\r\n                <div class=\"ms-1\" *ngIf=\"c.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 position-relative\">\r\n              <label class=\"note-label mb-2\">Company Logo</label>\r\n              <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploacompanyImage($event)\" class=\"d-none\" />\r\n              <input [(ngModel)]=\"fileNameCompany\" [ngModelOptions]=\"{ standalone: true }\" readonly type=\"text\"\r\n                class=\"form-control pe-5\" placeholder=\"Upload Company Logo\" (click)=\"uploadFile.click()\" />\r\n              <small class=\"text-muted d-block\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n              <img *ngIf=\"!isLogoLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n              <div *ngIf=\"isLogoLoading\" class=\"upload-spinner\">\r\n                <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n              </div>\r\n            </div>\r\n            <div class=\"form-group col-sm-12 col-md-4\">\r\n              <div class=\"image-wrapper\">\r\n                <img *ngIf=\"previewCompanyUrl\" [src]=\"previewCompanyUrl\" class=\"preview-image mt-2\" />\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n\r\n    <!-- User Information -->\r\n    <h2 style=\"margin-top: 30px;\">User Information</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<span class=\"req\">*</span></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<span class=\"req\">*</span></label>\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            <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          </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<span class=\"req\">*</span></label>\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            <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        </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<span class=\"req\">*</span></label>\r\n            <im-address-verify-field formControlName=\"address1\" inputId=\"address1\" [name]=\"'random-address-' + randomId\"\r\n              autocompleteAttr=\"new-address-view\" placeholder=\"Home Address 1\" [options]=\"options\"\r\n              [invalid]=\"u.address1.invalid && (u.address1.touched || u.address1.dirty)\"\r\n              [initialLat]=\"u.latitude.value\" [initialLng]=\"u.longitude.value\"\r\n              (addressResolved)=\"onUserAddressResolved($event)\"\r\n              (manualEdit)=\"onUserAddressManualEdit()\"></im-address-verify-field>\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.address1.invalid &&\r\n        (u.address1.touched || u.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City<span class=\"req\">*</span></label>\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            <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          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">State<span class=\"req\">*</span></label>\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            <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        </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\">Zip Code<span class=\"req\">*</span></label>\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            <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<span class=\"req\">*</span></label>\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            <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<span class=\"req\">*</span></label>\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, 'user')\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.phoneNumber.invalid &&\r\n          (u.phoneNumber.touched || u.phoneNumber.dirty)\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 class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.pattern\">\r\n                Phone Number must be 10 digits\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n            <label class=\"note-label mb-2\">Years of experience<span class=\"req\">*</span></label>\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            <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          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Job Title<span class=\"req\">*</span></label>\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            <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg\" (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            <small class=\"text-muted d-block\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n            <img *ngIf=\"!isImageLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n            <div *ngIf=\"isImageLoading\" class=\"upload-spinner\">\r\n              <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n            </div>\r\n          </div>\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              <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                <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                <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              </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                <img *ngIf=\"previewUrl\" [src]=\"cloudfrontUrl+previewUrl\" class=\"preview-image mt-2\" />\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    </div>\r\n\r\n    <div class=\"actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">\r\n        <button type=\"button\" class=\"primary ct-btn\"\r\n          [disabled]=\"showLoader || companyForm.invalid || userForm.invalid\"\r\n          [ng2-loading]=\"showLoader\"\r\n          (click)=\"saveFinal()\">\r\n          Continue\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n  </ng-container>\r\n\r\n</div>\r\n", styles: [".provider-layout{display:flex;flex-direction:column}.provider-company-first{order:-1}.section-locked{pointer-events:none;opacity:.45;filter:blur(1.5px);-webkit-user-select:none;user-select:none}.preview-image{width:250px;height:100px;object-fit:contain;margin-top:5px;border-radius:8px;border:1px solid #e2e8f0}.upload-icon-resume{position:absolute;right:25px;top:17px;width:18px;height:18px;cursor:pointer;opacity:.6;transition:all .2s ease}.upload-icon-resume:hover{opacity:1}.upload-icon{position:absolute;right:25px;top:45px;width:18px;height:18px;cursor:pointer;opacity:.6;transition:all .2s ease}.upload-icon:hover{opacity:1}::ng-deep .ng-select .ng-select-container{min-height:42px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:14px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container:hover{border-color:#69707d}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-top:3px;font-size:14px;color:#69707d}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{font-size:14px;color:#69707d}::ng-deep .custom-ng-select.ng-select-multiple .ng-select-container{min-height:42px!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:14px!important}.form-control{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box}.form-control:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.form-control::placeholder{color:#69707d}.form-control.is-invalid{border-color:#ef4444}::ng-deep im-address-verify-field .im-avf__input{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease}::ng-deep im-address-verify-field .im-avf__input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}::ng-deep im-address-verify-field .im-avf__input.is-invalid{border-color:#ef4444}.role-selection-container{max-width:950px;margin:0 auto;min-height:300px;padding:28px 24px;background:#fff}.role-selection-container h2{font-size:18px;font-weight:700;color:#1e293b;margin-bottom:4px}.role-selection-container .note{font-size:14px;color:#69707d;margin-bottom:20px}.role-selection-container .note-label{font-size:13px;font-weight:700;color:#69707d;letter-spacing:.05em;padding-left:0;display:block;margin-bottom:6px}.role-selection-container .note-label .req{color:#ef4444}.role-selection-container .dropdown-wrapper{display:flex;gap:8px;margin-bottom:16px}.role-selection-container .dropdown-wrapper select{flex:1;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease}.role-selection-container .dropdown-wrapper select:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.role-selection-container .dropdown-wrapper .add-btn{height:42px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .dropdown-wrapper .add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.role-selection-container .dropdown-wrapper .add-btn:active{transform:translateY(0)}.role-selection-container .dropdown-wrapper .add-btn:disabled{background:#69707d;cursor:not-allowed;transform:none}.role-selection-container .selected-roles{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.role-selection-container .selected-roles .role-card{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:8px;background:#ebf2f9;border:1px solid rgba(64,119,173,.2);color:#2d5a8a}.role-selection-container .selected-roles .role-card .remove-btn{background:none;border:none;font-size:1.1rem;font-weight:700;cursor:pointer;color:#ef4444;min-width:auto;height:auto;padding:0 4px;transition:all .2s ease}.role-selection-container .selected-roles .role-card .remove-btn:hover{opacity:.75}.role-selection-container .navigation-buttons{display:flex;justify-content:flex-end;gap:12px;margin-top:48px;margin-bottom:32px}.role-selection-container .navigation-buttons .back{height:42px;min-width:130px;padding:10px 22px;background:#fff;color:#69707d;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .navigation-buttons .back:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.role-selection-container .navigation-buttons .next{height:42px;min-width:130px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .navigation-buttons .next:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.role-selection-container .navigation-buttons .next:active{transform:translateY(0)}.role-selection-container .navigation-buttons .next:disabled{background:#69707d;cursor:not-allowed;transform:none}.image-wrapper{position:relative;width:150px;height:150px}.resume-wrapper{position:relative;width:550px;height:1px}.upload-spinner{position:absolute;right:25px;top:45px;width:18px;height:18px;display:flex;align-items:center;justify-content:center}.spinner-resume{width:36px;height:36px;border:3px solid #e2e8f0;border-top:3px solid #4077AD;border-radius:50%;position:absolute;top:-32%;left:99%;margin-top:-51px;margin-left:-20px;animation:spin .8s 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;padding:28px 24px;background:#fff}.producer-type-container h2{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.producer-type-container p{font-size:14px;color:#69707d;margin-bottom:20px}.producer-type-container .job-list{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}.producer-type-container .job-list .job-item{padding:12px 16px;font-size:15px;border:1.5px solid #e2e8f0;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:8px;background:#fff;color:#1e293b;transition:all .2s ease;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.producer-type-container .job-list .job-item:hover{border-color:#4077ad;background:#ebf2f9}.producer-type-container .job-list .job-item.selected{border-color:#4077ad;background:#ebf2f9;color:#2d5a8a;font-weight:600}.producer-type-container .job-list .job-item .plus{font-weight:700;color:#4077ad}.producer-type-container .navigation-buttons{display:flex;justify-content:flex-end;gap:12px;margin:40px 0}.producer-type-container .navigation-buttons .back{height:42px;min-width:130px;padding:10px 22px;background:#fff;color:#69707d;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.producer-type-container .navigation-buttons .back:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.producer-type-container .navigation-buttons .next{height:42px;min-width:130px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.producer-type-container .navigation-buttons .next:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.producer-type-container .navigation-buttons .next:active{transform:translateY(0)}.producer-type-container .navigation-buttons .next:disabled{background:#69707d;cursor:not-allowed;transform:none}.actions{display:flex;justify-content:space-between;margin:48px 0 28px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:5px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff}button.primary:hover{background:#2d5a8a;transform:translateY(-1px)}button.primary:active{transform:translateY(0)}button.secondary{background:#69707d;color:#fff;border:1.5px solid #69707D}button.secondary:hover{border-color:#565c66;color:#fff;background:#565c66}.right-actions button.secondary{background:#f2f4fa;color:#69707d;border:1.5px solid #F2F4FA}.right-actions button.secondary:hover{border-color:#e4e8f2;color:#69707d;background:#e4e8f2}button:disabled{background:#69707d;cursor:not-allowed;transform:none}@media screen and (max-width: 767px){h2{font-size:18px}select,.form-control{font-size:16px}.actions{margin:16px 0;flex-direction:column-reverse;gap:8px}.res{flex-direction:column-reverse}.upload-spinner{right:20px;top:45px}.spinner-resume{width:24px;height:24px;top:-22%;left:32%}.ct-btn{width:100%;margin-top:32px}button,.resume-wrapper{width:100%}.role-selection-container .navigation-buttons,.producer-type-container .navigation-buttons{margin-top:24px;margin-bottom:16px}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.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: MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { kind: "component", type: AddressVerifyFieldComponent, selector: "im-address-verify-field", inputs: ["placeholder", "options", "maxLength", "inputId", "name", "autocompleteAttr", "inputClass", "invalid", "inputStyle", "initialLat", "initialLng"], outputs: ["addressResolved", "manualEdit"] }] });
+    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", providerSaved: "providerSaved" }, ngImport: i0, template: "<div class=\"role-selection-container\" [class.provider-layout]=\"roleData?.role?.name === 'Provider'\">\r\n\r\n  <!-- NON-PROVIDER LAYOUT -->\r\n  <ng-container *ngIf=\"roleData?.role?.name !== 'Provider'\">\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<span class=\"req\">*</span></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<span class=\"req\">*</span></label>\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            <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          </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<span class=\"req\">*</span></label>\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            <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        </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<span class=\"req\">*</span></label>\r\n            <im-address-verify-field formControlName=\"address1\" inputId=\"address1\" [name]=\"'random-address-' + randomId\"\r\n              autocompleteAttr=\"new-address-view\" placeholder=\"Home Address 1\" [options]=\"options\"\r\n              [invalid]=\"u.address1.invalid && (u.address1.touched || u.address1.dirty)\"\r\n              [initialLat]=\"u.latitude.value\" [initialLng]=\"u.longitude.value\"\r\n              (addressResolved)=\"onUserAddressResolved($event)\"\r\n              (manualEdit)=\"onUserAddressManualEdit()\"></im-address-verify-field>\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.address1.invalid &&\r\n        (u.address1.touched || u.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City<span class=\"req\">*</span></label>\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            <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          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">State<span class=\"req\">*</span></label>\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            <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        </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\">Zip Code<span class=\"req\">*</span></label>\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            <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<span class=\"req\">*</span></label>\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            <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<span class=\"req\">*</span></label>\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, 'user')\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.phoneNumber.invalid &&\r\n          (u.phoneNumber.touched || u.phoneNumber.dirty)\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 class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.pattern\">\r\n                Phone Number must be 10 digits\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n            <label class=\"note-label mb-2\">Years of experience<span class=\"req\">*</span></label>\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            <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          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Job Title<span class=\"req\">*</span></label>\r\n            <ng-select class=\"w-100 custom-ng-select job-title-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            <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg\" (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            <small class=\"text-muted d-block\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n            <img *ngIf=\"!isImageLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n            <div *ngIf=\"isImageLoading\" class=\"upload-spinner\">\r\n              <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Industry</label>\r\n            <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              <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              <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            </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              <img *ngIf=\"previewUrl\" [src]=\"cloudfrontUrl+previewUrl\" class=\"preview-image mt-2\" />\r\n            </div>\r\n            <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n              <div>{{ userError }}</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n    <div class=\"actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">\r\n        <button type=\"button\" class=\"primary 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  </ng-container>\r\n\r\n  <!-- PROVIDER LAYOUT: one card with Business Information + User Information -->\r\n  <ng-container *ngIf=\"roleData?.role?.name === 'Provider'\">\r\n\r\n    <!-- Business Information -->\r\n    <h2>Business Information</h2>\r\n    <p class=\"note\">We need company information</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]=\"companyForm\" 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\">Company Name<span class=\"req\">*</span></label>\r\n            <input [ngClass]=\"{ 'is-invalid':  c.companyName.invalid && (c.companyName.touched || c.companyName.dirty) }\"\r\n              type=\"text\" class=\"form-control\" placeholder=\"Company Name\" formControlName=\"companyName\" id=\"companyName\">\r\n            <div *ngIf=\" c.companyName.invalid &&\r\n        (c.companyName.touched || c.companyName.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"c.companyName.errors.required\">\r\n                Company 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\">Company Phone Number<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control block shadow-none\" id=\"inputPhone\" name=\"inputPhone\"\r\n              placeholder=\"Phone Number\" autocomplete=\"off\" formControlName=\"companyPhoneNumber\" maxlength=\"14\"\r\n              (input)=\"phoneMask($event, 'company')\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.companyPhoneNumber.invalid &&\r\n          (c.companyPhoneNumber.touched || c.companyPhoneNumber.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.companyPhoneNumber.invalid &&\r\n        (c.companyPhoneNumber.touched || c.companyPhoneNumber.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.companyPhoneNumber.errors?.required\">\r\n                Company Phone Number is required\r\n              </div>\r\n              <div class=\"ms-1\" *ngIf=\"c.companyPhoneNumber.errors?.pattern\">\r\n                Company Phone Number must be 10 digits\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\">Address 1<span class=\"req\">*</span></label>\r\n            <im-address-verify-field formControlName=\"address1\" inputId=\"companyAddress1\" placeholder=\"Home Address 1\"\r\n              [options]=\"options\" [invalid]=\"c.address1.invalid && (c.address1.touched || c.address1.dirty)\"\r\n              [initialLat]=\"c.latitude.value\" [initialLng]=\"c.longitude.value\"\r\n              (addressResolved)=\"onCompanyAddressResolved($event)\"\r\n              (manualEdit)=\"onCompanyAddressManualEdit()\"></im-address-verify-field>\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.address1.invalid &&\r\n        (c.address1.touched || c.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.city.invalid && (c.city.touched || c.city.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.city.invalid &&\r\n        (c.city.touched || c.city.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.city.errors?.required\">\r\n                City 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\">State<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.state.invalid && (c.state.touched || c.state.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.state.invalid &&\r\n        (c.state.touched || c.state.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.state.errors?.required\">\r\n                State is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Zip Code<span class=\"req\">*</span></label>\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          c.zipcode.invalid && (c.zipcode.touched || c.zipcode.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.zipcode.invalid &&\r\n        (c.zipcode.touched || c.zipcode.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.zipcode.errors?.required\">\r\n                Zipcode is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"d-flex flex-wrap justify-content-between row\">\r\n            <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n              <label class=\"note-label mb-2\">Country<span class=\"req\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n                [ngClass]=\"{\r\n        'is-invalid':\r\n          c.country.invalid && (c.country.touched || c.country.dirty)\r\n      }\" />\r\n              <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.country.invalid &&\r\n        (c.country.touched || c.country.dirty)\r\n      \">\r\n                <div class=\"ms-1\" *ngIf=\"c.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 position-relative\">\r\n              <label class=\"note-label mb-2\">Company Logo</label>\r\n              <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploacompanyImage($event)\" class=\"d-none\" />\r\n              <input [(ngModel)]=\"fileNameCompany\" [ngModelOptions]=\"{ standalone: true }\" readonly type=\"text\"\r\n                class=\"form-control pe-5\" placeholder=\"Upload Company Logo\" (click)=\"uploadFile.click()\" />\r\n              <small class=\"text-muted d-block\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n              <img *ngIf=\"!isLogoLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n              <div *ngIf=\"isLogoLoading\" class=\"upload-spinner\">\r\n                <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n              </div>\r\n            </div>\r\n            <div class=\"form-group col-sm-12 col-md-4\">\r\n              <div class=\"image-wrapper\">\r\n                <img *ngIf=\"previewCompanyUrl\" [src]=\"previewCompanyUrl\" class=\"preview-image mt-2\" />\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n\r\n    <!-- User Information -->\r\n    <h2 style=\"margin-top: 30px;\">User Information</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<span class=\"req\">*</span></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<span class=\"req\">*</span></label>\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            <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          </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<span class=\"req\">*</span></label>\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            <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        </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<span class=\"req\">*</span></label>\r\n            <im-address-verify-field formControlName=\"address1\" inputId=\"address1\" [name]=\"'random-address-' + randomId\"\r\n              autocompleteAttr=\"new-address-view\" placeholder=\"Home Address 1\" [options]=\"options\"\r\n              [invalid]=\"u.address1.invalid && (u.address1.touched || u.address1.dirty)\"\r\n              [initialLat]=\"u.latitude.value\" [initialLng]=\"u.longitude.value\"\r\n              (addressResolved)=\"onUserAddressResolved($event)\"\r\n              (manualEdit)=\"onUserAddressManualEdit()\"></im-address-verify-field>\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.address1.invalid &&\r\n        (u.address1.touched || u.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City<span class=\"req\">*</span></label>\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            <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          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">State<span class=\"req\">*</span></label>\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            <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        </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\">Zip Code<span class=\"req\">*</span></label>\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            <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<span class=\"req\">*</span></label>\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            <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<span class=\"req\">*</span></label>\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, 'user')\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.phoneNumber.invalid &&\r\n          (u.phoneNumber.touched || u.phoneNumber.dirty)\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 class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.pattern\">\r\n                Phone Number must be 10 digits\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n            <label class=\"note-label mb-2\">Years of experience<span class=\"req\">*</span></label>\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            <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          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Job Title<span class=\"req\">*</span></label>\r\n            <ng-select class=\"w-100 custom-ng-select job-title-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            <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg\" (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            <small class=\"text-muted d-block\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n            <img *ngIf=\"!isImageLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n            <div *ngIf=\"isImageLoading\" class=\"upload-spinner\">\r\n              <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Industry</label>\r\n            <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              <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              <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            </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              <img *ngIf=\"previewUrl\" [src]=\"cloudfrontUrl+previewUrl\" class=\"preview-image mt-2\" />\r\n            </div>\r\n            <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n              <div>{{ userError }}</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n\r\n    <div class=\"actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">\r\n        <button type=\"button\" class=\"primary ct-btn\"\r\n          [disabled]=\"showLoader || companyForm.invalid || userForm.invalid\"\r\n          [ng2-loading]=\"showLoader\"\r\n          (click)=\"saveFinal()\">\r\n          Continue\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n  </ng-container>\r\n\r\n</div>\r\n", styles: [".provider-layout{display:flex;flex-direction:column}.provider-company-first{order:-1}.section-locked{pointer-events:none;opacity:.45;filter:blur(1.5px);-webkit-user-select:none;user-select:none}.preview-image{width:250px;height:100px;object-fit:contain;margin-top:5px;border-radius:8px;border:1px solid #e2e8f0}.upload-icon-resume{position:absolute;right:25px;top:17px;width:18px;height:18px;cursor:pointer;opacity:.6;transition:all .2s ease}.upload-icon-resume:hover{opacity:1}.upload-icon{position:absolute;right:25px;top:45px;width:18px;height:18px;cursor:pointer;opacity:.6;transition:all .2s ease}.upload-icon:hover{opacity:1}::ng-deep .ng-select .ng-select-container{min-height:42px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:14px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container:hover{border-color:#69707d}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-top:3px;font-size:14px;color:#69707d}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{font-size:14px;color:#69707d}::ng-deep .custom-ng-select.ng-select-multiple .ng-select-container{min-height:42px!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:14px!important}::ng-deep .job-title-select.ng-select-multiple .ng-select-container{height:42px!important}::ng-deep .job-title-select.ng-select-multiple .ng-value-container{flex-wrap:nowrap!important;overflow:hidden!important}.form-control{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box}.form-control:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.form-control::placeholder{color:#69707d}.form-control.is-invalid{border-color:#ef4444}::ng-deep im-address-verify-field .im-avf__input{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease}::ng-deep im-address-verify-field .im-avf__input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}::ng-deep im-address-verify-field .im-avf__input.is-invalid{border-color:#ef4444}.role-selection-container{max-width:950px;margin:0 auto;min-height:300px;padding:28px 24px;background:#fff}.role-selection-container h2{font-size:18px;font-weight:700;color:#1e293b;margin-bottom:4px}.role-selection-container .note{font-size:14px;color:#69707d;margin-bottom:20px}.role-selection-container .note-label{font-size:13px;font-weight:700;color:#69707d;letter-spacing:.05em;padding-left:0;display:block;margin-bottom:6px}.role-selection-container .note-label .req{color:#ef4444}.role-selection-container .dropdown-wrapper{display:flex;gap:8px;margin-bottom:16px}.role-selection-container .dropdown-wrapper select{flex:1;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease}.role-selection-container .dropdown-wrapper select:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.role-selection-container .dropdown-wrapper .add-btn{height:42px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .dropdown-wrapper .add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.role-selection-container .dropdown-wrapper .add-btn:active{transform:translateY(0)}.role-selection-container .dropdown-wrapper .add-btn:disabled{background:#69707d;cursor:not-allowed;transform:none}.role-selection-container .selected-roles{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.role-selection-container .selected-roles .role-card{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:8px;background:#ebf2f9;border:1px solid rgba(64,119,173,.2);color:#2d5a8a}.role-selection-container .selected-roles .role-card .remove-btn{background:none;border:none;font-size:1.1rem;font-weight:700;cursor:pointer;color:#ef4444;min-width:auto;height:auto;padding:0 4px;transition:all .2s ease}.role-selection-container .selected-roles .role-card .remove-btn:hover{opacity:.75}.role-selection-container .navigation-buttons{display:flex;justify-content:flex-end;gap:12px;margin-top:48px;margin-bottom:32px}.role-selection-container .navigation-buttons .back{height:42px;min-width:130px;padding:10px 22px;background:#fff;color:#69707d;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .navigation-buttons .back:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.role-selection-container .navigation-buttons .next{height:42px;min-width:130px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .navigation-buttons .next:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.role-selection-container .navigation-buttons .next:active{transform:translateY(0)}.role-selection-container .navigation-buttons .next:disabled{background:#69707d;cursor:not-allowed;transform:none}.image-wrapper{position:relative;width:150px;height:150px}.resume-wrapper{position:relative;width:550px;height:1px}.upload-spinner{position:absolute;right:25px;top:45px;width:18px;height:18px;display:flex;align-items:center;justify-content:center}.spinner-resume{width:36px;height:36px;border:3px solid #e2e8f0;border-top:3px solid #4077AD;border-radius:50%;position:absolute;top:-32%;left:99%;margin-top:-51px;margin-left:-20px;animation:spin .8s 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;padding:28px 24px;background:#fff}.producer-type-container h2{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.producer-type-container p{font-size:14px;color:#69707d;margin-bottom:20px}.producer-type-container .job-list{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}.producer-type-container .job-list .job-item{padding:12px 16px;font-size:15px;border:1.5px solid #e2e8f0;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:8px;background:#fff;color:#1e293b;transition:all .2s ease;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.producer-type-container .job-list .job-item:hover{border-color:#4077ad;background:#ebf2f9}.producer-type-container .job-list .job-item.selected{border-color:#4077ad;background:#ebf2f9;color:#2d5a8a;font-weight:600}.producer-type-container .job-list .job-item .plus{font-weight:700;color:#4077ad}.producer-type-container .navigation-buttons{display:flex;justify-content:flex-end;gap:12px;margin:40px 0}.producer-type-container .navigation-buttons .back{height:42px;min-width:130px;padding:10px 22px;background:#fff;color:#69707d;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.producer-type-container .navigation-buttons .back:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.producer-type-container .navigation-buttons .next{height:42px;min-width:130px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.producer-type-container .navigation-buttons .next:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.producer-type-container .navigation-buttons .next:active{transform:translateY(0)}.producer-type-container .navigation-buttons .next:disabled{background:#69707d;cursor:not-allowed;transform:none}.actions{display:flex;justify-content:space-between;margin:48px 0 28px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:5px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff}button.primary:hover{background:#2d5a8a;transform:translateY(-1px)}button.primary:active{transform:translateY(0)}button.secondary{background:#69707d;color:#fff;border:1.5px solid #69707D}button.secondary:hover{border-color:#565c66;color:#fff;background:#565c66}.right-actions button.secondary{background:#f2f4fa;color:#69707d;border:1.5px solid #F2F4FA}.right-actions button.secondary:hover{border-color:#e4e8f2;color:#69707d;background:#e4e8f2}button:disabled{background:#69707d;cursor:not-allowed;transform:none}@media screen and (max-width: 767px){h2{font-size:18px}select,.form-control{font-size:16px}.actions{margin:16px 0;flex-direction:column-reverse;gap:8px}.res{flex-direction:column-reverse}.upload-spinner{right:20px;top:45px}.spinner-resume{width:24px;height:24px;top:-22%;left:32%}.ct-btn{width:100%;margin-top:32px}button,.resume-wrapper{width:100%}.role-selection-container .navigation-buttons,.producer-type-container .navigation-buttons{margin-top:24px;margin-bottom:16px}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.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: MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { kind: "component", type: AddressVerifyFieldComponent, selector: "im-address-verify-field", inputs: ["placeholder", "options", "maxLength", "inputId", "name", "autocompleteAttr", "inputClass", "invalid", "inputStyle", "initialLat", "initialLng"], outputs: ["addressResolved", "manualEdit"] }] });
 }
 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\" [class.provider-layout]=\"roleData?.role?.name === 'Provider'\">\r\n\r\n  <!-- NON-PROVIDER LAYOUT -->\r\n  <ng-container *ngIf=\"roleData?.role?.name !== 'Provider'\">\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<span class=\"req\">*</span></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<span class=\"req\">*</span></label>\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            <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          </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<span class=\"req\">*</span></label>\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            <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        </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<span class=\"req\">*</span></label>\r\n            <im-address-verify-field formControlName=\"address1\" inputId=\"address1\" [name]=\"'random-address-' + randomId\"\r\n              autocompleteAttr=\"new-address-view\" placeholder=\"Home Address 1\" [options]=\"options\"\r\n              [invalid]=\"u.address1.invalid && (u.address1.touched || u.address1.dirty)\"\r\n              [initialLat]=\"u.latitude.value\" [initialLng]=\"u.longitude.value\"\r\n              (addressResolved)=\"onUserAddressResolved($event)\"\r\n              (manualEdit)=\"onUserAddressManualEdit()\"></im-address-verify-field>\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.address1.invalid &&\r\n        (u.address1.touched || u.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City<span class=\"req\">*</span></label>\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            <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          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">State<span class=\"req\">*</span></label>\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            <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        </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\">Zip Code<span class=\"req\">*</span></label>\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            <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<span class=\"req\">*</span></label>\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            <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<span class=\"req\">*</span></label>\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, 'user')\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.phoneNumber.invalid &&\r\n          (u.phoneNumber.touched || u.phoneNumber.dirty)\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 class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.pattern\">\r\n                Phone Number must be 10 digits\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n            <label class=\"note-label mb-2\">Years of experience<span class=\"req\">*</span></label>\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            <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          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Job Title<span class=\"req\">*</span></label>\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            <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg\" (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            <small class=\"text-muted d-block\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n            <img *ngIf=\"!isImageLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n            <div *ngIf=\"isImageLoading\" class=\"upload-spinner\">\r\n              <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n            </div>\r\n          </div>\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              <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                <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                <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              </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                <img *ngIf=\"previewUrl\" [src]=\"cloudfrontUrl+previewUrl\" class=\"preview-image mt-2\" />\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    </div>\r\n    <div class=\"actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">\r\n        <button type=\"button\" class=\"primary 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  </ng-container>\r\n\r\n  <!-- PROVIDER LAYOUT: one card with Business Information + User Information -->\r\n  <ng-container *ngIf=\"roleData?.role?.name === 'Provider'\">\r\n\r\n    <!-- Business Information -->\r\n    <h2>Business Information</h2>\r\n    <p class=\"note\">We need company information</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]=\"companyForm\" 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\">Company Name<span class=\"req\">*</span></label>\r\n            <input [ngClass]=\"{ 'is-invalid':  c.companyName.invalid && (c.companyName.touched || c.companyName.dirty) }\"\r\n              type=\"text\" class=\"form-control\" placeholder=\"Company Name\" formControlName=\"companyName\" id=\"companyName\">\r\n            <div *ngIf=\" c.companyName.invalid &&\r\n        (c.companyName.touched || c.companyName.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"c.companyName.errors.required\">\r\n                Company 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\">Company Phone Number<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control block shadow-none\" id=\"inputPhone\" name=\"inputPhone\"\r\n              placeholder=\"Phone Number\" autocomplete=\"off\" formControlName=\"companyPhoneNumber\" maxlength=\"14\"\r\n              (input)=\"phoneMask($event, 'company')\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.companyPhoneNumber.invalid &&\r\n          (c.companyPhoneNumber.touched || c.companyPhoneNumber.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.companyPhoneNumber.invalid &&\r\n        (c.companyPhoneNumber.touched || c.companyPhoneNumber.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.companyPhoneNumber.errors?.required\">\r\n                Company Phone Number is required\r\n              </div>\r\n              <div class=\"ms-1\" *ngIf=\"c.companyPhoneNumber.errors?.pattern\">\r\n                Company Phone Number must be 10 digits\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\">Address 1<span class=\"req\">*</span></label>\r\n            <im-address-verify-field formControlName=\"address1\" inputId=\"companyAddress1\" placeholder=\"Home Address 1\"\r\n              [options]=\"options\" [invalid]=\"c.address1.invalid && (c.address1.touched || c.address1.dirty)\"\r\n              [initialLat]=\"c.latitude.value\" [initialLng]=\"c.longitude.value\"\r\n              (addressResolved)=\"onCompanyAddressResolved($event)\"\r\n              (manualEdit)=\"onCompanyAddressManualEdit()\"></im-address-verify-field>\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.address1.invalid &&\r\n        (c.address1.touched || c.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.city.invalid && (c.city.touched || c.city.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.city.invalid &&\r\n        (c.city.touched || c.city.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.city.errors?.required\">\r\n                City 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\">State<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.state.invalid && (c.state.touched || c.state.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.state.invalid &&\r\n        (c.state.touched || c.state.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.state.errors?.required\">\r\n                State is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Zip Code<span class=\"req\">*</span></label>\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          c.zipcode.invalid && (c.zipcode.touched || c.zipcode.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.zipcode.invalid &&\r\n        (c.zipcode.touched || c.zipcode.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.zipcode.errors?.required\">\r\n                Zipcode is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"d-flex flex-wrap justify-content-between row\">\r\n            <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n              <label class=\"note-label mb-2\">Country<span class=\"req\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n                [ngClass]=\"{\r\n        'is-invalid':\r\n          c.country.invalid && (c.country.touched || c.country.dirty)\r\n      }\" />\r\n              <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.country.invalid &&\r\n        (c.country.touched || c.country.dirty)\r\n      \">\r\n                <div class=\"ms-1\" *ngIf=\"c.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 position-relative\">\r\n              <label class=\"note-label mb-2\">Company Logo</label>\r\n              <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploacompanyImage($event)\" class=\"d-none\" />\r\n              <input [(ngModel)]=\"fileNameCompany\" [ngModelOptions]=\"{ standalone: true }\" readonly type=\"text\"\r\n                class=\"form-control pe-5\" placeholder=\"Upload Company Logo\" (click)=\"uploadFile.click()\" />\r\n              <small class=\"text-muted d-block\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n              <img *ngIf=\"!isLogoLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n              <div *ngIf=\"isLogoLoading\" class=\"upload-spinner\">\r\n                <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n              </div>\r\n            </div>\r\n            <div class=\"form-group col-sm-12 col-md-4\">\r\n              <div class=\"image-wrapper\">\r\n                <img *ngIf=\"previewCompanyUrl\" [src]=\"previewCompanyUrl\" class=\"preview-image mt-2\" />\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n\r\n    <!-- User Information -->\r\n    <h2 style=\"margin-top: 30px;\">User Information</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<span class=\"req\">*</span></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<span class=\"req\">*</span></label>\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            <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          </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<span class=\"req\">*</span></label>\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            <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        </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<span class=\"req\">*</span></label>\r\n            <im-address-verify-field formControlName=\"address1\" inputId=\"address1\" [name]=\"'random-address-' + randomId\"\r\n              autocompleteAttr=\"new-address-view\" placeholder=\"Home Address 1\" [options]=\"options\"\r\n              [invalid]=\"u.address1.invalid && (u.address1.touched || u.address1.dirty)\"\r\n              [initialLat]=\"u.latitude.value\" [initialLng]=\"u.longitude.value\"\r\n              (addressResolved)=\"onUserAddressResolved($event)\"\r\n              (manualEdit)=\"onUserAddressManualEdit()\"></im-address-verify-field>\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.address1.invalid &&\r\n        (u.address1.touched || u.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City<span class=\"req\">*</span></label>\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            <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          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">State<span class=\"req\">*</span></label>\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            <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        </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\">Zip Code<span class=\"req\">*</span></label>\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            <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<span class=\"req\">*</span></label>\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            <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<span class=\"req\">*</span></label>\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, 'user')\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.phoneNumber.invalid &&\r\n          (u.phoneNumber.touched || u.phoneNumber.dirty)\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 class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.pattern\">\r\n                Phone Number must be 10 digits\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n            <label class=\"note-label mb-2\">Years of experience<span class=\"req\">*</span></label>\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            <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          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Job Title<span class=\"req\">*</span></label>\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            <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg\" (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            <small class=\"text-muted d-block\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n            <img *ngIf=\"!isImageLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n            <div *ngIf=\"isImageLoading\" class=\"upload-spinner\">\r\n              <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n            </div>\r\n          </div>\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              <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                <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                <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              </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                <img *ngIf=\"previewUrl\" [src]=\"cloudfrontUrl+previewUrl\" class=\"preview-image mt-2\" />\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    </div>\r\n\r\n    <div class=\"actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">\r\n        <button type=\"button\" class=\"primary ct-btn\"\r\n          [disabled]=\"showLoader || companyForm.invalid || userForm.invalid\"\r\n          [ng2-loading]=\"showLoader\"\r\n          (click)=\"saveFinal()\">\r\n          Continue\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n  </ng-container>\r\n\r\n</div>\r\n", styles: [".provider-layout{display:flex;flex-direction:column}.provider-company-first{order:-1}.section-locked{pointer-events:none;opacity:.45;filter:blur(1.5px);-webkit-user-select:none;user-select:none}.preview-image{width:250px;height:100px;object-fit:contain;margin-top:5px;border-radius:8px;border:1px solid #e2e8f0}.upload-icon-resume{position:absolute;right:25px;top:17px;width:18px;height:18px;cursor:pointer;opacity:.6;transition:all .2s ease}.upload-icon-resume:hover{opacity:1}.upload-icon{position:absolute;right:25px;top:45px;width:18px;height:18px;cursor:pointer;opacity:.6;transition:all .2s ease}.upload-icon:hover{opacity:1}::ng-deep .ng-select .ng-select-container{min-height:42px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:14px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container:hover{border-color:#69707d}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-top:3px;font-size:14px;color:#69707d}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{font-size:14px;color:#69707d}::ng-deep .custom-ng-select.ng-select-multiple .ng-select-container{min-height:42px!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:14px!important}.form-control{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box}.form-control:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.form-control::placeholder{color:#69707d}.form-control.is-invalid{border-color:#ef4444}::ng-deep im-address-verify-field .im-avf__input{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease}::ng-deep im-address-verify-field .im-avf__input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}::ng-deep im-address-verify-field .im-avf__input.is-invalid{border-color:#ef4444}.role-selection-container{max-width:950px;margin:0 auto;min-height:300px;padding:28px 24px;background:#fff}.role-selection-container h2{font-size:18px;font-weight:700;color:#1e293b;margin-bottom:4px}.role-selection-container .note{font-size:14px;color:#69707d;margin-bottom:20px}.role-selection-container .note-label{font-size:13px;font-weight:700;color:#69707d;letter-spacing:.05em;padding-left:0;display:block;margin-bottom:6px}.role-selection-container .note-label .req{color:#ef4444}.role-selection-container .dropdown-wrapper{display:flex;gap:8px;margin-bottom:16px}.role-selection-container .dropdown-wrapper select{flex:1;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease}.role-selection-container .dropdown-wrapper select:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.role-selection-container .dropdown-wrapper .add-btn{height:42px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .dropdown-wrapper .add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.role-selection-container .dropdown-wrapper .add-btn:active{transform:translateY(0)}.role-selection-container .dropdown-wrapper .add-btn:disabled{background:#69707d;cursor:not-allowed;transform:none}.role-selection-container .selected-roles{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.role-selection-container .selected-roles .role-card{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:8px;background:#ebf2f9;border:1px solid rgba(64,119,173,.2);color:#2d5a8a}.role-selection-container .selected-roles .role-card .remove-btn{background:none;border:none;font-size:1.1rem;font-weight:700;cursor:pointer;color:#ef4444;min-width:auto;height:auto;padding:0 4px;transition:all .2s ease}.role-selection-container .selected-roles .role-card .remove-btn:hover{opacity:.75}.role-selection-container .navigation-buttons{display:flex;justify-content:flex-end;gap:12px;margin-top:48px;margin-bottom:32px}.role-selection-container .navigation-buttons .back{height:42px;min-width:130px;padding:10px 22px;background:#fff;color:#69707d;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .navigation-buttons .back:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.role-selection-container .navigation-buttons .next{height:42px;min-width:130px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .navigation-buttons .next:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.role-selection-container .navigation-buttons .next:active{transform:translateY(0)}.role-selection-container .navigation-buttons .next:disabled{background:#69707d;cursor:not-allowed;transform:none}.image-wrapper{position:relative;width:150px;height:150px}.resume-wrapper{position:relative;width:550px;height:1px}.upload-spinner{position:absolute;right:25px;top:45px;width:18px;height:18px;display:flex;align-items:center;justify-content:center}.spinner-resume{width:36px;height:36px;border:3px solid #e2e8f0;border-top:3px solid #4077AD;border-radius:50%;position:absolute;top:-32%;left:99%;margin-top:-51px;margin-left:-20px;animation:spin .8s 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;padding:28px 24px;background:#fff}.producer-type-container h2{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.producer-type-container p{font-size:14px;color:#69707d;margin-bottom:20px}.producer-type-container .job-list{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}.producer-type-container .job-list .job-item{padding:12px 16px;font-size:15px;border:1.5px solid #e2e8f0;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:8px;background:#fff;color:#1e293b;transition:all .2s ease;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.producer-type-container .job-list .job-item:hover{border-color:#4077ad;background:#ebf2f9}.producer-type-container .job-list .job-item.selected{border-color:#4077ad;background:#ebf2f9;color:#2d5a8a;font-weight:600}.producer-type-container .job-list .job-item .plus{font-weight:700;color:#4077ad}.producer-type-container .navigation-buttons{display:flex;justify-content:flex-end;gap:12px;margin:40px 0}.producer-type-container .navigation-buttons .back{height:42px;min-width:130px;padding:10px 22px;background:#fff;color:#69707d;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.producer-type-container .navigation-buttons .back:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.producer-type-container .navigation-buttons .next{height:42px;min-width:130px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.producer-type-container .navigation-buttons .next:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.producer-type-container .navigation-buttons .next:active{transform:translateY(0)}.producer-type-container .navigation-buttons .next:disabled{background:#69707d;cursor:not-allowed;transform:none}.actions{display:flex;justify-content:space-between;margin:48px 0 28px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:5px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff}button.primary:hover{background:#2d5a8a;transform:translateY(-1px)}button.primary:active{transform:translateY(0)}button.secondary{background:#69707d;color:#fff;border:1.5px solid #69707D}button.secondary:hover{border-color:#565c66;color:#fff;background:#565c66}.right-actions button.secondary{background:#f2f4fa;color:#69707d;border:1.5px solid #F2F4FA}.right-actions button.secondary:hover{border-color:#e4e8f2;color:#69707d;background:#e4e8f2}button:disabled{background:#69707d;cursor:not-allowed;transform:none}@media screen and (max-width: 767px){h2{font-size:18px}select,.form-control{font-size:16px}.actions{margin:16px 0;flex-direction:column-reverse;gap:8px}.res{flex-direction:column-reverse}.upload-spinner{right:20px;top:45px}.spinner-resume{width:24px;height:24px;top:-22%;left:32%}.ct-btn{width:100%;margin-top:32px}button,.resume-wrapper{width:100%}.role-selection-container .navigation-buttons,.producer-type-container .navigation-buttons{margin-top:24px;margin-bottom:16px}}\n"] }]
+            args: [{ selector: 'app-role-select', standalone: false, template: "<div class=\"role-selection-container\" [class.provider-layout]=\"roleData?.role?.name === 'Provider'\">\r\n\r\n  <!-- NON-PROVIDER LAYOUT -->\r\n  <ng-container *ngIf=\"roleData?.role?.name !== 'Provider'\">\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<span class=\"req\">*</span></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<span class=\"req\">*</span></label>\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            <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          </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<span class=\"req\">*</span></label>\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            <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        </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<span class=\"req\">*</span></label>\r\n            <im-address-verify-field formControlName=\"address1\" inputId=\"address1\" [name]=\"'random-address-' + randomId\"\r\n              autocompleteAttr=\"new-address-view\" placeholder=\"Home Address 1\" [options]=\"options\"\r\n              [invalid]=\"u.address1.invalid && (u.address1.touched || u.address1.dirty)\"\r\n              [initialLat]=\"u.latitude.value\" [initialLng]=\"u.longitude.value\"\r\n              (addressResolved)=\"onUserAddressResolved($event)\"\r\n              (manualEdit)=\"onUserAddressManualEdit()\"></im-address-verify-field>\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.address1.invalid &&\r\n        (u.address1.touched || u.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City<span class=\"req\">*</span></label>\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            <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          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">State<span class=\"req\">*</span></label>\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            <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        </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\">Zip Code<span class=\"req\">*</span></label>\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            <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<span class=\"req\">*</span></label>\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            <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<span class=\"req\">*</span></label>\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, 'user')\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.phoneNumber.invalid &&\r\n          (u.phoneNumber.touched || u.phoneNumber.dirty)\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 class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.pattern\">\r\n                Phone Number must be 10 digits\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n            <label class=\"note-label mb-2\">Years of experience<span class=\"req\">*</span></label>\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            <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          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Job Title<span class=\"req\">*</span></label>\r\n            <ng-select class=\"w-100 custom-ng-select job-title-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            <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg\" (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            <small class=\"text-muted d-block\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n            <img *ngIf=\"!isImageLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n            <div *ngIf=\"isImageLoading\" class=\"upload-spinner\">\r\n              <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Industry</label>\r\n            <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              <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              <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            </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              <img *ngIf=\"previewUrl\" [src]=\"cloudfrontUrl+previewUrl\" class=\"preview-image mt-2\" />\r\n            </div>\r\n            <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n              <div>{{ userError }}</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n    <div class=\"actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">\r\n        <button type=\"button\" class=\"primary 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  </ng-container>\r\n\r\n  <!-- PROVIDER LAYOUT: one card with Business Information + User Information -->\r\n  <ng-container *ngIf=\"roleData?.role?.name === 'Provider'\">\r\n\r\n    <!-- Business Information -->\r\n    <h2>Business Information</h2>\r\n    <p class=\"note\">We need company information</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]=\"companyForm\" 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\">Company Name<span class=\"req\">*</span></label>\r\n            <input [ngClass]=\"{ 'is-invalid':  c.companyName.invalid && (c.companyName.touched || c.companyName.dirty) }\"\r\n              type=\"text\" class=\"form-control\" placeholder=\"Company Name\" formControlName=\"companyName\" id=\"companyName\">\r\n            <div *ngIf=\" c.companyName.invalid &&\r\n        (c.companyName.touched || c.companyName.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"c.companyName.errors.required\">\r\n                Company 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\">Company Phone Number<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control block shadow-none\" id=\"inputPhone\" name=\"inputPhone\"\r\n              placeholder=\"Phone Number\" autocomplete=\"off\" formControlName=\"companyPhoneNumber\" maxlength=\"14\"\r\n              (input)=\"phoneMask($event, 'company')\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.companyPhoneNumber.invalid &&\r\n          (c.companyPhoneNumber.touched || c.companyPhoneNumber.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.companyPhoneNumber.invalid &&\r\n        (c.companyPhoneNumber.touched || c.companyPhoneNumber.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.companyPhoneNumber.errors?.required\">\r\n                Company Phone Number is required\r\n              </div>\r\n              <div class=\"ms-1\" *ngIf=\"c.companyPhoneNumber.errors?.pattern\">\r\n                Company Phone Number must be 10 digits\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\">Address 1<span class=\"req\">*</span></label>\r\n            <im-address-verify-field formControlName=\"address1\" inputId=\"companyAddress1\" placeholder=\"Home Address 1\"\r\n              [options]=\"options\" [invalid]=\"c.address1.invalid && (c.address1.touched || c.address1.dirty)\"\r\n              [initialLat]=\"c.latitude.value\" [initialLng]=\"c.longitude.value\"\r\n              (addressResolved)=\"onCompanyAddressResolved($event)\"\r\n              (manualEdit)=\"onCompanyAddressManualEdit()\"></im-address-verify-field>\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.address1.invalid &&\r\n        (c.address1.touched || c.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.city.invalid && (c.city.touched || c.city.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.city.invalid &&\r\n        (c.city.touched || c.city.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.city.errors?.required\">\r\n                City 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\">State<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.state.invalid && (c.state.touched || c.state.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.state.invalid &&\r\n        (c.state.touched || c.state.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.state.errors?.required\">\r\n                State is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Zip Code<span class=\"req\">*</span></label>\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          c.zipcode.invalid && (c.zipcode.touched || c.zipcode.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.zipcode.invalid &&\r\n        (c.zipcode.touched || c.zipcode.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.zipcode.errors?.required\">\r\n                Zipcode is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"d-flex flex-wrap justify-content-between row\">\r\n            <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n              <label class=\"note-label mb-2\">Country<span class=\"req\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n                [ngClass]=\"{\r\n        'is-invalid':\r\n          c.country.invalid && (c.country.touched || c.country.dirty)\r\n      }\" />\r\n              <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.country.invalid &&\r\n        (c.country.touched || c.country.dirty)\r\n      \">\r\n                <div class=\"ms-1\" *ngIf=\"c.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 position-relative\">\r\n              <label class=\"note-label mb-2\">Company Logo</label>\r\n              <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploacompanyImage($event)\" class=\"d-none\" />\r\n              <input [(ngModel)]=\"fileNameCompany\" [ngModelOptions]=\"{ standalone: true }\" readonly type=\"text\"\r\n                class=\"form-control pe-5\" placeholder=\"Upload Company Logo\" (click)=\"uploadFile.click()\" />\r\n              <small class=\"text-muted d-block\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n              <img *ngIf=\"!isLogoLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n              <div *ngIf=\"isLogoLoading\" class=\"upload-spinner\">\r\n                <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n              </div>\r\n            </div>\r\n            <div class=\"form-group col-sm-12 col-md-4\">\r\n              <div class=\"image-wrapper\">\r\n                <img *ngIf=\"previewCompanyUrl\" [src]=\"previewCompanyUrl\" class=\"preview-image mt-2\" />\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n\r\n    <!-- User Information -->\r\n    <h2 style=\"margin-top: 30px;\">User Information</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<span class=\"req\">*</span></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<span class=\"req\">*</span></label>\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            <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          </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<span class=\"req\">*</span></label>\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            <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        </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<span class=\"req\">*</span></label>\r\n            <im-address-verify-field formControlName=\"address1\" inputId=\"address1\" [name]=\"'random-address-' + randomId\"\r\n              autocompleteAttr=\"new-address-view\" placeholder=\"Home Address 1\" [options]=\"options\"\r\n              [invalid]=\"u.address1.invalid && (u.address1.touched || u.address1.dirty)\"\r\n              [initialLat]=\"u.latitude.value\" [initialLng]=\"u.longitude.value\"\r\n              (addressResolved)=\"onUserAddressResolved($event)\"\r\n              (manualEdit)=\"onUserAddressManualEdit()\"></im-address-verify-field>\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.address1.invalid &&\r\n        (u.address1.touched || u.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City<span class=\"req\">*</span></label>\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            <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          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">State<span class=\"req\">*</span></label>\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            <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        </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\">Zip Code<span class=\"req\">*</span></label>\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            <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<span class=\"req\">*</span></label>\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            <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<span class=\"req\">*</span></label>\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, 'user')\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.phoneNumber.invalid &&\r\n          (u.phoneNumber.touched || u.phoneNumber.dirty)\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 class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.pattern\">\r\n                Phone Number must be 10 digits\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n            <label class=\"note-label mb-2\">Years of experience<span class=\"req\">*</span></label>\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            <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          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Job Title<span class=\"req\">*</span></label>\r\n            <ng-select class=\"w-100 custom-ng-select job-title-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            <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg\" (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            <small class=\"text-muted d-block\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n            <img *ngIf=\"!isImageLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n            <div *ngIf=\"isImageLoading\" class=\"upload-spinner\">\r\n              <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Industry</label>\r\n            <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              <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              <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            </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              <img *ngIf=\"previewUrl\" [src]=\"cloudfrontUrl+previewUrl\" class=\"preview-image mt-2\" />\r\n            </div>\r\n            <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n              <div>{{ userError }}</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n\r\n    <div class=\"actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">\r\n        <button type=\"button\" class=\"primary ct-btn\"\r\n          [disabled]=\"showLoader || companyForm.invalid || userForm.invalid\"\r\n          [ng2-loading]=\"showLoader\"\r\n          (click)=\"saveFinal()\">\r\n          Continue\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n  </ng-container>\r\n\r\n</div>\r\n", styles: [".provider-layout{display:flex;flex-direction:column}.provider-company-first{order:-1}.section-locked{pointer-events:none;opacity:.45;filter:blur(1.5px);-webkit-user-select:none;user-select:none}.preview-image{width:250px;height:100px;object-fit:contain;margin-top:5px;border-radius:8px;border:1px solid #e2e8f0}.upload-icon-resume{position:absolute;right:25px;top:17px;width:18px;height:18px;cursor:pointer;opacity:.6;transition:all .2s ease}.upload-icon-resume:hover{opacity:1}.upload-icon{position:absolute;right:25px;top:45px;width:18px;height:18px;cursor:pointer;opacity:.6;transition:all .2s ease}.upload-icon:hover{opacity:1}::ng-deep .ng-select .ng-select-container{min-height:42px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:14px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container:hover{border-color:#69707d}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-top:3px;font-size:14px;color:#69707d}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{font-size:14px;color:#69707d}::ng-deep .custom-ng-select.ng-select-multiple .ng-select-container{min-height:42px!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:14px!important}::ng-deep .job-title-select.ng-select-multiple .ng-select-container{height:42px!important}::ng-deep .job-title-select.ng-select-multiple .ng-value-container{flex-wrap:nowrap!important;overflow:hidden!important}.form-control{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box}.form-control:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.form-control::placeholder{color:#69707d}.form-control.is-invalid{border-color:#ef4444}::ng-deep im-address-verify-field .im-avf__input{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease}::ng-deep im-address-verify-field .im-avf__input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}::ng-deep im-address-verify-field .im-avf__input.is-invalid{border-color:#ef4444}.role-selection-container{max-width:950px;margin:0 auto;min-height:300px;padding:28px 24px;background:#fff}.role-selection-container h2{font-size:18px;font-weight:700;color:#1e293b;margin-bottom:4px}.role-selection-container .note{font-size:14px;color:#69707d;margin-bottom:20px}.role-selection-container .note-label{font-size:13px;font-weight:700;color:#69707d;letter-spacing:.05em;padding-left:0;display:block;margin-bottom:6px}.role-selection-container .note-label .req{color:#ef4444}.role-selection-container .dropdown-wrapper{display:flex;gap:8px;margin-bottom:16px}.role-selection-container .dropdown-wrapper select{flex:1;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease}.role-selection-container .dropdown-wrapper select:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.role-selection-container .dropdown-wrapper .add-btn{height:42px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .dropdown-wrapper .add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.role-selection-container .dropdown-wrapper .add-btn:active{transform:translateY(0)}.role-selection-container .dropdown-wrapper .add-btn:disabled{background:#69707d;cursor:not-allowed;transform:none}.role-selection-container .selected-roles{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.role-selection-container .selected-roles .role-card{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:8px;background:#ebf2f9;border:1px solid rgba(64,119,173,.2);color:#2d5a8a}.role-selection-container .selected-roles .role-card .remove-btn{background:none;border:none;font-size:1.1rem;font-weight:700;cursor:pointer;color:#ef4444;min-width:auto;height:auto;padding:0 4px;transition:all .2s ease}.role-selection-container .selected-roles .role-card .remove-btn:hover{opacity:.75}.role-selection-container .navigation-buttons{display:flex;justify-content:flex-end;gap:12px;margin-top:48px;margin-bottom:32px}.role-selection-container .navigation-buttons .back{height:42px;min-width:130px;padding:10px 22px;background:#fff;color:#69707d;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .navigation-buttons .back:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.role-selection-container .navigation-buttons .next{height:42px;min-width:130px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .navigation-buttons .next:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.role-selection-container .navigation-buttons .next:active{transform:translateY(0)}.role-selection-container .navigation-buttons .next:disabled{background:#69707d;cursor:not-allowed;transform:none}.image-wrapper{position:relative;width:150px;height:150px}.resume-wrapper{position:relative;width:550px;height:1px}.upload-spinner{position:absolute;right:25px;top:45px;width:18px;height:18px;display:flex;align-items:center;justify-content:center}.spinner-resume{width:36px;height:36px;border:3px solid #e2e8f0;border-top:3px solid #4077AD;border-radius:50%;position:absolute;top:-32%;left:99%;margin-top:-51px;margin-left:-20px;animation:spin .8s 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;padding:28px 24px;background:#fff}.producer-type-container h2{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.producer-type-container p{font-size:14px;color:#69707d;margin-bottom:20px}.producer-type-container .job-list{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}.producer-type-container .job-list .job-item{padding:12px 16px;font-size:15px;border:1.5px solid #e2e8f0;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:8px;background:#fff;color:#1e293b;transition:all .2s ease;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.producer-type-container .job-list .job-item:hover{border-color:#4077ad;background:#ebf2f9}.producer-type-container .job-list .job-item.selected{border-color:#4077ad;background:#ebf2f9;color:#2d5a8a;font-weight:600}.producer-type-container .job-list .job-item .plus{font-weight:700;color:#4077ad}.producer-type-container .navigation-buttons{display:flex;justify-content:flex-end;gap:12px;margin:40px 0}.producer-type-container .navigation-buttons .back{height:42px;min-width:130px;padding:10px 22px;background:#fff;color:#69707d;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.producer-type-container .navigation-buttons .back:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.producer-type-container .navigation-buttons .next{height:42px;min-width:130px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.producer-type-container .navigation-buttons .next:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.producer-type-container .navigation-buttons .next:active{transform:translateY(0)}.producer-type-container .navigation-buttons .next:disabled{background:#69707d;cursor:not-allowed;transform:none}.actions{display:flex;justify-content:space-between;margin:48px 0 28px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:5px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff}button.primary:hover{background:#2d5a8a;transform:translateY(-1px)}button.primary:active{transform:translateY(0)}button.secondary{background:#69707d;color:#fff;border:1.5px solid #69707D}button.secondary:hover{border-color:#565c66;color:#fff;background:#565c66}.right-actions button.secondary{background:#f2f4fa;color:#69707d;border:1.5px solid #F2F4FA}.right-actions button.secondary:hover{border-color:#e4e8f2;color:#69707d;background:#e4e8f2}button:disabled{background:#69707d;cursor:not-allowed;transform:none}@media screen and (max-width: 767px){h2{font-size:18px}select,.form-control{font-size:16px}.actions{margin:16px 0;flex-direction:column-reverse;gap:8px}.res{flex-direction:column-reverse}.upload-spinner{right:20px;top:45px}.spinner-resume{width:24px;height:24px;top:-22%;left:32%}.ct-btn{width:100%;margin-top:32px}button,.resume-wrapper{width:100%}.role-selection-container .navigation-buttons,.producer-type-container .navigation-buttons{margin-top:24px;margin-bottom:16px}}\n"] }]
         }], ctorParameters: () => [{ type: CredentialingStore }, { type: ProvidersService }, { type: UserService }, { type: UserDocumentService }, { type: i2.Router }, { type: IndustryService }, { type: UserDetailService }, { type: FileService }, { type: i1$4.TokenService }, { type: i1$4.RoleContextService }, { type: FrontEndProvidersService }, { type: i7.FormBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { backToParent: [{
                 type: Output
             }], providerSaved: [{
@@ -36165,15 +36159,16 @@ class ProfessionComponent {
     skip() {
         this.store.nextStep();
     }
-    continue() {
+    async saveAndContinue() {
+        await this.submitProfessions();
         this.store.nextStep();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfessionComponent, deps: [{ token: CredentialingStore }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ProfessionComponent, isStandalone: false, selector: "app-profession", inputs: { providerId: "providerId", providerName: "providerName" }, ngImport: i0, template: "<div class=\"step-card\">\r\n  <div class=\"step-card-header\">\r\n    <div class=\"step-card-header-icon\">\r\n      <img src=\"/assets/images/icons/briefcase-fill.svg\" alt=\"profession\" width=\"22\" height=\"22\" />\r\n    </div>\r\n    <div>\r\n      <h3 class=\"step-card-title\">Profession</h3>\r\n      <p class=\"step-card-subtitle\">Pick the professions that apply to you, or add your own</p>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"step-card-body\">\r\n    <div class=\"field-section\">\r\n      <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n        <div class=\"d-flex align-items-center gap-2 section-header-title\">\r\n          <span *ngIf=\"selectedProfessionCount > 0\" class=\"badge border section-flag bg-warning-subtle text-warning\">\r\n            {{ selectedProfessionCount }} selected\r\n          </span>\r\n        </div>\r\n        <button type=\"button\" class=\"btn btn-sm btn-primary px-4\"\r\n          [disabled]=\"selectedProfessionCount === 0 || isSavingProfessionsTable\"\r\n          (click)=\"submitProfessions()\">\r\n          <span *ngIf=\"isSavingProfessionsTable\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingProfessionsTable ? 'Saving...' : professionSubmitLabel }}\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"mb-3\">\r\n        <input type=\"text\" class=\"form-control profession-search-input\" placeholder=\"Search or Add Profession\"\r\n          [(ngModel)]=\"professionSearchQry\" name=\"professionSearchQry\"\r\n          (keydown.enter)=\"createManualProfessionRow()\" />\r\n      </div>\r\n\r\n      <div class=\"bg-white border rounded shadow-sm profession-accordion\">\r\n        <div class=\"profession-acc-columns\">\r\n          <span></span>\r\n          <span>Profession Name</span>\r\n          <span>Group</span>\r\n          <span>Type</span>\r\n          <span></span>\r\n        </div>\r\n\r\n        <ng-container *ngFor=\"let p of filteredProfessionTypes; trackBy: trackByProfessionId\">\r\n          <div class=\"profession-acc-item\" [class.profession-row-selected]=\"getProfessionSelection(p.id).selected\">\r\n            <div class=\"profession-acc-header\" (click)=\"toggleProfessionRow(p, $event)\">\r\n              <div class=\"text-center\" (click)=\"$event.stopPropagation()\">\r\n                <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"getProfessionSelection(p.id).selected\"\r\n                  (change)=\"onProfessionRowCheck(p, $event)\" />\r\n              </div>\r\n              <div class=\"profession-acc-name\">\r\n                {{ p.professionName }}\r\n                <span *ngIf=\"isProfessionSaved(p.id)\" class=\"badge border bg-success-subtle text-success ms-1\">Saved</span>\r\n              </div>\r\n              <div (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\r\n                <ng-container *ngIf=\"p.isManual; else groupText\">\r\n                  <ng-select class=\"profession-inline-select\" [items]=\"professionGroupOptions\" [ngModel]=\"p.professionGroup\"\r\n                    (ngModelChange)=\"setManualProfessionGroup(p, $event)\" [name]=\"'manualGroup-' + p.id\"\r\n                    placeholder=\"Select group\" [clearable]=\"false\">\r\n                  </ng-select>\r\n                </ng-container>\r\n                <ng-template #groupText>{{ p.professionGroup || '\u2013' }}</ng-template>\r\n              </div>\r\n              <div (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\r\n                <ng-container *ngIf=\"p.isManual; else typeText\">\r\n                  <ng-select class=\"profession-inline-select\" [items]=\"professionTypeOptions\" [ngModel]=\"p.residentialCommercial\"\r\n                    (ngModelChange)=\"setManualProfessionType(p, $event)\" [name]=\"'manualType-' + p.id\"\r\n                    placeholder=\"Select type\" [clearable]=\"false\">\r\n                  </ng-select>\r\n                </ng-container>\r\n                <ng-template #typeText>{{ p.residentialCommercial || '\u2013' }}</ng-template>\r\n              </div>\r\n              <button type=\"button\" class=\"profession-acc-chevron-btn\"\r\n                [attr.aria-label]=\"getProfessionSelection(p.id).selected ? 'Collapse' : 'Expand'\">\r\n                <svg class=\"profession-acc-chevron\" [class.profession-acc-chevron--open]=\"getProfessionSelection(p.id).selected\"\r\n                  width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n                  stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                  <polyline points=\"6 9 12 15 18 9\" />\r\n                </svg>\r\n              </button>\r\n            </div>\r\n\r\n            <div class=\"profession-acc-body\" *ngIf=\"getProfessionSelection(p.id).selected\">\r\n              <div class=\"profession-acc-panel\">\r\n                <div *ngIf=\"p.isManual && !isManualRowReady(p.id)\" class=\"small text-danger mb-3\">\r\n                  Select a Group and Type above to enable saving this profession.\r\n                </div>\r\n                <div class=\"profession-acc-fields\">\r\n                  <div class=\"profession-acc-field\">\r\n                    <label class=\"small text-muted d-block mb-1\">Self Ability Rating</label>\r\n                    <div class=\"profession-acc-stars\">\r\n                      <span *ngFor=\"let s of [1,2,3,4,5]\" class=\"fs-5\" style=\"cursor: pointer;\"\r\n                        (click)=\"setProfessionRowStars(p, s)\"\r\n                        [class.text-warning]=\"(getProfessionSelection(p.id).starRating || 0) / 2 >= s\"\r\n                        [class.text-muted]=\"(getProfessionSelection(p.id).starRating || 0) / 2 < s\">\u2605</span>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"profession-acc-field\">\r\n                    <label class=\"small text-muted d-block mb-1\">Years of Experience</label>\r\n                    <div class=\"d-flex align-items-center gap-2\">\r\n                      <input type=\"number\" class=\"form-control form-control-sm profession-acc-year-input\" min=\"0\" max=\"30\"\r\n                        [(ngModel)]=\"getProfessionSelection(p.id).year\" [name]=\"'profYear-' + p.id\" />\r\n                      <span class=\"small text-muted\">Yrs</span>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"profession-acc-field profession-acc-field--visibility\">\r\n                    <label class=\"small text-muted d-block mb-1\">Visibility</label>\r\n                    <input type=\"checkbox\" class=\"profession-visibility-checkbox\" [(ngModel)]=\"getProfessionSelection(p.id).profileVisibility\"\r\n                      [name]=\"'profVis-' + p.id\" />\r\n                  </div>\r\n                  <div class=\"profession-acc-field profession-acc-field--notes\">\r\n                    <label class=\"small text-muted d-block mb-1\">Additional Details</label>\r\n                    <textarea rows=\"3\" class=\"form-control form-control-sm profession-notes-input\" [(ngModel)]=\"getProfessionSelection(p.id).notes\"\r\n                      [name]=\"'profNotes-' + p.id\" placeholder=\"Additional Details\"></textarea>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <div *ngIf=\"hasNoProfessionMatches\" class=\"text-center small py-3\">\r\n          <span class=\"text-muted\">No professions found for \"{{ professionSearchQry?.trim() }}\".</span>\r\n          <button type=\"button\" class=\"btn btn-sm btn-primary ms-2\" (click)=\"createManualProfessionRow()\">\r\n            Add \"{{ professionSearchQry?.trim() }}\"\r\n          </button>\r\n        </div>\r\n        <div *ngIf=\"!professionSearchQry?.trim() && filteredProfessionTypes.length === 0\"\r\n          class=\"text-center text-muted small py-3\">\r\n          No professions found.\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"actions\">\r\n  <button type=\"button\" class=\"secondary\" (click)=\"back()\">\r\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n    Back\r\n  </button>\r\n  <div class=\"right-actions\">\r\n    <button type=\"button\" class=\"secondary\" *ngIf=\"selectedProfessionCount === 0\" (click)=\"skip()\">\r\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n      Skip\r\n    </button>\r\n    <button type=\"button\" class=\"primary\" (click)=\"continue()\">\r\n      Continue\r\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".profession-search-input{font-size:12px}.profession-search-input::placeholder{font-size:12px}.profession-row-selected{background-color:#f2f4fa}.profession-row-selected .profession-acc-header:hover{background-color:#eceffa}.profession-visibility-checkbox{all:revert;width:16px!important;height:16px!important;min-width:16px!important;max-width:16px!important;margin:4px auto 0!important;padding:0!important;position:static!important;float:none!important;vertical-align:middle!important;background-image:none!important;transform:none!important}.profession-accordion,.profession-accordion label.small{font-size:12px;color:#69707d}.profession-acc-columns,.profession-acc-header{display:grid;grid-template-columns:36px 2fr 1fr 1fr 32px;align-items:center;gap:12px}.profession-acc-columns{padding:12px 16px;border-bottom:1px solid #e9ecef;font-size:13px;font-weight:600;color:#69707d;text-transform:uppercase}@media (max-width: 767.98px){.profession-acc-columns{display:none}}.profession-acc-item{border-bottom:1px solid #f1f3f5}.profession-acc-item:last-child{border-bottom:none}.profession-acc-header{padding:12px 16px;cursor:pointer;transition:background-color .15s ease}.profession-acc-header:hover{background-color:#f8f9fb}.profession-acc-name{color:#69707d}.profession-acc-chevron-btn{background:transparent;border:none;padding:4px;display:inline-flex;align-items:center;justify-content:center;color:#69707d}.profession-acc-chevron{transition:transform .2s ease}.profession-acc-chevron--open{transform:rotate(180deg)}.profession-acc-body{padding:0 16px 16px}.profession-acc-panel{background-color:#fff;border:1px solid #e9ecef;border-radius:8px;padding:16px 20px}.profession-acc-fields{display:flex;flex-wrap:wrap;align-items:flex-start;gap:32px}.profession-acc-field{min-width:100px}.profession-acc-field--visibility{display:flex;flex-direction:column;align-items:center;width:90px;flex-shrink:0}.profession-acc-field--visibility label{text-align:center;width:100%}.profession-acc-field--notes{flex:1 1 220px;margin:0}.profession-acc-stars{font-size:1.05rem;letter-spacing:2px}.profession-acc-year-input{width:72px}.profession-inline-select{min-width:160px;font-size:12px}.profession-inline-select ::ng-deep .ng-select-container{min-height:32px!important;height:32px!important}::ng-deep .profession-inline-select .ng-option,::ng-deep .profession-inline-select .ng-placeholder{font-size:12px}.profession-notes-input{min-height:76px;resize:vertical}.section-flag{font-weight:600}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:5px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px)}button.primary:active{transform:translateY(0)}button.secondary{background:#69707d;color:#fff;border:1.5px solid #69707D;padding:10px 22px}button.secondary:hover{border-color:#565c66;color:#fff;background:#565c66}.right-actions button.secondary{background:#f2f4fa;color:#69707d;border:1.5px solid #F2F4FA}.right-actions button.secondary:hover{border-color:#e4e8f2;color:#69707d;background:#e4e8f2}button:disabled{background:#69707d;cursor:not-allowed;transform:none;box-shadow:none}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:16px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:14px;color:#69707d;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:12px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:5px;border:1.5px solid #e2e8f0;background:#fff;color:#69707d;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.detail-row{display:flex;flex-wrap:wrap;column-gap:22px;row-gap:6px;margin-bottom:8px}.detail-item{display:flex;align-items:baseline;gap:6px;white-space:nowrap}.detail-label{font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:#4077ad}.detail-value{font-size:12.5px;font-weight:600;color:#1e293b}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:5px;box-shadow:none}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#69707d;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@media screen and (max-width: 767px){.step-card-header{padding:14px 16px}.step-card-body{padding:16px 16px 8px}.step-toast{right:12px;bottom:16px;min-width:calc(100vw - 24px);max-width:calc(100vw - 24px)}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.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: i7.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i7.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i7.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ProfessionComponent, isStandalone: false, selector: "app-profession", inputs: { providerId: "providerId", providerName: "providerName" }, ngImport: i0, template: "<div class=\"step-card\">\r\n  <div class=\"step-card-header\">\r\n    <div class=\"step-card-header-icon\">\r\n      <img src=\"/assets/images/icons/briefcase-fill.svg\" alt=\"profession\" width=\"22\" height=\"22\" />\r\n    </div>\r\n    <div>\r\n      <h3 class=\"step-card-title\">Profession</h3>\r\n      <p class=\"step-card-subtitle\">Pick the professions that apply to you, or add your own</p>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"step-card-body\">\r\n    <div class=\"field-section\">\r\n      <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n        <div class=\"d-flex align-items-center gap-2 section-header-title\">\r\n          <span *ngIf=\"selectedProfessionCount > 0\" class=\"badge border section-flag bg-warning-subtle text-warning\">\r\n            {{ selectedProfessionCount }} selected\r\n          </span>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"mb-3\">\r\n        <input type=\"text\" class=\"form-control profession-search-input\" placeholder=\"Search or Add Profession\"\r\n          [(ngModel)]=\"professionSearchQry\" name=\"professionSearchQry\"\r\n          (keydown.enter)=\"createManualProfessionRow()\" />\r\n      </div>\r\n\r\n      <div class=\"bg-white border rounded shadow-sm profession-accordion\">\r\n        <div class=\"profession-acc-columns\">\r\n          <span></span>\r\n          <span>Profession Name</span>\r\n          <span>Group</span>\r\n          <span>Type</span>\r\n          <span></span>\r\n        </div>\r\n\r\n        <ng-container *ngFor=\"let p of filteredProfessionTypes; trackBy: trackByProfessionId\">\r\n          <div class=\"profession-acc-item\" [class.profession-row-selected]=\"getProfessionSelection(p.id).selected\">\r\n            <div class=\"profession-acc-header\" (click)=\"toggleProfessionRow(p, $event)\">\r\n              <div class=\"text-center\" (click)=\"$event.stopPropagation()\">\r\n                <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"getProfessionSelection(p.id).selected\"\r\n                  (change)=\"onProfessionRowCheck(p, $event)\" />\r\n              </div>\r\n              <div class=\"profession-acc-name\">\r\n                {{ p.professionName }}\r\n                <span *ngIf=\"isProfessionSaved(p.id)\" class=\"badge border bg-success-subtle text-success ms-1\">Saved</span>\r\n              </div>\r\n              <div (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\r\n                <ng-container *ngIf=\"p.isManual; else groupText\">\r\n                  <ng-select class=\"profession-inline-select\" [items]=\"professionGroupOptions\" [ngModel]=\"p.professionGroup\"\r\n                    (ngModelChange)=\"setManualProfessionGroup(p, $event)\" [name]=\"'manualGroup-' + p.id\"\r\n                    placeholder=\"Select group\" [clearable]=\"false\">\r\n                  </ng-select>\r\n                </ng-container>\r\n                <ng-template #groupText>{{ p.professionGroup || '\u2013' }}</ng-template>\r\n              </div>\r\n              <div (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\r\n                <ng-container *ngIf=\"p.isManual; else typeText\">\r\n                  <ng-select class=\"profession-inline-select\" [items]=\"professionTypeOptions\" [ngModel]=\"p.residentialCommercial\"\r\n                    (ngModelChange)=\"setManualProfessionType(p, $event)\" [name]=\"'manualType-' + p.id\"\r\n                    placeholder=\"Select type\" [clearable]=\"false\">\r\n                  </ng-select>\r\n                </ng-container>\r\n                <ng-template #typeText>{{ p.residentialCommercial || '\u2013' }}</ng-template>\r\n              </div>\r\n              <button type=\"button\" class=\"profession-acc-chevron-btn\"\r\n                [attr.aria-label]=\"getProfessionSelection(p.id).selected ? 'Collapse' : 'Expand'\">\r\n                <svg class=\"profession-acc-chevron\" [class.profession-acc-chevron--open]=\"getProfessionSelection(p.id).selected\"\r\n                  width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n                  stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                  <polyline points=\"6 9 12 15 18 9\" />\r\n                </svg>\r\n              </button>\r\n            </div>\r\n\r\n            <div class=\"profession-acc-body\" *ngIf=\"getProfessionSelection(p.id).selected\">\r\n              <div class=\"profession-acc-panel\">\r\n                <div *ngIf=\"p.isManual && !isManualRowReady(p.id)\" class=\"small text-danger mb-3\">\r\n                  Select a Group and Type above to enable saving this profession.\r\n                </div>\r\n                <div class=\"profession-acc-fields\">\r\n                  <div class=\"profession-acc-field\">\r\n                    <label class=\"small text-muted d-block mb-1\">Self Ability Rating</label>\r\n                    <div class=\"profession-acc-stars\">\r\n                      <span *ngFor=\"let s of [1,2,3,4,5]\" class=\"fs-5\" style=\"cursor: pointer;\"\r\n                        (click)=\"setProfessionRowStars(p, s)\"\r\n                        [class.text-warning]=\"(getProfessionSelection(p.id).starRating || 0) / 2 >= s\"\r\n                        [class.text-muted]=\"(getProfessionSelection(p.id).starRating || 0) / 2 < s\">\u2605</span>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"profession-acc-field\">\r\n                    <label class=\"small text-muted d-block mb-1\">Years of Experience</label>\r\n                    <div class=\"d-flex align-items-center gap-2\">\r\n                      <input type=\"number\" class=\"form-control form-control-sm profession-acc-year-input\" min=\"0\" max=\"30\"\r\n                        [(ngModel)]=\"getProfessionSelection(p.id).year\" [name]=\"'profYear-' + p.id\" />\r\n                      <span class=\"small text-muted\">Yrs</span>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"profession-acc-field profession-acc-field--visibility\">\r\n                    <label class=\"small text-muted d-block mb-1\">Visibility</label>\r\n                    <input type=\"checkbox\" class=\"profession-visibility-checkbox\" [(ngModel)]=\"getProfessionSelection(p.id).profileVisibility\"\r\n                      [name]=\"'profVis-' + p.id\" />\r\n                  </div>\r\n                  <div class=\"profession-acc-field profession-acc-field--notes\">\r\n                    <label class=\"small text-muted d-block mb-1\">Additional Details</label>\r\n                    <textarea rows=\"3\" class=\"form-control form-control-sm profession-notes-input\" [(ngModel)]=\"getProfessionSelection(p.id).notes\"\r\n                      [name]=\"'profNotes-' + p.id\" placeholder=\"Additional Details\"></textarea>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <div *ngIf=\"hasNoProfessionMatches\" class=\"text-center small py-3\">\r\n          <span class=\"text-muted\">No professions found for \"{{ professionSearchQry?.trim() }}\".</span>\r\n          <button type=\"button\" class=\"btn btn-sm btn-primary ms-2\" (click)=\"createManualProfessionRow()\">\r\n            Add \"{{ professionSearchQry?.trim() }}\"\r\n          </button>\r\n        </div>\r\n        <div *ngIf=\"!professionSearchQry?.trim() && filteredProfessionTypes.length === 0\"\r\n          class=\"text-center text-muted small py-3\">\r\n          No professions found.\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"actions\">\r\n  <button type=\"button\" class=\"secondary\" (click)=\"back()\">\r\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n    Back\r\n  </button>\r\n  <div class=\"right-actions\">\r\n    <button type=\"button\" class=\"secondary\" *ngIf=\"selectedProfessionCount === 0\" (click)=\"skip()\">\r\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n      Skip\r\n    </button>\r\n    <button type=\"button\" class=\"primary\" *ngIf=\"selectedProfessionCount > 0\"\r\n      [disabled]=\"isSavingProfessionsTable\" (click)=\"saveAndContinue()\">\r\n      <span *ngIf=\"isSavingProfessionsTable\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n      <ng-container *ngIf=\"!isSavingProfessionsTable\">\r\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"/></svg>\r\n        Save &amp; Continue\r\n      </ng-container>\r\n      <ng-container *ngIf=\"isSavingProfessionsTable\">Saving...</ng-container>\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".profession-search-input{font-size:12px}.profession-search-input::placeholder{font-size:12px}.profession-row-selected{background-color:#f2f4fa}.profession-row-selected .profession-acc-header:hover{background-color:#eceffa}.profession-visibility-checkbox{all:revert;width:16px!important;height:16px!important;min-width:16px!important;max-width:16px!important;margin:4px auto 0!important;padding:0!important;position:static!important;float:none!important;vertical-align:middle!important;background-image:none!important;transform:none!important}.profession-accordion,.profession-accordion label.small{font-size:12px;color:#69707d}.profession-acc-columns,.profession-acc-header{display:grid;grid-template-columns:36px 2fr 1fr 1fr 32px;align-items:center;gap:12px}.profession-acc-columns{padding:12px 16px;border-bottom:1px solid #e9ecef;font-size:13px;font-weight:600;color:#69707d;text-transform:uppercase}@media (max-width: 767.98px){.profession-acc-columns{display:none}}.profession-acc-item{border-bottom:1px solid #f1f3f5}.profession-acc-item:last-child{border-bottom:none}.profession-acc-header{padding:12px 16px;cursor:pointer;transition:background-color .15s ease}.profession-acc-header:hover{background-color:#f8f9fb}.profession-acc-name{color:#69707d}.profession-acc-chevron-btn{background:transparent;border:none;padding:4px;display:inline-flex;align-items:center;justify-content:center;color:#69707d}.profession-acc-chevron{transition:transform .2s ease}.profession-acc-chevron--open{transform:rotate(180deg)}.profession-acc-body{padding:0 16px 16px}.profession-acc-panel{background-color:#fff;border:1px solid #e9ecef;border-radius:8px;padding:16px 20px}.profession-acc-fields{display:flex;flex-wrap:wrap;align-items:flex-start;gap:32px}.profession-acc-field{min-width:100px}.profession-acc-field--visibility{display:flex;flex-direction:column;align-items:center;width:90px;flex-shrink:0}.profession-acc-field--visibility label{text-align:center;width:100%}.profession-acc-field--notes{flex:1 1 220px;margin:0}.profession-acc-stars{font-size:1.05rem;letter-spacing:2px}.profession-acc-year-input{width:72px}.profession-inline-select{min-width:160px;font-size:12px}.profession-inline-select ::ng-deep .ng-select-container{min-height:32px!important;height:32px!important}::ng-deep .profession-inline-select .ng-option,::ng-deep .profession-inline-select .ng-placeholder{font-size:12px}.profession-notes-input{min-height:76px;resize:vertical}.section-flag{font-weight:600}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:5px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px)}button.primary:active{transform:translateY(0)}button.secondary{background:#69707d;color:#fff;border:1.5px solid #69707D;padding:10px 22px}button.secondary:hover{border-color:#565c66;color:#fff;background:#565c66}.right-actions button.secondary{background:#f2f4fa;color:#69707d;border:1.5px solid #F2F4FA}.right-actions button.secondary:hover{border-color:#e4e8f2;color:#69707d;background:#e4e8f2}button:disabled{background:#69707d;cursor:not-allowed;transform:none;box-shadow:none}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:16px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:14px;color:#69707d;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:12px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:5px;border:1.5px solid #e2e8f0;background:#fff;color:#69707d;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.detail-row{display:flex;flex-wrap:wrap;column-gap:22px;row-gap:6px;margin-bottom:8px}.detail-item{display:flex;align-items:baseline;gap:6px;white-space:nowrap}.detail-label{font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:#4077ad}.detail-value{font-size:12.5px;font-weight:600;color:#1e293b}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:5px;box-shadow:none}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#69707d;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@media screen and (max-width: 767px){.step-card-header{padding:14px 16px}.step-card-body{padding:16px 16px 8px}.step-toast{right:12px;bottom:16px;min-width:calc(100vw - 24px);max-width:calc(100vw - 24px)}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.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: i7.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i7.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i7.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfessionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-profession', standalone: false, template: "<div class=\"step-card\">\r\n  <div class=\"step-card-header\">\r\n    <div class=\"step-card-header-icon\">\r\n      <img src=\"/assets/images/icons/briefcase-fill.svg\" alt=\"profession\" width=\"22\" height=\"22\" />\r\n    </div>\r\n    <div>\r\n      <h3 class=\"step-card-title\">Profession</h3>\r\n      <p class=\"step-card-subtitle\">Pick the professions that apply to you, or add your own</p>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"step-card-body\">\r\n    <div class=\"field-section\">\r\n      <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n        <div class=\"d-flex align-items-center gap-2 section-header-title\">\r\n          <span *ngIf=\"selectedProfessionCount > 0\" class=\"badge border section-flag bg-warning-subtle text-warning\">\r\n            {{ selectedProfessionCount }} selected\r\n          </span>\r\n        </div>\r\n        <button type=\"button\" class=\"btn btn-sm btn-primary px-4\"\r\n          [disabled]=\"selectedProfessionCount === 0 || isSavingProfessionsTable\"\r\n          (click)=\"submitProfessions()\">\r\n          <span *ngIf=\"isSavingProfessionsTable\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingProfessionsTable ? 'Saving...' : professionSubmitLabel }}\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"mb-3\">\r\n        <input type=\"text\" class=\"form-control profession-search-input\" placeholder=\"Search or Add Profession\"\r\n          [(ngModel)]=\"professionSearchQry\" name=\"professionSearchQry\"\r\n          (keydown.enter)=\"createManualProfessionRow()\" />\r\n      </div>\r\n\r\n      <div class=\"bg-white border rounded shadow-sm profession-accordion\">\r\n        <div class=\"profession-acc-columns\">\r\n          <span></span>\r\n          <span>Profession Name</span>\r\n          <span>Group</span>\r\n          <span>Type</span>\r\n          <span></span>\r\n        </div>\r\n\r\n        <ng-container *ngFor=\"let p of filteredProfessionTypes; trackBy: trackByProfessionId\">\r\n          <div class=\"profession-acc-item\" [class.profession-row-selected]=\"getProfessionSelection(p.id).selected\">\r\n            <div class=\"profession-acc-header\" (click)=\"toggleProfessionRow(p, $event)\">\r\n              <div class=\"text-center\" (click)=\"$event.stopPropagation()\">\r\n                <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"getProfessionSelection(p.id).selected\"\r\n                  (change)=\"onProfessionRowCheck(p, $event)\" />\r\n              </div>\r\n              <div class=\"profession-acc-name\">\r\n                {{ p.professionName }}\r\n                <span *ngIf=\"isProfessionSaved(p.id)\" class=\"badge border bg-success-subtle text-success ms-1\">Saved</span>\r\n              </div>\r\n              <div (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\r\n                <ng-container *ngIf=\"p.isManual; else groupText\">\r\n                  <ng-select class=\"profession-inline-select\" [items]=\"professionGroupOptions\" [ngModel]=\"p.professionGroup\"\r\n                    (ngModelChange)=\"setManualProfessionGroup(p, $event)\" [name]=\"'manualGroup-' + p.id\"\r\n                    placeholder=\"Select group\" [clearable]=\"false\">\r\n                  </ng-select>\r\n                </ng-container>\r\n                <ng-template #groupText>{{ p.professionGroup || '\u2013' }}</ng-template>\r\n              </div>\r\n              <div (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\r\n                <ng-container *ngIf=\"p.isManual; else typeText\">\r\n                  <ng-select class=\"profession-inline-select\" [items]=\"professionTypeOptions\" [ngModel]=\"p.residentialCommercial\"\r\n                    (ngModelChange)=\"setManualProfessionType(p, $event)\" [name]=\"'manualType-' + p.id\"\r\n                    placeholder=\"Select type\" [clearable]=\"false\">\r\n                  </ng-select>\r\n                </ng-container>\r\n                <ng-template #typeText>{{ p.residentialCommercial || '\u2013' }}</ng-template>\r\n              </div>\r\n              <button type=\"button\" class=\"profession-acc-chevron-btn\"\r\n                [attr.aria-label]=\"getProfessionSelection(p.id).selected ? 'Collapse' : 'Expand'\">\r\n                <svg class=\"profession-acc-chevron\" [class.profession-acc-chevron--open]=\"getProfessionSelection(p.id).selected\"\r\n                  width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n                  stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                  <polyline points=\"6 9 12 15 18 9\" />\r\n                </svg>\r\n              </button>\r\n            </div>\r\n\r\n            <div class=\"profession-acc-body\" *ngIf=\"getProfessionSelection(p.id).selected\">\r\n              <div class=\"profession-acc-panel\">\r\n                <div *ngIf=\"p.isManual && !isManualRowReady(p.id)\" class=\"small text-danger mb-3\">\r\n                  Select a Group and Type above to enable saving this profession.\r\n                </div>\r\n                <div class=\"profession-acc-fields\">\r\n                  <div class=\"profession-acc-field\">\r\n                    <label class=\"small text-muted d-block mb-1\">Self Ability Rating</label>\r\n                    <div class=\"profession-acc-stars\">\r\n                      <span *ngFor=\"let s of [1,2,3,4,5]\" class=\"fs-5\" style=\"cursor: pointer;\"\r\n                        (click)=\"setProfessionRowStars(p, s)\"\r\n                        [class.text-warning]=\"(getProfessionSelection(p.id).starRating || 0) / 2 >= s\"\r\n                        [class.text-muted]=\"(getProfessionSelection(p.id).starRating || 0) / 2 < s\">\u2605</span>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"profession-acc-field\">\r\n                    <label class=\"small text-muted d-block mb-1\">Years of Experience</label>\r\n                    <div class=\"d-flex align-items-center gap-2\">\r\n                      <input type=\"number\" class=\"form-control form-control-sm profession-acc-year-input\" min=\"0\" max=\"30\"\r\n                        [(ngModel)]=\"getProfessionSelection(p.id).year\" [name]=\"'profYear-' + p.id\" />\r\n                      <span class=\"small text-muted\">Yrs</span>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"profession-acc-field profession-acc-field--visibility\">\r\n                    <label class=\"small text-muted d-block mb-1\">Visibility</label>\r\n                    <input type=\"checkbox\" class=\"profession-visibility-checkbox\" [(ngModel)]=\"getProfessionSelection(p.id).profileVisibility\"\r\n                      [name]=\"'profVis-' + p.id\" />\r\n                  </div>\r\n                  <div class=\"profession-acc-field profession-acc-field--notes\">\r\n                    <label class=\"small text-muted d-block mb-1\">Additional Details</label>\r\n                    <textarea rows=\"3\" class=\"form-control form-control-sm profession-notes-input\" [(ngModel)]=\"getProfessionSelection(p.id).notes\"\r\n                      [name]=\"'profNotes-' + p.id\" placeholder=\"Additional Details\"></textarea>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <div *ngIf=\"hasNoProfessionMatches\" class=\"text-center small py-3\">\r\n          <span class=\"text-muted\">No professions found for \"{{ professionSearchQry?.trim() }}\".</span>\r\n          <button type=\"button\" class=\"btn btn-sm btn-primary ms-2\" (click)=\"createManualProfessionRow()\">\r\n            Add \"{{ professionSearchQry?.trim() }}\"\r\n          </button>\r\n        </div>\r\n        <div *ngIf=\"!professionSearchQry?.trim() && filteredProfessionTypes.length === 0\"\r\n          class=\"text-center text-muted small py-3\">\r\n          No professions found.\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"actions\">\r\n  <button type=\"button\" class=\"secondary\" (click)=\"back()\">\r\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n    Back\r\n  </button>\r\n  <div class=\"right-actions\">\r\n    <button type=\"button\" class=\"secondary\" *ngIf=\"selectedProfessionCount === 0\" (click)=\"skip()\">\r\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n      Skip\r\n    </button>\r\n    <button type=\"button\" class=\"primary\" (click)=\"continue()\">\r\n      Continue\r\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".profession-search-input{font-size:12px}.profession-search-input::placeholder{font-size:12px}.profession-row-selected{background-color:#f2f4fa}.profession-row-selected .profession-acc-header:hover{background-color:#eceffa}.profession-visibility-checkbox{all:revert;width:16px!important;height:16px!important;min-width:16px!important;max-width:16px!important;margin:4px auto 0!important;padding:0!important;position:static!important;float:none!important;vertical-align:middle!important;background-image:none!important;transform:none!important}.profession-accordion,.profession-accordion label.small{font-size:12px;color:#69707d}.profession-acc-columns,.profession-acc-header{display:grid;grid-template-columns:36px 2fr 1fr 1fr 32px;align-items:center;gap:12px}.profession-acc-columns{padding:12px 16px;border-bottom:1px solid #e9ecef;font-size:13px;font-weight:600;color:#69707d;text-transform:uppercase}@media (max-width: 767.98px){.profession-acc-columns{display:none}}.profession-acc-item{border-bottom:1px solid #f1f3f5}.profession-acc-item:last-child{border-bottom:none}.profession-acc-header{padding:12px 16px;cursor:pointer;transition:background-color .15s ease}.profession-acc-header:hover{background-color:#f8f9fb}.profession-acc-name{color:#69707d}.profession-acc-chevron-btn{background:transparent;border:none;padding:4px;display:inline-flex;align-items:center;justify-content:center;color:#69707d}.profession-acc-chevron{transition:transform .2s ease}.profession-acc-chevron--open{transform:rotate(180deg)}.profession-acc-body{padding:0 16px 16px}.profession-acc-panel{background-color:#fff;border:1px solid #e9ecef;border-radius:8px;padding:16px 20px}.profession-acc-fields{display:flex;flex-wrap:wrap;align-items:flex-start;gap:32px}.profession-acc-field{min-width:100px}.profession-acc-field--visibility{display:flex;flex-direction:column;align-items:center;width:90px;flex-shrink:0}.profession-acc-field--visibility label{text-align:center;width:100%}.profession-acc-field--notes{flex:1 1 220px;margin:0}.profession-acc-stars{font-size:1.05rem;letter-spacing:2px}.profession-acc-year-input{width:72px}.profession-inline-select{min-width:160px;font-size:12px}.profession-inline-select ::ng-deep .ng-select-container{min-height:32px!important;height:32px!important}::ng-deep .profession-inline-select .ng-option,::ng-deep .profession-inline-select .ng-placeholder{font-size:12px}.profession-notes-input{min-height:76px;resize:vertical}.section-flag{font-weight:600}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:5px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px)}button.primary:active{transform:translateY(0)}button.secondary{background:#69707d;color:#fff;border:1.5px solid #69707D;padding:10px 22px}button.secondary:hover{border-color:#565c66;color:#fff;background:#565c66}.right-actions button.secondary{background:#f2f4fa;color:#69707d;border:1.5px solid #F2F4FA}.right-actions button.secondary:hover{border-color:#e4e8f2;color:#69707d;background:#e4e8f2}button:disabled{background:#69707d;cursor:not-allowed;transform:none;box-shadow:none}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:16px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:14px;color:#69707d;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:12px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:5px;border:1.5px solid #e2e8f0;background:#fff;color:#69707d;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.detail-row{display:flex;flex-wrap:wrap;column-gap:22px;row-gap:6px;margin-bottom:8px}.detail-item{display:flex;align-items:baseline;gap:6px;white-space:nowrap}.detail-label{font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:#4077ad}.detail-value{font-size:12.5px;font-weight:600;color:#1e293b}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:5px;box-shadow:none}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#69707d;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@media screen and (max-width: 767px){.step-card-header{padding:14px 16px}.step-card-body{padding:16px 16px 8px}.step-toast{right:12px;bottom:16px;min-width:calc(100vw - 24px);max-width:calc(100vw - 24px)}}\n"] }]
+            args: [{ selector: 'app-profession', standalone: false, template: "<div class=\"step-card\">\r\n  <div class=\"step-card-header\">\r\n    <div class=\"step-card-header-icon\">\r\n      <img src=\"/assets/images/icons/briefcase-fill.svg\" alt=\"profession\" width=\"22\" height=\"22\" />\r\n    </div>\r\n    <div>\r\n      <h3 class=\"step-card-title\">Profession</h3>\r\n      <p class=\"step-card-subtitle\">Pick the professions that apply to you, or add your own</p>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"step-card-body\">\r\n    <div class=\"field-section\">\r\n      <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n        <div class=\"d-flex align-items-center gap-2 section-header-title\">\r\n          <span *ngIf=\"selectedProfessionCount > 0\" class=\"badge border section-flag bg-warning-subtle text-warning\">\r\n            {{ selectedProfessionCount }} selected\r\n          </span>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"mb-3\">\r\n        <input type=\"text\" class=\"form-control profession-search-input\" placeholder=\"Search or Add Profession\"\r\n          [(ngModel)]=\"professionSearchQry\" name=\"professionSearchQry\"\r\n          (keydown.enter)=\"createManualProfessionRow()\" />\r\n      </div>\r\n\r\n      <div class=\"bg-white border rounded shadow-sm profession-accordion\">\r\n        <div class=\"profession-acc-columns\">\r\n          <span></span>\r\n          <span>Profession Name</span>\r\n          <span>Group</span>\r\n          <span>Type</span>\r\n          <span></span>\r\n        </div>\r\n\r\n        <ng-container *ngFor=\"let p of filteredProfessionTypes; trackBy: trackByProfessionId\">\r\n          <div class=\"profession-acc-item\" [class.profession-row-selected]=\"getProfessionSelection(p.id).selected\">\r\n            <div class=\"profession-acc-header\" (click)=\"toggleProfessionRow(p, $event)\">\r\n              <div class=\"text-center\" (click)=\"$event.stopPropagation()\">\r\n                <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"getProfessionSelection(p.id).selected\"\r\n                  (change)=\"onProfessionRowCheck(p, $event)\" />\r\n              </div>\r\n              <div class=\"profession-acc-name\">\r\n                {{ p.professionName }}\r\n                <span *ngIf=\"isProfessionSaved(p.id)\" class=\"badge border bg-success-subtle text-success ms-1\">Saved</span>\r\n              </div>\r\n              <div (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\r\n                <ng-container *ngIf=\"p.isManual; else groupText\">\r\n                  <ng-select class=\"profession-inline-select\" [items]=\"professionGroupOptions\" [ngModel]=\"p.professionGroup\"\r\n                    (ngModelChange)=\"setManualProfessionGroup(p, $event)\" [name]=\"'manualGroup-' + p.id\"\r\n                    placeholder=\"Select group\" [clearable]=\"false\">\r\n                  </ng-select>\r\n                </ng-container>\r\n                <ng-template #groupText>{{ p.professionGroup || '\u2013' }}</ng-template>\r\n              </div>\r\n              <div (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\r\n                <ng-container *ngIf=\"p.isManual; else typeText\">\r\n                  <ng-select class=\"profession-inline-select\" [items]=\"professionTypeOptions\" [ngModel]=\"p.residentialCommercial\"\r\n                    (ngModelChange)=\"setManualProfessionType(p, $event)\" [name]=\"'manualType-' + p.id\"\r\n                    placeholder=\"Select type\" [clearable]=\"false\">\r\n                  </ng-select>\r\n                </ng-container>\r\n                <ng-template #typeText>{{ p.residentialCommercial || '\u2013' }}</ng-template>\r\n              </div>\r\n              <button type=\"button\" class=\"profession-acc-chevron-btn\"\r\n                [attr.aria-label]=\"getProfessionSelection(p.id).selected ? 'Collapse' : 'Expand'\">\r\n                <svg class=\"profession-acc-chevron\" [class.profession-acc-chevron--open]=\"getProfessionSelection(p.id).selected\"\r\n                  width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n                  stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                  <polyline points=\"6 9 12 15 18 9\" />\r\n                </svg>\r\n              </button>\r\n            </div>\r\n\r\n            <div class=\"profession-acc-body\" *ngIf=\"getProfessionSelection(p.id).selected\">\r\n              <div class=\"profession-acc-panel\">\r\n                <div *ngIf=\"p.isManual && !isManualRowReady(p.id)\" class=\"small text-danger mb-3\">\r\n                  Select a Group and Type above to enable saving this profession.\r\n                </div>\r\n                <div class=\"profession-acc-fields\">\r\n                  <div class=\"profession-acc-field\">\r\n                    <label class=\"small text-muted d-block mb-1\">Self Ability Rating</label>\r\n                    <div class=\"profession-acc-stars\">\r\n                      <span *ngFor=\"let s of [1,2,3,4,5]\" class=\"fs-5\" style=\"cursor: pointer;\"\r\n                        (click)=\"setProfessionRowStars(p, s)\"\r\n                        [class.text-warning]=\"(getProfessionSelection(p.id).starRating || 0) / 2 >= s\"\r\n                        [class.text-muted]=\"(getProfessionSelection(p.id).starRating || 0) / 2 < s\">\u2605</span>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"profession-acc-field\">\r\n                    <label class=\"small text-muted d-block mb-1\">Years of Experience</label>\r\n                    <div class=\"d-flex align-items-center gap-2\">\r\n                      <input type=\"number\" class=\"form-control form-control-sm profession-acc-year-input\" min=\"0\" max=\"30\"\r\n                        [(ngModel)]=\"getProfessionSelection(p.id).year\" [name]=\"'profYear-' + p.id\" />\r\n                      <span class=\"small text-muted\">Yrs</span>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"profession-acc-field profession-acc-field--visibility\">\r\n                    <label class=\"small text-muted d-block mb-1\">Visibility</label>\r\n                    <input type=\"checkbox\" class=\"profession-visibility-checkbox\" [(ngModel)]=\"getProfessionSelection(p.id).profileVisibility\"\r\n                      [name]=\"'profVis-' + p.id\" />\r\n                  </div>\r\n                  <div class=\"profession-acc-field profession-acc-field--notes\">\r\n                    <label class=\"small text-muted d-block mb-1\">Additional Details</label>\r\n                    <textarea rows=\"3\" class=\"form-control form-control-sm profession-notes-input\" [(ngModel)]=\"getProfessionSelection(p.id).notes\"\r\n                      [name]=\"'profNotes-' + p.id\" placeholder=\"Additional Details\"></textarea>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <div *ngIf=\"hasNoProfessionMatches\" class=\"text-center small py-3\">\r\n          <span class=\"text-muted\">No professions found for \"{{ professionSearchQry?.trim() }}\".</span>\r\n          <button type=\"button\" class=\"btn btn-sm btn-primary ms-2\" (click)=\"createManualProfessionRow()\">\r\n            Add \"{{ professionSearchQry?.trim() }}\"\r\n          </button>\r\n        </div>\r\n        <div *ngIf=\"!professionSearchQry?.trim() && filteredProfessionTypes.length === 0\"\r\n          class=\"text-center text-muted small py-3\">\r\n          No professions found.\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"actions\">\r\n  <button type=\"button\" class=\"secondary\" (click)=\"back()\">\r\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n    Back\r\n  </button>\r\n  <div class=\"right-actions\">\r\n    <button type=\"button\" class=\"secondary\" *ngIf=\"selectedProfessionCount === 0\" (click)=\"skip()\">\r\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n      Skip\r\n    </button>\r\n    <button type=\"button\" class=\"primary\" *ngIf=\"selectedProfessionCount > 0\"\r\n      [disabled]=\"isSavingProfessionsTable\" (click)=\"saveAndContinue()\">\r\n      <span *ngIf=\"isSavingProfessionsTable\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n      <ng-container *ngIf=\"!isSavingProfessionsTable\">\r\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"/></svg>\r\n        Save &amp; Continue\r\n      </ng-container>\r\n      <ng-container *ngIf=\"isSavingProfessionsTable\">Saving...</ng-container>\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".profession-search-input{font-size:12px}.profession-search-input::placeholder{font-size:12px}.profession-row-selected{background-color:#f2f4fa}.profession-row-selected .profession-acc-header:hover{background-color:#eceffa}.profession-visibility-checkbox{all:revert;width:16px!important;height:16px!important;min-width:16px!important;max-width:16px!important;margin:4px auto 0!important;padding:0!important;position:static!important;float:none!important;vertical-align:middle!important;background-image:none!important;transform:none!important}.profession-accordion,.profession-accordion label.small{font-size:12px;color:#69707d}.profession-acc-columns,.profession-acc-header{display:grid;grid-template-columns:36px 2fr 1fr 1fr 32px;align-items:center;gap:12px}.profession-acc-columns{padding:12px 16px;border-bottom:1px solid #e9ecef;font-size:13px;font-weight:600;color:#69707d;text-transform:uppercase}@media (max-width: 767.98px){.profession-acc-columns{display:none}}.profession-acc-item{border-bottom:1px solid #f1f3f5}.profession-acc-item:last-child{border-bottom:none}.profession-acc-header{padding:12px 16px;cursor:pointer;transition:background-color .15s ease}.profession-acc-header:hover{background-color:#f8f9fb}.profession-acc-name{color:#69707d}.profession-acc-chevron-btn{background:transparent;border:none;padding:4px;display:inline-flex;align-items:center;justify-content:center;color:#69707d}.profession-acc-chevron{transition:transform .2s ease}.profession-acc-chevron--open{transform:rotate(180deg)}.profession-acc-body{padding:0 16px 16px}.profession-acc-panel{background-color:#fff;border:1px solid #e9ecef;border-radius:8px;padding:16px 20px}.profession-acc-fields{display:flex;flex-wrap:wrap;align-items:flex-start;gap:32px}.profession-acc-field{min-width:100px}.profession-acc-field--visibility{display:flex;flex-direction:column;align-items:center;width:90px;flex-shrink:0}.profession-acc-field--visibility label{text-align:center;width:100%}.profession-acc-field--notes{flex:1 1 220px;margin:0}.profession-acc-stars{font-size:1.05rem;letter-spacing:2px}.profession-acc-year-input{width:72px}.profession-inline-select{min-width:160px;font-size:12px}.profession-inline-select ::ng-deep .ng-select-container{min-height:32px!important;height:32px!important}::ng-deep .profession-inline-select .ng-option,::ng-deep .profession-inline-select .ng-placeholder{font-size:12px}.profession-notes-input{min-height:76px;resize:vertical}.section-flag{font-weight:600}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:5px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px)}button.primary:active{transform:translateY(0)}button.secondary{background:#69707d;color:#fff;border:1.5px solid #69707D;padding:10px 22px}button.secondary:hover{border-color:#565c66;color:#fff;background:#565c66}.right-actions button.secondary{background:#f2f4fa;color:#69707d;border:1.5px solid #F2F4FA}.right-actions button.secondary:hover{border-color:#e4e8f2;color:#69707d;background:#e4e8f2}button:disabled{background:#69707d;cursor:not-allowed;transform:none;box-shadow:none}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:16px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:14px;color:#69707d;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:12px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:5px;border:1.5px solid #e2e8f0;background:#fff;color:#69707d;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.detail-row{display:flex;flex-wrap:wrap;column-gap:22px;row-gap:6px;margin-bottom:8px}.detail-item{display:flex;align-items:baseline;gap:6px;white-space:nowrap}.detail-label{font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:#4077ad}.detail-value{font-size:12.5px;font-weight:600;color:#1e293b}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:5px;box-shadow:none}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#69707d;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@media screen and (max-width: 767px){.step-card-header{padding:14px 16px}.step-card-body{padding:16px 16px 8px}.step-toast{right:12px;bottom:16px;min-width:calc(100vw - 24px);max-width:calc(100vw - 24px)}}\n"] }]
         }], ctorParameters: () => [{ type: CredentialingStore }], propDecorators: { providerId: [{
                 type: Input
             }], providerName: [{