@idsoftsource/initial-process 1.9.9 → 2.1.1

package/fesm2022/idsoftsource-initial-process.mjs

@@ -931,7 +931,7 @@ class ProviderContractorSubCategoryService {
         return this.http.post(`${this.baseUrl}/BulkDelete`, ids);
     }
     bulkInsert(models) {
-        return this.http.post(`${this.baseUrl}/CreateUserCoverageArea`, models);
+        return this.http.post(`ProviderContractorSubCategory/BulkInsert`, models);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProviderContractorSubCategoryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProviderContractorSubCategoryService, providedIn: 'root' });
@@ -6928,6 +6928,13 @@ class CertificationComponent {
         if (data.documentTypeId?.startsWith('manual-')) {
             this.documentTypes = [{ id: data.documentTypeId, type: data.documentTypeName }];
         }
+        else if (!data.documentTypeId && data.documentTypeName) {
+            // Manually entered cert saved without documentTypeId — restore as a selected pill
+            const syntheticId = 'manual-' + Date.now();
+            this.selectedDocumentId = syntheticId;
+            this.documentTypes = [{ id: syntheticId, type: data.documentTypeName }];
+            this.certificateForm.patchValue({ documentTypeId: syntheticId });
+        }
         else {
             this.loadDocumentTypesDefault();
         }
@@ -7151,6 +7158,7 @@ class CertificationComponent {
         if (this.showedit || this.isAdding()) {
             this.isEditing.set(false); // go back to preview
             this.isAdding.set(false); // reset adding flag
+            this.editingIndex = -1;
             this.certificateForm.reset();
             this.certificateForm.patchValue({
                 country: 'US'
@@ -7166,11 +7174,15 @@ class CertificationComponent {
         this.isAdding.set(true); // form is opened for adding
         this.showedit = false; // not editing
         this.isEditing.set(true); // show the form
+        this.editingIndex = -1;
+        this.model = { fileId: null, fileUrl: null, fileName: null };
         this.certificateForm.reset();
         this.certificateForm.patchValue({
             country: 'US'
         }); // reset form fields
         this.fileName = '';
+        this.fileData = null;
+        this.fileChanged = false;
         this.selectedDocumentId = null;
         this.selectedDocumentName = null;
         this.searchControl.setValue('', { emitEvent: false });
@@ -7574,8 +7586,11 @@ class SkillsComponent {
         this.isCopy = false;
         this.copyData = null;
         this.copyOptionIndex = 0;
-        // 3️⃣ Reset all skill checkbox selections
+        // 3️⃣ Remove stale manual pills, deselect API skills, refresh list
+        this.searchSkillQry = null;
+        this.skillSets = this.skillSets.filter((s) => !s.isManual);
         this.skillSets.forEach(skill => skill.selected = false);
+        this.getSkillSets();
     }
     createGroup(skillSetId, skillName) {
         return this.formBuilder.group({
@@ -7727,12 +7742,22 @@ class SkillsComponent {
         this.tab.at(0).get('starRating')?.setValue(stars * 2);
     }
     removeTab(index, skillId = '') {
+        const removedName = this.tabs[index];
         this.tabs.splice(index, 1);
         this.tab.removeAt(index);
-        this.skillSets.forEach((elem) => {
-            if (elem.id == skillId)
-                elem.selected = false;
-        });
+        if (skillId) {
+            const skill = this.skillSets.find((s) => s.id == skillId);
+            if (skill?.isManual) {
+                this.skillSets = this.skillSets.filter((s) => s.id !== skillId);
+            }
+            else if (skill) {
+                skill.selected = false;
+            }
+        }
+        else {
+            // null skillSetId — manual skill; remove pill by name
+            this.skillSets = this.skillSets.filter((s) => !(s.isManual && s.name === removedName));
+        }
     }
     deleteSkillFromPreview(skill, event) {
         event.stopPropagation();
@@ -7787,6 +7812,8 @@ class SkillsComponent {
         const input = event.target; // Cast target
         skill.selected = input.checked;
         if (skill.selected) {
+            if (skill.isManual)
+                return; // already added via createNewSkills()
             this.tabs.push(skill.name);
             this.tab.push(this.createGroup(skill.id, skill.name));
             this.setTabGroup(this.tab.controls[this.tabs.length - 1]);
@@ -7809,6 +7836,12 @@ class SkillsComponent {
         this.skillSubmittedValue = true;
         const isExists = this.tabs.find((a) => a == this.searchSkillQry);
         if (this.searchSkillQry && !isExists) {
+            // Add synthetic pill so the manual skill appears as a selected chip
+            const syntheticId = `manual-${Date.now()}`;
+            this.skillSets = [
+                { id: syntheticId, name: this.searchSkillQry, selected: true, isManual: true },
+                ...this.skillSets
+            ];
             this.tabs.push(this.searchSkillQry);
             if (this.copyData) {
                 this.tab.push(this.AddGroup(null, this.searchSkillQry));
@@ -7823,6 +7856,8 @@ class SkillsComponent {
     }
     getSkillSets() {
         this.skillSubmittedValue = false;
+        // Preserve any manually added pills across API reloads
+        const manualSkills = this.skillSets.filter((s) => s.isManual);
         const q = { orderBy: 'name asc', filter: 'isActive=true', targetProviderId: '00000000-0000-0000-0000-000000000000' };
         if (this.selectedSkillSetCategory?.id) {
             q.filter += ',skillSetCategoryId=' + this.selectedSkillSetCategory.id;
@@ -7840,7 +7875,7 @@ class SkillsComponent {
         this.getSkillCall = this.skillSetService.getSkillSets(q).subscribe({
             next: (res) => {
                 res.data.forEach(elem => { elem.name = elem.skillSetCategoryName + ' - ' + elem.name; });
-                this.skillSets = res.data;
+                this.skillSets = [...manualSkills, ...res.data];
                 this.tab.value.forEach((value) => {
                     this.skillSets.forEach(skill => {
                         if (skill.id === value.skillSetId)
@@ -7852,7 +7887,7 @@ class SkillsComponent {
             },
             error: () => {
                 this.showLoading = false;
-                this.skillSets = [];
+                this.skillSets = [...manualSkills];
             }
         });
     }
@@ -7976,7 +8011,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: UserService }, { token: i8.UntypedFormBuilder }, { token: UtilsService }, { token: i1$1.RoleContextService }, { token: CredentialingStore }, { token: i1$1.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" }, 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-accent\"></div>\r\n      <div class=\"sk-card-body\">\r\n\r\n        <div class=\"sk-head\">\r\n          <div class=\"sk-icon\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"/>\r\n            </svg>\r\n          </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 || model?.skillSetId !== skill.skillSetId\">\r\n          <div class=\"sk-meta-row\">\r\n            <span class=\"chip chip-year\" *ngIf=\"skill.year\">\r\n              <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 6v6l4 2\"/></svg>\r\n              {{ skill.year }} yr(s)\r\n            </span>\r\n            <span class=\"chip chip-visible\" *ngIf=\"skill.profileVisibility\">\r\n              <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/></svg>\r\n              Visible\r\n            </span>\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 && model?.skillSetId === skill.skillSetId\"\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                [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\"\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-section-label\">Select Skill Areas</div>\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 *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      <div class=\"skill-chips\" [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  </div>\r\n\r\n  <!-- Step 2: Per-skill detail cards (replaces tabset) -->\r\n  <div class=\"sk-detail-list\"\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\" 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              [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\" [maxStars]=\"5\">\r\n            </ngx-stars>\r\n            <div *ngIf=\"userSkillSubmitted && k?.starRating?.errors\" class=\"invalid-feedback is-invalid d-block\">\r\n              Rating is required\r\n            </div>\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              [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\"\r\n              bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\"\r\n              [appendTo]=\"'body'\" (change)=\"onYearChange(group)\"></ng-select>\r\n            <div *ngIf=\"userSkillSubmitted && k?.year?.errors\" class=\"invalid-feedback is-invalid d-block\">\r\n              Year is required\r\n            </div>\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", 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:#64748b;margin-bottom:24px}.content-part{background:#fff}.content-part p{font-size:13px;color:#64748b}.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:#64748b;margin-left:5px}.content-part .card .sub-section .content{font-size:13px;color:#64748b}.content-part .card .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px;color:#64748b}.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:#94a3b8}.search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;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:15px;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}.skill-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.skill-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.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}.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:#22c55e!important;border:1px solid #22c55e!important}::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:#64748b;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:15px;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:#64748b!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:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover,.skip-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.back-btn.edit,.skip-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;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:#94a3b8;cursor:not-allowed;transform:none}.create-btn{height:42px;min-width:9rem;background:#4077ad;color:#fff;border:none;border-radius:8px;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:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.continue-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.continue-btn:active{transform:translateY(0)}.continue-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.continue-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn.add{background:#2d5a8a}.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:13px;color:#64748b;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-accent{width:4px;background:#4077ad;flex-shrink:0}.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-icon{width:32px;height:32px;border-radius:8px;background:#ebf2f9;color:#4077ad;display:flex;align-items:center;justify-content:center;flex-shrink:0}.sk-title-block{flex:1;min-width:0}.sk-name{display:block;font-size:13px;font-weight:700;color:#1e293b;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-sub{display:block;font-size:11px;color:#64748b;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:6px;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:all .2s ease}.sk-text-btn.cancel{background:transparent;color:#64748b;border:1px solid #e2e8f0}.sk-text-btn.cancel:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.sk-text-btn.save{background:#4077ad;color:#fff;margin-left:4px}.sk-text-btn.save:hover{background:#2d5a8a}.sk-text-btn.save:disabled{background:#94a3b8;cursor:not-allowed}.icon-btn{width:28px;height:28px;border:none;min-width:unset!important;border-radius:6px;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:#64748b;font-family:monospace;font-size:11px}.sk-stars-row{margin-bottom:6px}.sk-description{font-size:12px;color:#64748b;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:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.sk-section{margin-bottom:20px}.sk-section-label{font-size:13px;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:11px;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:#64748b;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:#94a3b8;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:#94a3b8;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;border-left:4px solid #4077AD;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:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;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:11px;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:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;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}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}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;border-left:4px solid #22c55e;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:#64748b;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){.skills-container{padding:16px}.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{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: 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: i14.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" }, 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-accent\"></div>\r\n      <div class=\"sk-card-body\">\r\n\r\n        <div class=\"sk-head\">\r\n          <div class=\"sk-icon\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"/>\r\n            </svg>\r\n          </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=\"sk-meta-row\">\r\n            <span class=\"chip chip-year\" *ngIf=\"skill.year\">\r\n              <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 6v6l4 2\"/></svg>\r\n              {{ skill.year }} yr(s)\r\n            </span>\r\n            <span class=\"chip chip-visible\" *ngIf=\"skill.profileVisibility\">\r\n              <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/></svg>\r\n              Visible\r\n            </span>\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                [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\"\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-section-label\">Select Skill Areas</div>\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 *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      <div class=\"skill-chips\" [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  </div>\r\n\r\n  <!-- Step 2: Per-skill detail cards (replaces tabset) -->\r\n  <div class=\"sk-detail-list\"\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\" 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              [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\" [maxStars]=\"5\">\r\n            </ngx-stars>\r\n            <div *ngIf=\"userSkillSubmitted && k?.starRating?.errors\" class=\"invalid-feedback is-invalid d-block\">\r\n              Rating is required\r\n            </div>\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              [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\"\r\n              bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\"\r\n              [appendTo]=\"'body'\" (change)=\"onYearChange(group)\"></ng-select>\r\n            <div *ngIf=\"userSkillSubmitted && k?.year?.errors\" class=\"invalid-feedback is-invalid d-block\">\r\n              Year is required\r\n            </div>\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", 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:#64748b;margin-bottom:24px}.content-part{background:#fff}.content-part p{font-size:13px;color:#64748b}.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:#64748b;margin-left:5px}.content-part .card .sub-section .content{font-size:13px;color:#64748b}.content-part .card .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px;color:#64748b}.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:#94a3b8}.search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;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:15px;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}.skill-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.skill-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.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}.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:#22c55e!important;border:1px solid #22c55e!important}::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:#64748b;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:15px;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:#64748b!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:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover,.skip-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.back-btn.edit,.skip-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;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:#94a3b8;cursor:not-allowed;transform:none}.create-btn{height:42px;min-width:9rem;background:#4077ad;color:#fff;border:none;border-radius:8px;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:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.continue-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.continue-btn:active{transform:translateY(0)}.continue-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.continue-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn.add{background:#2d5a8a}.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:13px;color:#64748b;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-accent{width:4px;background:#4077ad;flex-shrink:0}.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-icon{width:32px;height:32px;border-radius:8px;background:#ebf2f9;color:#4077ad;display:flex;align-items:center;justify-content:center;flex-shrink:0}.sk-title-block{flex:1;min-width:0}.sk-name{display:block;font-size:13px;font-weight:700;color:#1e293b;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-sub{display:block;font-size:11px;color:#64748b;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:6px;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:all .2s ease}.sk-text-btn.cancel{background:transparent;color:#64748b;border:1px solid #e2e8f0}.sk-text-btn.cancel:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.sk-text-btn.save{background:#4077ad;color:#fff;margin-left:4px}.sk-text-btn.save:hover{background:#2d5a8a}.sk-text-btn.save:disabled{background:#94a3b8;cursor:not-allowed}.icon-btn{width:28px;height:28px;border:none;min-width:unset!important;border-radius:6px;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:#64748b;font-family:monospace;font-size:11px}.sk-stars-row{margin-bottom:6px}.sk-description{font-size:12px;color:#64748b;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:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.sk-section{margin-bottom:20px}.sk-section-label{font-size:13px;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:11px;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:#64748b;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:#94a3b8;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:#94a3b8;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;border-left:4px solid #4077AD;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:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;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:11px;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:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;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}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}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;border-left:4px solid #22c55e;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:#64748b;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){.skills-container{padding:16px}.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{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: 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: i14.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: '*',
@@ -8014,7 +8049,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-accent\"></div>\r\n      <div class=\"sk-card-body\">\r\n\r\n        <div class=\"sk-head\">\r\n          <div class=\"sk-icon\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"/>\r\n            </svg>\r\n          </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 || model?.skillSetId !== skill.skillSetId\">\r\n          <div class=\"sk-meta-row\">\r\n            <span class=\"chip chip-year\" *ngIf=\"skill.year\">\r\n              <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 6v6l4 2\"/></svg>\r\n              {{ skill.year }} yr(s)\r\n            </span>\r\n            <span class=\"chip chip-visible\" *ngIf=\"skill.profileVisibility\">\r\n              <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/></svg>\r\n              Visible\r\n            </span>\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 && model?.skillSetId === skill.skillSetId\"\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                [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\"\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-section-label\">Select Skill Areas</div>\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 *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      <div class=\"skill-chips\" [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  </div>\r\n\r\n  <!-- Step 2: Per-skill detail cards (replaces tabset) -->\r\n  <div class=\"sk-detail-list\"\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\" 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              [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\" [maxStars]=\"5\">\r\n            </ngx-stars>\r\n            <div *ngIf=\"userSkillSubmitted && k?.starRating?.errors\" class=\"invalid-feedback is-invalid d-block\">\r\n              Rating is required\r\n            </div>\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              [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\"\r\n              bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\"\r\n              [appendTo]=\"'body'\" (change)=\"onYearChange(group)\"></ng-select>\r\n            <div *ngIf=\"userSkillSubmitted && k?.year?.errors\" class=\"invalid-feedback is-invalid d-block\">\r\n              Year is required\r\n            </div>\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", 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:#64748b;margin-bottom:24px}.content-part{background:#fff}.content-part p{font-size:13px;color:#64748b}.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:#64748b;margin-left:5px}.content-part .card .sub-section .content{font-size:13px;color:#64748b}.content-part .card .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px;color:#64748b}.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:#94a3b8}.search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;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:15px;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}.skill-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.skill-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.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}.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:#22c55e!important;border:1px solid #22c55e!important}::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:#64748b;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:15px;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:#64748b!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:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover,.skip-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.back-btn.edit,.skip-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;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:#94a3b8;cursor:not-allowed;transform:none}.create-btn{height:42px;min-width:9rem;background:#4077ad;color:#fff;border:none;border-radius:8px;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:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.continue-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.continue-btn:active{transform:translateY(0)}.continue-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.continue-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn.add{background:#2d5a8a}.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:13px;color:#64748b;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-accent{width:4px;background:#4077ad;flex-shrink:0}.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-icon{width:32px;height:32px;border-radius:8px;background:#ebf2f9;color:#4077ad;display:flex;align-items:center;justify-content:center;flex-shrink:0}.sk-title-block{flex:1;min-width:0}.sk-name{display:block;font-size:13px;font-weight:700;color:#1e293b;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-sub{display:block;font-size:11px;color:#64748b;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:6px;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:all .2s ease}.sk-text-btn.cancel{background:transparent;color:#64748b;border:1px solid #e2e8f0}.sk-text-btn.cancel:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.sk-text-btn.save{background:#4077ad;color:#fff;margin-left:4px}.sk-text-btn.save:hover{background:#2d5a8a}.sk-text-btn.save:disabled{background:#94a3b8;cursor:not-allowed}.icon-btn{width:28px;height:28px;border:none;min-width:unset!important;border-radius:6px;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:#64748b;font-family:monospace;font-size:11px}.sk-stars-row{margin-bottom:6px}.sk-description{font-size:12px;color:#64748b;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:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.sk-section{margin-bottom:20px}.sk-section-label{font-size:13px;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:11px;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:#64748b;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:#94a3b8;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:#94a3b8;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;border-left:4px solid #4077AD;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:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;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:11px;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:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;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}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}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;border-left:4px solid #22c55e;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:#64748b;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){.skills-container{padding:16px}.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{grid-template-columns:1fr}}\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-accent\"></div>\r\n      <div class=\"sk-card-body\">\r\n\r\n        <div class=\"sk-head\">\r\n          <div class=\"sk-icon\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"/>\r\n            </svg>\r\n          </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=\"sk-meta-row\">\r\n            <span class=\"chip chip-year\" *ngIf=\"skill.year\">\r\n              <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 6v6l4 2\"/></svg>\r\n              {{ skill.year }} yr(s)\r\n            </span>\r\n            <span class=\"chip chip-visible\" *ngIf=\"skill.profileVisibility\">\r\n              <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/></svg>\r\n              Visible\r\n            </span>\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                [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\"\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-section-label\">Select Skill Areas</div>\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 *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      <div class=\"skill-chips\" [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  </div>\r\n\r\n  <!-- Step 2: Per-skill detail cards (replaces tabset) -->\r\n  <div class=\"sk-detail-list\"\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\" 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              [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\" [maxStars]=\"5\">\r\n            </ngx-stars>\r\n            <div *ngIf=\"userSkillSubmitted && k?.starRating?.errors\" class=\"invalid-feedback is-invalid d-block\">\r\n              Rating is required\r\n            </div>\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              [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\"\r\n              bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\"\r\n              [appendTo]=\"'body'\" (change)=\"onYearChange(group)\"></ng-select>\r\n            <div *ngIf=\"userSkillSubmitted && k?.year?.errors\" class=\"invalid-feedback is-invalid d-block\">\r\n              Year is required\r\n            </div>\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", 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:#64748b;margin-bottom:24px}.content-part{background:#fff}.content-part p{font-size:13px;color:#64748b}.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:#64748b;margin-left:5px}.content-part .card .sub-section .content{font-size:13px;color:#64748b}.content-part .card .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px;color:#64748b}.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:#94a3b8}.search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;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:15px;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}.skill-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.skill-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.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}.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:#22c55e!important;border:1px solid #22c55e!important}::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:#64748b;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:15px;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:#64748b!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:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover,.skip-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.back-btn.edit,.skip-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;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:#94a3b8;cursor:not-allowed;transform:none}.create-btn{height:42px;min-width:9rem;background:#4077ad;color:#fff;border:none;border-radius:8px;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:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.continue-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.continue-btn:active{transform:translateY(0)}.continue-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.continue-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn.add{background:#2d5a8a}.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:13px;color:#64748b;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-accent{width:4px;background:#4077ad;flex-shrink:0}.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-icon{width:32px;height:32px;border-radius:8px;background:#ebf2f9;color:#4077ad;display:flex;align-items:center;justify-content:center;flex-shrink:0}.sk-title-block{flex:1;min-width:0}.sk-name{display:block;font-size:13px;font-weight:700;color:#1e293b;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-sub{display:block;font-size:11px;color:#64748b;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:6px;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:all .2s ease}.sk-text-btn.cancel{background:transparent;color:#64748b;border:1px solid #e2e8f0}.sk-text-btn.cancel:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.sk-text-btn.save{background:#4077ad;color:#fff;margin-left:4px}.sk-text-btn.save:hover{background:#2d5a8a}.sk-text-btn.save:disabled{background:#94a3b8;cursor:not-allowed}.icon-btn{width:28px;height:28px;border:none;min-width:unset!important;border-radius:6px;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:#64748b;font-family:monospace;font-size:11px}.sk-stars-row{margin-bottom:6px}.sk-description{font-size:12px;color:#64748b;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:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.sk-section{margin-bottom:20px}.sk-section-label{font-size:13px;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:11px;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:#64748b;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:#94a3b8;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:#94a3b8;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;border-left:4px solid #4077AD;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:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;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:11px;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:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;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}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}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;border-left:4px solid #22c55e;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:#64748b;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){.skills-container{padding:16px}.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{grid-template-columns:1fr}}\n"] }]
         }], ctorParameters: () => [{ type: SkillSetService }, { type: UserSkillSetService }, { type: UserService }, { type: i8.UntypedFormBuilder }, { type: UtilsService }, { type: i1$1.RoleContextService }, { type: CredentialingStore }, { type: i1$1.TokenService }], propDecorators: { providerId: [{
                 type: Input
             }], providerName: [{
@@ -8211,6 +8246,13 @@ class LicensesComponent {
         if (data.documentTypeId?.startsWith('manual-')) {
             this.documentTypes = [{ id: data.documentTypeId, type: data.documentTypeName }];
         }
+        else if (!data.documentTypeId && data.documentTypeName) {
+            // Manually entered license saved without documentTypeId — restore as a selected pill
+            const syntheticId = 'manual-' + Date.now();
+            this.selectedDocumentId = syntheticId;
+            this.documentTypes = [{ id: syntheticId, type: data.documentTypeName }];
+            this.certificateForm.patchValue({ documentTypeId: syntheticId });
+        }
         else {
             this.loadDocumentTypesDefault();
         }
@@ -8437,6 +8479,7 @@ class LicensesComponent {
         if (this.showedit || this.isAdding()) {
             this.isEditing.set(false); // go back to preview
             this.isAdding.set(false); // reset adding flag
+            this.editingIndex = -1;
             this.certificateForm.reset();
             this.certificateForm.patchValue({
                 country: 'US'
@@ -8452,11 +8495,15 @@ class LicensesComponent {
         this.isAdding.set(true); // form is opened for adding
         this.showedit = false; // not editing
         this.isEditing.set(true); // show the form
+        this.editingIndex = -1;
+        this.model = { fileId: null, fileUrl: null, fileName: null };
         this.certificateForm.reset();
         this.certificateForm.patchValue({
             country: 'US'
         }); // reset form fields
         this.fileName = '';
+        this.fileData = null;
+        this.fileChanged = false;
         this.selectedDocumentId = null;
         this.selectedDocumentName = null;
         this.searchControl.setValue('', { emitEvent: false });
@@ -8646,12 +8693,22 @@ class ToolsComponent {
         });
     }
     removeTab(index, toolId) {
+        const removedName = this.tabs[index];
         this.tabs.splice(index, 1);
         this.tab?.removeAt(index);
-        this.tools.forEach((elem) => {
-            if (elem.id == toolId)
-                elem.selected = false;
-        });
+        if (toolId) {
+            const tool = this.tools.find((s) => s.id == toolId);
+            if (tool?.isManual) {
+                this.tools = this.tools.filter((s) => s.id !== toolId);
+            }
+            else if (tool) {
+                tool.selected = false;
+            }
+        }
+        else {
+            // null toolId — manual tool; remove pill by name
+            this.tools = this.tools.filter((s) => !(s.isManual && s.name === removedName));
+        }
     }
     deleteToolFromPreview(tool, event) {
         event.stopPropagation();
@@ -8815,6 +8872,8 @@ class ToolsComponent {
     onSelectedTools(event, tool) {
         tool.selected = event.target.checked;
         if (tool.selected) {
+            if (tool.isManual)
+                return; // already added via createNewTools()
             this.tabs.push(tool?.name);
             if (!this.copyData) {
                 this.tab?.push(this.createGroup(tool?.id, tool.name));
@@ -8851,6 +8910,12 @@ class ToolsComponent {
         this.toolSubmittedValue = true;
         var isExists = this.tabs.find((a) => { return a == this.searchToolQry; });
         if (this.searchToolQry && !isExists) {
+            // Add synthetic pill so the manual tool appears as a selected chip
+            const syntheticId = `manual-${Date.now()}`;
+            this.tools = [
+                { id: syntheticId, name: this.searchToolQry, selected: true, isManual: true },
+                ...this.tools
+            ];
             this.tabs?.push(this.searchToolQry);
             if (this.copyData && this.isCopy) {
                 this.tab?.push(this.AddGroup(null, this.searchToolQry));
@@ -8880,11 +8945,16 @@ class ToolsComponent {
         this.isCopy = false;
         this.copyData = null;
         this.copyOptionIndex = 0;
-        // 3️⃣ Reset all skill checkbox selections
+        // 3️⃣ Remove stale manual pills, deselect API tools, refresh list
+        this.searchToolQry = null;
+        this.tools = this.tools.filter((s) => !s.isManual);
         this.tools.forEach(tool => tool.selected = false);
+        this.getTools();
     }
     getTools() {
         this.toolSubmittedValue = false;
+        // Preserve any manually added pills across API reloads
+        const manualTools = this.tools.filter((s) => s.isManual);
         var query = {
             orderBy: 'name asc',
             filter: 'isActive=true',
@@ -8911,7 +8981,7 @@ class ToolsComponent {
                 res.data.forEach((elem) => {
                     elem.name = elem.toolCategoryName + ' - ' + elem.name;
                 });
-                this.tools = res.data;
+                this.tools = [...manualTools, ...res.data];
                 this.tab?.value.forEach((value) => {
                     this.tools.forEach(tool => {
                         if (tool.id === value.toolId) {
@@ -8935,7 +9005,7 @@ class ToolsComponent {
             },
             error: (error) => {
                 this.showLoading = false;
-                this.tools = [];
+                this.tools = [...manualTools];
             }
         });
     }
@@ -33148,11 +33218,11 @@ class WorkexperienceComponent {
         this.fileName = '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WorkexperienceComponent, deps: [{ token: UserExperienceService }, { token: UserService }, { token: WorkExperienceStore }, { token: CredentialingStore }, { token: CountryServices }, { token: PostalCodeServices }, { token: i1$1.TokenService }, { token: i1$1.RoleContextService }, { token: i8.FormBuilder }, { token: FileService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: WorkexperienceComponent, isStandalone: false, selector: "app-workexperience", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div *ngIf=\"!showpreview()\">\r\n  <div class=\"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=\"work experience\" width=\"22\" height=\"22\" />\r\n      </div>\r\n      <div>\r\n        <h3 class=\"step-card-title\">Add Work Experience</h3>\r\n        <p class=\"step-card-subtitle\">Add your prior and current work history below</p>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"step-card-body\">\r\n      <form [formGroup]=\"workexperienceForm\">\r\n\r\n        <div class=\"field-section\">\r\n          <div class=\"field-section-title\">Basic Information</div>\r\n          <div class=\"row\">\r\n            <div class=\"field\">\r\n              <div class=\"head\">Company Name <span class=\"text-danger\">*</span></div>\r\n              <input type=\"text\" placeholder=\"Enter your company name here\" formControlName=\"companyName\" />\r\n              <small class=\"error\" *ngIf=\"workexperienceForm.get('companyName')?.touched &&\r\n                   workexperienceForm.get('companyName')?.hasError('required')\">\r\n                Company name is required\r\n              </small>\r\n            </div>\r\n            <div class=\"field\">\r\n              <div class=\"head\">Job Title <span class=\"text-danger\">*</span></div>\r\n              <input type=\"text\" placeholder=\"Enter your job title here\" formControlName=\"jobTitle\" />\r\n              <small class=\"error\" *ngIf=\"workexperienceForm.get('jobTitle')?.touched &&\r\n                   workexperienceForm.get('jobTitle')?.hasError('required')\">\r\n                Job title is required\r\n              </small>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"field-section\">\r\n          <div class=\"field-section-title\">Location &amp; Timeline</div>\r\n          <div class=\"row\">\r\n            <div class=\"field\">\r\n              <div class=\"head\">Country <span class=\"text-danger\">*</span></div>\r\n              <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n                [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n                <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n                  <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n                  &nbsp;{{ item.country }}\r\n                </ng-template>\r\n              </ng-select>\r\n            </div>\r\n            <div class=\"field\">\r\n              <div class=\"head\">State <span class=\"text-danger\">*</span></div>\r\n              <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n                placeholder=\"Select State\">\r\n                <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                  <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n                  &nbsp;{{ item.stateName }}\r\n                </ng-template>\r\n                <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                  <span class=\"ng-value-label\">{{ item.stateName }}</span>\r\n                  <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                    <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n                  </span>\r\n                </ng-template>\r\n              </ng-select>\r\n            </div>\r\n          </div>\r\n          <div class=\"row form-row\">\r\n            <div class=\"field\">\r\n              <div class=\"head\">City <span class=\"text-danger\">*</span></div>\r\n              <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n              <small class=\"error\" *ngIf=\"workexperienceForm.get('city')?.touched &&\r\n                   workexperienceForm.get('city')?.hasError('required')\">\r\n                City is required\r\n              </small>\r\n            </div>\r\n            <div class=\"field date\">\r\n              <div class=\"mb-3 head\">\r\n                <div class=\"head\">Start Date <span class=\"text-danger\">*</span></div>\r\n                <input class=\"form-control date-time-filter\" placeholder=\"Start date\" bsDatepicker [maxDate]=\"maxDate\"\r\n                  [bsConfig]=\"{ adaptivePosition: true, isAnimated: true, showWeekNumbers: false,\r\n                                    customTodayClass: !workexperienceForm.get('fromDate')?.value ? 'today-highlight' : '' }\"\r\n                  formControlName=\"fromDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n                <small class=\"error\" *ngIf=\"workexperienceForm.get('fromDate')?.touched &&\r\n                   workexperienceForm.get('fromDate')?.hasError('required')\">\r\n                  Start Date is required\r\n                </small>\r\n              </div>\r\n            </div>\r\n            <div class=\"field date\">\r\n              <div class=\"mb-3 head\">\r\n                <div class=\"head\">To Date <span class=\"text-danger\">*</span></div>\r\n                <input class=\"form-control date-time-filter\" placeholder=\"To date\" bsDatepicker\r\n                  [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true,\r\n                                    customTodayClass: !workexperienceForm.get('toDate')?.value ? 'today-highlight' : '' }\"\r\n                  formControlName=\"toDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n                <small class=\"error\" *ngIf=\"workexperienceForm.get('toDate')?.touched &&\r\n                   workexperienceForm.get('toDate')?.hasError('required')\">\r\n                  To Date is required\r\n                </small>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"field-section\">\r\n          <div class=\"field-section-title\">Job Description</div>\r\n          <div class=\"row\">\r\n            <div class=\"field full-width\">\r\n              <textarea placeholder=\"Describe your role and responsibilities\" formControlName=\"jobDescription\"></textarea>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </form>\r\n\r\n      <div class=\"upload-wrapper\">\r\n        <p *ngIf=\"!fileName\" class=\"upload-title\">Supporting Documents</p>\r\n        <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n        <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your employment contract, offer letter, or reference letter (PDF, DOC, DOCX)</p>\r\n        <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Document\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n          {{ fileName }}\r\n          <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n        </p>\r\n      </div>\r\n\r\n      <div class=\"actions\">\r\n        <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n          <svg *ngIf=\"showedit || isAdding()\" 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=\"!showedit && !isAdding()\" 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          {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n        </button>\r\n        <div class=\"right-actions\">\r\n          <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n            class=\"secondary\" (click)=\"nextStep()\">\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\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n            (click)=\"saveFile()\">\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            {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Success Toast -->\r\n<div class=\"step-toast\" *ngIf=\"showSuccess()\">\r\n  <div class=\"step-toast-icon\">\r\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n      <path d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </svg>\r\n  </div>\r\n  <div class=\"step-toast-body\">\r\n    <div class=\"step-toast-title\">Saved Successfully</div>\r\n    <div class=\"step-toast-msg\">Work experience has been saved.</div>\r\n  </div>\r\n  <div class=\"step-toast-progress\"></div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\">\r\n    <div class=\"preview-header-icon\">\r\n      <img src=\"/assets/images/icons/briefcase-fill.svg\" alt=\"work experience\" width=\"20\" height=\"20\" />\r\n    </div>\r\n    <div>\r\n      <h3 class=\"preview-header-title\">Work Experience</h3>\r\n      <p class=\"preview-subtitle\">{{ workStore.experiences().length }} record{{ workStore.experiences().length !== 1 ? 's' : '' }} added</p>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"preview-timeline\">\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index; let last = last\"\r\n         class=\"timeline-entry\" [class.last]=\"last\">\r\n      <div class=\"timeline-track\">\r\n        <div class=\"timeline-dot\"></div>\r\n        <div class=\"timeline-line\" *ngIf=\"!last\"></div>\r\n      </div>\r\n      <div class=\"timeline-card\">\r\n        <div class=\"tc-head\">\r\n          <div class=\"tc-avatar\">{{ (exp.companyName || exp.jobTitle || '?').charAt(0).toUpperCase() }}</div>\r\n          <div class=\"tc-title-block\">\r\n            <span class=\"tc-title\">{{ exp.jobTitle }}</span>\r\n            <span class=\"tc-subtitle\">{{ exp.companyName }}</span>\r\n          </div>\r\n          <div class=\"tc-actions\">\r\n            <button class=\"icon-btn edit-btn\" (click)=\"edit(i)\" 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)=\"delete(i)\" 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          </div>\r\n        </div>\r\n        <div class=\"tc-chips\">\r\n          <span class=\"chip chip-date\" *ngIf=\"exp.fromDate || exp.toDate\">\r\n            <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"/></svg>\r\n            {{ exp.fromDate | date:'MMM yyyy' }}{{ exp.toDate ? ' \u2013 ' + (exp.toDate | date:'MMM yyyy') : ' \u2013 Present' }}\r\n          </span>\r\n          <span class=\"chip chip-location\" *ngIf=\"exp.city || exp.state\">\r\n            <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"/><circle cx=\"12\" cy=\"10\" r=\"3\"/></svg>\r\n            {{ exp.city }}{{ exp.city && (exp.state | stateName) ? ', ' : '' }}{{ exp.state | stateName }}\r\n          </span>\r\n          <span class=\"chip chip-country\" *ngIf=\"exp.country\">{{ exp.country }}</span>\r\n        </div>\r\n        <p class=\"tc-description\" *ngIf=\"exp.jobDescription\">{{ exp.jobDescription }}</p>\r\n        <div class=\"tc-attachment\" *ngIf=\"exp.fileUrl\">\r\n          <a [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\" class=\"attachment-link\">\r\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48\"/></svg>\r\n            {{ exp.fileName }}\r\n          </a>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"action\">\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\" (click)=\"add()\">\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\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\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</div>\r\n", styles: [".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}.education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input,select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input.is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;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-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 0 20px}.action{display:flex;justify-content:space-between;margin:24px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;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);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.work-preview{max-width:860px;padding:24px 0;margin:0 auto;background:#fff}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:28px;padding-bottom:20px;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:13px;color:#64748b;margin:0}.preview-timeline{display:flex;flex-direction:column;margin-bottom:28px}.timeline-entry{display:flex}.timeline-entry.last .timeline-line{display:none}.timeline-track{display:none;flex-direction:column;align-items:center;width:28px;flex-shrink:0;padding-top:22px}.timeline-dot{width:11px;height:11px;border-radius:50%;background:#4077ad;box-shadow:0 0 0 3px #ebf2f9;flex-shrink:0;z-index:1}.timeline-line{width:2px;flex:1;min-height:20px;background:linear-gradient(to bottom,#4077ad,#e2e8f0);margin-top:5px}.timeline-card{flex:1;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px 18px;margin:0 0 14px 14px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;transition:box-shadow .18s ease,transform .18s ease}.timeline-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.tc-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.tc-avatar{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,#4077ad,#2d5a8a);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.tc-title-block{flex:1;min-width:0}.tc-title{display:block;font-size:14px;font-weight:700;color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.35}.tc-subtitle{display:block;font-size:12px;color:#64748b;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-actions{display:flex;gap:2px;flex-shrink:0;margin-top:-2px}.icon-btn{width:28px;height:28px;border:none;min-width:unset!important;border-radius:6px;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}.tc-chips{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-date{background:#ebf2f9;color:#4077ad}.chip.chip-location{background:#f0fdf4;color:#15803d}.chip.chip-type{background:#faf5ff;color:#7c3aed}.chip.chip-country{background:#f8fafc;color:#64748b;border:1px solid #e2e8f0}.chip.chip-number{background:#fff7ed;color:#c2410c;font-family:monospace;font-size:11px}.chip.chip-expiry{background:#fffbeb;color:#b45309}.tc-description{font-size:12px;color:#64748b;line-height:1.55;margin:6px 0 8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.tc-attachment{padding-top:8px;border-top:1px solid #e2e8f0;margin-top:8px}.attachment-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#4077ad;text-decoration:none}.attachment-link:hover{text-decoration:underline}.job-title{color:#64748b;font-weight:400;font-size:14px}.edit-icon{cursor:pointer}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;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:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;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:11px;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:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;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}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}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;border-left:4px solid #22c55e;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:#64748b;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 (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.detail-grid{grid-template-columns:1fr}.actions,.action{flex-direction:column-reverse;gap:8px}.action{margin:48px 0 20px}.right-actions{justify-content:space-between;gap:8px;display:flex;flex-direction:column-reverse}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.form-row{gap:14px;flex-direction:column}.pointer{display:none}.add-btn{width:unset}button{width:100%}}\n"], dependencies: [{ kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: WorkexperienceComponent, isStandalone: false, selector: "app-workexperience", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div *ngIf=\"!showpreview()\">\r\n  <div class=\"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=\"work experience\" width=\"22\" height=\"22\" />\r\n      </div>\r\n      <div>\r\n        <h3 class=\"step-card-title\">Add Work Experience</h3>\r\n        <p class=\"step-card-subtitle\">Add your prior and current work history below</p>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"step-card-body\">\r\n      <form [formGroup]=\"workexperienceForm\">\r\n\r\n        <div class=\"field-section\">\r\n          <div class=\"field-section-title\">Basic Information</div>\r\n          <div class=\"row\">\r\n            <div class=\"field\">\r\n              <div class=\"head\">Company Name <span class=\"text-danger\">*</span></div>\r\n              <input type=\"text\" placeholder=\"Enter your company name here\" formControlName=\"companyName\" />\r\n              <small class=\"error\" *ngIf=\"workexperienceForm.get('companyName')?.touched &&\r\n                   workexperienceForm.get('companyName')?.hasError('required')\">\r\n                Company name is required\r\n              </small>\r\n            </div>\r\n            <div class=\"field\">\r\n              <div class=\"head\">Job Title <span class=\"text-danger\">*</span></div>\r\n              <input type=\"text\" placeholder=\"Enter your job title here\" formControlName=\"jobTitle\" />\r\n              <small class=\"error\" *ngIf=\"workexperienceForm.get('jobTitle')?.touched &&\r\n                   workexperienceForm.get('jobTitle')?.hasError('required')\">\r\n                Job title is required\r\n              </small>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"field-section\">\r\n          <div class=\"field-section-title\">Location &amp; Timeline</div>\r\n          <div class=\"row\">\r\n            <div class=\"field\">\r\n              <div class=\"head\">Country <span class=\"text-danger\">*</span></div>\r\n              <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n                [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n                <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n                  <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n                  &nbsp;{{ item.country }}\r\n                </ng-template>\r\n              </ng-select>\r\n            </div>\r\n            <div class=\"field\">\r\n              <div class=\"head\">State <span class=\"text-danger\">*</span></div>\r\n              <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n                placeholder=\"Select State\">\r\n                <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                  <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n                  &nbsp;{{ item.stateName }}\r\n                </ng-template>\r\n                <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                  <span class=\"ng-value-label\">{{ item.stateName }}</span>\r\n                  <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                    <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n                  </span>\r\n                </ng-template>\r\n              </ng-select>\r\n            </div>\r\n          </div>\r\n          <div class=\"row form-row\">\r\n            <div class=\"field\">\r\n              <div class=\"head\">City <span class=\"text-danger\">*</span></div>\r\n              <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n              <small class=\"error\" *ngIf=\"workexperienceForm.get('city')?.touched &&\r\n                   workexperienceForm.get('city')?.hasError('required')\">\r\n                City is required\r\n              </small>\r\n            </div>\r\n            <div class=\"field date\">\r\n              <div class=\"mb-3 head\">\r\n                <div class=\"head\">Start Date <span class=\"text-danger\">*</span></div>\r\n                <input class=\"form-control date-time-filter\" placeholder=\"Start date\" bsDatepicker [maxDate]=\"maxDate\"\r\n                  [bsConfig]=\"{ adaptivePosition: true, isAnimated: true, showWeekNumbers: false,\r\n                                    customTodayClass: !workexperienceForm.get('fromDate')?.value ? 'today-highlight' : '' }\"\r\n                  formControlName=\"fromDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n                <small class=\"error\" *ngIf=\"workexperienceForm.get('fromDate')?.touched &&\r\n                   workexperienceForm.get('fromDate')?.hasError('required')\">\r\n                  Start Date is required\r\n                </small>\r\n              </div>\r\n            </div>\r\n            <div class=\"field date\">\r\n              <div class=\"mb-3 head\">\r\n                <div class=\"head\">To Date <span class=\"text-danger\">*</span></div>\r\n                <input class=\"form-control date-time-filter\" placeholder=\"To date\" bsDatepicker\r\n                  [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true,\r\n                                    customTodayClass: !workexperienceForm.get('toDate')?.value ? 'today-highlight' : '' }\"\r\n                  formControlName=\"toDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n                <small class=\"error\" *ngIf=\"workexperienceForm.get('toDate')?.touched &&\r\n                   workexperienceForm.get('toDate')?.hasError('required')\">\r\n                  To Date is required\r\n                </small>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"field-section\">\r\n          <div class=\"field-section-title\">Job Description</div>\r\n          <div class=\"row\">\r\n            <div class=\"field full-width\">\r\n              <textarea placeholder=\"Describe your role and responsibilities\" formControlName=\"jobDescription\"></textarea>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </form>\r\n\r\n      <div class=\"upload-wrapper\">\r\n        <p *ngIf=\"!fileName\" class=\"upload-title\">Supporting Documents</p>\r\n        <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n        <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your employment contract, offer letter, or reference letter (PDF, DOC, DOCX)</p>\r\n        <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Document\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n          {{ fileName }}\r\n          <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n        </p>\r\n      </div>\r\n\r\n      <div class=\"actions\">\r\n        <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n          <svg *ngIf=\"showedit || isAdding()\" 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=\"!showedit && !isAdding()\" 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          {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n        </button>\r\n        <div class=\"right-actions\">\r\n          <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n            class=\"secondary\" (click)=\"nextStep()\">\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\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n            (click)=\"saveFile()\">\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            {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Success Toast -->\r\n<div class=\"step-toast\" *ngIf=\"showSuccess()\">\r\n  <div class=\"step-toast-icon\">\r\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n      <path d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </svg>\r\n  </div>\r\n  <div class=\"step-toast-body\">\r\n    <div class=\"step-toast-title\">Saved Successfully</div>\r\n    <div class=\"step-toast-msg\">Work experience has been saved.</div>\r\n  </div>\r\n  <div class=\"step-toast-progress\"></div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\">\r\n    <div class=\"preview-header-icon\">\r\n      <img src=\"/assets/images/icons/briefcase-fill.svg\" alt=\"work experience\" width=\"20\" height=\"20\" />\r\n    </div>\r\n    <div>\r\n      <h3 class=\"preview-header-title\">Work Experience</h3>\r\n      <p class=\"preview-subtitle\">{{ workStore.experiences().length }} record{{ workStore.experiences().length !== 1 ? 's' : '' }} added</p>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"preview-timeline\">\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index; let last = last\"\r\n         class=\"timeline-entry\" [class.last]=\"last\">\r\n      <div class=\"timeline-track\">\r\n        <div class=\"timeline-dot\"></div>\r\n        <div class=\"timeline-line\" *ngIf=\"!last\"></div>\r\n      </div>\r\n      <div class=\"timeline-card\">\r\n        <div class=\"tc-head\">\r\n          <div class=\"tc-avatar\">{{ (exp.companyName || exp.jobTitle || '?').charAt(0).toUpperCase() }}</div>\r\n          <div class=\"tc-title-block\">\r\n            <span class=\"tc-title\">{{ exp.jobTitle }}</span>\r\n            <span class=\"tc-subtitle\">{{ exp.companyName }}</span>\r\n          </div>\r\n          <div class=\"tc-actions\">\r\n            <button class=\"icon-btn edit-btn\" (click)=\"edit(i)\" 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)=\"delete(i)\" 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          </div>\r\n        </div>\r\n        <div class=\"tc-chips\">\r\n          <span class=\"chip chip-date\" *ngIf=\"exp.fromDate || exp.toDate\">\r\n            <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"/></svg>\r\n            {{ exp.fromDate | date:'MMM yyyy' }}{{ exp.toDate ? ' \u2013 ' + (exp.toDate | date:'MMM yyyy') : ' \u2013 Present' }}\r\n          </span>\r\n          <span class=\"chip chip-location\" *ngIf=\"exp.city || exp.state\">\r\n            <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"/><circle cx=\"12\" cy=\"10\" r=\"3\"/></svg>\r\n            {{ exp.city }}{{ exp.city && (exp.state | stateName) ? ', ' : '' }}{{ exp.state | stateName }}\r\n          </span>\r\n          <span class=\"chip chip-country\" *ngIf=\"exp.country\">{{ exp.country }}</span>\r\n        </div>\r\n        <p class=\"tc-description\" *ngIf=\"exp.jobDescription\">{{ exp.jobDescription }}</p>\r\n        <div class=\"tc-attachment\" *ngIf=\"exp.fileUrl\">\r\n          <a [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\" class=\"attachment-link\">\r\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48\"/></svg>\r\n            {{ exp.fileName }}\r\n          </a>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"action\">\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\" (click)=\"add()\">\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\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\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</div>\r\n", styles: [".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}.education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input,select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input.is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;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-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 0 20px}.action{display:flex;justify-content:space-between;margin:24px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;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);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.work-preview{max-width:860px;padding:24px 0;margin:0 auto;background:#fff}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:28px;padding-bottom:20px;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:13px;color:#64748b;margin:0}.preview-timeline{display:flex;flex-direction:column;margin-bottom:28px}.timeline-entry{display:flex}.timeline-entry.last .timeline-line{display:none}.timeline-track{display:none;flex-direction:column;align-items:center;width:28px;flex-shrink:0;padding-top:22px}.timeline-dot{width:11px;height:11px;border-radius:50%;background:#4077ad;box-shadow:0 0 0 3px #ebf2f9;flex-shrink:0;z-index:1}.timeline-line{width:2px;flex:1;min-height:20px;background:linear-gradient(to bottom,#4077ad,#e2e8f0);margin-top:5px}.timeline-card{flex:1;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px 18px;margin:0 0 14px 14px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;transition:box-shadow .18s ease,transform .18s ease}.timeline-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.tc-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.tc-avatar{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,#4077ad,#2d5a8a);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.tc-title-block{flex:1;min-width:0}.tc-title{display:block;font-size:14px;font-weight:700;color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.35}.tc-subtitle{display:block;font-size:12px;color:#64748b;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-actions{display:flex;gap:2px;flex-shrink:0;margin-top:-2px}.icon-btn{width:28px;height:28px;border:none;min-width:unset!important;border-radius:6px;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}.tc-chips{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-date{background:#ebf2f9;color:#4077ad}.chip.chip-location{background:#f0fdf4;color:#15803d}.chip.chip-type{background:#faf5ff;color:#7c3aed}.chip.chip-country{background:#f8fafc;color:#64748b;border:1px solid #e2e8f0}.chip.chip-number{background:#fff7ed;color:#c2410c;font-family:monospace;font-size:11px}.chip.chip-expiry{background:#fffbeb;color:#b45309}.tc-description{font-size:12px;color:#64748b;line-height:1.55;margin:6px 0 8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.tc-attachment{padding-top:8px;border-top:1px solid #e2e8f0;margin-top:8px}.attachment-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#4077ad;text-decoration:none}.attachment-link:hover{text-decoration:underline}.job-title{color:#64748b;font-weight:400;font-size:14px}.edit-icon{cursor:pointer}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.form-check-input{width:auto!important;height:auto!important}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;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:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;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:11px;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:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;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}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}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;border-left:4px solid #22c55e;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:#64748b;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 (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.detail-grid{grid-template-columns:1fr}.actions,.action{flex-direction:column-reverse;gap:8px}.action{margin:48px 0 20px}.right-actions{justify-content:space-between;gap:8px;display:flex;flex-direction:column-reverse}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.form-row{gap:14px;flex-direction:column}.pointer{display:none}.add-btn{width:unset}button{width:100%}}\n"], dependencies: [{ kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WorkexperienceComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-workexperience', standalone: false, template: "<div *ngIf=\"!showpreview()\">\r\n  <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=\"work experience\" width=\"22\" height=\"22\" />\r\n      </div>\r\n      <div>\r\n        <h3 class=\"step-card-title\">Add Work Experience</h3>\r\n        <p class=\"step-card-subtitle\">Add your prior and current work history below</p>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"step-card-body\">\r\n      <form [formGroup]=\"workexperienceForm\">\r\n\r\n        <div class=\"field-section\">\r\n          <div class=\"field-section-title\">Basic Information</div>\r\n          <div class=\"row\">\r\n            <div class=\"field\">\r\n              <div class=\"head\">Company Name <span class=\"text-danger\">*</span></div>\r\n              <input type=\"text\" placeholder=\"Enter your company name here\" formControlName=\"companyName\" />\r\n              <small class=\"error\" *ngIf=\"workexperienceForm.get('companyName')?.touched &&\r\n                   workexperienceForm.get('companyName')?.hasError('required')\">\r\n                Company name is required\r\n              </small>\r\n            </div>\r\n            <div class=\"field\">\r\n              <div class=\"head\">Job Title <span class=\"text-danger\">*</span></div>\r\n              <input type=\"text\" placeholder=\"Enter your job title here\" formControlName=\"jobTitle\" />\r\n              <small class=\"error\" *ngIf=\"workexperienceForm.get('jobTitle')?.touched &&\r\n                   workexperienceForm.get('jobTitle')?.hasError('required')\">\r\n                Job title is required\r\n              </small>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"field-section\">\r\n          <div class=\"field-section-title\">Location &amp; Timeline</div>\r\n          <div class=\"row\">\r\n            <div class=\"field\">\r\n              <div class=\"head\">Country <span class=\"text-danger\">*</span></div>\r\n              <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n                [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n                <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n                  <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n                  &nbsp;{{ item.country }}\r\n                </ng-template>\r\n              </ng-select>\r\n            </div>\r\n            <div class=\"field\">\r\n              <div class=\"head\">State <span class=\"text-danger\">*</span></div>\r\n              <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n                placeholder=\"Select State\">\r\n                <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                  <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n                  &nbsp;{{ item.stateName }}\r\n                </ng-template>\r\n                <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                  <span class=\"ng-value-label\">{{ item.stateName }}</span>\r\n                  <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                    <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n                  </span>\r\n                </ng-template>\r\n              </ng-select>\r\n            </div>\r\n          </div>\r\n          <div class=\"row form-row\">\r\n            <div class=\"field\">\r\n              <div class=\"head\">City <span class=\"text-danger\">*</span></div>\r\n              <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n              <small class=\"error\" *ngIf=\"workexperienceForm.get('city')?.touched &&\r\n                   workexperienceForm.get('city')?.hasError('required')\">\r\n                City is required\r\n              </small>\r\n            </div>\r\n            <div class=\"field date\">\r\n              <div class=\"mb-3 head\">\r\n                <div class=\"head\">Start Date <span class=\"text-danger\">*</span></div>\r\n                <input class=\"form-control date-time-filter\" placeholder=\"Start date\" bsDatepicker [maxDate]=\"maxDate\"\r\n                  [bsConfig]=\"{ adaptivePosition: true, isAnimated: true, showWeekNumbers: false,\r\n                                    customTodayClass: !workexperienceForm.get('fromDate')?.value ? 'today-highlight' : '' }\"\r\n                  formControlName=\"fromDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n                <small class=\"error\" *ngIf=\"workexperienceForm.get('fromDate')?.touched &&\r\n                   workexperienceForm.get('fromDate')?.hasError('required')\">\r\n                  Start Date is required\r\n                </small>\r\n              </div>\r\n            </div>\r\n            <div class=\"field date\">\r\n              <div class=\"mb-3 head\">\r\n                <div class=\"head\">To Date <span class=\"text-danger\">*</span></div>\r\n                <input class=\"form-control date-time-filter\" placeholder=\"To date\" bsDatepicker\r\n                  [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true,\r\n                                    customTodayClass: !workexperienceForm.get('toDate')?.value ? 'today-highlight' : '' }\"\r\n                  formControlName=\"toDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n                <small class=\"error\" *ngIf=\"workexperienceForm.get('toDate')?.touched &&\r\n                   workexperienceForm.get('toDate')?.hasError('required')\">\r\n                  To Date is required\r\n                </small>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"field-section\">\r\n          <div class=\"field-section-title\">Job Description</div>\r\n          <div class=\"row\">\r\n            <div class=\"field full-width\">\r\n              <textarea placeholder=\"Describe your role and responsibilities\" formControlName=\"jobDescription\"></textarea>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </form>\r\n\r\n      <div class=\"upload-wrapper\">\r\n        <p *ngIf=\"!fileName\" class=\"upload-title\">Supporting Documents</p>\r\n        <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n        <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your employment contract, offer letter, or reference letter (PDF, DOC, DOCX)</p>\r\n        <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Document\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n          {{ fileName }}\r\n          <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n        </p>\r\n      </div>\r\n\r\n      <div class=\"actions\">\r\n        <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n          <svg *ngIf=\"showedit || isAdding()\" 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=\"!showedit && !isAdding()\" 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          {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n        </button>\r\n        <div class=\"right-actions\">\r\n          <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n            class=\"secondary\" (click)=\"nextStep()\">\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\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n            (click)=\"saveFile()\">\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            {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Success Toast -->\r\n<div class=\"step-toast\" *ngIf=\"showSuccess()\">\r\n  <div class=\"step-toast-icon\">\r\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n      <path d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </svg>\r\n  </div>\r\n  <div class=\"step-toast-body\">\r\n    <div class=\"step-toast-title\">Saved Successfully</div>\r\n    <div class=\"step-toast-msg\">Work experience has been saved.</div>\r\n  </div>\r\n  <div class=\"step-toast-progress\"></div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\">\r\n    <div class=\"preview-header-icon\">\r\n      <img src=\"/assets/images/icons/briefcase-fill.svg\" alt=\"work experience\" width=\"20\" height=\"20\" />\r\n    </div>\r\n    <div>\r\n      <h3 class=\"preview-header-title\">Work Experience</h3>\r\n      <p class=\"preview-subtitle\">{{ workStore.experiences().length }} record{{ workStore.experiences().length !== 1 ? 's' : '' }} added</p>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"preview-timeline\">\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index; let last = last\"\r\n         class=\"timeline-entry\" [class.last]=\"last\">\r\n      <div class=\"timeline-track\">\r\n        <div class=\"timeline-dot\"></div>\r\n        <div class=\"timeline-line\" *ngIf=\"!last\"></div>\r\n      </div>\r\n      <div class=\"timeline-card\">\r\n        <div class=\"tc-head\">\r\n          <div class=\"tc-avatar\">{{ (exp.companyName || exp.jobTitle || '?').charAt(0).toUpperCase() }}</div>\r\n          <div class=\"tc-title-block\">\r\n            <span class=\"tc-title\">{{ exp.jobTitle }}</span>\r\n            <span class=\"tc-subtitle\">{{ exp.companyName }}</span>\r\n          </div>\r\n          <div class=\"tc-actions\">\r\n            <button class=\"icon-btn edit-btn\" (click)=\"edit(i)\" 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)=\"delete(i)\" 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          </div>\r\n        </div>\r\n        <div class=\"tc-chips\">\r\n          <span class=\"chip chip-date\" *ngIf=\"exp.fromDate || exp.toDate\">\r\n            <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"/></svg>\r\n            {{ exp.fromDate | date:'MMM yyyy' }}{{ exp.toDate ? ' \u2013 ' + (exp.toDate | date:'MMM yyyy') : ' \u2013 Present' }}\r\n          </span>\r\n          <span class=\"chip chip-location\" *ngIf=\"exp.city || exp.state\">\r\n            <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"/><circle cx=\"12\" cy=\"10\" r=\"3\"/></svg>\r\n            {{ exp.city }}{{ exp.city && (exp.state | stateName) ? ', ' : '' }}{{ exp.state | stateName }}\r\n          </span>\r\n          <span class=\"chip chip-country\" *ngIf=\"exp.country\">{{ exp.country }}</span>\r\n        </div>\r\n        <p class=\"tc-description\" *ngIf=\"exp.jobDescription\">{{ exp.jobDescription }}</p>\r\n        <div class=\"tc-attachment\" *ngIf=\"exp.fileUrl\">\r\n          <a [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\" class=\"attachment-link\">\r\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48\"/></svg>\r\n            {{ exp.fileName }}\r\n          </a>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"action\">\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\" (click)=\"add()\">\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\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\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</div>\r\n", styles: [".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}.education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input,select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input.is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;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-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 0 20px}.action{display:flex;justify-content:space-between;margin:24px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;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);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.work-preview{max-width:860px;padding:24px 0;margin:0 auto;background:#fff}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:28px;padding-bottom:20px;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:13px;color:#64748b;margin:0}.preview-timeline{display:flex;flex-direction:column;margin-bottom:28px}.timeline-entry{display:flex}.timeline-entry.last .timeline-line{display:none}.timeline-track{display:none;flex-direction:column;align-items:center;width:28px;flex-shrink:0;padding-top:22px}.timeline-dot{width:11px;height:11px;border-radius:50%;background:#4077ad;box-shadow:0 0 0 3px #ebf2f9;flex-shrink:0;z-index:1}.timeline-line{width:2px;flex:1;min-height:20px;background:linear-gradient(to bottom,#4077ad,#e2e8f0);margin-top:5px}.timeline-card{flex:1;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px 18px;margin:0 0 14px 14px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;transition:box-shadow .18s ease,transform .18s ease}.timeline-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.tc-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.tc-avatar{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,#4077ad,#2d5a8a);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.tc-title-block{flex:1;min-width:0}.tc-title{display:block;font-size:14px;font-weight:700;color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.35}.tc-subtitle{display:block;font-size:12px;color:#64748b;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-actions{display:flex;gap:2px;flex-shrink:0;margin-top:-2px}.icon-btn{width:28px;height:28px;border:none;min-width:unset!important;border-radius:6px;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}.tc-chips{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-date{background:#ebf2f9;color:#4077ad}.chip.chip-location{background:#f0fdf4;color:#15803d}.chip.chip-type{background:#faf5ff;color:#7c3aed}.chip.chip-country{background:#f8fafc;color:#64748b;border:1px solid #e2e8f0}.chip.chip-number{background:#fff7ed;color:#c2410c;font-family:monospace;font-size:11px}.chip.chip-expiry{background:#fffbeb;color:#b45309}.tc-description{font-size:12px;color:#64748b;line-height:1.55;margin:6px 0 8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.tc-attachment{padding-top:8px;border-top:1px solid #e2e8f0;margin-top:8px}.attachment-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#4077ad;text-decoration:none}.attachment-link:hover{text-decoration:underline}.job-title{color:#64748b;font-weight:400;font-size:14px}.edit-icon{cursor:pointer}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;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:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;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:11px;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:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;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}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}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;border-left:4px solid #22c55e;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:#64748b;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 (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.detail-grid{grid-template-columns:1fr}.actions,.action{flex-direction:column-reverse;gap:8px}.action{margin:48px 0 20px}.right-actions{justify-content:space-between;gap:8px;display:flex;flex-direction:column-reverse}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.form-row{gap:14px;flex-direction:column}.pointer{display:none}.add-btn{width:unset}button{width:100%}}\n"] }]
+            args: [{ selector: 'app-workexperience', standalone: false, template: "<div *ngIf=\"!showpreview()\">\r\n  <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=\"work experience\" width=\"22\" height=\"22\" />\r\n      </div>\r\n      <div>\r\n        <h3 class=\"step-card-title\">Add Work Experience</h3>\r\n        <p class=\"step-card-subtitle\">Add your prior and current work history below</p>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"step-card-body\">\r\n      <form [formGroup]=\"workexperienceForm\">\r\n\r\n        <div class=\"field-section\">\r\n          <div class=\"field-section-title\">Basic Information</div>\r\n          <div class=\"row\">\r\n            <div class=\"field\">\r\n              <div class=\"head\">Company Name <span class=\"text-danger\">*</span></div>\r\n              <input type=\"text\" placeholder=\"Enter your company name here\" formControlName=\"companyName\" />\r\n              <small class=\"error\" *ngIf=\"workexperienceForm.get('companyName')?.touched &&\r\n                   workexperienceForm.get('companyName')?.hasError('required')\">\r\n                Company name is required\r\n              </small>\r\n            </div>\r\n            <div class=\"field\">\r\n              <div class=\"head\">Job Title <span class=\"text-danger\">*</span></div>\r\n              <input type=\"text\" placeholder=\"Enter your job title here\" formControlName=\"jobTitle\" />\r\n              <small class=\"error\" *ngIf=\"workexperienceForm.get('jobTitle')?.touched &&\r\n                   workexperienceForm.get('jobTitle')?.hasError('required')\">\r\n                Job title is required\r\n              </small>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"field-section\">\r\n          <div class=\"field-section-title\">Location &amp; Timeline</div>\r\n          <div class=\"row\">\r\n            <div class=\"field\">\r\n              <div class=\"head\">Country <span class=\"text-danger\">*</span></div>\r\n              <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n                [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n                <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n                  <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n                  &nbsp;{{ item.country }}\r\n                </ng-template>\r\n              </ng-select>\r\n            </div>\r\n            <div class=\"field\">\r\n              <div class=\"head\">State <span class=\"text-danger\">*</span></div>\r\n              <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n                placeholder=\"Select State\">\r\n                <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                  <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n                  &nbsp;{{ item.stateName }}\r\n                </ng-template>\r\n                <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                  <span class=\"ng-value-label\">{{ item.stateName }}</span>\r\n                  <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                    <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n                  </span>\r\n                </ng-template>\r\n              </ng-select>\r\n            </div>\r\n          </div>\r\n          <div class=\"row form-row\">\r\n            <div class=\"field\">\r\n              <div class=\"head\">City <span class=\"text-danger\">*</span></div>\r\n              <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n              <small class=\"error\" *ngIf=\"workexperienceForm.get('city')?.touched &&\r\n                   workexperienceForm.get('city')?.hasError('required')\">\r\n                City is required\r\n              </small>\r\n            </div>\r\n            <div class=\"field date\">\r\n              <div class=\"mb-3 head\">\r\n                <div class=\"head\">Start Date <span class=\"text-danger\">*</span></div>\r\n                <input class=\"form-control date-time-filter\" placeholder=\"Start date\" bsDatepicker [maxDate]=\"maxDate\"\r\n                  [bsConfig]=\"{ adaptivePosition: true, isAnimated: true, showWeekNumbers: false,\r\n                                    customTodayClass: !workexperienceForm.get('fromDate')?.value ? 'today-highlight' : '' }\"\r\n                  formControlName=\"fromDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n                <small class=\"error\" *ngIf=\"workexperienceForm.get('fromDate')?.touched &&\r\n                   workexperienceForm.get('fromDate')?.hasError('required')\">\r\n                  Start Date is required\r\n                </small>\r\n              </div>\r\n            </div>\r\n            <div class=\"field date\">\r\n              <div class=\"mb-3 head\">\r\n                <div class=\"head\">To Date <span class=\"text-danger\">*</span></div>\r\n                <input class=\"form-control date-time-filter\" placeholder=\"To date\" bsDatepicker\r\n                  [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true,\r\n                                    customTodayClass: !workexperienceForm.get('toDate')?.value ? 'today-highlight' : '' }\"\r\n                  formControlName=\"toDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n                <small class=\"error\" *ngIf=\"workexperienceForm.get('toDate')?.touched &&\r\n                   workexperienceForm.get('toDate')?.hasError('required')\">\r\n                  To Date is required\r\n                </small>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"field-section\">\r\n          <div class=\"field-section-title\">Job Description</div>\r\n          <div class=\"row\">\r\n            <div class=\"field full-width\">\r\n              <textarea placeholder=\"Describe your role and responsibilities\" formControlName=\"jobDescription\"></textarea>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </form>\r\n\r\n      <div class=\"upload-wrapper\">\r\n        <p *ngIf=\"!fileName\" class=\"upload-title\">Supporting Documents</p>\r\n        <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n        <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your employment contract, offer letter, or reference letter (PDF, DOC, DOCX)</p>\r\n        <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Document\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n          {{ fileName }}\r\n          <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n        </p>\r\n      </div>\r\n\r\n      <div class=\"actions\">\r\n        <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n          <svg *ngIf=\"showedit || isAdding()\" 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=\"!showedit && !isAdding()\" 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          {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n        </button>\r\n        <div class=\"right-actions\">\r\n          <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n            class=\"secondary\" (click)=\"nextStep()\">\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\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n            (click)=\"saveFile()\">\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            {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Success Toast -->\r\n<div class=\"step-toast\" *ngIf=\"showSuccess()\">\r\n  <div class=\"step-toast-icon\">\r\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n      <path d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </svg>\r\n  </div>\r\n  <div class=\"step-toast-body\">\r\n    <div class=\"step-toast-title\">Saved Successfully</div>\r\n    <div class=\"step-toast-msg\">Work experience has been saved.</div>\r\n  </div>\r\n  <div class=\"step-toast-progress\"></div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\">\r\n    <div class=\"preview-header-icon\">\r\n      <img src=\"/assets/images/icons/briefcase-fill.svg\" alt=\"work experience\" width=\"20\" height=\"20\" />\r\n    </div>\r\n    <div>\r\n      <h3 class=\"preview-header-title\">Work Experience</h3>\r\n      <p class=\"preview-subtitle\">{{ workStore.experiences().length }} record{{ workStore.experiences().length !== 1 ? 's' : '' }} added</p>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"preview-timeline\">\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index; let last = last\"\r\n         class=\"timeline-entry\" [class.last]=\"last\">\r\n      <div class=\"timeline-track\">\r\n        <div class=\"timeline-dot\"></div>\r\n        <div class=\"timeline-line\" *ngIf=\"!last\"></div>\r\n      </div>\r\n      <div class=\"timeline-card\">\r\n        <div class=\"tc-head\">\r\n          <div class=\"tc-avatar\">{{ (exp.companyName || exp.jobTitle || '?').charAt(0).toUpperCase() }}</div>\r\n          <div class=\"tc-title-block\">\r\n            <span class=\"tc-title\">{{ exp.jobTitle }}</span>\r\n            <span class=\"tc-subtitle\">{{ exp.companyName }}</span>\r\n          </div>\r\n          <div class=\"tc-actions\">\r\n            <button class=\"icon-btn edit-btn\" (click)=\"edit(i)\" 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)=\"delete(i)\" 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          </div>\r\n        </div>\r\n        <div class=\"tc-chips\">\r\n          <span class=\"chip chip-date\" *ngIf=\"exp.fromDate || exp.toDate\">\r\n            <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"/></svg>\r\n            {{ exp.fromDate | date:'MMM yyyy' }}{{ exp.toDate ? ' \u2013 ' + (exp.toDate | date:'MMM yyyy') : ' \u2013 Present' }}\r\n          </span>\r\n          <span class=\"chip chip-location\" *ngIf=\"exp.city || exp.state\">\r\n            <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"/><circle cx=\"12\" cy=\"10\" r=\"3\"/></svg>\r\n            {{ exp.city }}{{ exp.city && (exp.state | stateName) ? ', ' : '' }}{{ exp.state | stateName }}\r\n          </span>\r\n          <span class=\"chip chip-country\" *ngIf=\"exp.country\">{{ exp.country }}</span>\r\n        </div>\r\n        <p class=\"tc-description\" *ngIf=\"exp.jobDescription\">{{ exp.jobDescription }}</p>\r\n        <div class=\"tc-attachment\" *ngIf=\"exp.fileUrl\">\r\n          <a [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\" class=\"attachment-link\">\r\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48\"/></svg>\r\n            {{ exp.fileName }}\r\n          </a>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"action\">\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\" (click)=\"add()\">\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\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\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</div>\r\n", styles: [".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}.education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input,select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input.is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;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-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 0 20px}.action{display:flex;justify-content:space-between;margin:24px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;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);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.work-preview{max-width:860px;padding:24px 0;margin:0 auto;background:#fff}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:28px;padding-bottom:20px;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:13px;color:#64748b;margin:0}.preview-timeline{display:flex;flex-direction:column;margin-bottom:28px}.timeline-entry{display:flex}.timeline-entry.last .timeline-line{display:none}.timeline-track{display:none;flex-direction:column;align-items:center;width:28px;flex-shrink:0;padding-top:22px}.timeline-dot{width:11px;height:11px;border-radius:50%;background:#4077ad;box-shadow:0 0 0 3px #ebf2f9;flex-shrink:0;z-index:1}.timeline-line{width:2px;flex:1;min-height:20px;background:linear-gradient(to bottom,#4077ad,#e2e8f0);margin-top:5px}.timeline-card{flex:1;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px 18px;margin:0 0 14px 14px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;transition:box-shadow .18s ease,transform .18s ease}.timeline-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.tc-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.tc-avatar{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,#4077ad,#2d5a8a);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.tc-title-block{flex:1;min-width:0}.tc-title{display:block;font-size:14px;font-weight:700;color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.35}.tc-subtitle{display:block;font-size:12px;color:#64748b;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-actions{display:flex;gap:2px;flex-shrink:0;margin-top:-2px}.icon-btn{width:28px;height:28px;border:none;min-width:unset!important;border-radius:6px;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}.tc-chips{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-date{background:#ebf2f9;color:#4077ad}.chip.chip-location{background:#f0fdf4;color:#15803d}.chip.chip-type{background:#faf5ff;color:#7c3aed}.chip.chip-country{background:#f8fafc;color:#64748b;border:1px solid #e2e8f0}.chip.chip-number{background:#fff7ed;color:#c2410c;font-family:monospace;font-size:11px}.chip.chip-expiry{background:#fffbeb;color:#b45309}.tc-description{font-size:12px;color:#64748b;line-height:1.55;margin:6px 0 8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.tc-attachment{padding-top:8px;border-top:1px solid #e2e8f0;margin-top:8px}.attachment-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#4077ad;text-decoration:none}.attachment-link:hover{text-decoration:underline}.job-title{color:#64748b;font-weight:400;font-size:14px}.edit-icon{cursor:pointer}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.form-check-input{width:auto!important;height:auto!important}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;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:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;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:11px;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:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;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}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}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;border-left:4px solid #22c55e;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:#64748b;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 (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.detail-grid{grid-template-columns:1fr}.actions,.action{flex-direction:column-reverse;gap:8px}.action{margin:48px 0 20px}.right-actions{justify-content:space-between;gap:8px;display:flex;flex-direction:column-reverse}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.form-row{gap:14px;flex-direction:column}.pointer{display:none}.add-btn{width:unset}button{width:100%}}\n"] }]
         }], ctorParameters: () => [{ type: UserExperienceService }, { type: UserService }, { type: WorkExperienceStore }, { type: CredentialingStore }, { type: CountryServices }, { type: PostalCodeServices }, { type: i1$1.TokenService }, { type: i1$1.RoleContextService }, { type: i8.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
                 type: Input
             }], providerName: [{
@@ -35096,7 +35166,7 @@ class InitialProcessComponent {
         this.selectedContractorCategories.forEach((e) => {
             var obj = e?.items
                 ?.filter((a) => a.selected)
-                .map((a) => ({ providerId: id, contractorSubCategoryId: a.contractorSubCategoryId }));
+                .map((a) => ({ targetProviderId: id, contractorSubCategoryId: a.contractorSubCategoryId }));
             if (obj?.length)
                 saveModel = [...saveModel, ...obj];
         });