@idsoftsource/initial-process 1.3.3 → 1.3.5

package/fesm2022/idsoftsource-initial-process.mjs

@@ -1461,11 +1461,11 @@ class StepperComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: StepperComponent, deps: [{ token: CredentialingStore }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: StepperComponent, isStandalone: false, selector: "app-stepper", ngImport: i0, template: "<div class=\"stepper-wrapper\">\r\n  <div class=\"tabs\">\r\n    <div\r\n      *ngFor=\"let step of steps; let i = index\"\r\n      class=\"tab\"\r\n      [class.active]=\"store.currentStep() === i + 1\"\r\n      [class.completed]=\"store.currentStep() > i + 1\"\r\n      (click)=\"goToStep(i)\"\r\n    >\r\n      {{ step }}\r\n    </div>\r\n    <div class=\"align-items-center d-flex step-count\">\r\n      Step {{ store.currentStep() }}/{{ steps.length }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".stepper-wrapper{display:flex;align-items:center}.stepper-wrapper .tabs{width:100%;display:flex}.stepper-wrapper .tabs .tab{padding:15px 30.4px;cursor:pointer;background-color:#f1f4fa;color:#4077ad;font-weight:500;transition:all .3s;text-align:center}.stepper-wrapper .tabs .tab.active,.stepper-wrapper .tabs .tab.completed{background-color:#4077ad;color:#fff}.stepper-wrapper .step-count{font-weight:500;color:#fff;background:#4077ad;width:10%;justify-content:center}@media screen and (max-width: 767px){.stepper-wrapper .tabs{width:100%;display:flex;flex-direction:column}.stepper-wrapper .step-count{width:100%;padding:8px}}\n"], dependencies: [{ kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: StepperComponent, isStandalone: false, selector: "app-stepper", ngImport: i0, template: "<div class=\"stepper-wrapper\">\r\n  <div class=\"tabs\">\r\n    <div\r\n      *ngFor=\"let step of steps; let i = index\"\r\n      class=\"tab\"\r\n      [class.active]=\"store.currentStep() === i + 1\"\r\n      [class.completed]=\"store.currentStep() > i + 1\"\r\n      (click)=\"goToStep(i)\"\r\n    >\r\n      {{ step }}\r\n    </div>\r\n    <div class=\"align-items-center d-flex step-count\">\r\n      Step {{ store.currentStep() }}/{{ steps.length }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".stepper-wrapper{display:flex;align-items:center}.stepper-wrapper .tabs{width:100%;display:flex}.stepper-wrapper .tabs .tab{padding:15px 30.4px;cursor:pointer;background-color:#f1f4fa;color:#4077ad;font-weight:500;transition:all .3s;text-align:center}.stepper-wrapper .tabs .tab.active,.stepper-wrapper .tabs .tab.completed{background-color:#4077ad;color:#fff}.stepper-wrapper .step-count{font-weight:500;color:#fff;background:#4077ad;width:10%;justify-content:center}@media screen and (max-width: 767px){.stepper-wrapper .tabs{width:100%;display:flex;flex-direction:column}.stepper-wrapper .step-count{width:100%;padding:8px}}.tab.active{background-color:#7a94ac!important;color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: StepperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-stepper', standalone: false, template: "<div class=\"stepper-wrapper\">\r\n  <div class=\"tabs\">\r\n    <div\r\n      *ngFor=\"let step of steps; let i = index\"\r\n      class=\"tab\"\r\n      [class.active]=\"store.currentStep() === i + 1\"\r\n      [class.completed]=\"store.currentStep() > i + 1\"\r\n      (click)=\"goToStep(i)\"\r\n    >\r\n      {{ step }}\r\n    </div>\r\n    <div class=\"align-items-center d-flex step-count\">\r\n      Step {{ store.currentStep() }}/{{ steps.length }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".stepper-wrapper{display:flex;align-items:center}.stepper-wrapper .tabs{width:100%;display:flex}.stepper-wrapper .tabs .tab{padding:15px 30.4px;cursor:pointer;background-color:#f1f4fa;color:#4077ad;font-weight:500;transition:all .3s;text-align:center}.stepper-wrapper .tabs .tab.active,.stepper-wrapper .tabs .tab.completed{background-color:#4077ad;color:#fff}.stepper-wrapper .step-count{font-weight:500;color:#fff;background:#4077ad;width:10%;justify-content:center}@media screen and (max-width: 767px){.stepper-wrapper .tabs{width:100%;display:flex;flex-direction:column}.stepper-wrapper .step-count{width:100%;padding:8px}}\n"] }]
+            args: [{ selector: 'app-stepper', standalone: false, template: "<div class=\"stepper-wrapper\">\r\n  <div class=\"tabs\">\r\n    <div\r\n      *ngFor=\"let step of steps; let i = index\"\r\n      class=\"tab\"\r\n      [class.active]=\"store.currentStep() === i + 1\"\r\n      [class.completed]=\"store.currentStep() > i + 1\"\r\n      (click)=\"goToStep(i)\"\r\n    >\r\n      {{ step }}\r\n    </div>\r\n    <div class=\"align-items-center d-flex step-count\">\r\n      Step {{ store.currentStep() }}/{{ steps.length }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".stepper-wrapper{display:flex;align-items:center}.stepper-wrapper .tabs{width:100%;display:flex}.stepper-wrapper .tabs .tab{padding:15px 30.4px;cursor:pointer;background-color:#f1f4fa;color:#4077ad;font-weight:500;transition:all .3s;text-align:center}.stepper-wrapper .tabs .tab.active,.stepper-wrapper .tabs .tab.completed{background-color:#4077ad;color:#fff}.stepper-wrapper .step-count{font-weight:500;color:#fff;background:#4077ad;width:10%;justify-content:center}@media screen and (max-width: 767px){.stepper-wrapper .tabs{width:100%;display:flex;flex-direction:column}.stepper-wrapper .step-count{width:100%;padding:8px}}.tab.active{background-color:#7a94ac!important;color:#fff!important}\n"] }]
         }], ctorParameters: () => [{ type: CredentialingStore }] });
 
 const STORAGE_KEY = 'profile_full_state';
@@ -2491,7 +2491,9 @@ class UserDocumentService {
         return this.httpClient.put(`${this.baseUrl}/UpdateUserDocument`, model);
     }
     getUserDocument(query) {
-        return this.httpClient.get(`${this.baseUrl}/GetUserDocument`);
+        return this.httpClient.get(`${this.baseUrl}/GetUserDocument`, {
+            params: this.buildParams(query)
+        });
     }
     buildParams(query) {
         let params = new HttpParams();
@@ -2537,7 +2539,7 @@ class CertificationStore {
             page: 1,
             pageSize: 10,
             orderBy: 'createdDateTime asc',
-            filter: `mainType=2,userId=${userId}`,
+            filter: `mainType=2`,
         };
         this.userDocumentService
             .getUserDocument(query)
@@ -3573,6 +3575,22 @@ class SkillsComponent {
             this.tab.markAsUntouched();
         }, 0);
     }
+    goToAddSkillsMode() {
+        // 1️⃣ Switch step in the store
+        this.store.goToAdd();
+        // 2️⃣ Reset component-level states
+        this.isEditMode = false;
+        this.model = null;
+        this.tabs = [];
+        this.tab.clear();
+        this.selectedTab = null;
+        // Reset copy options
+        this.isCopy = false;
+        this.copyData = null;
+        this.copyOptionIndex = 0;
+        // 3️⃣ Reset all skill checkbox selections
+        this.skillSets.forEach(skill => skill.selected = false);
+    }
     createGroup(skillSetId, skillName) {
         return this.formBuilder.group({
             forUser: [ForUser.ForProducer],
@@ -3679,6 +3697,9 @@ class SkillsComponent {
             error: err => console.log(err)
         });
     }
+    cancel() {
+        this.store.stepView.set('preview');
+    }
     backToSkill(accGroup) {
         this.isEditMode = false;
         this.model = null;
@@ -3954,7 +3975,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: i6.RoleContextService }, { token: CredentialingStore }, { token: i6.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: "<!-- SKILL PREVIEW LIST -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'preview'\">\r\n  <h5 class=\"title text-secondary\">Skills Preview</h5>\r\n  <!-- <p class=\"subtitle\">First-time users should enter skillsets with Inspector Match, Once you setup skillsets in your\r\n    business profile you can add skills under</p> -->\r\n  <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n    <accordion-group *ngFor=\"let skill of userSkillsPreview\" #accGroup\r\n      (isOpenChange)=\"onSkillAccordionChange(skill, $event)\">\r\n      <!-- HEADER -->\r\n      <div accordion-heading class=\"skill-preview-header\">\r\n        <span class=\"fw-semibold text-secondary\">\r\n          {{ skill.skillSetName }}\r\n        </span>\r\n        <div class=\"actions\">\r\n          <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n            <button type=\"button\" class=\"me-3\" (click)=\"editSkillFromPreview(skill, accGroup, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" alt=\"icon\" />\r\n            </button>\r\n            <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n              [class.rotate]=\"accGroup.isOpen\" />\r\n          </ng-container>\r\n          <ng-container *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\">\r\n            <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backToSkill(accGroup)\">\r\n              Cancel\r\n            </button>\r\n            <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserSkillset()\" \r\n              [disabled]=\"showLoader\">\r\n              Update\r\n            </button>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <!-- BODY -->\r\n      <div class=\"skill-preview-body content-part\">\r\n        <!-- DISPLAY MODE -->\r\n        <div *ngIf=\"!isEditMode || model?.skillSetId !== skill.skillSetId\"\r\n          class=\"d-flex justify-content-between align-items-center flex-wrap gap-3\">\r\n          <div>\r\n            <label>Service Provider</label> <br>\r\n            {{ skill.providerName }}\r\n          </div>\r\n          <div>\r\n            <label>Skill</label> <br>\r\n            {{ skill.skillSetName }}\r\n          </div>\r\n          <div style=\"pointer-events: none;\">\r\n            <label>Self Ability Rating</label> <br>\r\n            <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n          </div>\r\n          <div>\r\n            <label class=\"mb-0 pb-0 label\">Years of Experience</label> <br>\r\n            {{ skill?.year }}\r\n          </div>\r\n          <div>\r\n            <label>Visible</label> <br>\r\n            <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"skill.profileVisibility\" disabled>\r\n          </div>\r\n          <div class=\"w-100 mt-3\">\r\n            <label>Description</label> <br>\r\n            {{ skill.notes }}\r\n          </div>\r\n        </div>\r\n        <!-- EDIT MODE -->\r\n        <div *ngIf=\"isEditMode && model?.skillSetId === skill.skillSetId\" [formGroup]=\"tab.at(0)\">\r\n          <div class=\"d-flex justify-content-between align-items-center flex-wrap gap-3\">\r\n            <div>\r\n              <label>Service Provider</label> <br>\r\n              {{ skill.providerName }}\r\n            </div>\r\n            <div>\r\n              <label>Skill</label> <br>\r\n              {{ skill.skillSetName }}\r\n            </div>\r\n            <div>\r\n              <label>Self Ability Rating</label> <br>\r\n              <ngx-stars *ngIf=\"tab.at(0)?.get('starRating')?.value !== null\" [key]=\"tab.at(0).get('starRating')?.value\"\r\n                [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n                (rate)=\"onEditRating($event)\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div style=\"width: 200px;\">\r\n              <label class=\"mb-0 label pb-0\">Years of Experience</label> <br>\r\n              <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\" formControlName=\"year\"\r\n                [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\" bindValue=\"value\"\r\n                [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"></ng-select>\r\n            </div>\r\n            <div>\r\n              <label>Visible</label> <br>\r\n              <input class=\"form-check-input \" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n            </div>\r\n          </div>\r\n          <div class=\"mt-3\">\r\n            <label>Description</label> <br>\r\n            <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\" placeholder=\"Enter notes\"\r\n              style=\"height: 80px;\"></textarea>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </accordion-group>\r\n  </accordion>\r\n</div>\r\n\r\n<!-- Add part -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'add'\">\r\n  <h2 class=\"title text-secondary\">Add Skills</h2>\r\n  <p class=\"subtitle\">A minimum of 5 skills is needed</p>\r\n  <div class=\"content-part\">\r\n    <h6 class=\"text-secondary\"> {{ form?.value?.id ? \"Update Skill Category\" : \"Create Skill Category\" }}</h6>\r\n    <div class=\"sub-section\">\r\n      <div class=\"row mt-2\">\r\n        <div class=\"col-12 col-md-12 col-sm-12\">\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=\"search\" class=\"create-plus\" width=\"18\"\r\n                height=\"18\" />\r\n            </button>\r\n          </div>\r\n          <div *ngIf=\"errMsg\" class=\"invalid-feedback is-invalid d-block\">\r\n            Please Enter Skillsets Name\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n        {{nameError}}\r\n      </div>\r\n      <div class=\"col skills-section\" [ngClass]=\"showLoading && !isEditMode ? 'loader':''\">\r\n        <div class=\"row mt-2\" [ngStyle]=\"showLoader && !isEditMode ? {'min-height': '150px'} : {}\">\r\n          <div class=\"col-12 col-md-4\" *ngFor=\"let skill of skillSets\">\r\n            <div class=\"mt-2 gap-1 d-flex align-items-start\">\r\n             <input \r\n  type=\"checkbox\"\r\n  [checked]=\"skill.selected\"\r\n  (change)=\"onSelectedSkillsets($event, skill)\"\r\n  id=\"{{skill.id}}\"\r\n  name=\"{{skill.id}}\">\r\n<label class=\"text-title\" for=\"{{skill.id}}\">\r\n  {{ skill.name }}\r\n</label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        [ngClass]=\"{ 'loader': showLoading && !isEditMode,'pt-3': !showLoading && !isEditMode,'edit-mode': isEditMode}\">\r\n        <!-- <loader [show]=\"showLoading\" [small]=\"true\"></loader> -->\r\n        <tabset #tabSet>\r\n          <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab.controls; let index = index\"\r\n            [label]=\"tabs[index]\" tab1 id={{tabs[index]}} #{{tabs[index]}}>\r\n            <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n              <span class=\"text-secondary\">{{tabs[index]}}</span>\r\n              <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.skillSetId.value)\">\r\n                <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n              </button>\r\n            </ng-template>\r\n            <div [formGroup]=\"group\" class=\"tab-card\">\r\n              <div class=\"card-body\">\r\n                <div class=\"row\">\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Self Ability Rating</label>\r\n                    <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\" [maxStars]=\"5\">\r\n                    </ngx-stars>\r\n                    <div *ngIf=\"userSkillSubmitted && k?.starRating?.errors\" class=\"invalid-feedback\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\">\r\n                      <div *ngIf=\"k?.starRating?.errors?.required\">Star\r\n                        Rating is\r\n                        required</div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label \">Years of Experience</label>\r\n                    <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n                      formControlName=\"year\" [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\"\r\n                      bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"\r\n                      (change)=\"onYearChange(group)\"></ng-select>\r\n\r\n                    <div *ngIf=\"userSkillSubmitted && k?.year?.errors\" class=\"invalid-feedback\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\">\r\n                      <div *ngIf=\"k?.year?.errors?.required\">Year is\r\n                        required</div>\r\n                    </div>\r\n\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1 text-center\">\r\n                    <label class=\"label\">Profile\r\n                      Visibility</label><br />\r\n                    <input class=\"form-check-input \" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n                  </div>\r\n\r\n                  <div class=\"col-12 col-md-2 mt-1\" *ngIf=\"tab.controls.length>1 && index == copyOptionIndex\">\r\n                    <label class=\"mb-2 label\">Copy to All Tabs</label>\r\n                    <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index,group.value)\"\r\n                      role=\"switch\">\r\n                  </div>\r\n                </div>\r\n                <div>\r\n                  <label class=\"label\">Description</label>\r\n                  <div class=\"col-12 col-md-12 mt-1\">\r\n                    <textarea placeholder=\"Description of your Skill here\" formControlName=\"notes\" class=\"form-control\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.notes?.errors }\" rows=\"5\"></textarea>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </tab>\r\n        </tabset>\r\n      </div>\r\n      <!-- <div class=\"row pt-3\">\r\n        <div class=\"pt-3 text-end\">\r\n          <button class=\"back-btn\" (click)=\"reset()\">Reset</button>\r\n        </div>\r\n      </div> -->\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Footer buttons -->\r\n<div class=\"skills-container last footer-actions\">\r\n  <button class=\"back-btn\" (click)=\"back()\">Back</button>\r\n  <div class=\"mb-res\">\r\n    <button class=\"back-btn me-3\" *ngIf=\"store.stepView() === 'add'\" (click)=\"next()\">Skip</button>\r\n    <button class=\"continue-btn add me-3\" *ngIf=\"store.stepView() === 'preview'\" (click)=\"store.goToAdd()\">\r\n      Add More Skills\r\n    </button>\r\n    <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n      Continue</button>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";.skills-container{max-width:1000px;margin:40px auto;min-height:300px}.skills-container.last{min-height:unset}.title{font-size:22px;margin-bottom:4px}.subtitle{font-size:13px;color:#777;margin-bottom:30px}.content-part{background:#fff}.content-part p,.content-part div{font-size:small}.content-part .card{margin-top:15px;background-color:#fff;border-radius:10px}.content-part .card .row{margin-top:-15px}.content-part .card .sub-section{padding:0 10px}.content-part .card .sub-section .title{font-size:16px;font-weight:400;color:var(--font-primary)}.content-part .card .sub-section .info-title{font-size:12px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .card .sub-section .content{font-size:12px}.content-part .card .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px}.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-color:#fff;border-radius:5px;color:var(--font-primary);margin-top:15px}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;position:relative;border-radius:5px;border:1px solid #d3dae6;padding:10px 0 10px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;height:45px}.content-part .search-part input{width:auto;flex:1;color:var(--font-dark);font-size:var(--font12-input);font-weight:400;border:none;background:none;outline:none}.content-part .search-part .btn{background:#1e2541;border-radius:5px;padding:5px;width:41px;height:36px;margin-right:3px}.content-part .search-part .btn img{filter:brightness(0) invert(1)}.content-part textarea{width:100%;height:100px;background:none}.content-part .skills-section{margin-left:5px}.content-part .skills-section .category-title{margin-bottom:5px;font-size:13px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .skills-section .text-title{font-size:13px;margin-left:3px;color:var(--font-primary);display:contents}.content-part .skills-section input[type=checkbox]{border:2px solid #000!important;height:14px!important;width:15px!important;border-radius:2px!important;margin:2px}.content-part .skills-section input[type=checkbox]:checked{background-color:#000!important;border:2px solid #000!important}.content-part .skills-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#000;width:15px;display:flex;justify-content:center;border:2px solid #000;height:14px;align-items:center;border-radius:2px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#237b4b!important;border:1px solid #237b4b!important}::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#f1f4fa}::ng-deep .ng-select .ng-select-container{background:#f1f4fa;border:1px solid #ccc;border-radius:5px}.back-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background:#d3dae6;color:#fff;border-radius:5px;padding:6px 8px}.save-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px}.create-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px;height:40px;min-width:9rem}.form-control{color:#333;background:none!important;min-height:36px;font-size:small;height:43px}.form-control:focus{box-shadow:none!important}.close-popup{position:absolute;right:7px;top:4px;width:25px}.label{font-size:12px;font-weight:700;padding-bottom:8px}.form-control:focus{border:var(--bs-border-width) solid var(--bs-border-color)}::ng-deep .nav-link{color:#000!important}.loader{filter:blur(3px);height:40px}.edit-mode ::ng-deep .nav-tabs{display:none!important}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:100px}.skip-btn,.back-btn{background:#d3dae6;color:#6c757dc7;font-size:14px;border-radius:5px;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px}.skip-btn.edit,.back-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn{padding:7px 23px;background-color:#4077ad;color:#fff;border-radius:5px;min-width:8rem;min-height:45px;border:white}.continue-btn:disabled{background-color:#d1d5db;cursor:not-allowed}.continue-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn.add{background-color:#2e5b70}.skill-preview-wrapper{margin-bottom:24px}.skill-preview-card{border-radius:12px;margin-bottom:12px;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease;overflow:hidden}::ng-deep accordion-group+accordion-group{margin-top:20px}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:10px 0}.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)}.skill-preview-body label{font-weight:500;font-size:13px;color:#6b7280}.skill-preview-body p{margin:0}@media screen and (max-width: 767px){.skills-container{padding:0 10px}.footer-actions{flex-direction:column-reverse;gap:5px;margin-top:65px}.back-btn{width:100%}.continue-btn{padding:10px 43px}.mb-res{display:flex;flex-direction:column-reverse;gap:5px;width:100%}}\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: i12$2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i13.TabDirective, selector: "tab, [tab]", inputs: ["heading", "id", "disabled", "removable", "tabOrder", "customClass", "active"], outputs: ["selectTab", "deselect", "removed"], exportAs: ["tab"] }, { kind: "component", type: i13.TabsetComponent, selector: "tabset", inputs: ["vertical", "justified", "type"] }, { kind: "directive", type: i13.TabHeadingDirective, selector: "[tabHeading]" }, { kind: "component", type: i14.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i14.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }], 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: "<!-- SKILL PREVIEW LIST -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'preview'\">\r\n  <h5 class=\"title text-secondary\">Skills Preview</h5>\r\n  <!-- <p class=\"subtitle\">First-time users should enter skillsets with Inspector Match, Once you setup skillsets in your\r\n    business profile you can add skills under</p> -->\r\n  <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n    <accordion-group *ngFor=\"let skill of userSkillsPreview\" #accGroup\r\n      (isOpenChange)=\"onSkillAccordionChange(skill, $event)\">\r\n      <!-- HEADER -->\r\n      <div accordion-heading class=\"skill-preview-header\">\r\n        <span class=\"fw-semibold text-secondary\">\r\n          {{ skill.skillSetName }}\r\n        </span>\r\n        <div class=\"actions\">\r\n          <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n            <button type=\"button\" class=\"me-3\" (click)=\"editSkillFromPreview(skill, accGroup, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" alt=\"icon\" />\r\n            </button>\r\n            <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n              [class.rotate]=\"accGroup.isOpen\" />\r\n          </ng-container>\r\n          <ng-container *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\">\r\n            <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backToSkill(accGroup)\">\r\n              Cancel\r\n            </button>\r\n            <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserSkillset()\" [disabled]=\"showLoader\">\r\n              Update\r\n            </button>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <!-- BODY -->\r\n      <div class=\"skill-preview-body content-part\">\r\n        <!-- DISPLAY MODE -->\r\n        <div *ngIf=\"!isEditMode || model?.skillSetId !== skill.skillSetId\"\r\n          class=\"d-flex justify-content-between align-items-center flex-wrap gap-3\">\r\n          <div>\r\n            <label>Service Provider</label> <br>\r\n            {{ skill.providerName }}\r\n          </div>\r\n          <div>\r\n            <label>Skill</label> <br>\r\n            {{ skill.skillSetName }}\r\n          </div>\r\n          <div style=\"pointer-events: none;\">\r\n            <label>Self Ability Rating</label> <br>\r\n            <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n          </div>\r\n          <div>\r\n            <label class=\"mb-0 pb-0 label\">Years of Experience</label> <br>\r\n            {{ skill?.year }}\r\n          </div>\r\n          <div>\r\n            <label>Visible</label> <br>\r\n            <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"skill.profileVisibility\" disabled>\r\n          </div>\r\n          <div class=\"w-100 mt-3\">\r\n            <label>Description</label> <br>\r\n            {{ skill.notes }}\r\n          </div>\r\n        </div>\r\n        <!-- EDIT MODE -->\r\n        <div *ngIf=\"isEditMode && model?.skillSetId === skill.skillSetId\" [formGroup]=\"tab.at(0)\">\r\n          <div class=\"d-flex justify-content-between align-items-center flex-wrap gap-3\">\r\n            <div>\r\n              <label>Service Provider</label> <br>\r\n              {{ skill.providerName }}\r\n            </div>\r\n            <div>\r\n              <label>Skill</label> <br>\r\n              {{ skill.skillSetName }}\r\n            </div>\r\n            <div>\r\n              <label>Self Ability Rating</label> <br>\r\n              <ngx-stars *ngIf=\"tab.at(0)?.get('starRating')?.value !== null\" [key]=\"tab.at(0).get('starRating')?.value\"\r\n                [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n                (rate)=\"onEditRating($event)\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div style=\"width: 200px;\">\r\n              <label class=\"mb-0 label pb-0\">Years of Experience</label> <br>\r\n              <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n                formControlName=\"year\" [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\"\r\n                bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"></ng-select>\r\n            </div>\r\n            <div>\r\n              <label>Visible</label> <br>\r\n              <input class=\"form-check-input \" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n            </div>\r\n          </div>\r\n          <div class=\"mt-3\">\r\n            <label>Description</label> <br>\r\n            <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\" placeholder=\"Enter notes\"\r\n              style=\"height: 80px;\"></textarea>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </accordion-group>\r\n  </accordion>\r\n</div>\r\n\r\n<!-- Add part -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'add'\">\r\n  <h2 class=\"title text-secondary\">Add Skills</h2>\r\n  <p class=\"subtitle\">A minimum of 5 skills is needed</p>\r\n  <div class=\"content-part\">\r\n    <h6 class=\"text-secondary\"> {{ form?.value?.id ? \"Update Skill Category\" : \"Create Skill Category\" }}</h6>\r\n    <div class=\"sub-section\">\r\n      <div class=\"row mt-2\">\r\n        <div class=\"col-12 col-md-12 col-sm-12\">\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=\"search\" 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\">\r\n            Please Enter Skillsets Name\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n        {{nameError}}\r\n      </div>\r\n      <div class=\"col skills-section\" [ngClass]=\"showLoading && !isEditMode ? 'loader':''\">\r\n        <div class=\"row mt-2\" [ngStyle]=\"showLoader && !isEditMode ? {'min-height': '150px'} : {}\">\r\n          <div class=\"col-12 col-md-4\" *ngFor=\"let skill of skillSets\">\r\n            <div class=\"mt-2 gap-1 d-flex align-items-start\">\r\n              <input type=\"checkbox\" [checked]=\"skill.selected\" (change)=\"onSelectedSkillsets($event, skill)\"\r\n                id=\"{{skill.id}}\" name=\"{{skill.id}}\">\r\n              <label class=\"text-title\" for=\"{{skill.id}}\">\r\n                {{ skill.name }}\r\n              </label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        [ngClass]=\"{ 'loader': showLoading && !isEditMode,'pt-3': !showLoading && !isEditMode,'edit-mode': isEditMode}\">\r\n        <!-- <loader [show]=\"showLoading\" [small]=\"true\"></loader> -->\r\n        <tabset #tabSet>\r\n          <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab.controls; let index = index\"\r\n            [label]=\"tabs[index]\" tab1 id={{tabs[index]}} #{{tabs[index]}}>\r\n            <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n              <span class=\"text-secondary\">{{tabs[index]}}</span>\r\n              <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.skillSetId.value)\">\r\n                <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n              </button>\r\n            </ng-template>\r\n            <div [formGroup]=\"group\" class=\"tab-card\">\r\n              <div class=\"card-body\">\r\n                <div class=\"row\">\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Self Ability Rating</label>\r\n                    <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\" [maxStars]=\"5\">\r\n                    </ngx-stars>\r\n                    <div *ngIf=\"userSkillSubmitted && k?.starRating?.errors\" class=\"invalid-feedback\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\">\r\n                      <div *ngIf=\"k?.starRating?.errors?.required\">Star\r\n                        Rating is\r\n                        required</div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label \">Years of Experience</label>\r\n                    <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\"\r\n                      bindLabel=\"text\" formControlName=\"year\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\" bindValue=\"value\"\r\n                      [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"\r\n                      (change)=\"onYearChange(group)\"></ng-select>\r\n\r\n                    <div *ngIf=\"userSkillSubmitted && k?.year?.errors\" class=\"invalid-feedback\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\">\r\n                      <div *ngIf=\"k?.year?.errors?.required\">Year is\r\n                        required</div>\r\n                    </div>\r\n\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1 text-center\">\r\n                    <label class=\"label\">Profile\r\n                      Visibility</label><br />\r\n                    <input class=\"form-check-input \" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n                  </div>\r\n\r\n                  <div class=\"col-12 col-md-2 mt-1\" *ngIf=\"tab.controls.length>1 && index == copyOptionIndex\">\r\n                    <label class=\"mb-2 label\">Copy to All Tabs</label>\r\n                    <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index,group.value)\"\r\n                      role=\"switch\">\r\n                  </div>\r\n                </div>\r\n                <div>\r\n                  <label class=\"label\">Description</label>\r\n                  <div class=\"col-12 col-md-12 mt-1\">\r\n                    <textarea placeholder=\"Description of your Skill here\" formControlName=\"notes\" class=\"form-control\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.notes?.errors }\" rows=\"5\"></textarea>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </tab>\r\n        </tabset>\r\n      </div>\r\n      <!-- <div class=\"row pt-3\">\r\n        <div class=\"pt-3 text-end\">\r\n          <button class=\"back-btn\" (click)=\"reset()\">Reset</button>\r\n        </div>\r\n      </div> -->\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Footer buttons -->\r\n\r\n<div *ngIf=\"store.stepView() === 'add'\" class=\"skills-container last footer-actions\">\r\n  <button class=\"back-btn\" (click)=\"cancel()\">Cancel</button>\r\n  <div class=\"mb-res\">   \r\n    <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n      Continue</button>\r\n  </div>\r\n</div>\r\n\r\n\r\n<div *ngIf=\"store.stepView() !== 'add'\" class=\"skills-container last footer-actions\">\r\n  <button class=\"back-btn\" (click)=\"back()\">Back</button>\r\n  <div class=\"mb-res\">\r\n    <button class=\"back-btn me-3\" *ngIf=\"store.stepView() === 'add'\" (click)=\"next()\">Skip</button>\r\n    <button class=\"continue-btn add me-3\" *ngIf=\"store.stepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n      Add More Skills\r\n    </button>\r\n    <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n      Continue</button>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";.skills-container{max-width:1000px;margin:40px auto;min-height:300px}.skills-container.last{min-height:unset}.title{font-size:22px;margin-bottom:4px}.subtitle{font-size:13px;color:#777;margin-bottom:30px}.content-part{background:#fff}.content-part p,.content-part div{font-size:small}.content-part .card{margin-top:15px;background-color:#fff;border-radius:10px}.content-part .card .row{margin-top:-15px}.content-part .card .sub-section{padding:0 10px}.content-part .card .sub-section .title{font-size:16px;font-weight:400;color:var(--font-primary)}.content-part .card .sub-section .info-title{font-size:12px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .card .sub-section .content{font-size:12px}.content-part .card .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px}.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-color:#fff;border-radius:5px;color:var(--font-primary);margin-top:15px}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;position:relative;border-radius:5px;border:1px solid #d3dae6;padding:10px 0 10px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;height:45px}.content-part .search-part input{width:auto;flex:1;color:var(--font-dark);font-size:var(--font12-input);font-weight:400;border:none;background:none;outline:none}.content-part .search-part .btn{background:#1e2541;border-radius:5px;padding:5px;width:41px;height:36px;margin-right:3px}.content-part .search-part .btn img{filter:brightness(0) invert(1)}.content-part textarea{width:100%;height:100px;background:none}.content-part .skills-section{margin-left:5px}.content-part .skills-section .category-title{margin-bottom:5px;font-size:13px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .skills-section .text-title{font-size:13px;margin-left:3px;color:var(--font-primary);display:contents}.content-part .skills-section input[type=checkbox]{border:2px solid #000!important;height:14px!important;width:15px!important;border-radius:2px!important;margin:2px}.content-part .skills-section input[type=checkbox]:checked{background-color:#000!important;border:2px solid #000!important}.content-part .skills-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#000;width:15px;display:flex;justify-content:center;border:2px solid #000;height:14px;align-items:center;border-radius:2px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#237b4b!important;border:1px solid #237b4b!important}::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#f1f4fa}::ng-deep .ng-select .ng-select-container{background:#f1f4fa;border:1px solid #ccc;border-radius:5px}.back-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background:#d3dae6;color:#fff;border-radius:5px;padding:6px 8px}.save-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px}.create-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px;height:40px;min-width:9rem}.form-control{color:#333;background:none!important;min-height:36px;font-size:small;height:43px}.form-control:focus{box-shadow:none!important}.close-popup{position:absolute;right:7px;top:4px;width:25px}.label{font-size:12px;font-weight:700;padding-bottom:8px}.form-control:focus{border:var(--bs-border-width) solid var(--bs-border-color)}::ng-deep .nav-link{color:#000!important}.loader{filter:blur(3px);height:40px}.edit-mode ::ng-deep .nav-tabs{display:none!important}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:100px}.skip-btn,.back-btn{background:#d3dae6;color:#6c757dc7;font-size:14px;border-radius:5px;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px}.skip-btn.edit,.back-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn{padding:7px 23px;background-color:#4077ad;color:#fff;border-radius:5px;min-width:8rem;min-height:45px;border:white}.continue-btn:disabled{background-color:#d1d5db;cursor:not-allowed}.continue-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn.add{background-color:#2e5b70}.skill-preview-wrapper{margin-bottom:24px}.skill-preview-card{border-radius:12px;margin-bottom:12px;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease;overflow:hidden}::ng-deep accordion-group+accordion-group{margin-top:20px}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:10px 0}.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)}.skill-preview-body label{font-weight:500;font-size:13px;color:#6b7280}.skill-preview-body p{margin:0}@media screen and (max-width: 767px){.skills-container{padding:0 10px}.footer-actions{flex-direction:column-reverse;gap:5px;margin-top:65px}.back-btn{width:100%}.continue-btn{padding:10px 43px}.mb-res{display:flex;flex-direction:column-reverse;gap:5px;width:100%}}\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: i12$2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i13.TabDirective, selector: "tab, [tab]", inputs: ["heading", "id", "disabled", "removable", "tabOrder", "customClass", "active"], outputs: ["selectTab", "deselect", "removed"], exportAs: ["tab"] }, { kind: "component", type: i13.TabsetComponent, selector: "tabset", inputs: ["vertical", "justified", "type"] }, { kind: "directive", type: i13.TabHeadingDirective, selector: "[tabHeading]" }, { kind: "component", type: i14.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i14.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }], animations: [
             trigger('expandCollapse', [
                 state('open', style({
                     height: '*',
@@ -3992,7 +4013,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             })),
                             transition('open <=> closed', animate('300ms ease'))
                         ])
-                    ], template: "<!-- SKILL PREVIEW LIST -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'preview'\">\r\n  <h5 class=\"title text-secondary\">Skills Preview</h5>\r\n  <!-- <p class=\"subtitle\">First-time users should enter skillsets with Inspector Match, Once you setup skillsets in your\r\n    business profile you can add skills under</p> -->\r\n  <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n    <accordion-group *ngFor=\"let skill of userSkillsPreview\" #accGroup\r\n      (isOpenChange)=\"onSkillAccordionChange(skill, $event)\">\r\n      <!-- HEADER -->\r\n      <div accordion-heading class=\"skill-preview-header\">\r\n        <span class=\"fw-semibold text-secondary\">\r\n          {{ skill.skillSetName }}\r\n        </span>\r\n        <div class=\"actions\">\r\n          <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n            <button type=\"button\" class=\"me-3\" (click)=\"editSkillFromPreview(skill, accGroup, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" alt=\"icon\" />\r\n            </button>\r\n            <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n              [class.rotate]=\"accGroup.isOpen\" />\r\n          </ng-container>\r\n          <ng-container *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\">\r\n            <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backToSkill(accGroup)\">\r\n              Cancel\r\n            </button>\r\n            <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserSkillset()\" \r\n              [disabled]=\"showLoader\">\r\n              Update\r\n            </button>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <!-- BODY -->\r\n      <div class=\"skill-preview-body content-part\">\r\n        <!-- DISPLAY MODE -->\r\n        <div *ngIf=\"!isEditMode || model?.skillSetId !== skill.skillSetId\"\r\n          class=\"d-flex justify-content-between align-items-center flex-wrap gap-3\">\r\n          <div>\r\n            <label>Service Provider</label> <br>\r\n            {{ skill.providerName }}\r\n          </div>\r\n          <div>\r\n            <label>Skill</label> <br>\r\n            {{ skill.skillSetName }}\r\n          </div>\r\n          <div style=\"pointer-events: none;\">\r\n            <label>Self Ability Rating</label> <br>\r\n            <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n          </div>\r\n          <div>\r\n            <label class=\"mb-0 pb-0 label\">Years of Experience</label> <br>\r\n            {{ skill?.year }}\r\n          </div>\r\n          <div>\r\n            <label>Visible</label> <br>\r\n            <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"skill.profileVisibility\" disabled>\r\n          </div>\r\n          <div class=\"w-100 mt-3\">\r\n            <label>Description</label> <br>\r\n            {{ skill.notes }}\r\n          </div>\r\n        </div>\r\n        <!-- EDIT MODE -->\r\n        <div *ngIf=\"isEditMode && model?.skillSetId === skill.skillSetId\" [formGroup]=\"tab.at(0)\">\r\n          <div class=\"d-flex justify-content-between align-items-center flex-wrap gap-3\">\r\n            <div>\r\n              <label>Service Provider</label> <br>\r\n              {{ skill.providerName }}\r\n            </div>\r\n            <div>\r\n              <label>Skill</label> <br>\r\n              {{ skill.skillSetName }}\r\n            </div>\r\n            <div>\r\n              <label>Self Ability Rating</label> <br>\r\n              <ngx-stars *ngIf=\"tab.at(0)?.get('starRating')?.value !== null\" [key]=\"tab.at(0).get('starRating')?.value\"\r\n                [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n                (rate)=\"onEditRating($event)\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div style=\"width: 200px;\">\r\n              <label class=\"mb-0 label pb-0\">Years of Experience</label> <br>\r\n              <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\" formControlName=\"year\"\r\n                [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\" bindValue=\"value\"\r\n                [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"></ng-select>\r\n            </div>\r\n            <div>\r\n              <label>Visible</label> <br>\r\n              <input class=\"form-check-input \" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n            </div>\r\n          </div>\r\n          <div class=\"mt-3\">\r\n            <label>Description</label> <br>\r\n            <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\" placeholder=\"Enter notes\"\r\n              style=\"height: 80px;\"></textarea>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </accordion-group>\r\n  </accordion>\r\n</div>\r\n\r\n<!-- Add part -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'add'\">\r\n  <h2 class=\"title text-secondary\">Add Skills</h2>\r\n  <p class=\"subtitle\">A minimum of 5 skills is needed</p>\r\n  <div class=\"content-part\">\r\n    <h6 class=\"text-secondary\"> {{ form?.value?.id ? \"Update Skill Category\" : \"Create Skill Category\" }}</h6>\r\n    <div class=\"sub-section\">\r\n      <div class=\"row mt-2\">\r\n        <div class=\"col-12 col-md-12 col-sm-12\">\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=\"search\" class=\"create-plus\" width=\"18\"\r\n                height=\"18\" />\r\n            </button>\r\n          </div>\r\n          <div *ngIf=\"errMsg\" class=\"invalid-feedback is-invalid d-block\">\r\n            Please Enter Skillsets Name\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n        {{nameError}}\r\n      </div>\r\n      <div class=\"col skills-section\" [ngClass]=\"showLoading && !isEditMode ? 'loader':''\">\r\n        <div class=\"row mt-2\" [ngStyle]=\"showLoader && !isEditMode ? {'min-height': '150px'} : {}\">\r\n          <div class=\"col-12 col-md-4\" *ngFor=\"let skill of skillSets\">\r\n            <div class=\"mt-2 gap-1 d-flex align-items-start\">\r\n             <input \r\n  type=\"checkbox\"\r\n  [checked]=\"skill.selected\"\r\n  (change)=\"onSelectedSkillsets($event, skill)\"\r\n  id=\"{{skill.id}}\"\r\n  name=\"{{skill.id}}\">\r\n<label class=\"text-title\" for=\"{{skill.id}}\">\r\n  {{ skill.name }}\r\n</label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        [ngClass]=\"{ 'loader': showLoading && !isEditMode,'pt-3': !showLoading && !isEditMode,'edit-mode': isEditMode}\">\r\n        <!-- <loader [show]=\"showLoading\" [small]=\"true\"></loader> -->\r\n        <tabset #tabSet>\r\n          <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab.controls; let index = index\"\r\n            [label]=\"tabs[index]\" tab1 id={{tabs[index]}} #{{tabs[index]}}>\r\n            <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n              <span class=\"text-secondary\">{{tabs[index]}}</span>\r\n              <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.skillSetId.value)\">\r\n                <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n              </button>\r\n            </ng-template>\r\n            <div [formGroup]=\"group\" class=\"tab-card\">\r\n              <div class=\"card-body\">\r\n                <div class=\"row\">\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Self Ability Rating</label>\r\n                    <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\" [maxStars]=\"5\">\r\n                    </ngx-stars>\r\n                    <div *ngIf=\"userSkillSubmitted && k?.starRating?.errors\" class=\"invalid-feedback\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\">\r\n                      <div *ngIf=\"k?.starRating?.errors?.required\">Star\r\n                        Rating is\r\n                        required</div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label \">Years of Experience</label>\r\n                    <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n                      formControlName=\"year\" [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\"\r\n                      bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"\r\n                      (change)=\"onYearChange(group)\"></ng-select>\r\n\r\n                    <div *ngIf=\"userSkillSubmitted && k?.year?.errors\" class=\"invalid-feedback\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\">\r\n                      <div *ngIf=\"k?.year?.errors?.required\">Year is\r\n                        required</div>\r\n                    </div>\r\n\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1 text-center\">\r\n                    <label class=\"label\">Profile\r\n                      Visibility</label><br />\r\n                    <input class=\"form-check-input \" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n                  </div>\r\n\r\n                  <div class=\"col-12 col-md-2 mt-1\" *ngIf=\"tab.controls.length>1 && index == copyOptionIndex\">\r\n                    <label class=\"mb-2 label\">Copy to All Tabs</label>\r\n                    <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index,group.value)\"\r\n                      role=\"switch\">\r\n                  </div>\r\n                </div>\r\n                <div>\r\n                  <label class=\"label\">Description</label>\r\n                  <div class=\"col-12 col-md-12 mt-1\">\r\n                    <textarea placeholder=\"Description of your Skill here\" formControlName=\"notes\" class=\"form-control\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.notes?.errors }\" rows=\"5\"></textarea>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </tab>\r\n        </tabset>\r\n      </div>\r\n      <!-- <div class=\"row pt-3\">\r\n        <div class=\"pt-3 text-end\">\r\n          <button class=\"back-btn\" (click)=\"reset()\">Reset</button>\r\n        </div>\r\n      </div> -->\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Footer buttons -->\r\n<div class=\"skills-container last footer-actions\">\r\n  <button class=\"back-btn\" (click)=\"back()\">Back</button>\r\n  <div class=\"mb-res\">\r\n    <button class=\"back-btn me-3\" *ngIf=\"store.stepView() === 'add'\" (click)=\"next()\">Skip</button>\r\n    <button class=\"continue-btn add me-3\" *ngIf=\"store.stepView() === 'preview'\" (click)=\"store.goToAdd()\">\r\n      Add More Skills\r\n    </button>\r\n    <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n      Continue</button>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";.skills-container{max-width:1000px;margin:40px auto;min-height:300px}.skills-container.last{min-height:unset}.title{font-size:22px;margin-bottom:4px}.subtitle{font-size:13px;color:#777;margin-bottom:30px}.content-part{background:#fff}.content-part p,.content-part div{font-size:small}.content-part .card{margin-top:15px;background-color:#fff;border-radius:10px}.content-part .card .row{margin-top:-15px}.content-part .card .sub-section{padding:0 10px}.content-part .card .sub-section .title{font-size:16px;font-weight:400;color:var(--font-primary)}.content-part .card .sub-section .info-title{font-size:12px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .card .sub-section .content{font-size:12px}.content-part .card .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px}.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-color:#fff;border-radius:5px;color:var(--font-primary);margin-top:15px}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;position:relative;border-radius:5px;border:1px solid #d3dae6;padding:10px 0 10px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;height:45px}.content-part .search-part input{width:auto;flex:1;color:var(--font-dark);font-size:var(--font12-input);font-weight:400;border:none;background:none;outline:none}.content-part .search-part .btn{background:#1e2541;border-radius:5px;padding:5px;width:41px;height:36px;margin-right:3px}.content-part .search-part .btn img{filter:brightness(0) invert(1)}.content-part textarea{width:100%;height:100px;background:none}.content-part .skills-section{margin-left:5px}.content-part .skills-section .category-title{margin-bottom:5px;font-size:13px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .skills-section .text-title{font-size:13px;margin-left:3px;color:var(--font-primary);display:contents}.content-part .skills-section input[type=checkbox]{border:2px solid #000!important;height:14px!important;width:15px!important;border-radius:2px!important;margin:2px}.content-part .skills-section input[type=checkbox]:checked{background-color:#000!important;border:2px solid #000!important}.content-part .skills-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#000;width:15px;display:flex;justify-content:center;border:2px solid #000;height:14px;align-items:center;border-radius:2px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#237b4b!important;border:1px solid #237b4b!important}::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#f1f4fa}::ng-deep .ng-select .ng-select-container{background:#f1f4fa;border:1px solid #ccc;border-radius:5px}.back-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background:#d3dae6;color:#fff;border-radius:5px;padding:6px 8px}.save-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px}.create-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px;height:40px;min-width:9rem}.form-control{color:#333;background:none!important;min-height:36px;font-size:small;height:43px}.form-control:focus{box-shadow:none!important}.close-popup{position:absolute;right:7px;top:4px;width:25px}.label{font-size:12px;font-weight:700;padding-bottom:8px}.form-control:focus{border:var(--bs-border-width) solid var(--bs-border-color)}::ng-deep .nav-link{color:#000!important}.loader{filter:blur(3px);height:40px}.edit-mode ::ng-deep .nav-tabs{display:none!important}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:100px}.skip-btn,.back-btn{background:#d3dae6;color:#6c757dc7;font-size:14px;border-radius:5px;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px}.skip-btn.edit,.back-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn{padding:7px 23px;background-color:#4077ad;color:#fff;border-radius:5px;min-width:8rem;min-height:45px;border:white}.continue-btn:disabled{background-color:#d1d5db;cursor:not-allowed}.continue-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn.add{background-color:#2e5b70}.skill-preview-wrapper{margin-bottom:24px}.skill-preview-card{border-radius:12px;margin-bottom:12px;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease;overflow:hidden}::ng-deep accordion-group+accordion-group{margin-top:20px}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:10px 0}.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)}.skill-preview-body label{font-weight:500;font-size:13px;color:#6b7280}.skill-preview-body p{margin:0}@media screen and (max-width: 767px){.skills-container{padding:0 10px}.footer-actions{flex-direction:column-reverse;gap:5px;margin-top:65px}.back-btn{width:100%}.continue-btn{padding:10px 43px}.mb-res{display:flex;flex-direction:column-reverse;gap:5px;width:100%}}\n"] }]
+                    ], template: "<!-- SKILL PREVIEW LIST -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'preview'\">\r\n  <h5 class=\"title text-secondary\">Skills Preview</h5>\r\n  <!-- <p class=\"subtitle\">First-time users should enter skillsets with Inspector Match, Once you setup skillsets in your\r\n    business profile you can add skills under</p> -->\r\n  <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n    <accordion-group *ngFor=\"let skill of userSkillsPreview\" #accGroup\r\n      (isOpenChange)=\"onSkillAccordionChange(skill, $event)\">\r\n      <!-- HEADER -->\r\n      <div accordion-heading class=\"skill-preview-header\">\r\n        <span class=\"fw-semibold text-secondary\">\r\n          {{ skill.skillSetName }}\r\n        </span>\r\n        <div class=\"actions\">\r\n          <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n            <button type=\"button\" class=\"me-3\" (click)=\"editSkillFromPreview(skill, accGroup, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" alt=\"icon\" />\r\n            </button>\r\n            <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n              [class.rotate]=\"accGroup.isOpen\" />\r\n          </ng-container>\r\n          <ng-container *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\">\r\n            <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backToSkill(accGroup)\">\r\n              Cancel\r\n            </button>\r\n            <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserSkillset()\" [disabled]=\"showLoader\">\r\n              Update\r\n            </button>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <!-- BODY -->\r\n      <div class=\"skill-preview-body content-part\">\r\n        <!-- DISPLAY MODE -->\r\n        <div *ngIf=\"!isEditMode || model?.skillSetId !== skill.skillSetId\"\r\n          class=\"d-flex justify-content-between align-items-center flex-wrap gap-3\">\r\n          <div>\r\n            <label>Service Provider</label> <br>\r\n            {{ skill.providerName }}\r\n          </div>\r\n          <div>\r\n            <label>Skill</label> <br>\r\n            {{ skill.skillSetName }}\r\n          </div>\r\n          <div style=\"pointer-events: none;\">\r\n            <label>Self Ability Rating</label> <br>\r\n            <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n          </div>\r\n          <div>\r\n            <label class=\"mb-0 pb-0 label\">Years of Experience</label> <br>\r\n            {{ skill?.year }}\r\n          </div>\r\n          <div>\r\n            <label>Visible</label> <br>\r\n            <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"skill.profileVisibility\" disabled>\r\n          </div>\r\n          <div class=\"w-100 mt-3\">\r\n            <label>Description</label> <br>\r\n            {{ skill.notes }}\r\n          </div>\r\n        </div>\r\n        <!-- EDIT MODE -->\r\n        <div *ngIf=\"isEditMode && model?.skillSetId === skill.skillSetId\" [formGroup]=\"tab.at(0)\">\r\n          <div class=\"d-flex justify-content-between align-items-center flex-wrap gap-3\">\r\n            <div>\r\n              <label>Service Provider</label> <br>\r\n              {{ skill.providerName }}\r\n            </div>\r\n            <div>\r\n              <label>Skill</label> <br>\r\n              {{ skill.skillSetName }}\r\n            </div>\r\n            <div>\r\n              <label>Self Ability Rating</label> <br>\r\n              <ngx-stars *ngIf=\"tab.at(0)?.get('starRating')?.value !== null\" [key]=\"tab.at(0).get('starRating')?.value\"\r\n                [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n                (rate)=\"onEditRating($event)\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div style=\"width: 200px;\">\r\n              <label class=\"mb-0 label pb-0\">Years of Experience</label> <br>\r\n              <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n                formControlName=\"year\" [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\"\r\n                bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"></ng-select>\r\n            </div>\r\n            <div>\r\n              <label>Visible</label> <br>\r\n              <input class=\"form-check-input \" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n            </div>\r\n          </div>\r\n          <div class=\"mt-3\">\r\n            <label>Description</label> <br>\r\n            <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\" placeholder=\"Enter notes\"\r\n              style=\"height: 80px;\"></textarea>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </accordion-group>\r\n  </accordion>\r\n</div>\r\n\r\n<!-- Add part -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'add'\">\r\n  <h2 class=\"title text-secondary\">Add Skills</h2>\r\n  <p class=\"subtitle\">A minimum of 5 skills is needed</p>\r\n  <div class=\"content-part\">\r\n    <h6 class=\"text-secondary\"> {{ form?.value?.id ? \"Update Skill Category\" : \"Create Skill Category\" }}</h6>\r\n    <div class=\"sub-section\">\r\n      <div class=\"row mt-2\">\r\n        <div class=\"col-12 col-md-12 col-sm-12\">\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=\"search\" 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\">\r\n            Please Enter Skillsets Name\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n        {{nameError}}\r\n      </div>\r\n      <div class=\"col skills-section\" [ngClass]=\"showLoading && !isEditMode ? 'loader':''\">\r\n        <div class=\"row mt-2\" [ngStyle]=\"showLoader && !isEditMode ? {'min-height': '150px'} : {}\">\r\n          <div class=\"col-12 col-md-4\" *ngFor=\"let skill of skillSets\">\r\n            <div class=\"mt-2 gap-1 d-flex align-items-start\">\r\n              <input type=\"checkbox\" [checked]=\"skill.selected\" (change)=\"onSelectedSkillsets($event, skill)\"\r\n                id=\"{{skill.id}}\" name=\"{{skill.id}}\">\r\n              <label class=\"text-title\" for=\"{{skill.id}}\">\r\n                {{ skill.name }}\r\n              </label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        [ngClass]=\"{ 'loader': showLoading && !isEditMode,'pt-3': !showLoading && !isEditMode,'edit-mode': isEditMode}\">\r\n        <!-- <loader [show]=\"showLoading\" [small]=\"true\"></loader> -->\r\n        <tabset #tabSet>\r\n          <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab.controls; let index = index\"\r\n            [label]=\"tabs[index]\" tab1 id={{tabs[index]}} #{{tabs[index]}}>\r\n            <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n              <span class=\"text-secondary\">{{tabs[index]}}</span>\r\n              <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.skillSetId.value)\">\r\n                <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n              </button>\r\n            </ng-template>\r\n            <div [formGroup]=\"group\" class=\"tab-card\">\r\n              <div class=\"card-body\">\r\n                <div class=\"row\">\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Self Ability Rating</label>\r\n                    <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\" [maxStars]=\"5\">\r\n                    </ngx-stars>\r\n                    <div *ngIf=\"userSkillSubmitted && k?.starRating?.errors\" class=\"invalid-feedback\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\">\r\n                      <div *ngIf=\"k?.starRating?.errors?.required\">Star\r\n                        Rating is\r\n                        required</div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label \">Years of Experience</label>\r\n                    <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\"\r\n                      bindLabel=\"text\" formControlName=\"year\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\" bindValue=\"value\"\r\n                      [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"\r\n                      (change)=\"onYearChange(group)\"></ng-select>\r\n\r\n                    <div *ngIf=\"userSkillSubmitted && k?.year?.errors\" class=\"invalid-feedback\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\">\r\n                      <div *ngIf=\"k?.year?.errors?.required\">Year is\r\n                        required</div>\r\n                    </div>\r\n\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1 text-center\">\r\n                    <label class=\"label\">Profile\r\n                      Visibility</label><br />\r\n                    <input class=\"form-check-input \" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n                  </div>\r\n\r\n                  <div class=\"col-12 col-md-2 mt-1\" *ngIf=\"tab.controls.length>1 && index == copyOptionIndex\">\r\n                    <label class=\"mb-2 label\">Copy to All Tabs</label>\r\n                    <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index,group.value)\"\r\n                      role=\"switch\">\r\n                  </div>\r\n                </div>\r\n                <div>\r\n                  <label class=\"label\">Description</label>\r\n                  <div class=\"col-12 col-md-12 mt-1\">\r\n                    <textarea placeholder=\"Description of your Skill here\" formControlName=\"notes\" class=\"form-control\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.notes?.errors }\" rows=\"5\"></textarea>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </tab>\r\n        </tabset>\r\n      </div>\r\n      <!-- <div class=\"row pt-3\">\r\n        <div class=\"pt-3 text-end\">\r\n          <button class=\"back-btn\" (click)=\"reset()\">Reset</button>\r\n        </div>\r\n      </div> -->\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Footer buttons -->\r\n\r\n<div *ngIf=\"store.stepView() === 'add'\" class=\"skills-container last footer-actions\">\r\n  <button class=\"back-btn\" (click)=\"cancel()\">Cancel</button>\r\n  <div class=\"mb-res\">   \r\n    <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n      Continue</button>\r\n  </div>\r\n</div>\r\n\r\n\r\n<div *ngIf=\"store.stepView() !== 'add'\" class=\"skills-container last footer-actions\">\r\n  <button class=\"back-btn\" (click)=\"back()\">Back</button>\r\n  <div class=\"mb-res\">\r\n    <button class=\"back-btn me-3\" *ngIf=\"store.stepView() === 'add'\" (click)=\"next()\">Skip</button>\r\n    <button class=\"continue-btn add me-3\" *ngIf=\"store.stepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n      Add More Skills\r\n    </button>\r\n    <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n      Continue</button>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";.skills-container{max-width:1000px;margin:40px auto;min-height:300px}.skills-container.last{min-height:unset}.title{font-size:22px;margin-bottom:4px}.subtitle{font-size:13px;color:#777;margin-bottom:30px}.content-part{background:#fff}.content-part p,.content-part div{font-size:small}.content-part .card{margin-top:15px;background-color:#fff;border-radius:10px}.content-part .card .row{margin-top:-15px}.content-part .card .sub-section{padding:0 10px}.content-part .card .sub-section .title{font-size:16px;font-weight:400;color:var(--font-primary)}.content-part .card .sub-section .info-title{font-size:12px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .card .sub-section .content{font-size:12px}.content-part .card .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px}.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-color:#fff;border-radius:5px;color:var(--font-primary);margin-top:15px}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;position:relative;border-radius:5px;border:1px solid #d3dae6;padding:10px 0 10px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;height:45px}.content-part .search-part input{width:auto;flex:1;color:var(--font-dark);font-size:var(--font12-input);font-weight:400;border:none;background:none;outline:none}.content-part .search-part .btn{background:#1e2541;border-radius:5px;padding:5px;width:41px;height:36px;margin-right:3px}.content-part .search-part .btn img{filter:brightness(0) invert(1)}.content-part textarea{width:100%;height:100px;background:none}.content-part .skills-section{margin-left:5px}.content-part .skills-section .category-title{margin-bottom:5px;font-size:13px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .skills-section .text-title{font-size:13px;margin-left:3px;color:var(--font-primary);display:contents}.content-part .skills-section input[type=checkbox]{border:2px solid #000!important;height:14px!important;width:15px!important;border-radius:2px!important;margin:2px}.content-part .skills-section input[type=checkbox]:checked{background-color:#000!important;border:2px solid #000!important}.content-part .skills-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#000;width:15px;display:flex;justify-content:center;border:2px solid #000;height:14px;align-items:center;border-radius:2px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#237b4b!important;border:1px solid #237b4b!important}::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#f1f4fa}::ng-deep .ng-select .ng-select-container{background:#f1f4fa;border:1px solid #ccc;border-radius:5px}.back-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background:#d3dae6;color:#fff;border-radius:5px;padding:6px 8px}.save-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px}.create-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px;height:40px;min-width:9rem}.form-control{color:#333;background:none!important;min-height:36px;font-size:small;height:43px}.form-control:focus{box-shadow:none!important}.close-popup{position:absolute;right:7px;top:4px;width:25px}.label{font-size:12px;font-weight:700;padding-bottom:8px}.form-control:focus{border:var(--bs-border-width) solid var(--bs-border-color)}::ng-deep .nav-link{color:#000!important}.loader{filter:blur(3px);height:40px}.edit-mode ::ng-deep .nav-tabs{display:none!important}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:100px}.skip-btn,.back-btn{background:#d3dae6;color:#6c757dc7;font-size:14px;border-radius:5px;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px}.skip-btn.edit,.back-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn{padding:7px 23px;background-color:#4077ad;color:#fff;border-radius:5px;min-width:8rem;min-height:45px;border:white}.continue-btn:disabled{background-color:#d1d5db;cursor:not-allowed}.continue-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn.add{background-color:#2e5b70}.skill-preview-wrapper{margin-bottom:24px}.skill-preview-card{border-radius:12px;margin-bottom:12px;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease;overflow:hidden}::ng-deep accordion-group+accordion-group{margin-top:20px}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:10px 0}.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)}.skill-preview-body label{font-weight:500;font-size:13px;color:#6b7280}.skill-preview-body p{margin:0}@media screen and (max-width: 767px){.skills-container{padding:0 10px}.footer-actions{flex-direction:column-reverse;gap:5px;margin-top:65px}.back-btn{width:100%}.continue-btn{padding:10px 43px}.mb-res{display:flex;flex-direction:column-reverse;gap:5px;width:100%}}\n"] }]
         }], ctorParameters: () => [{ type: SkillSetService }, { type: UserSkillSetService }, { type: UserService }, { type: i8.UntypedFormBuilder }, { type: UtilsService }, { type: i6.RoleContextService }, { type: CredentialingStore }, { type: i6.TokenService }], propDecorators: { providerId: [{
                 type: Input
             }], providerName: [{
@@ -4913,6 +4934,25 @@ class ToolsComponent {
         }
         this.searchToolQry = null;
     }
+    cancel() {
+        this.store.toolStepView.set('preview');
+    }
+    goToAddSkillsMode() {
+        // 1️⃣ Switch step in the store
+        this.store.goToToolAdd();
+        // 2️⃣ Reset component-level states
+        this.isEditMode = false;
+        this.model = null;
+        this.tabs = [];
+        this.tab?.clear();
+        this.selectedTab = null;
+        // Reset copy options
+        this.isCopy = false;
+        this.copyData = null;
+        this.copyOptionIndex = 0;
+        // 3️⃣ Reset all skill checkbox selections
+        this.tools.forEach(tool => tool.selected = false);
+    }
     getTools() {
         this.toolSubmittedValue = false;
         var query = {
@@ -5105,7 +5145,7 @@ class ToolsComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToolsComponent, deps: [{ token: ToolService }, { token: UserToolService }, { token: i8.UntypedFormBuilder }, { token: UserService }, { token: UtilsService }, { token: CredentialingStore }, { token: i6.TokenService }, { token: UserDetailService }, { token: LIBRARY_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ToolsComponent, isStandalone: false, selector: "app-tools", inputs: { roleData: "roleData", providerId: "providerId", providerName: "providerName" }, ngImport: i0, template: "<!-- Tool PREVIEW LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n  <h5 class=\"title text-secondary\">Tools Preview</h5>\r\n  <!-- <p class=\"subtitle\">Add Tools</p> -->\r\n  <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n    <accordion-group *ngFor=\"let tool of userToolsPreview\" #accGroup (isOpenChange)=\"onAccordionChange(tool, $event)\">\r\n      <div accordion-heading class=\"skill-preview-header d-flex justify-content-between align-items-center\">\r\n        <span class=\"fw-semibold text-secondary\">\r\n          {{ tool.toolName }}\r\n        </span>\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <!-- EDIT MODE BUTTONS -->\r\n          <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool); else viewActions\">\r\n            <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backTool(accGroup)\">\r\n              Cancel\r\n            </button>\r\n            <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserTools()\" \r\n              [disabled]=\"showLoader\">\r\n              Update\r\n            </button>\r\n          </ng-container>\r\n          <!-- VIEW MODE ACTIONS -->\r\n          <ng-template #viewActions>\r\n            <button type=\"button\" class=\"me-3\" (click)=\"editToolFromPreview(tool, accGroup, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" />\r\n            </button>\r\n            <!-- Arrow (ngx controls click) -->\r\n            <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n              [class.rotate]=\"accGroup.isOpen\" />\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n      <!-- BODY -->\r\n      <div class=\"skill-preview-body content-part mt-3\">\r\n        <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n          <div class=\"row g-3 row-gap-2\">\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Service Provider</label>\r\n              <div class=\"value\">{{ tool.providerName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Manufacturer</label>\r\n              <div class=\"value\">{{ tool.make }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Years of Experience</label>\r\n              <div class=\"value\">{{ tool.year }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Self Ability Rating</label>\r\n              <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\" style=\"pointer-events: none\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Active</label><br />\r\n              <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"tool.profileVisibility\" disabled>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Tools / Equipment</label>\r\n              <div class=\"value\">{{ tool.toolName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Model</label>\r\n              <div class=\"value\">{{ tool.model }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Serial Number</label>\r\n              <div class=\"value\">{{ tool.serialNumber }}</div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label>Description</label>\r\n              <div class=\"value\">{{ tool.notes }}</div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Edit Mode -->\r\n        <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\" [formGroup]=\"tab.at(0)\">\r\n          <div class=\"row g-3\">\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Service Provider</label>\r\n              <div class=\"value\">{{ tool.providerName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Manufacturer</label> <br />\r\n              <input class=\"form-control\" type=\"text\" formControlName=\"make\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Years of Experience</label>\r\n              <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" bindValue=\"value\" formControlName=\"year\"\r\n                [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\">\r\n              </ng-select>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Self Ability Rating</label>\r\n              <ngx-stars [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n                (rate)=\"onRatingSets($event)\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Active</label><br />\r\n              <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Tools / Equipment</label>\r\n              <input class=\"form-control\" [value]=\"tool.toolName\" readonly>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Model</label>\r\n              <input class=\"form-control\" formControlName=\"model\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Serial Number</label>\r\n              <input class=\"form-control\" formControlName=\"serialNumber\">\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label>Description</label>\r\n              <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\"></textarea>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </accordion-group>\r\n  </accordion>\r\n</div>\r\n\r\n<!-- Tool LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'add'\">\r\n  <h3 class=\"text-secondary\">Add Tools</h3>\r\n  <p class=\"info\">Manage specialty tools and equipment</p>\r\n  <div class=\"content-part\">\r\n    <h6 class=\"text-secondary\"> Add User Tool</h6>\r\n    <div class=\"sub-section\">\r\n      <div class=\"row mt-2\">\r\n        <div class=\"col-12 col-md-12 col-sm-12 ps-lg-0\">\r\n          <div class=\"search-part\" *ngIf=\"!isEditMode\">\r\n            <input type=\"text\" placeholder=\"Search / Add Tools here\" [(ngModel)]=\"searchToolQry\" (input)=\"getTools()\" />\r\n            <button class=\"btn\" (click)=\"createNewTools()\" tooltip=\"Add Tool\">\r\n              <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18px\" height=\"18px\" />\r\n            </button>\r\n          </div>\r\n          <div *ngIf=\"!searchToolQry && toolSubmittedValue\" class=\"invalid-feedback is-invalid d-block\">\r\n            Please Enter Tools Name\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n        {{ nameError }}\r\n      </div>\r\n      <div class=\"col tools-section\" [ngClass]=\"showLoading ? 'loader':''\">\r\n        <div class=\"row mt-2\" [ngStyle]=\"showLoader ? {'min-height': '150px'} : {}\">\r\n          <div class=\"col-12 col-md-4\" *ngFor=\"let Tool of tools\">\r\n            <div class=\"mt-2 d-flex\">\r\n              <input (change)=\"onSelectedTools($event, Tool)\" [checked]=\"Tool.selected == true\" id=\"{{ Tool.id }}\"\r\n                name=\"{{ Tool.id }}\" type=\"checkbox\" />\r\n              <label class=\"text-title\" for=\"{{ Tool.id }}\">\r\n                {{ Tool.name }}</label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div [ngClass]=\"{ 'loader': showLoading,'pt-3': !showLoading,'edit-mode': isEditMode}\">\r\n        <tabset #tabSet>\r\n          <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab?.controls; let index = index\"\r\n            [label]=\"tabs[index]\" tab1 id=\"{{ tabs[index] }}\" #{{tabs[index]}}>\r\n            <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n              <span class=\"text-secondary\">{{ tabs[index] }}</span>\r\n              <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.toolId.value)\">\r\n                <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n              </button>\r\n            </ng-template>\r\n            <div [formGroup]=\"group\" class=\"tab-card\">\r\n              <div class=\"card-body mt-3 position-relative\">\r\n                <div class=\"col-12 col-md-3 mt-1 copyAll\" *ngIf=\"\r\n                          tab.controls.length > 1 && index == copyOptionIndex\r\n                        \">\r\n                  <label class=\"label\">Copy to All Tabs</label>\r\n                  <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index, group.value,viewTab)\"\r\n                    role=\"switch\" />\r\n                </div>\r\n                <div class=\"row\" [ngClass]=\"index == 0 && tab.controls.length > 1 ? 'mt-5' : '' \">\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Self-ability Rating</label>\r\n                    <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n                      [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.starRating.errors }\" [maxStars]=\"5\">\r\n                    </ngx-stars>\r\n                    <div *ngIf=\"userToolSubmitted && k.starRating.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid':\r\n                                userToolSubmitted && k.starRating.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.starRating.errors.required\">\r\n                        Star Rating is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Profile Visibility</label><br />\r\n                    <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\" />\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Years of Experience</label>\r\n                    <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" (change)=\"onYearChange(group)\"\r\n                      formControlName=\"year\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.year.errors\r\n                            }\" bindValue=\"value\" [closeOnSelect]=\"true\" [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\"\r\n                      id=\"reqStates\"></ng-select>\r\n\r\n                    <div *ngIf=\"userToolSubmitted && k.year.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.year.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.year.errors.required\">\r\n                        Year is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Manufacturer</label>\r\n                    <input id=\"make\" formControlName=\"make\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Manufacturer here\"  (change)=\"onYearChange(group)\" />\r\n                    <!-- <div *ngIf=\"userToolSubmitted && k.make.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.make.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.make.errors.required\">\r\n                        Manufacturer is required\r\n                      </div>\r\n                    </div> -->\r\n                  </div>\r\n                </div>\r\n                <div class=\"row pt-2\">\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Model</label>\r\n                    <input id=\"model\" formControlName=\"model\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Model here\"  (change)=\"onYearChange(group)\" />\r\n                    <!-- <div *ngIf=\"userToolSubmitted && k.model.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.model.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.model.errors.required\">\r\n                        Model is required\r\n                      </div>\r\n                    </div> -->\r\n                  </div>\r\n\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\" label\">Serial Number</label>\r\n                    <input id=\"serialNumber\" formControlName=\"serialNumber\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Serial Number here\"  />\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Comment</label>\r\n                    <textarea placeholder=\"Enter your comment here\" formControlName=\"notes\" class=\"form-control\"\r\n                      [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.notes.errors\r\n                            }\" rows=\"2\"></textarea>\r\n                    <div *ngIf=\"userToolSubmitted && k.notes.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.notes.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.notes.errors.required\">\r\n                        Description is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </tab>\r\n        </tabset>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"tools-container last pt-5 mt-5\">\r\n  <div class=\"d-flex justify-content-between pt-3 mob-res\">\r\n    <!-- (click)=\"reset()\" -->\r\n    <button class=\"back-btn\" (click)=\"goBack()\">Back</button>\r\n    <div class=\"mob-view\">\r\n      <button class=\"back-btn me-3 add\" *ngIf=\"store.toolStepView() === 'preview'\" (click)=\"store.goToToolAdd()\">\r\n        Add More Tools\r\n      </button>\r\n      <button    [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\" (click)=\"saveFinal()\"\r\n        class=\"float-end save-btn\">\r\n        Go To Dashboard\r\n      </button>\r\n      <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\"  [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" class=\"float-end save-btn\">\r\n        Add\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";.tools-container{max-width:1000px;margin:40px auto;min-height:300px}.tools-container.last{min-height:unset}.tools-container h3{margin-bottom:5px;font-size:22px;font-weight:500}.tools-container .info{font-size:13px;color:#666;margin-bottom:30px}.content-part{background:#fff}.content-part p,.content-part div{font-size:small}.content-part div .label{font-size:12px!important;font-weight:700!important;padding-bottom:5px!important}.content-part .row{margin-top:-15px}.content-part .sub-section{padding:0 10px}.content-part .sub-section .title{font-size:16px;font-weight:400;color:var(--font-primary)}.content-part .sub-section .info-title{font-size:12px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .sub-section .content{font-size:12px}.content-part .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px}.content-part .sub-section .subsection input{width:30%}.content-part .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background-color:#fff;border-radius:5px;color:var(--font-primary)}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;height:45px;position:relative;border-radius:5px;border:1px solid #d3dae6;padding:10px 0 10px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.content-part .search-part input{width:auto;flex:1;color:var(--font-dark);font-size:var(--font12-input);font-weight:400;border:none;background:none;outline:none}.content-part .search-part .btn{background:#1e2541;border-radius:5px;padding:5px;width:41px;height:36px;margin-right:3px}.content-part .search-part .btn img{filter:brightness(0) invert(1)}.content-part textarea{width:100%;background:none}.content-part .tools-section{margin-left:5px}.content-part .tools-section .category-title{margin-bottom:5px;font-size:13px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .tools-section .text-title{font-size:13px;margin-left:3px;color:var(--font-primary)}.content-part .tools-section input[type=checkbox]{border:2px solid #000!important;height:14px!important;width:15px!important;border-radius:2px!important;margin:2px}.content-part .tools-section input[type=checkbox]:checked{background-color:#000!important;border:2px solid #000!important}.content-part .tools-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#000;width:15px;display:flex;justify-content:center;border:2px solid #000;height:14px;align-items:center;border-radius:2px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#237b4b!important;border:1px solid #237b4b!important}.copyAll{position:absolute;right:0;text-align:end;top:-40px}.close-popup{position:absolute;right:7px;top:4px;width:25px}.form-control:focus{border:var(--bs-border-width) solid var(--bs-border-color)}::ng-deep .nav-link{color:#000!important}.back-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background:#d3dae6;color:#6c757dc7;border-radius:5px}.back-btn.edit{padding:5px 20px;min-height:20px;min-width:auto}.back-btn.add{background:#2e5b70;color:#fff}.save-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px}.create-btn{font-size:14px;transition:.2s;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px;height:40px;min-width:9rem}.form-control{color:#333;background:none!important;font-size:small;height:45px}.form-control:focus{box-shadow:none!important}@media only screen and (min-width: 300px) and (max-width: 450px){.modal-content .close-popup{width:16px}}.loader{filter:blur(3px)}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.skill-preview-body label{font-weight:500;font-size:14px;color:#6b7280;padding-bottom:5px}.skill-preview-body p{margin:0}.skill-preview-body .value{font-size:13px;color:#212529}.skill-preview-card{border-radius:12px;margin-bottom:12px;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease;overflow:hidden}.continue-btn{background-color:#4077ad;padding:5px 20px;min-height:20px;font-weight:500;color:#fff;border-radius:5px}.action-btns{display:flex;justify-content:space-between;align-items:center}.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:15px}.actions button{padding:10px 22px;border:none;border-radius:6px;font-size:14px;transition:all .2s ease;font-weight:500;min-width:8rem;min-height:45px}.actions .secondary{color:#6c757dc7;background-color:#e0e0e0}.actions .secondary:hover{background-color:#d5d5d5}.actions .primary{background-color:#2196f3;color:#fff}.actions .primary:hover{background-color:#1976d2}@media (max-width: 600px){.actions{flex-direction:column;align-items:stretch}.actions button{width:100%}}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .2s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.icon-color.rotate{transform:rotate(180deg)}@media screen and (max-width: 767px){.tools-container{padding:0 10px}.tools-container .mob-view{display:flex;justify-content:space-between;flex-direction:column-reverse;gap:5px}.tools-container .mob-res{flex-direction:column-reverse;gap:5px}.footer-actions{flex-direction:column-reverse;gap:5px;margin-top:65px}.continue-btn{padding:7px 45px}.back-btn{width:100%}.continue-btn{padding:10px 43px}.save-btn{padding:10px 15px;width:unset;margin-left:0!important}}.save-btn{margin-left:15px}\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: i12$2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i13.TabDirective, selector: "tab, [tab]", inputs: ["heading", "id", "disabled", "removable", "tabOrder", "customClass", "active"], outputs: ["selectTab", "deselect", "removed"], exportAs: ["tab"] }, { kind: "component", type: i13.TabsetComponent, selector: "tabset", inputs: ["vertical", "justified", "type"] }, { kind: "directive", type: i13.TabHeadingDirective, selector: "[tabHeading]" }, { kind: "component", type: i14.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i14.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ToolsComponent, isStandalone: false, selector: "app-tools", inputs: { roleData: "roleData", providerId: "providerId", providerName: "providerName" }, ngImport: i0, template: "<!-- Tool PREVIEW LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n  <h5 class=\"title text-secondary\">Tools Preview</h5>\r\n  <!-- <p class=\"subtitle\">Add Tools</p> -->\r\n  <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n    <accordion-group *ngFor=\"let tool of userToolsPreview\" #accGroup (isOpenChange)=\"onAccordionChange(tool, $event)\">\r\n      <div accordion-heading class=\"skill-preview-header d-flex justify-content-between align-items-center\">\r\n        <span class=\"fw-semibold text-secondary\">\r\n          {{ tool.toolName }}\r\n        </span>\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <!-- EDIT MODE BUTTONS -->\r\n          <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool); else viewActions\">\r\n            <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backTool(accGroup)\">\r\n              Cancel\r\n            </button>\r\n            <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserTools()\" \r\n              [disabled]=\"showLoader\">\r\n              Update\r\n            </button>\r\n          </ng-container>\r\n          <!-- VIEW MODE ACTIONS -->\r\n          <ng-template #viewActions>\r\n            <button type=\"button\" class=\"me-3\" (click)=\"editToolFromPreview(tool, accGroup, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" />\r\n            </button>\r\n            <!-- Arrow (ngx controls click) -->\r\n            <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n              [class.rotate]=\"accGroup.isOpen\" />\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n      <!-- BODY -->\r\n      <div class=\"skill-preview-body content-part mt-3\">\r\n        <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n          <div class=\"row g-3 row-gap-2\">\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Service Provider</label>\r\n              <div class=\"value\">{{ tool.providerName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Manufacturer</label>\r\n              <div class=\"value\">{{ tool.make }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Years of Experience</label>\r\n              <div class=\"value\">{{ tool.year }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Self Ability Rating</label>\r\n              <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\" style=\"pointer-events: none\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Active</label><br />\r\n              <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"tool.profileVisibility\" disabled>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Tools / Equipment</label>\r\n              <div class=\"value\">{{ tool.toolName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Model</label>\r\n              <div class=\"value\">{{ tool.model }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Serial Number</label>\r\n              <div class=\"value\">{{ tool.serialNumber }}</div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label>Description</label>\r\n              <div class=\"value\">{{ tool.notes }}</div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Edit Mode -->\r\n        <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\" [formGroup]=\"tab.at(0)\">\r\n          <div class=\"row g-3\">\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Service Provider</label>\r\n              <div class=\"value\">{{ tool.providerName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Manufacturer</label> <br />\r\n              <input class=\"form-control\" type=\"text\" formControlName=\"make\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Years of Experience</label>\r\n              <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" bindValue=\"value\" formControlName=\"year\"\r\n                [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\">\r\n              </ng-select>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Self Ability Rating</label>\r\n              <ngx-stars [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n                (rate)=\"onRatingSets($event)\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Active</label><br />\r\n              <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Tools / Equipment</label>\r\n              <input class=\"form-control\" [value]=\"tool.toolName\" readonly>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Model</label>\r\n              <input class=\"form-control\" formControlName=\"model\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Serial Number</label>\r\n              <input class=\"form-control\" formControlName=\"serialNumber\">\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label>Description</label>\r\n              <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\"></textarea>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </accordion-group>\r\n  </accordion>\r\n</div>\r\n\r\n<!-- Tool LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'add'\">\r\n  <h3 class=\"text-secondary\">Add Tools</h3>\r\n  <p class=\"info\">Manage specialty tools and equipment</p>\r\n  <div class=\"content-part\">\r\n    <h6 class=\"text-secondary\"> Add User Tool</h6>\r\n    <div class=\"sub-section\">\r\n      <div class=\"row mt-2\">\r\n        <div class=\"col-12 col-md-12 col-sm-12 ps-lg-0\">\r\n          <div class=\"search-part\" *ngIf=\"!isEditMode\">\r\n            <input type=\"text\" placeholder=\"Search / Add Tools here\" [(ngModel)]=\"searchToolQry\" (input)=\"getTools()\" />\r\n            <button class=\"btn\" (click)=\"createNewTools()\" tooltip=\"Add Tool\">\r\n              <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18px\" height=\"18px\" />\r\n            </button>\r\n          </div>\r\n          <div *ngIf=\"!searchToolQry && toolSubmittedValue\" class=\"invalid-feedback is-invalid d-block\">\r\n            Please Enter Tools Name\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n        {{ nameError }}\r\n      </div>\r\n      <div class=\"col tools-section\" [ngClass]=\"showLoading ? 'loader':''\">\r\n        <div class=\"row mt-2\" [ngStyle]=\"showLoader ? {'min-height': '150px'} : {}\">\r\n          <div class=\"col-12 col-md-4\" *ngFor=\"let Tool of tools\">\r\n            <div class=\"mt-2 d-flex\">\r\n              <input (change)=\"onSelectedTools($event, Tool)\" [checked]=\"Tool.selected == true\" id=\"{{ Tool.id }}\"\r\n                name=\"{{ Tool.id }}\" type=\"checkbox\" />\r\n              <label class=\"text-title\" for=\"{{ Tool.id }}\">\r\n                {{ Tool.name }}</label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div [ngClass]=\"{ 'loader': showLoading,'pt-3': !showLoading,'edit-mode': isEditMode}\">\r\n        <tabset #tabSet>\r\n          <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab?.controls; let index = index\"\r\n            [label]=\"tabs[index]\" tab1 id=\"{{ tabs[index] }}\" #{{tabs[index]}}>\r\n            <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n              <span class=\"text-secondary\">{{ tabs[index] }}</span>\r\n              <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.toolId.value)\">\r\n                <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n              </button>\r\n            </ng-template>\r\n            <div [formGroup]=\"group\" class=\"tab-card\">\r\n              <div class=\"card-body mt-3 position-relative\">\r\n                <div class=\"col-12 col-md-3 mt-1 copyAll\" *ngIf=\"\r\n                          tab.controls.length > 1 && index == copyOptionIndex\r\n                        \">\r\n                  <label class=\"label\">Copy to All Tabs</label>\r\n                  <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index, group.value,viewTab)\"\r\n                    role=\"switch\" />\r\n                </div>\r\n                <div class=\"row\" [ngClass]=\"index == 0 && tab.controls.length > 1 ? 'mt-5' : '' \">\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Self-ability Rating</label>\r\n                    <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n                      [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.starRating.errors }\" [maxStars]=\"5\">\r\n                    </ngx-stars>\r\n                    <div *ngIf=\"userToolSubmitted && k.starRating.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid':\r\n                                userToolSubmitted && k.starRating.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.starRating.errors.required\">\r\n                        Star Rating is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Profile Visibility</label><br />\r\n                    <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\" />\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Years of Experience</label>\r\n                    <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" (change)=\"onYearChange(group)\"\r\n                      formControlName=\"year\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.year.errors\r\n                            }\" bindValue=\"value\" [closeOnSelect]=\"true\" [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\"\r\n                      id=\"reqStates\"></ng-select>\r\n\r\n                    <div *ngIf=\"userToolSubmitted && k.year.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.year.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.year.errors.required\">\r\n                        Year is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Manufacturer</label>\r\n                    <input id=\"make\" formControlName=\"make\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Manufacturer here\"  (change)=\"onYearChange(group)\" />\r\n                    <!-- <div *ngIf=\"userToolSubmitted && k.make.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.make.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.make.errors.required\">\r\n                        Manufacturer is required\r\n                      </div>\r\n                    </div> -->\r\n                  </div>\r\n                </div>\r\n                <div class=\"row pt-2\">\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Model</label>\r\n                    <input id=\"model\" formControlName=\"model\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Model here\"  (change)=\"onYearChange(group)\" />\r\n                    <!-- <div *ngIf=\"userToolSubmitted && k.model.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.model.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.model.errors.required\">\r\n                        Model is required\r\n                      </div>\r\n                    </div> -->\r\n                  </div>\r\n\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\" label\">Serial Number</label>\r\n                    <input id=\"serialNumber\" formControlName=\"serialNumber\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Serial Number here\"  />\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Comment</label>\r\n                    <textarea placeholder=\"Enter your comment here\" formControlName=\"notes\" class=\"form-control\"\r\n                      [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.notes.errors\r\n                            }\" rows=\"2\"></textarea>\r\n                    <div *ngIf=\"userToolSubmitted && k.notes.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.notes.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.notes.errors.required\">\r\n                        Description is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </tab>\r\n        </tabset>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"tools-container last pt-5 mt-5\">\r\n    <div *ngIf=\"store.toolStepView() === 'add'\" class=\"d-flex justify-content-between pt-3 mob-res\">\r\n    <!-- (click)=\"reset()\" -->\r\n    <button class=\"back-btn\" (click)=\"cancel()\">Cancel</button>\r\n    <div class=\"mob-view\">\r\n      <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\" [ng2-loading]=\"showLoader\"\r\n        [disabled]=\"showLoader\" class=\"float-end save-btn\">\r\n        Add\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"store.toolStepView() !== 'add'\" class=\"d-flex justify-content-between pt-3 mob-res\">\r\n    <!-- (click)=\"reset()\" -->\r\n    <button class=\"back-btn\" (click)=\"goBack()\">Back</button>\r\n    <div class=\"mob-view\">\r\n      <button class=\"back-btn me-3 add\" *ngIf=\"store.toolStepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n        Add More Tools\r\n      </button>\r\n      <button    [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\" (click)=\"saveFinal()\"\r\n        class=\"float-end save-btn\">\r\n        Go To Dashboard\r\n      </button>\r\n      <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\"  [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" class=\"float-end save-btn\">\r\n        Add\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";.tools-container{max-width:1000px;margin:40px auto;min-height:300px}.tools-container.last{min-height:unset}.tools-container h3{margin-bottom:5px;font-size:22px;font-weight:500}.tools-container .info{font-size:13px;color:#666;margin-bottom:30px}.content-part{background:#fff}.content-part p,.content-part div{font-size:small}.content-part div .label{font-size:12px!important;font-weight:700!important;padding-bottom:5px!important}.content-part .row{margin-top:-15px}.content-part .sub-section{padding:0 10px}.content-part .sub-section .title{font-size:16px;font-weight:400;color:var(--font-primary)}.content-part .sub-section .info-title{font-size:12px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .sub-section .content{font-size:12px}.content-part .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px}.content-part .sub-section .subsection input{width:30%}.content-part .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background-color:#fff;border-radius:5px;color:var(--font-primary)}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;height:45px;position:relative;border-radius:5px;border:1px solid #d3dae6;padding:10px 0 10px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.content-part .search-part input{width:auto;flex:1;color:var(--font-dark);font-size:var(--font12-input);font-weight:400;border:none;background:none;outline:none}.content-part .search-part .btn{background:#1e2541;border-radius:5px;padding:5px;width:41px;height:36px;margin-right:3px}.content-part .search-part .btn img{filter:brightness(0) invert(1)}.content-part textarea{width:100%;background:none}.content-part .tools-section{margin-left:5px}.content-part .tools-section .category-title{margin-bottom:5px;font-size:13px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .tools-section .text-title{font-size:13px;margin-left:3px;color:var(--font-primary)}.content-part .tools-section input[type=checkbox]{border:2px solid #000!important;height:14px!important;width:15px!important;border-radius:2px!important;margin:2px}.content-part .tools-section input[type=checkbox]:checked{background-color:#000!important;border:2px solid #000!important}.content-part .tools-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#000;width:15px;display:flex;justify-content:center;border:2px solid #000;height:14px;align-items:center;border-radius:2px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#237b4b!important;border:1px solid #237b4b!important}.copyAll{position:absolute;right:0;text-align:end;top:-40px}.close-popup{position:absolute;right:7px;top:4px;width:25px}.form-control:focus{border:var(--bs-border-width) solid var(--bs-border-color)}::ng-deep .nav-link{color:#000!important}.back-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background:#d3dae6;color:#6c757dc7;border-radius:5px}.back-btn.edit{padding:5px 20px;min-height:20px;min-width:auto}.back-btn.add{background:#2e5b70;color:#fff}.save-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px}.create-btn{font-size:14px;transition:.2s;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px;height:40px;min-width:9rem}.form-control{color:#333;background:none!important;font-size:small;height:45px}.form-control:focus{box-shadow:none!important}@media only screen and (min-width: 300px) and (max-width: 450px){.modal-content .close-popup{width:16px}}.loader{filter:blur(3px)}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.skill-preview-body label{font-weight:500;font-size:14px;color:#6b7280;padding-bottom:5px}.skill-preview-body p{margin:0}.skill-preview-body .value{font-size:13px;color:#212529}.skill-preview-card{border-radius:12px;margin-bottom:12px;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease;overflow:hidden}.continue-btn{background-color:#4077ad;padding:5px 20px;min-height:20px;font-weight:500;color:#fff;border-radius:5px}.action-btns{display:flex;justify-content:space-between;align-items:center}.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:15px}.actions button{padding:10px 22px;border:none;border-radius:6px;font-size:14px;transition:all .2s ease;font-weight:500;min-width:8rem;min-height:45px}.actions .secondary{color:#6c757dc7;background-color:#e0e0e0}.actions .secondary:hover{background-color:#d5d5d5}.actions .primary{background-color:#2196f3;color:#fff}.actions .primary:hover{background-color:#1976d2}@media (max-width: 600px){.actions{flex-direction:column;align-items:stretch}.actions button{width:100%}}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .2s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.icon-color.rotate{transform:rotate(180deg)}@media screen and (max-width: 767px){.tools-container{padding:0 10px}.tools-container .mob-view{display:flex;justify-content:space-between;flex-direction:column-reverse;gap:5px}.tools-container .mob-res{flex-direction:column-reverse;gap:5px}.footer-actions{flex-direction:column-reverse;gap:5px;margin-top:65px}.continue-btn{padding:7px 45px}.back-btn{width:100%}.continue-btn{padding:10px 43px}.save-btn{padding:10px 15px;width:unset;margin-left:0!important}}.save-btn{margin-left:15px}\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: i12$2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i13.TabDirective, selector: "tab, [tab]", inputs: ["heading", "id", "disabled", "removable", "tabOrder", "customClass", "active"], outputs: ["selectTab", "deselect", "removed"], exportAs: ["tab"] }, { kind: "component", type: i13.TabsetComponent, selector: "tabset", inputs: ["vertical", "justified", "type"] }, { kind: "directive", type: i13.TabHeadingDirective, selector: "[tabHeading]" }, { kind: "component", type: i14.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i14.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }], animations: [
             trigger('expandCollapse', [
                 state('open', style({
                     height: '*',
@@ -5143,7 +5183,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             })),
                             transition('open <=> closed', animate('300ms ease'))
                         ])
-                    ], template: "<!-- Tool PREVIEW LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n  <h5 class=\"title text-secondary\">Tools Preview</h5>\r\n  <!-- <p class=\"subtitle\">Add Tools</p> -->\r\n  <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n    <accordion-group *ngFor=\"let tool of userToolsPreview\" #accGroup (isOpenChange)=\"onAccordionChange(tool, $event)\">\r\n      <div accordion-heading class=\"skill-preview-header d-flex justify-content-between align-items-center\">\r\n        <span class=\"fw-semibold text-secondary\">\r\n          {{ tool.toolName }}\r\n        </span>\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <!-- EDIT MODE BUTTONS -->\r\n          <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool); else viewActions\">\r\n            <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backTool(accGroup)\">\r\n              Cancel\r\n            </button>\r\n            <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserTools()\" \r\n              [disabled]=\"showLoader\">\r\n              Update\r\n            </button>\r\n          </ng-container>\r\n          <!-- VIEW MODE ACTIONS -->\r\n          <ng-template #viewActions>\r\n            <button type=\"button\" class=\"me-3\" (click)=\"editToolFromPreview(tool, accGroup, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" />\r\n            </button>\r\n            <!-- Arrow (ngx controls click) -->\r\n            <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n              [class.rotate]=\"accGroup.isOpen\" />\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n      <!-- BODY -->\r\n      <div class=\"skill-preview-body content-part mt-3\">\r\n        <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n          <div class=\"row g-3 row-gap-2\">\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Service Provider</label>\r\n              <div class=\"value\">{{ tool.providerName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Manufacturer</label>\r\n              <div class=\"value\">{{ tool.make }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Years of Experience</label>\r\n              <div class=\"value\">{{ tool.year }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Self Ability Rating</label>\r\n              <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\" style=\"pointer-events: none\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Active</label><br />\r\n              <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"tool.profileVisibility\" disabled>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Tools / Equipment</label>\r\n              <div class=\"value\">{{ tool.toolName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Model</label>\r\n              <div class=\"value\">{{ tool.model }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Serial Number</label>\r\n              <div class=\"value\">{{ tool.serialNumber }}</div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label>Description</label>\r\n              <div class=\"value\">{{ tool.notes }}</div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Edit Mode -->\r\n        <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\" [formGroup]=\"tab.at(0)\">\r\n          <div class=\"row g-3\">\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Service Provider</label>\r\n              <div class=\"value\">{{ tool.providerName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Manufacturer</label> <br />\r\n              <input class=\"form-control\" type=\"text\" formControlName=\"make\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Years of Experience</label>\r\n              <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" bindValue=\"value\" formControlName=\"year\"\r\n                [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\">\r\n              </ng-select>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Self Ability Rating</label>\r\n              <ngx-stars [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n                (rate)=\"onRatingSets($event)\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Active</label><br />\r\n              <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Tools / Equipment</label>\r\n              <input class=\"form-control\" [value]=\"tool.toolName\" readonly>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Model</label>\r\n              <input class=\"form-control\" formControlName=\"model\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Serial Number</label>\r\n              <input class=\"form-control\" formControlName=\"serialNumber\">\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label>Description</label>\r\n              <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\"></textarea>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </accordion-group>\r\n  </accordion>\r\n</div>\r\n\r\n<!-- Tool LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'add'\">\r\n  <h3 class=\"text-secondary\">Add Tools</h3>\r\n  <p class=\"info\">Manage specialty tools and equipment</p>\r\n  <div class=\"content-part\">\r\n    <h6 class=\"text-secondary\"> Add User Tool</h6>\r\n    <div class=\"sub-section\">\r\n      <div class=\"row mt-2\">\r\n        <div class=\"col-12 col-md-12 col-sm-12 ps-lg-0\">\r\n          <div class=\"search-part\" *ngIf=\"!isEditMode\">\r\n            <input type=\"text\" placeholder=\"Search / Add Tools here\" [(ngModel)]=\"searchToolQry\" (input)=\"getTools()\" />\r\n            <button class=\"btn\" (click)=\"createNewTools()\" tooltip=\"Add Tool\">\r\n              <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18px\" height=\"18px\" />\r\n            </button>\r\n          </div>\r\n          <div *ngIf=\"!searchToolQry && toolSubmittedValue\" class=\"invalid-feedback is-invalid d-block\">\r\n            Please Enter Tools Name\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n        {{ nameError }}\r\n      </div>\r\n      <div class=\"col tools-section\" [ngClass]=\"showLoading ? 'loader':''\">\r\n        <div class=\"row mt-2\" [ngStyle]=\"showLoader ? {'min-height': '150px'} : {}\">\r\n          <div class=\"col-12 col-md-4\" *ngFor=\"let Tool of tools\">\r\n            <div class=\"mt-2 d-flex\">\r\n              <input (change)=\"onSelectedTools($event, Tool)\" [checked]=\"Tool.selected == true\" id=\"{{ Tool.id }}\"\r\n                name=\"{{ Tool.id }}\" type=\"checkbox\" />\r\n              <label class=\"text-title\" for=\"{{ Tool.id }}\">\r\n                {{ Tool.name }}</label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div [ngClass]=\"{ 'loader': showLoading,'pt-3': !showLoading,'edit-mode': isEditMode}\">\r\n        <tabset #tabSet>\r\n          <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab?.controls; let index = index\"\r\n            [label]=\"tabs[index]\" tab1 id=\"{{ tabs[index] }}\" #{{tabs[index]}}>\r\n            <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n              <span class=\"text-secondary\">{{ tabs[index] }}</span>\r\n              <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.toolId.value)\">\r\n                <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n              </button>\r\n            </ng-template>\r\n            <div [formGroup]=\"group\" class=\"tab-card\">\r\n              <div class=\"card-body mt-3 position-relative\">\r\n                <div class=\"col-12 col-md-3 mt-1 copyAll\" *ngIf=\"\r\n                          tab.controls.length > 1 && index == copyOptionIndex\r\n                        \">\r\n                  <label class=\"label\">Copy to All Tabs</label>\r\n                  <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index, group.value,viewTab)\"\r\n                    role=\"switch\" />\r\n                </div>\r\n                <div class=\"row\" [ngClass]=\"index == 0 && tab.controls.length > 1 ? 'mt-5' : '' \">\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Self-ability Rating</label>\r\n                    <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n                      [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.starRating.errors }\" [maxStars]=\"5\">\r\n                    </ngx-stars>\r\n                    <div *ngIf=\"userToolSubmitted && k.starRating.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid':\r\n                                userToolSubmitted && k.starRating.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.starRating.errors.required\">\r\n                        Star Rating is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Profile Visibility</label><br />\r\n                    <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\" />\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Years of Experience</label>\r\n                    <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" (change)=\"onYearChange(group)\"\r\n                      formControlName=\"year\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.year.errors\r\n                            }\" bindValue=\"value\" [closeOnSelect]=\"true\" [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\"\r\n                      id=\"reqStates\"></ng-select>\r\n\r\n                    <div *ngIf=\"userToolSubmitted && k.year.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.year.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.year.errors.required\">\r\n                        Year is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Manufacturer</label>\r\n                    <input id=\"make\" formControlName=\"make\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Manufacturer here\"  (change)=\"onYearChange(group)\" />\r\n                    <!-- <div *ngIf=\"userToolSubmitted && k.make.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.make.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.make.errors.required\">\r\n                        Manufacturer is required\r\n                      </div>\r\n                    </div> -->\r\n                  </div>\r\n                </div>\r\n                <div class=\"row pt-2\">\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Model</label>\r\n                    <input id=\"model\" formControlName=\"model\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Model here\"  (change)=\"onYearChange(group)\" />\r\n                    <!-- <div *ngIf=\"userToolSubmitted && k.model.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.model.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.model.errors.required\">\r\n                        Model is required\r\n                      </div>\r\n                    </div> -->\r\n                  </div>\r\n\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\" label\">Serial Number</label>\r\n                    <input id=\"serialNumber\" formControlName=\"serialNumber\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Serial Number here\"  />\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Comment</label>\r\n                    <textarea placeholder=\"Enter your comment here\" formControlName=\"notes\" class=\"form-control\"\r\n                      [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.notes.errors\r\n                            }\" rows=\"2\"></textarea>\r\n                    <div *ngIf=\"userToolSubmitted && k.notes.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.notes.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.notes.errors.required\">\r\n                        Description is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </tab>\r\n        </tabset>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"tools-container last pt-5 mt-5\">\r\n  <div class=\"d-flex justify-content-between pt-3 mob-res\">\r\n    <!-- (click)=\"reset()\" -->\r\n    <button class=\"back-btn\" (click)=\"goBack()\">Back</button>\r\n    <div class=\"mob-view\">\r\n      <button class=\"back-btn me-3 add\" *ngIf=\"store.toolStepView() === 'preview'\" (click)=\"store.goToToolAdd()\">\r\n        Add More Tools\r\n      </button>\r\n      <button    [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\" (click)=\"saveFinal()\"\r\n        class=\"float-end save-btn\">\r\n        Go To Dashboard\r\n      </button>\r\n      <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\"  [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" class=\"float-end save-btn\">\r\n        Add\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";.tools-container{max-width:1000px;margin:40px auto;min-height:300px}.tools-container.last{min-height:unset}.tools-container h3{margin-bottom:5px;font-size:22px;font-weight:500}.tools-container .info{font-size:13px;color:#666;margin-bottom:30px}.content-part{background:#fff}.content-part p,.content-part div{font-size:small}.content-part div .label{font-size:12px!important;font-weight:700!important;padding-bottom:5px!important}.content-part .row{margin-top:-15px}.content-part .sub-section{padding:0 10px}.content-part .sub-section .title{font-size:16px;font-weight:400;color:var(--font-primary)}.content-part .sub-section .info-title{font-size:12px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .sub-section .content{font-size:12px}.content-part .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px}.content-part .sub-section .subsection input{width:30%}.content-part .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background-color:#fff;border-radius:5px;color:var(--font-primary)}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;height:45px;position:relative;border-radius:5px;border:1px solid #d3dae6;padding:10px 0 10px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.content-part .search-part input{width:auto;flex:1;color:var(--font-dark);font-size:var(--font12-input);font-weight:400;border:none;background:none;outline:none}.content-part .search-part .btn{background:#1e2541;border-radius:5px;padding:5px;width:41px;height:36px;margin-right:3px}.content-part .search-part .btn img{filter:brightness(0) invert(1)}.content-part textarea{width:100%;background:none}.content-part .tools-section{margin-left:5px}.content-part .tools-section .category-title{margin-bottom:5px;font-size:13px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .tools-section .text-title{font-size:13px;margin-left:3px;color:var(--font-primary)}.content-part .tools-section input[type=checkbox]{border:2px solid #000!important;height:14px!important;width:15px!important;border-radius:2px!important;margin:2px}.content-part .tools-section input[type=checkbox]:checked{background-color:#000!important;border:2px solid #000!important}.content-part .tools-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#000;width:15px;display:flex;justify-content:center;border:2px solid #000;height:14px;align-items:center;border-radius:2px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#237b4b!important;border:1px solid #237b4b!important}.copyAll{position:absolute;right:0;text-align:end;top:-40px}.close-popup{position:absolute;right:7px;top:4px;width:25px}.form-control:focus{border:var(--bs-border-width) solid var(--bs-border-color)}::ng-deep .nav-link{color:#000!important}.back-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background:#d3dae6;color:#6c757dc7;border-radius:5px}.back-btn.edit{padding:5px 20px;min-height:20px;min-width:auto}.back-btn.add{background:#2e5b70;color:#fff}.save-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px}.create-btn{font-size:14px;transition:.2s;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px;height:40px;min-width:9rem}.form-control{color:#333;background:none!important;font-size:small;height:45px}.form-control:focus{box-shadow:none!important}@media only screen and (min-width: 300px) and (max-width: 450px){.modal-content .close-popup{width:16px}}.loader{filter:blur(3px)}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.skill-preview-body label{font-weight:500;font-size:14px;color:#6b7280;padding-bottom:5px}.skill-preview-body p{margin:0}.skill-preview-body .value{font-size:13px;color:#212529}.skill-preview-card{border-radius:12px;margin-bottom:12px;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease;overflow:hidden}.continue-btn{background-color:#4077ad;padding:5px 20px;min-height:20px;font-weight:500;color:#fff;border-radius:5px}.action-btns{display:flex;justify-content:space-between;align-items:center}.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:15px}.actions button{padding:10px 22px;border:none;border-radius:6px;font-size:14px;transition:all .2s ease;font-weight:500;min-width:8rem;min-height:45px}.actions .secondary{color:#6c757dc7;background-color:#e0e0e0}.actions .secondary:hover{background-color:#d5d5d5}.actions .primary{background-color:#2196f3;color:#fff}.actions .primary:hover{background-color:#1976d2}@media (max-width: 600px){.actions{flex-direction:column;align-items:stretch}.actions button{width:100%}}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .2s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.icon-color.rotate{transform:rotate(180deg)}@media screen and (max-width: 767px){.tools-container{padding:0 10px}.tools-container .mob-view{display:flex;justify-content:space-between;flex-direction:column-reverse;gap:5px}.tools-container .mob-res{flex-direction:column-reverse;gap:5px}.footer-actions{flex-direction:column-reverse;gap:5px;margin-top:65px}.continue-btn{padding:7px 45px}.back-btn{width:100%}.continue-btn{padding:10px 43px}.save-btn{padding:10px 15px;width:unset;margin-left:0!important}}.save-btn{margin-left:15px}\n"] }]
+                    ], template: "<!-- Tool PREVIEW LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n  <h5 class=\"title text-secondary\">Tools Preview</h5>\r\n  <!-- <p class=\"subtitle\">Add Tools</p> -->\r\n  <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n    <accordion-group *ngFor=\"let tool of userToolsPreview\" #accGroup (isOpenChange)=\"onAccordionChange(tool, $event)\">\r\n      <div accordion-heading class=\"skill-preview-header d-flex justify-content-between align-items-center\">\r\n        <span class=\"fw-semibold text-secondary\">\r\n          {{ tool.toolName }}\r\n        </span>\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <!-- EDIT MODE BUTTONS -->\r\n          <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool); else viewActions\">\r\n            <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backTool(accGroup)\">\r\n              Cancel\r\n            </button>\r\n            <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserTools()\" \r\n              [disabled]=\"showLoader\">\r\n              Update\r\n            </button>\r\n          </ng-container>\r\n          <!-- VIEW MODE ACTIONS -->\r\n          <ng-template #viewActions>\r\n            <button type=\"button\" class=\"me-3\" (click)=\"editToolFromPreview(tool, accGroup, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" />\r\n            </button>\r\n            <!-- Arrow (ngx controls click) -->\r\n            <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n              [class.rotate]=\"accGroup.isOpen\" />\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n      <!-- BODY -->\r\n      <div class=\"skill-preview-body content-part mt-3\">\r\n        <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n          <div class=\"row g-3 row-gap-2\">\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Service Provider</label>\r\n              <div class=\"value\">{{ tool.providerName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Manufacturer</label>\r\n              <div class=\"value\">{{ tool.make }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Years of Experience</label>\r\n              <div class=\"value\">{{ tool.year }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Self Ability Rating</label>\r\n              <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\" style=\"pointer-events: none\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Active</label><br />\r\n              <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"tool.profileVisibility\" disabled>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Tools / Equipment</label>\r\n              <div class=\"value\">{{ tool.toolName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Model</label>\r\n              <div class=\"value\">{{ tool.model }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Serial Number</label>\r\n              <div class=\"value\">{{ tool.serialNumber }}</div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label>Description</label>\r\n              <div class=\"value\">{{ tool.notes }}</div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Edit Mode -->\r\n        <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\" [formGroup]=\"tab.at(0)\">\r\n          <div class=\"row g-3\">\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Service Provider</label>\r\n              <div class=\"value\">{{ tool.providerName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Manufacturer</label> <br />\r\n              <input class=\"form-control\" type=\"text\" formControlName=\"make\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Years of Experience</label>\r\n              <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" bindValue=\"value\" formControlName=\"year\"\r\n                [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\">\r\n              </ng-select>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Self Ability Rating</label>\r\n              <ngx-stars [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n                (rate)=\"onRatingSets($event)\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Active</label><br />\r\n              <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Tools / Equipment</label>\r\n              <input class=\"form-control\" [value]=\"tool.toolName\" readonly>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Model</label>\r\n              <input class=\"form-control\" formControlName=\"model\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Serial Number</label>\r\n              <input class=\"form-control\" formControlName=\"serialNumber\">\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label>Description</label>\r\n              <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\"></textarea>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </accordion-group>\r\n  </accordion>\r\n</div>\r\n\r\n<!-- Tool LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'add'\">\r\n  <h3 class=\"text-secondary\">Add Tools</h3>\r\n  <p class=\"info\">Manage specialty tools and equipment</p>\r\n  <div class=\"content-part\">\r\n    <h6 class=\"text-secondary\"> Add User Tool</h6>\r\n    <div class=\"sub-section\">\r\n      <div class=\"row mt-2\">\r\n        <div class=\"col-12 col-md-12 col-sm-12 ps-lg-0\">\r\n          <div class=\"search-part\" *ngIf=\"!isEditMode\">\r\n            <input type=\"text\" placeholder=\"Search / Add Tools here\" [(ngModel)]=\"searchToolQry\" (input)=\"getTools()\" />\r\n            <button class=\"btn\" (click)=\"createNewTools()\" tooltip=\"Add Tool\">\r\n              <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18px\" height=\"18px\" />\r\n            </button>\r\n          </div>\r\n          <div *ngIf=\"!searchToolQry && toolSubmittedValue\" class=\"invalid-feedback is-invalid d-block\">\r\n            Please Enter Tools Name\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n        {{ nameError }}\r\n      </div>\r\n      <div class=\"col tools-section\" [ngClass]=\"showLoading ? 'loader':''\">\r\n        <div class=\"row mt-2\" [ngStyle]=\"showLoader ? {'min-height': '150px'} : {}\">\r\n          <div class=\"col-12 col-md-4\" *ngFor=\"let Tool of tools\">\r\n            <div class=\"mt-2 d-flex\">\r\n              <input (change)=\"onSelectedTools($event, Tool)\" [checked]=\"Tool.selected == true\" id=\"{{ Tool.id }}\"\r\n                name=\"{{ Tool.id }}\" type=\"checkbox\" />\r\n              <label class=\"text-title\" for=\"{{ Tool.id }}\">\r\n                {{ Tool.name }}</label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div [ngClass]=\"{ 'loader': showLoading,'pt-3': !showLoading,'edit-mode': isEditMode}\">\r\n        <tabset #tabSet>\r\n          <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab?.controls; let index = index\"\r\n            [label]=\"tabs[index]\" tab1 id=\"{{ tabs[index] }}\" #{{tabs[index]}}>\r\n            <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n              <span class=\"text-secondary\">{{ tabs[index] }}</span>\r\n              <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.toolId.value)\">\r\n                <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n              </button>\r\n            </ng-template>\r\n            <div [formGroup]=\"group\" class=\"tab-card\">\r\n              <div class=\"card-body mt-3 position-relative\">\r\n                <div class=\"col-12 col-md-3 mt-1 copyAll\" *ngIf=\"\r\n                          tab.controls.length > 1 && index == copyOptionIndex\r\n                        \">\r\n                  <label class=\"label\">Copy to All Tabs</label>\r\n                  <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index, group.value,viewTab)\"\r\n                    role=\"switch\" />\r\n                </div>\r\n                <div class=\"row\" [ngClass]=\"index == 0 && tab.controls.length > 1 ? 'mt-5' : '' \">\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Self-ability Rating</label>\r\n                    <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n                      [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.starRating.errors }\" [maxStars]=\"5\">\r\n                    </ngx-stars>\r\n                    <div *ngIf=\"userToolSubmitted && k.starRating.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid':\r\n                                userToolSubmitted && k.starRating.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.starRating.errors.required\">\r\n                        Star Rating is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Profile Visibility</label><br />\r\n                    <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\" />\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Years of Experience</label>\r\n                    <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" (change)=\"onYearChange(group)\"\r\n                      formControlName=\"year\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.year.errors\r\n                            }\" bindValue=\"value\" [closeOnSelect]=\"true\" [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\"\r\n                      id=\"reqStates\"></ng-select>\r\n\r\n                    <div *ngIf=\"userToolSubmitted && k.year.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.year.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.year.errors.required\">\r\n                        Year is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Manufacturer</label>\r\n                    <input id=\"make\" formControlName=\"make\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Manufacturer here\"  (change)=\"onYearChange(group)\" />\r\n                    <!-- <div *ngIf=\"userToolSubmitted && k.make.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.make.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.make.errors.required\">\r\n                        Manufacturer is required\r\n                      </div>\r\n                    </div> -->\r\n                  </div>\r\n                </div>\r\n                <div class=\"row pt-2\">\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Model</label>\r\n                    <input id=\"model\" formControlName=\"model\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Model here\"  (change)=\"onYearChange(group)\" />\r\n                    <!-- <div *ngIf=\"userToolSubmitted && k.model.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.model.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.model.errors.required\">\r\n                        Model is required\r\n                      </div>\r\n                    </div> -->\r\n                  </div>\r\n\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\" label\">Serial Number</label>\r\n                    <input id=\"serialNumber\" formControlName=\"serialNumber\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Serial Number here\"  />\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Comment</label>\r\n                    <textarea placeholder=\"Enter your comment here\" formControlName=\"notes\" class=\"form-control\"\r\n                      [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.notes.errors\r\n                            }\" rows=\"2\"></textarea>\r\n                    <div *ngIf=\"userToolSubmitted && k.notes.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.notes.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.notes.errors.required\">\r\n                        Description is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </tab>\r\n        </tabset>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"tools-container last pt-5 mt-5\">\r\n    <div *ngIf=\"store.toolStepView() === 'add'\" class=\"d-flex justify-content-between pt-3 mob-res\">\r\n    <!-- (click)=\"reset()\" -->\r\n    <button class=\"back-btn\" (click)=\"cancel()\">Cancel</button>\r\n    <div class=\"mob-view\">\r\n      <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\" [ng2-loading]=\"showLoader\"\r\n        [disabled]=\"showLoader\" class=\"float-end save-btn\">\r\n        Add\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"store.toolStepView() !== 'add'\" class=\"d-flex justify-content-between pt-3 mob-res\">\r\n    <!-- (click)=\"reset()\" -->\r\n    <button class=\"back-btn\" (click)=\"goBack()\">Back</button>\r\n    <div class=\"mob-view\">\r\n      <button class=\"back-btn me-3 add\" *ngIf=\"store.toolStepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n        Add More Tools\r\n      </button>\r\n      <button    [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\" (click)=\"saveFinal()\"\r\n        class=\"float-end save-btn\">\r\n        Go To Dashboard\r\n      </button>\r\n      <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\"  [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" class=\"float-end save-btn\">\r\n        Add\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";.tools-container{max-width:1000px;margin:40px auto;min-height:300px}.tools-container.last{min-height:unset}.tools-container h3{margin-bottom:5px;font-size:22px;font-weight:500}.tools-container .info{font-size:13px;color:#666;margin-bottom:30px}.content-part{background:#fff}.content-part p,.content-part div{font-size:small}.content-part div .label{font-size:12px!important;font-weight:700!important;padding-bottom:5px!important}.content-part .row{margin-top:-15px}.content-part .sub-section{padding:0 10px}.content-part .sub-section .title{font-size:16px;font-weight:400;color:var(--font-primary)}.content-part .sub-section .info-title{font-size:12px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .sub-section .content{font-size:12px}.content-part .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px}.content-part .sub-section .subsection input{width:30%}.content-part .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background-color:#fff;border-radius:5px;color:var(--font-primary)}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;height:45px;position:relative;border-radius:5px;border:1px solid #d3dae6;padding:10px 0 10px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.content-part .search-part input{width:auto;flex:1;color:var(--font-dark);font-size:var(--font12-input);font-weight:400;border:none;background:none;outline:none}.content-part .search-part .btn{background:#1e2541;border-radius:5px;padding:5px;width:41px;height:36px;margin-right:3px}.content-part .search-part .btn img{filter:brightness(0) invert(1)}.content-part textarea{width:100%;background:none}.content-part .tools-section{margin-left:5px}.content-part .tools-section .category-title{margin-bottom:5px;font-size:13px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .tools-section .text-title{font-size:13px;margin-left:3px;color:var(--font-primary)}.content-part .tools-section input[type=checkbox]{border:2px solid #000!important;height:14px!important;width:15px!important;border-radius:2px!important;margin:2px}.content-part .tools-section input[type=checkbox]:checked{background-color:#000!important;border:2px solid #000!important}.content-part .tools-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#000;width:15px;display:flex;justify-content:center;border:2px solid #000;height:14px;align-items:center;border-radius:2px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#237b4b!important;border:1px solid #237b4b!important}.copyAll{position:absolute;right:0;text-align:end;top:-40px}.close-popup{position:absolute;right:7px;top:4px;width:25px}.form-control:focus{border:var(--bs-border-width) solid var(--bs-border-color)}::ng-deep .nav-link{color:#000!important}.back-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background:#d3dae6;color:#6c757dc7;border-radius:5px}.back-btn.edit{padding:5px 20px;min-height:20px;min-width:auto}.back-btn.add{background:#2e5b70;color:#fff}.save-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px}.create-btn{font-size:14px;transition:.2s;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px;height:40px;min-width:9rem}.form-control{color:#333;background:none!important;font-size:small;height:45px}.form-control:focus{box-shadow:none!important}@media only screen and (min-width: 300px) and (max-width: 450px){.modal-content .close-popup{width:16px}}.loader{filter:blur(3px)}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.skill-preview-body label{font-weight:500;font-size:14px;color:#6b7280;padding-bottom:5px}.skill-preview-body p{margin:0}.skill-preview-body .value{font-size:13px;color:#212529}.skill-preview-card{border-radius:12px;margin-bottom:12px;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease;overflow:hidden}.continue-btn{background-color:#4077ad;padding:5px 20px;min-height:20px;font-weight:500;color:#fff;border-radius:5px}.action-btns{display:flex;justify-content:space-between;align-items:center}.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:15px}.actions button{padding:10px 22px;border:none;border-radius:6px;font-size:14px;transition:all .2s ease;font-weight:500;min-width:8rem;min-height:45px}.actions .secondary{color:#6c757dc7;background-color:#e0e0e0}.actions .secondary:hover{background-color:#d5d5d5}.actions .primary{background-color:#2196f3;color:#fff}.actions .primary:hover{background-color:#1976d2}@media (max-width: 600px){.actions{flex-direction:column;align-items:stretch}.actions button{width:100%}}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .2s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.icon-color.rotate{transform:rotate(180deg)}@media screen and (max-width: 767px){.tools-container{padding:0 10px}.tools-container .mob-view{display:flex;justify-content:space-between;flex-direction:column-reverse;gap:5px}.tools-container .mob-res{flex-direction:column-reverse;gap:5px}.footer-actions{flex-direction:column-reverse;gap:5px;margin-top:65px}.continue-btn{padding:7px 45px}.back-btn{width:100%}.continue-btn{padding:10px 43px}.save-btn{padding:10px 15px;width:unset;margin-left:0!important}}.save-btn{margin-left:15px}\n"] }]
         }], ctorParameters: () => [{ type: ToolService }, { type: UserToolService }, { type: i8.UntypedFormBuilder }, { type: UserService }, { type: UtilsService }, { type: CredentialingStore }, { type: i6.TokenService }, { type: UserDetailService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LIBRARY_CONFIG]