@idsoftsource/initial-process 1.8.6 → 1.8.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -6442,11 +6442,11 @@ class EducationComponent {
|
|
|
6442
6442
|
this.fileName = '';
|
|
6443
6443
|
}
|
|
6444
6444
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EducationComponent, deps: [{ token: i1$1.RoleContextService }, { token: UserEducationService }, { token: UserService }, { token: CredentialingStore }, { token: EducationStore }, { token: CountryServices }, { token: PostalCodeServices }, { token: i1$1.TokenService }, { token: i8.FormBuilder }, { token: FileService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
|
|
6445
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: EducationComponent, isStandalone: false, selector: "app-education", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div *ngIf=\"!showpreview()\">\r\n <div class=\"education-container\">\r\n <h3><i class=\"bi bi-mortarboard-fill me-2\" style=\"color:#6366f1;\"></i>Add Education</h3>\r\n <p class=\"hint\">\r\n Please list your educational history. This can cover anything from GED to college degree\r\n </p>\r\n <form [formGroup]=\"educationForm\">\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">General Equivalency Diploma / Degree</div>\r\n <input type=\"text\" placeholder=\"Enter your Diploma here\" formControlName=\"courseName\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('courseName')?.touched &&\r\n educationForm.get('courseName')?.hasError('required')\">\r\n Degree is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">Diploma / Degree Type</div>\r\n <input type=\"text\" placeholder=\"Enter your Diploma / Degree Type\" formControlName=\"courseType\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('courseType')?.touched &&\r\n educationForm.get('courseType')?.hasError('required')\">\r\n Diploma / Degree Type is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Institution Name</div>\r\n <input type=\"text\" placeholder=\"Enter institution name here\" formControlName=\"instituteName\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('instituteName')?.touched &&\r\n educationForm.get('instituteName')?.hasError('required')\">\r\n Institution name is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Country</div>\r\n <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n {{ item.country }}\r\n </ng-template>\r\n <!-- <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-item$=\"item$\" let-index=\"index\">\r\n <span class=\"ng-value-label\">\r\n {{item.country}}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span> \r\n </ng-template> -->\r\n </ng-select>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">State</div>\r\n <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select State\">\r\n\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n\r\n </div>\r\n </div>\r\n <div class=\"row form-row\">\r\n <div class=\"field city\">\r\n <div class=\"head\">City</div>\r\n <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('city')?.touched &&\r\n educationForm.get('city')?.hasError('required')\">\r\n Enter City\r\n </small>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Start Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Start date\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !educationForm.get('startDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"startDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('startDate')?.touched &&\r\n educationForm.get('startDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !educationForm.get('endDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"endDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('endDate')?.touched &&\r\n educationForm.get('endDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"comments\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Supporting Documents</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your diploma, degree certificate, or transcript (PDF, DOC, DOCX)</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Document\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"action\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n class=\"secondary\" (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3><i class=\"bi bi-mortarboard-fill me-2\" style=\"color:#6366f1;\"></i>Education</h3>\r\n <p class=\"preview-subtitle\">Review your educational history below</p>\r\n </div>\r\n\r\n <div class=\"preview-list\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button preview-accordion-btn\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#edu_' + i\"\r\n aria-expanded=\"true\">\r\n <div class=\"preview-acc-left\">\r\n <span class=\"preview-acc-title\">{{ exp.courseName }}</span>\r\n <span class=\"preview-acc-meta\">{{ exp.instituteName }}</span>\r\n </div>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse show\">\r\n <div class=\"preview-body\">\r\n <div class=\"detail-grid\">\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Course Name</span>\r\n <span class=\"preview-value\">{{ exp.courseName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Course Type</span>\r\n <span class=\"preview-value\">{{ exp.courseType || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Institution Name</span>\r\n <span class=\"preview-value\">{{ exp.instituteName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">State</span>\r\n <span class=\"preview-value\">{{ exp.state | stateName }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">City</span>\r\n <span class=\"preview-value\">{{ exp.city || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">From Date</span>\r\n <span class=\"preview-value\">{{ exp.startDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">To Date</span>\r\n <span class=\"preview-value\">{{ exp.endDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n <span class=\"preview-label\">Document</span>\r\n <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n </div>\r\n </div>\r\n <div class=\"detail-cell detail-full\">\r\n <span class=\"preview-label\">Comments</span>\r\n <span class=\"preview-value\">{{ exp.comments || '\u2014' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Educations</button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input[type=text]::placeholder,input[type=email]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input[type=text].is-invalid,input[type=email].is-invalid,input[type=number].is-invalid,input[type=password].is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.action{display:flex;justify-content:space-between;margin:48px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#f8fafc}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.edit-icon{cursor:pointer}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.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}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.row{flex-direction:column;gap:12px}.right-actions{gap:8px;flex-direction:column-reverse}.detail-grid{grid-template-columns:1fr}.actions,.action{gap:8px;display:flex;flex-direction:column-reverse}.add-btn{width:unset}.actions{margin:48px 0 20px}button{width:100%}}\n"], dependencies: [{ kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
|
|
6445
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: EducationComponent, isStandalone: false, selector: "app-education", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div *ngIf=\"!showpreview()\">\r\n <div class=\"education-container\">\r\n <h3><img src=\"/assets/images/icons/mortarboard-fill.svg\" alt=\"education\" class=\"me-2\" width=\"18\" height=\"18\" />Add Education</h3>\r\n <p class=\"hint\">\r\n Please list your educational history. This can cover anything from GED to college degree\r\n </p>\r\n <form [formGroup]=\"educationForm\">\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">General Equivalency Diploma / Degree</div>\r\n <input type=\"text\" placeholder=\"Enter your Diploma here\" formControlName=\"courseName\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('courseName')?.touched &&\r\n educationForm.get('courseName')?.hasError('required')\">\r\n Degree is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">Diploma / Degree Type</div>\r\n <input type=\"text\" placeholder=\"Enter your Diploma / Degree Type\" formControlName=\"courseType\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('courseType')?.touched &&\r\n educationForm.get('courseType')?.hasError('required')\">\r\n Diploma / Degree Type is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Institution Name</div>\r\n <input type=\"text\" placeholder=\"Enter institution name here\" formControlName=\"instituteName\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('instituteName')?.touched &&\r\n educationForm.get('instituteName')?.hasError('required')\">\r\n Institution name is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Country</div>\r\n <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n {{ item.country }}\r\n </ng-template>\r\n <!-- <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-item$=\"item$\" let-index=\"index\">\r\n <span class=\"ng-value-label\">\r\n {{item.country}}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span> \r\n </ng-template> -->\r\n </ng-select>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">State</div>\r\n <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select State\">\r\n\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n\r\n </div>\r\n </div>\r\n <div class=\"row form-row\">\r\n <div class=\"field city\">\r\n <div class=\"head\">City</div>\r\n <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('city')?.touched &&\r\n educationForm.get('city')?.hasError('required')\">\r\n Enter City\r\n </small>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Start Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Start date\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !educationForm.get('startDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"startDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('startDate')?.touched &&\r\n educationForm.get('startDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !educationForm.get('endDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"endDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('endDate')?.touched &&\r\n educationForm.get('endDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"comments\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Supporting Documents</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your diploma, degree certificate, or transcript (PDF, DOC, DOCX)</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Document\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"action\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n class=\"secondary\" (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3><img src=\"/assets/images/icons/mortarboard-fill.svg\" alt=\"education\" class=\"me-2\" width=\"18\" height=\"18\" />Education</h3>\r\n <p class=\"preview-subtitle\">Review your educational history below</p>\r\n </div>\r\n\r\n <div class=\"preview-list\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button preview-accordion-btn\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#edu_' + i\"\r\n aria-expanded=\"true\">\r\n <div class=\"preview-acc-left\">\r\n <span class=\"preview-acc-title\">{{ exp.courseName }}</span>\r\n <span class=\"preview-acc-meta\">{{ exp.instituteName }}</span>\r\n </div>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse show\">\r\n <div class=\"preview-body\">\r\n <div class=\"detail-grid\">\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Course Name</span>\r\n <span class=\"preview-value\">{{ exp.courseName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Course Type</span>\r\n <span class=\"preview-value\">{{ exp.courseType || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Institution Name</span>\r\n <span class=\"preview-value\">{{ exp.instituteName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">State</span>\r\n <span class=\"preview-value\">{{ exp.state | stateName }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">City</span>\r\n <span class=\"preview-value\">{{ exp.city || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">From Date</span>\r\n <span class=\"preview-value\">{{ exp.startDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">To Date</span>\r\n <span class=\"preview-value\">{{ exp.endDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n <span class=\"preview-label\">Document</span>\r\n <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n </div>\r\n </div>\r\n <div class=\"detail-cell detail-full\">\r\n <span class=\"preview-label\">Comments</span>\r\n <span class=\"preview-value\">{{ exp.comments || '\u2014' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Educations</button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input[type=text]::placeholder,input[type=email]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input[type=text].is-invalid,input[type=email].is-invalid,input[type=number].is-invalid,input[type=password].is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.action{display:flex;justify-content:space-between;margin:48px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#f8fafc}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.edit-icon{cursor:pointer}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.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}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.row{flex-direction:column;gap:12px}.right-actions{gap:8px;flex-direction:column-reverse}.detail-grid{grid-template-columns:1fr}.actions,.action{gap:8px;display:flex;flex-direction:column-reverse}.add-btn{width:unset}.actions{margin:48px 0 20px}button{width:100%}}\n"], dependencies: [{ kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
|
|
6446
6446
|
}
|
|
6447
6447
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EducationComponent, decorators: [{
|
|
6448
6448
|
type: Component,
|
|
6449
|
-
args: [{ selector: 'app-education', standalone: false, template: "<div *ngIf=\"!showpreview()\">\r\n <div class=\"education-container\">\r\n <h3><i class=\"bi bi-mortarboard-fill me-2\" style=\"color:#6366f1;\"></i>Add Education</h3>\r\n <p class=\"hint\">\r\n Please list your educational history. This can cover anything from GED to college degree\r\n </p>\r\n <form [formGroup]=\"educationForm\">\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">General Equivalency Diploma / Degree</div>\r\n <input type=\"text\" placeholder=\"Enter your Diploma here\" formControlName=\"courseName\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('courseName')?.touched &&\r\n educationForm.get('courseName')?.hasError('required')\">\r\n Degree is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">Diploma / Degree Type</div>\r\n <input type=\"text\" placeholder=\"Enter your Diploma / Degree Type\" formControlName=\"courseType\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('courseType')?.touched &&\r\n educationForm.get('courseType')?.hasError('required')\">\r\n Diploma / Degree Type is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Institution Name</div>\r\n <input type=\"text\" placeholder=\"Enter institution name here\" formControlName=\"instituteName\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('instituteName')?.touched &&\r\n educationForm.get('instituteName')?.hasError('required')\">\r\n Institution name is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Country</div>\r\n <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n {{ item.country }}\r\n </ng-template>\r\n <!-- <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-item$=\"item$\" let-index=\"index\">\r\n <span class=\"ng-value-label\">\r\n {{item.country}}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span> \r\n </ng-template> -->\r\n </ng-select>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">State</div>\r\n <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select State\">\r\n\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n\r\n </div>\r\n </div>\r\n <div class=\"row form-row\">\r\n <div class=\"field city\">\r\n <div class=\"head\">City</div>\r\n <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('city')?.touched &&\r\n educationForm.get('city')?.hasError('required')\">\r\n Enter City\r\n </small>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Start Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Start date\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !educationForm.get('startDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"startDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('startDate')?.touched &&\r\n educationForm.get('startDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !educationForm.get('endDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"endDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('endDate')?.touched &&\r\n educationForm.get('endDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"comments\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Supporting Documents</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your diploma, degree certificate, or transcript (PDF, DOC, DOCX)</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Document\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"action\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n class=\"secondary\" (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3><i class=\"bi bi-mortarboard-fill me-2\" style=\"color:#6366f1;\"></i>Education</h3>\r\n <p class=\"preview-subtitle\">Review your educational history below</p>\r\n </div>\r\n\r\n <div class=\"preview-list\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button preview-accordion-btn\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#edu_' + i\"\r\n aria-expanded=\"true\">\r\n <div class=\"preview-acc-left\">\r\n <span class=\"preview-acc-title\">{{ exp.courseName }}</span>\r\n <span class=\"preview-acc-meta\">{{ exp.instituteName }}</span>\r\n </div>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse show\">\r\n <div class=\"preview-body\">\r\n <div class=\"detail-grid\">\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Course Name</span>\r\n <span class=\"preview-value\">{{ exp.courseName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Course Type</span>\r\n <span class=\"preview-value\">{{ exp.courseType || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Institution Name</span>\r\n <span class=\"preview-value\">{{ exp.instituteName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">State</span>\r\n <span class=\"preview-value\">{{ exp.state | stateName }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">City</span>\r\n <span class=\"preview-value\">{{ exp.city || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">From Date</span>\r\n <span class=\"preview-value\">{{ exp.startDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">To Date</span>\r\n <span class=\"preview-value\">{{ exp.endDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n <span class=\"preview-label\">Document</span>\r\n <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n </div>\r\n </div>\r\n <div class=\"detail-cell detail-full\">\r\n <span class=\"preview-label\">Comments</span>\r\n <span class=\"preview-value\">{{ exp.comments || '\u2014' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Educations</button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input[type=text]::placeholder,input[type=email]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input[type=text].is-invalid,input[type=email].is-invalid,input[type=number].is-invalid,input[type=password].is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.action{display:flex;justify-content:space-between;margin:48px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#f8fafc}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.edit-icon{cursor:pointer}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.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}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.row{flex-direction:column;gap:12px}.right-actions{gap:8px;flex-direction:column-reverse}.detail-grid{grid-template-columns:1fr}.actions,.action{gap:8px;display:flex;flex-direction:column-reverse}.add-btn{width:unset}.actions{margin:48px 0 20px}button{width:100%}}\n"] }]
|
|
6449
|
+
args: [{ selector: 'app-education', standalone: false, template: "<div *ngIf=\"!showpreview()\">\r\n <div class=\"education-container\">\r\n <h3><img src=\"/assets/images/icons/mortarboard-fill.svg\" alt=\"education\" class=\"me-2\" width=\"18\" height=\"18\" />Add Education</h3>\r\n <p class=\"hint\">\r\n Please list your educational history. This can cover anything from GED to college degree\r\n </p>\r\n <form [formGroup]=\"educationForm\">\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">General Equivalency Diploma / Degree</div>\r\n <input type=\"text\" placeholder=\"Enter your Diploma here\" formControlName=\"courseName\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('courseName')?.touched &&\r\n educationForm.get('courseName')?.hasError('required')\">\r\n Degree is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">Diploma / Degree Type</div>\r\n <input type=\"text\" placeholder=\"Enter your Diploma / Degree Type\" formControlName=\"courseType\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('courseType')?.touched &&\r\n educationForm.get('courseType')?.hasError('required')\">\r\n Diploma / Degree Type is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Institution Name</div>\r\n <input type=\"text\" placeholder=\"Enter institution name here\" formControlName=\"instituteName\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('instituteName')?.touched &&\r\n educationForm.get('instituteName')?.hasError('required')\">\r\n Institution name is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Country</div>\r\n <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n {{ item.country }}\r\n </ng-template>\r\n <!-- <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-item$=\"item$\" let-index=\"index\">\r\n <span class=\"ng-value-label\">\r\n {{item.country}}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span> \r\n </ng-template> -->\r\n </ng-select>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">State</div>\r\n <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select State\">\r\n\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n\r\n </div>\r\n </div>\r\n <div class=\"row form-row\">\r\n <div class=\"field city\">\r\n <div class=\"head\">City</div>\r\n <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('city')?.touched &&\r\n educationForm.get('city')?.hasError('required')\">\r\n Enter City\r\n </small>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Start Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Start date\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !educationForm.get('startDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"startDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('startDate')?.touched &&\r\n educationForm.get('startDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !educationForm.get('endDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"endDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('endDate')?.touched &&\r\n educationForm.get('endDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"comments\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Supporting Documents</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your diploma, degree certificate, or transcript (PDF, DOC, DOCX)</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Document\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"action\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n class=\"secondary\" (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3><img src=\"/assets/images/icons/mortarboard-fill.svg\" alt=\"education\" class=\"me-2\" width=\"18\" height=\"18\" />Education</h3>\r\n <p class=\"preview-subtitle\">Review your educational history below</p>\r\n </div>\r\n\r\n <div class=\"preview-list\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button preview-accordion-btn\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#edu_' + i\"\r\n aria-expanded=\"true\">\r\n <div class=\"preview-acc-left\">\r\n <span class=\"preview-acc-title\">{{ exp.courseName }}</span>\r\n <span class=\"preview-acc-meta\">{{ exp.instituteName }}</span>\r\n </div>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n\r\n <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse show\">\r\n <div class=\"preview-body\">\r\n <div class=\"detail-grid\">\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Course Name</span>\r\n <span class=\"preview-value\">{{ exp.courseName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Course Type</span>\r\n <span class=\"preview-value\">{{ exp.courseType || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Institution Name</span>\r\n <span class=\"preview-value\">{{ exp.instituteName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">State</span>\r\n <span class=\"preview-value\">{{ exp.state | stateName }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">City</span>\r\n <span class=\"preview-value\">{{ exp.city || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">From Date</span>\r\n <span class=\"preview-value\">{{ exp.startDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">To Date</span>\r\n <span class=\"preview-value\">{{ exp.endDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n <span class=\"preview-label\">Document</span>\r\n <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n </div>\r\n </div>\r\n <div class=\"detail-cell detail-full\">\r\n <span class=\"preview-label\">Comments</span>\r\n <span class=\"preview-value\">{{ exp.comments || '\u2014' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Educations</button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input[type=text]::placeholder,input[type=email]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input[type=text].is-invalid,input[type=email].is-invalid,input[type=number].is-invalid,input[type=password].is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.action{display:flex;justify-content:space-between;margin:48px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#f8fafc}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.edit-icon{cursor:pointer}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.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}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.row{flex-direction:column;gap:12px}.right-actions{gap:8px;flex-direction:column-reverse}.detail-grid{grid-template-columns:1fr}.actions,.action{gap:8px;display:flex;flex-direction:column-reverse}.add-btn{width:unset}.actions{margin:48px 0 20px}button{width:100%}}\n"] }]
|
|
6450
6450
|
}], ctorParameters: () => [{ type: i1$1.RoleContextService }, { type: UserEducationService }, { type: UserService }, { type: CredentialingStore }, { type: EducationStore }, { type: CountryServices }, { type: PostalCodeServices }, { type: i1$1.TokenService }, { type: i8.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
|
|
6451
6451
|
type: Input
|
|
6452
6452
|
}], providerName: [{
|
|
@@ -6879,11 +6879,11 @@ class CertificationComponent {
|
|
|
6879
6879
|
this.fileName = '';
|
|
6880
6880
|
}
|
|
6881
6881
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CertificationComponent, deps: [{ token: i1$1.RoleContextService }, { token: UserDocumentService }, { token: UserService }, { token: CredentialingStore }, { token: CertificationStore }, { token: i1$1.TokenService }, { token: PostalCodeServices }, { token: i8.FormBuilder }, { token: FileService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
|
|
6882
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CertificationComponent, isStandalone: false, selector: "app-certification", inputs: { states: "states", providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n <h3><i class=\"bi bi-patch-check-fill me-2\" style=\"color:#059669;\"></i>Add Certificates</h3>\r\n <p class=\"hint\">\r\n Recommended for your role\r\n </p>\r\n <div class=\"document-container\">\r\n <div class=\"search-part\">\r\n <input type=\"text\" placeholder=\"Search / Add Certificate type here...\" [formControl]=\"searchControl\" />\r\n <button class=\"btn\" type=\"button\" (click)=\"addManualDocumentType()\" tooltip=\"Add manually\">\r\n <img src=\"/assets/images/icons/plus.svg\" alt=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n </button>\r\n </div>\r\n <div *ngIf=\"manualTypeError\" class=\"invalid-feedback is-invalid d-block mb-2\">{{ manualTypeError }}</div>\r\n\r\n <div class=\"grid\">\r\n <div *ngFor=\"let item of documentTypes\">\r\n <label class=\"checkbox-row\">\r\n <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n <span class=\"title\">{{ item.type }}</span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <form [formGroup]=\"certificateForm\">\r\n <div class=\"row\" style=\"margin-top: 20px;\">\r\n <div class=\"field\">\r\n <div class=\"head\">Certificate Number</div>\r\n <input type=\"text\" placeholder=\"Enter your Certificate Number here\" formControlName=\"number\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n certificateForm.get('number')?.hasError('required')\">\r\n Certificate number is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">Certificate Issued By</div>\r\n <input type=\"text\" placeholder=\"Enter Certificate Issued By here\" formControlName=\"issuedBy\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n certificateForm.get('issuedBy')?.hasError('required')\">\r\n Certificate issued by is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Issued State</div>\r\n <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select Issued State here\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Issued Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n certificateForm.get('issueDate')?.hasError('required')\">\r\n Issued date is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Expiration Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n certificateForm.get('expiryDate')?.hasError('required')\">\r\n Expiry date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Certificate Document</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your certificate or proof of certification (PDF, DOC, DOCX)</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Document\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n\r\n </div>\r\n <div class=\"action\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3><i class=\"bi bi-patch-check-fill me-2\" style=\"color:#059669;\"></i>Certifications</h3>\r\n <p class=\"preview-subtitle\">Review your certifications below</p>\r\n </div>\r\n\r\n <div class=\"preview-list\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button preview-accordion-btn\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#cert_' + i\"\r\n aria-expanded=\"true\">\r\n <div class=\"preview-acc-left\">\r\n <span class=\"preview-acc-title\">{{ exp.documentTypeName }}</span>\r\n <span class=\"preview-acc-meta\">Issued by {{ exp.issuedBy }}</span>\r\n </div>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n\r\n <div [id]=\"'cert_' + i\" class=\"accordion-collapse collapse show\">\r\n <div class=\"preview-body\">\r\n <div class=\"detail-grid\">\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Certificate Name</span>\r\n <span class=\"preview-value\">{{ exp.documentTypeName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Certificate Number</span>\r\n <span class=\"preview-value\">{{ exp.number || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued By</span>\r\n <span class=\"preview-value\">{{ exp.issuedBy || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued State</span>\r\n <span class=\"preview-value\">{{ exp.issuedState | stateName }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued Date</span>\r\n <span class=\"preview-value\">{{ exp.issueDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Expiry Date</span>\r\n <span class=\"preview-value\">{{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n <span class=\"preview-label\">Document</span>\r\n <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n </div>\r\n </div>\r\n <div class=\"detail-cell detail-full\">\r\n <span class=\"preview-label\">Description</span>\r\n <span class=\"preview-value\">{{ exp.notes || '\u2014' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Certifications</button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input[type=text]::placeholder,input[type=email]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input[type=text].is-invalid,input[type=email].is-invalid,input[type=number].is-invalid,input[type=password].is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.action{display:flex;justify-content:space-between;margin:48px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.document-container{max-width:1100px;margin:auto}.search-part{width:100%;max-width:400px;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;height:42px;background:#f9fafb;transition:all .2s ease}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none;height:100%;padding:0}.search-part input::placeholder{color:#94a3b8}.search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;min-width:unset;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:all .2s ease}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.search-input{width:100%;max-width:400px;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease;box-sizing:border-box;outline:none;margin-bottom:16px}.search-input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.search-input::placeholder{color:#94a3b8}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px;accent-color:#4077AD}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 12px;transition:all .2s ease;width:100%}.checkbox-row:hover{border-color:#4077ad;background:#ebf2f9}.checkbox-row input{margin:0;accent-color:#4077AD}.content .title{font-weight:600;font-size:14px;color:#1e293b}.title{font-size:14px;font-weight:600;color:#1e293b}.content .desc{font-size:12px;color:#94a3b8;margin-top:4px}.save-btn{height:42px;margin-top:20px;padding:10px 22px;border-radius:8px;border:none;background:#4077ad;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#f8fafc}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.edit-icon{cursor:pointer}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.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}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.hint{margin-bottom:5px}.add-btn{width:unset}.date-time-filter{font-size:14px}.search-input{margin-bottom:0;max-width:100%}.right-actions{gap:8px}.detail-grid{grid-template-columns:1fr}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.actions{flex-direction:column-reverse;gap:8px;margin:48px 0 20px}.right-actions{gap:8px;flex-direction:column-reverse}.action{flex-direction:column-reverse;gap:8px}button{width:100%}}\n"], dependencies: [{ kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "directive", type: i14.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
|
|
6882
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CertificationComponent, isStandalone: false, selector: "app-certification", inputs: { states: "states", providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n <h3><img src=\"/assets/images/icons/patch-check-fill.svg\" alt=\"certification\" class=\"me-2\" width=\"18\" height=\"18\" />Add Certificates</h3>\r\n <p class=\"hint\">\r\n Recommended for your role\r\n </p>\r\n <div class=\"document-container\">\r\n <div class=\"search-part\">\r\n <input type=\"text\" placeholder=\"Search / Add Certificate type here...\" [formControl]=\"searchControl\" />\r\n <button class=\"btn\" type=\"button\" (click)=\"addManualDocumentType()\" tooltip=\"Add manually\">\r\n <img src=\"/assets/images/icons/plus.svg\" alt=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n </button>\r\n </div>\r\n <div *ngIf=\"manualTypeError\" class=\"invalid-feedback is-invalid d-block mb-2\">{{ manualTypeError }}</div>\r\n\r\n <div class=\"grid\">\r\n <div *ngFor=\"let item of documentTypes\">\r\n <label class=\"checkbox-row\">\r\n <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n <span class=\"title\">{{ item.type }}</span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <form [formGroup]=\"certificateForm\">\r\n <div class=\"row\" style=\"margin-top: 20px;\">\r\n <div class=\"field\">\r\n <div class=\"head\">Certificate Number</div>\r\n <input type=\"text\" placeholder=\"Enter your Certificate Number here\" formControlName=\"number\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n certificateForm.get('number')?.hasError('required')\">\r\n Certificate number is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">Certificate Issued By</div>\r\n <input type=\"text\" placeholder=\"Enter Certificate Issued By here\" formControlName=\"issuedBy\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n certificateForm.get('issuedBy')?.hasError('required')\">\r\n Certificate issued by is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Issued State</div>\r\n <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select Issued State here\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Issued Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n certificateForm.get('issueDate')?.hasError('required')\">\r\n Issued date is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Expiration Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n certificateForm.get('expiryDate')?.hasError('required')\">\r\n Expiry date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Certificate Document</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your certificate or proof of certification (PDF, DOC, DOCX)</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Document\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n\r\n </div>\r\n <div class=\"action\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3><img src=\"/assets/images/icons/patch-check-fill.svg\" alt=\"certification\" class=\"me-2\" width=\"18\" height=\"18\" />Certifications</h3>\r\n <p class=\"preview-subtitle\">Review your certifications below</p>\r\n </div>\r\n\r\n <div class=\"preview-list\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button preview-accordion-btn\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#cert_' + i\"\r\n aria-expanded=\"true\">\r\n <div class=\"preview-acc-left\">\r\n <span class=\"preview-acc-title\">{{ exp.documentTypeName }}</span>\r\n <span class=\"preview-acc-meta\">Issued by {{ exp.issuedBy }}</span>\r\n </div>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n\r\n <div [id]=\"'cert_' + i\" class=\"accordion-collapse collapse show\">\r\n <div class=\"preview-body\">\r\n <div class=\"detail-grid\">\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Certificate Name</span>\r\n <span class=\"preview-value\">{{ exp.documentTypeName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Certificate Number</span>\r\n <span class=\"preview-value\">{{ exp.number || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued By</span>\r\n <span class=\"preview-value\">{{ exp.issuedBy || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued State</span>\r\n <span class=\"preview-value\">{{ exp.issuedState | stateName }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued Date</span>\r\n <span class=\"preview-value\">{{ exp.issueDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Expiry Date</span>\r\n <span class=\"preview-value\">{{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n <span class=\"preview-label\">Document</span>\r\n <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n </div>\r\n </div>\r\n <div class=\"detail-cell detail-full\">\r\n <span class=\"preview-label\">Description</span>\r\n <span class=\"preview-value\">{{ exp.notes || '\u2014' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Certifications</button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input[type=text]::placeholder,input[type=email]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input[type=text].is-invalid,input[type=email].is-invalid,input[type=number].is-invalid,input[type=password].is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.action{display:flex;justify-content:space-between;margin:48px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.document-container{max-width:1100px;margin:auto}.search-part{width:100%;max-width:400px;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;height:42px;background:#f9fafb;transition:all .2s ease}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none;height:100%;padding:0}.search-part input::placeholder{color:#94a3b8}.search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;min-width:unset;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:all .2s ease}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.search-input{width:100%;max-width:400px;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease;box-sizing:border-box;outline:none;margin-bottom:16px}.search-input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.search-input::placeholder{color:#94a3b8}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px;accent-color:#4077AD}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 12px;transition:all .2s ease;width:100%}.checkbox-row:hover{border-color:#4077ad;background:#ebf2f9}.checkbox-row input{margin:0;accent-color:#4077AD}.content .title{font-weight:600;font-size:14px;color:#1e293b}.title{font-size:14px;font-weight:600;color:#1e293b}.content .desc{font-size:12px;color:#94a3b8;margin-top:4px}.save-btn{height:42px;margin-top:20px;padding:10px 22px;border-radius:8px;border:none;background:#4077ad;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#f8fafc}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.edit-icon{cursor:pointer}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.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}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.hint{margin-bottom:5px}.add-btn{width:unset}.date-time-filter{font-size:14px}.search-input{margin-bottom:0;max-width:100%}.right-actions{gap:8px}.detail-grid{grid-template-columns:1fr}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.actions{flex-direction:column-reverse;gap:8px;margin:48px 0 20px}.right-actions{gap:8px;flex-direction:column-reverse}.action{flex-direction:column-reverse;gap:8px}button{width:100%}}\n"], dependencies: [{ kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "directive", type: i14.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
|
|
6883
6883
|
}
|
|
6884
6884
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CertificationComponent, decorators: [{
|
|
6885
6885
|
type: Component,
|
|
6886
|
-
args: [{ selector: 'app-certification', standalone: false, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n <h3><i class=\"bi bi-patch-check-fill me-2\" style=\"color:#059669;\"></i>Add Certificates</h3>\r\n <p class=\"hint\">\r\n Recommended for your role\r\n </p>\r\n <div class=\"document-container\">\r\n <div class=\"search-part\">\r\n <input type=\"text\" placeholder=\"Search / Add Certificate type here...\" [formControl]=\"searchControl\" />\r\n <button class=\"btn\" type=\"button\" (click)=\"addManualDocumentType()\" tooltip=\"Add manually\">\r\n <img src=\"/assets/images/icons/plus.svg\" alt=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n </button>\r\n </div>\r\n <div *ngIf=\"manualTypeError\" class=\"invalid-feedback is-invalid d-block mb-2\">{{ manualTypeError }}</div>\r\n\r\n <div class=\"grid\">\r\n <div *ngFor=\"let item of documentTypes\">\r\n <label class=\"checkbox-row\">\r\n <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n <span class=\"title\">{{ item.type }}</span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <form [formGroup]=\"certificateForm\">\r\n <div class=\"row\" style=\"margin-top: 20px;\">\r\n <div class=\"field\">\r\n <div class=\"head\">Certificate Number</div>\r\n <input type=\"text\" placeholder=\"Enter your Certificate Number here\" formControlName=\"number\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n certificateForm.get('number')?.hasError('required')\">\r\n Certificate number is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">Certificate Issued By</div>\r\n <input type=\"text\" placeholder=\"Enter Certificate Issued By here\" formControlName=\"issuedBy\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n certificateForm.get('issuedBy')?.hasError('required')\">\r\n Certificate issued by is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Issued State</div>\r\n <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select Issued State here\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Issued Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n certificateForm.get('issueDate')?.hasError('required')\">\r\n Issued date is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Expiration Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n certificateForm.get('expiryDate')?.hasError('required')\">\r\n Expiry date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Certificate Document</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your certificate or proof of certification (PDF, DOC, DOCX)</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Document\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n\r\n </div>\r\n <div class=\"action\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3><i class=\"bi bi-patch-check-fill me-2\" style=\"color:#059669;\"></i>Certifications</h3>\r\n <p class=\"preview-subtitle\">Review your certifications below</p>\r\n </div>\r\n\r\n <div class=\"preview-list\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button preview-accordion-btn\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#cert_' + i\"\r\n aria-expanded=\"true\">\r\n <div class=\"preview-acc-left\">\r\n <span class=\"preview-acc-title\">{{ exp.documentTypeName }}</span>\r\n <span class=\"preview-acc-meta\">Issued by {{ exp.issuedBy }}</span>\r\n </div>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n\r\n <div [id]=\"'cert_' + i\" class=\"accordion-collapse collapse show\">\r\n <div class=\"preview-body\">\r\n <div class=\"detail-grid\">\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Certificate Name</span>\r\n <span class=\"preview-value\">{{ exp.documentTypeName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Certificate Number</span>\r\n <span class=\"preview-value\">{{ exp.number || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued By</span>\r\n <span class=\"preview-value\">{{ exp.issuedBy || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued State</span>\r\n <span class=\"preview-value\">{{ exp.issuedState | stateName }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued Date</span>\r\n <span class=\"preview-value\">{{ exp.issueDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Expiry Date</span>\r\n <span class=\"preview-value\">{{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n <span class=\"preview-label\">Document</span>\r\n <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n </div>\r\n </div>\r\n <div class=\"detail-cell detail-full\">\r\n <span class=\"preview-label\">Description</span>\r\n <span class=\"preview-value\">{{ exp.notes || '\u2014' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Certifications</button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input[type=text]::placeholder,input[type=email]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input[type=text].is-invalid,input[type=email].is-invalid,input[type=number].is-invalid,input[type=password].is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.action{display:flex;justify-content:space-between;margin:48px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.document-container{max-width:1100px;margin:auto}.search-part{width:100%;max-width:400px;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;height:42px;background:#f9fafb;transition:all .2s ease}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none;height:100%;padding:0}.search-part input::placeholder{color:#94a3b8}.search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;min-width:unset;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:all .2s ease}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.search-input{width:100%;max-width:400px;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease;box-sizing:border-box;outline:none;margin-bottom:16px}.search-input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.search-input::placeholder{color:#94a3b8}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px;accent-color:#4077AD}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 12px;transition:all .2s ease;width:100%}.checkbox-row:hover{border-color:#4077ad;background:#ebf2f9}.checkbox-row input{margin:0;accent-color:#4077AD}.content .title{font-weight:600;font-size:14px;color:#1e293b}.title{font-size:14px;font-weight:600;color:#1e293b}.content .desc{font-size:12px;color:#94a3b8;margin-top:4px}.save-btn{height:42px;margin-top:20px;padding:10px 22px;border-radius:8px;border:none;background:#4077ad;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#f8fafc}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.edit-icon{cursor:pointer}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.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}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.hint{margin-bottom:5px}.add-btn{width:unset}.date-time-filter{font-size:14px}.search-input{margin-bottom:0;max-width:100%}.right-actions{gap:8px}.detail-grid{grid-template-columns:1fr}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.actions{flex-direction:column-reverse;gap:8px;margin:48px 0 20px}.right-actions{gap:8px;flex-direction:column-reverse}.action{flex-direction:column-reverse;gap:8px}button{width:100%}}\n"] }]
|
|
6886
|
+
args: [{ selector: 'app-certification', standalone: false, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n <h3><img src=\"/assets/images/icons/patch-check-fill.svg\" alt=\"certification\" class=\"me-2\" width=\"18\" height=\"18\" />Add Certificates</h3>\r\n <p class=\"hint\">\r\n Recommended for your role\r\n </p>\r\n <div class=\"document-container\">\r\n <div class=\"search-part\">\r\n <input type=\"text\" placeholder=\"Search / Add Certificate type here...\" [formControl]=\"searchControl\" />\r\n <button class=\"btn\" type=\"button\" (click)=\"addManualDocumentType()\" tooltip=\"Add manually\">\r\n <img src=\"/assets/images/icons/plus.svg\" alt=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n </button>\r\n </div>\r\n <div *ngIf=\"manualTypeError\" class=\"invalid-feedback is-invalid d-block mb-2\">{{ manualTypeError }}</div>\r\n\r\n <div class=\"grid\">\r\n <div *ngFor=\"let item of documentTypes\">\r\n <label class=\"checkbox-row\">\r\n <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n <span class=\"title\">{{ item.type }}</span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <form [formGroup]=\"certificateForm\">\r\n <div class=\"row\" style=\"margin-top: 20px;\">\r\n <div class=\"field\">\r\n <div class=\"head\">Certificate Number</div>\r\n <input type=\"text\" placeholder=\"Enter your Certificate Number here\" formControlName=\"number\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n certificateForm.get('number')?.hasError('required')\">\r\n Certificate number is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">Certificate Issued By</div>\r\n <input type=\"text\" placeholder=\"Enter Certificate Issued By here\" formControlName=\"issuedBy\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n certificateForm.get('issuedBy')?.hasError('required')\">\r\n Certificate issued by is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Issued State</div>\r\n <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select Issued State here\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Issued Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n certificateForm.get('issueDate')?.hasError('required')\">\r\n Issued date is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Expiration Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n certificateForm.get('expiryDate')?.hasError('required')\">\r\n Expiry date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Certificate Document</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your certificate or proof of certification (PDF, DOC, DOCX)</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Document\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n\r\n </div>\r\n <div class=\"action\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3><img src=\"/assets/images/icons/patch-check-fill.svg\" alt=\"certification\" class=\"me-2\" width=\"18\" height=\"18\" />Certifications</h3>\r\n <p class=\"preview-subtitle\">Review your certifications below</p>\r\n </div>\r\n\r\n <div class=\"preview-list\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button preview-accordion-btn\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#cert_' + i\"\r\n aria-expanded=\"true\">\r\n <div class=\"preview-acc-left\">\r\n <span class=\"preview-acc-title\">{{ exp.documentTypeName }}</span>\r\n <span class=\"preview-acc-meta\">Issued by {{ exp.issuedBy }}</span>\r\n </div>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n\r\n <div [id]=\"'cert_' + i\" class=\"accordion-collapse collapse show\">\r\n <div class=\"preview-body\">\r\n <div class=\"detail-grid\">\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Certificate Name</span>\r\n <span class=\"preview-value\">{{ exp.documentTypeName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Certificate Number</span>\r\n <span class=\"preview-value\">{{ exp.number || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued By</span>\r\n <span class=\"preview-value\">{{ exp.issuedBy || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued State</span>\r\n <span class=\"preview-value\">{{ exp.issuedState | stateName }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued Date</span>\r\n <span class=\"preview-value\">{{ exp.issueDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Expiry Date</span>\r\n <span class=\"preview-value\">{{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n <span class=\"preview-label\">Document</span>\r\n <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n </div>\r\n </div>\r\n <div class=\"detail-cell detail-full\">\r\n <span class=\"preview-label\">Description</span>\r\n <span class=\"preview-value\">{{ exp.notes || '\u2014' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Certifications</button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input[type=text]::placeholder,input[type=email]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input[type=text].is-invalid,input[type=email].is-invalid,input[type=number].is-invalid,input[type=password].is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.action{display:flex;justify-content:space-between;margin:48px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.document-container{max-width:1100px;margin:auto}.search-part{width:100%;max-width:400px;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;height:42px;background:#f9fafb;transition:all .2s ease}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none;height:100%;padding:0}.search-part input::placeholder{color:#94a3b8}.search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;min-width:unset;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:all .2s ease}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.search-input{width:100%;max-width:400px;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease;box-sizing:border-box;outline:none;margin-bottom:16px}.search-input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.search-input::placeholder{color:#94a3b8}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px;accent-color:#4077AD}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 12px;transition:all .2s ease;width:100%}.checkbox-row:hover{border-color:#4077ad;background:#ebf2f9}.checkbox-row input{margin:0;accent-color:#4077AD}.content .title{font-weight:600;font-size:14px;color:#1e293b}.title{font-size:14px;font-weight:600;color:#1e293b}.content .desc{font-size:12px;color:#94a3b8;margin-top:4px}.save-btn{height:42px;margin-top:20px;padding:10px 22px;border-radius:8px;border:none;background:#4077ad;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#f8fafc}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.edit-icon{cursor:pointer}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.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}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.hint{margin-bottom:5px}.add-btn{width:unset}.date-time-filter{font-size:14px}.search-input{margin-bottom:0;max-width:100%}.right-actions{gap:8px}.detail-grid{grid-template-columns:1fr}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.actions{flex-direction:column-reverse;gap:8px;margin:48px 0 20px}.right-actions{gap:8px;flex-direction:column-reverse}.action{flex-direction:column-reverse;gap:8px}button{width:100%}}\n"] }]
|
|
6887
6887
|
}], ctorParameters: () => [{ type: i1$1.RoleContextService }, { type: UserDocumentService }, { type: UserService }, { type: CredentialingStore }, { type: CertificationStore }, { type: i1$1.TokenService }, { type: PostalCodeServices }, { type: i8.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { states: [{
|
|
6888
6888
|
type: Input
|
|
6889
6889
|
}], providerId: [{
|
|
@@ -7643,7 +7643,7 @@ class SkillsComponent {
|
|
|
7643
7643
|
this.userSkillsSub?.unsubscribe();
|
|
7644
7644
|
}
|
|
7645
7645
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SkillsComponent, deps: [{ token: SkillSetService }, { token: UserSkillSetService }, { token: UserService }, { token: i8.UntypedFormBuilder }, { token: UtilsService }, { token: i1$1.RoleContextService }, { token: CredentialingStore }, { token: i1$1.TokenService }], target: i0.ɵɵFactoryTarget.Component });
|
|
7646
|
-
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\"><i class=\"bi bi-stars me-2\" style=\"color:#16a34a;\"></i>Skills Preview</h5>\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)\">Cancel</button>\r\n <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserSkillset()\" [disabled]=\"showLoader\">Update</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\" class=\"preview-detail-grid\">\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Service Provider</span>\r\n <span class=\"preview-value\">{{ skill.providerName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Skill</span>\r\n <span class=\"preview-value\">{{ skill.skillSetName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Self Ability Rating</span>\r\n <span class=\"preview-value stars-readonly\">\r\n <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n </span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Years of Experience</span>\r\n <span class=\"preview-value\">{{ skill?.year || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Visible</span>\r\n <span class=\"preview-value\">\r\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"skill.profileVisibility\" disabled>\r\n </span>\r\n </div>\r\n <div class=\"preview-cell preview-full\">\r\n <span class=\"preview-label\">Description</span>\r\n <span class=\"preview-value\">{{ skill.notes || '\u2014' }}</span>\r\n </div>\r\n </div>\r\n <!-- EDIT MODE -->\r\n <div *ngIf=\"isEditMode && model?.skillSetId === skill.skillSetId\" [formGroup]=\"tab.at(0)\" class=\"preview-edit-grid\">\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Service Provider</span>\r\n <span class=\"preview-value\">{{ skill.providerName }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Skill</span>\r\n <span class=\"preview-value\">{{ skill.skillSetName }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Self Ability Rating</span>\r\n <ngx-stars *ngIf=\"tab.at(0)?.get('starRating')?.value !== null\"\r\n [key]=\"tab.at(0).get('starRating')?.value\"\r\n [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\"\r\n [maxStars]=\"5\"\r\n (ratingOutput)=\"onEditRating($event)\">\r\n </ngx-stars>\r\n </div>\r\n <div class=\"preview-cell\">\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\"></ng-select>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <label class=\"label\">Visible</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n <div class=\"preview-cell preview-full\">\r\n <label class=\"label\">Description</label>\r\n <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\" placeholder=\"Enter notes\"></textarea>\r\n </div>\r\n </div>\r\n </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 <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 Rating is 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 <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 required</div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1 text-center\">\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-2 mt-1\" *ngIf=\"tab.controls.length>1 && index == copyOptionIndex\">\r\n <label class=\"label mb-2\">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>\r\n </div>\r\n</div>\r\n\r\n<!-- Footer buttons -->\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\r\n </button>\r\n </div>\r\n</div>\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\r\n </button>\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.skills-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}.skills-container.last{min-height:unset}.title{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.subtitle{font-size:14px;color:#64748b;margin-bottom:24px}.content-part{background:#fff}.content-part p{font-size:13px;color:#64748b}.content-part div{font-size:13px}.content-part .card{margin-top:15px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.content-part .card .row{margin-top:-15px}.content-part .card .sub-section{padding:0 10px}.content-part .card .sub-section .title{font-size:15px;font-weight:500;color:#1e293b}.content-part .card .sub-section .info-title{font-size:12px;font-weight:400;color:#64748b;margin-left:5px}.content-part .card .sub-section .content{font-size:13px;color:#64748b}.content-part .card .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px;color:#64748b}.content-part .card .sub-section .subsection input{width:30%}.content-part .card .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#1e293b;margin-top:15px}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;height:42px;background:#f9fafb;transition:all .2s ease}.content-part .search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.content-part .search-part input::placeholder{color:#94a3b8}.content-part .search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;display:flex;align-items:center;justify-content:center;margin-right:0;border:none;cursor:pointer;transition:all .2s ease}.content-part .search-part .btn:hover{background:#2d5a8a}.content-part .search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.content-part textarea{width:100%;height:100px;min-height:96px;background:#f9fafb;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-size:15px;color:#1e293b;resize:vertical;outline:none;transition:all .2s ease}.content-part textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .skills-section{margin-left:5px}.content-part .skills-section .category-title{margin-bottom:8px;font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-left:5px}.content-part .skills-section .text-title{font-size:14px;margin-left:3px;color:#1e293b;display:contents}.content-part .skills-section input[type=checkbox]{border:1.5px solid #e2e8f0!important;height:14px!important;width:15px!important;border-radius:6px!important;margin:2px;accent-color:#4077AD}.content-part .skills-section input[type=checkbox]:checked{background-color:#4077ad!important;border:1.5px solid #4077AD!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:#4077ad;width:15px;display:flex;justify-content:center;border:1.5px solid #4077AD;height:14px;align-items:center;border-radius:6px}.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:#22c55e!important;border:1px solid #22c55e!important}::ng-deep .ng-select .ng-select-container{min-height:42px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:14px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .ng-select.ng-select-focused .ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f}.label{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;padding-bottom:6px;display:block;margin-bottom:2px}.form-control{color:#1e293b;background:#f9fafb!important;min-height:36px;font-size:15px;height:42px;border:1.5px solid #e2e8f0;border-radius:8px;transition:all .2s ease}.form-control:focus{border-color:#4077ad;background:#fff!important;box-shadow:0 0 0 3px #4077ad1f!important}.form-control:focus{border:1.5px solid #4077AD;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .nav-link{color:#64748b!important}::ng-deep .nav-link.active{color:#4077ad!important;font-weight:600}.loader{filter:blur(3px);height:40px}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.close-popup{position:absolute;right:7px;top:4px;width:25px;cursor:pointer;opacity:.6;transition:all .2s ease}.close-popup:hover{opacity:1}.back-btn,.skip-btn{height:42px;min-width:130px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover,.skip-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.back-btn.edit,.skip-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-left:15px}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.save-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.create-btn{height:42px;min-width:9rem;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.create-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.create-btn:active{transform:translateY(0)}.continue-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.continue-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.continue-btn:active{transform:translateY(0)}.continue-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.continue-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn.add{background:#2d5a8a}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:64px}.skill-preview-wrapper{margin-bottom:24px}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;margin-bottom:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease}.skill-preview-wrapper{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff;transition:box-shadow .25s ease}.skill-preview-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;font-size:15px;font-weight:700;color:#1e293b;border-bottom:1px solid transparent;cursor:pointer}.skill-preview-header.open{background:#ebf2f9;color:#2d5a8a;border-bottom:1px solid #e2e8f0}.skill-preview-body{padding:0;background:#fff}.skill-preview-body>div{padding:16px 20px;border-bottom:1px solid #e2e8f0}.skill-preview-body>div:last-child{border-bottom:none}.skill-preview-body label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.skill-preview-body p{margin:0;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5}h5.title{font-size:22px;font-weight:700;color:#1e293b!important;margin-bottom:4px}.preview-detail-grid,.preview-edit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.preview-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0;border-right:1px solid #e2e8f0}.preview-cell:nth-child(3n){border-right:none}.preview-full{grid-column:1/-1;border-right:none;border-bottom:none}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.stars-readonly{pointer-events:none;display:block}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.rotate{transform:rotate(-180deg)}@media screen and (max-width: 767px){.skills-container{padding:16px}.title{font-size:18px}.form-control,textarea{font-size:16px}.footer-actions{flex-direction:column-reverse;gap:8px;margin-top:48px}.back-btn,.skip-btn{width:100%}.continue-btn{padding:10px 22px;width:100%}.mb-res{display:flex;flex-direction:column-reverse;gap:8px;width:100%}.preview-detail-grid,.preview-edit-grid{grid-template-columns:1fr}.preview-cell{border-right:none}}\n"], dependencies: [{ kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "component", type: NgxStarsComponent, selector: "ngx-stars", inputs: ["maxStars", "initialStars", "readonly", "size", "color", "animation", "animationSpeed", "customPadding", "wholeStars", "customStarIcons"], outputs: ["ratingOutput"] }, { kind: "directive", type: i14.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { 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$1.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i14$1.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }], animations: [
|
|
7646
|
+
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\"><img src=\"/assets/images/icons/stars.svg\" alt=\"skills\" class=\"me-2\" width=\"18\" height=\"18\" />Skills Preview</h5>\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)\">Cancel</button>\r\n <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserSkillset()\" [disabled]=\"showLoader\">Update</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\" class=\"preview-detail-grid\">\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Service Provider</span>\r\n <span class=\"preview-value\">{{ skill.providerName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Skill</span>\r\n <span class=\"preview-value\">{{ skill.skillSetName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Self Ability Rating</span>\r\n <span class=\"preview-value stars-readonly\">\r\n <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n </span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Years of Experience</span>\r\n <span class=\"preview-value\">{{ skill?.year || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Visible</span>\r\n <span class=\"preview-value\">\r\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"skill.profileVisibility\" disabled>\r\n </span>\r\n </div>\r\n <div class=\"preview-cell preview-full\">\r\n <span class=\"preview-label\">Description</span>\r\n <span class=\"preview-value\">{{ skill.notes || '\u2014' }}</span>\r\n </div>\r\n </div>\r\n <!-- EDIT MODE -->\r\n <div *ngIf=\"isEditMode && model?.skillSetId === skill.skillSetId\" [formGroup]=\"tab.at(0)\" class=\"preview-edit-grid\">\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Service Provider</span>\r\n <span class=\"preview-value\">{{ skill.providerName }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Skill</span>\r\n <span class=\"preview-value\">{{ skill.skillSetName }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Self Ability Rating</span>\r\n <ngx-stars *ngIf=\"tab.at(0)?.get('starRating')?.value !== null\"\r\n [key]=\"tab.at(0).get('starRating')?.value\"\r\n [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\"\r\n [maxStars]=\"5\"\r\n (ratingOutput)=\"onEditRating($event)\">\r\n </ngx-stars>\r\n </div>\r\n <div class=\"preview-cell\">\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\"></ng-select>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <label class=\"label\">Visible</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n <div class=\"preview-cell preview-full\">\r\n <label class=\"label\">Description</label>\r\n <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\" placeholder=\"Enter notes\"></textarea>\r\n </div>\r\n </div>\r\n </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 <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 Rating is 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 <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 required</div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1 text-center\">\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-2 mt-1\" *ngIf=\"tab.controls.length>1 && index == copyOptionIndex\">\r\n <label class=\"label mb-2\">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>\r\n </div>\r\n</div>\r\n\r\n<!-- Footer buttons -->\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\r\n </button>\r\n </div>\r\n</div>\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\r\n </button>\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.skills-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}.skills-container.last{min-height:unset}.title{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.subtitle{font-size:14px;color:#64748b;margin-bottom:24px}.content-part{background:#fff}.content-part p{font-size:13px;color:#64748b}.content-part div{font-size:13px}.content-part .card{margin-top:15px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.content-part .card .row{margin-top:-15px}.content-part .card .sub-section{padding:0 10px}.content-part .card .sub-section .title{font-size:15px;font-weight:500;color:#1e293b}.content-part .card .sub-section .info-title{font-size:12px;font-weight:400;color:#64748b;margin-left:5px}.content-part .card .sub-section .content{font-size:13px;color:#64748b}.content-part .card .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px;color:#64748b}.content-part .card .sub-section .subsection input{width:30%}.content-part .card .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#1e293b;margin-top:15px}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;height:42px;background:#f9fafb;transition:all .2s ease}.content-part .search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.content-part .search-part input::placeholder{color:#94a3b8}.content-part .search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;display:flex;align-items:center;justify-content:center;margin-right:0;border:none;cursor:pointer;transition:all .2s ease}.content-part .search-part .btn:hover{background:#2d5a8a}.content-part .search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.content-part textarea{width:100%;height:100px;min-height:96px;background:#f9fafb;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-size:15px;color:#1e293b;resize:vertical;outline:none;transition:all .2s ease}.content-part textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .skills-section{margin-left:5px}.content-part .skills-section .category-title{margin-bottom:8px;font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-left:5px}.content-part .skills-section .text-title{font-size:14px;margin-left:3px;color:#1e293b;display:contents}.content-part .skills-section input[type=checkbox]{border:1.5px solid #e2e8f0!important;height:14px!important;width:15px!important;border-radius:6px!important;margin:2px;accent-color:#4077AD}.content-part .skills-section input[type=checkbox]:checked{background-color:#4077ad!important;border:1.5px solid #4077AD!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:#4077ad;width:15px;display:flex;justify-content:center;border:1.5px solid #4077AD;height:14px;align-items:center;border-radius:6px}.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:#22c55e!important;border:1px solid #22c55e!important}::ng-deep .ng-select .ng-select-container{min-height:42px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:14px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .ng-select.ng-select-focused .ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f}.label{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;padding-bottom:6px;display:block;margin-bottom:2px}.form-control{color:#1e293b;background:#f9fafb!important;min-height:36px;font-size:15px;height:42px;border:1.5px solid #e2e8f0;border-radius:8px;transition:all .2s ease}.form-control:focus{border-color:#4077ad;background:#fff!important;box-shadow:0 0 0 3px #4077ad1f!important}.form-control:focus{border:1.5px solid #4077AD;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .nav-link{color:#64748b!important}::ng-deep .nav-link.active{color:#4077ad!important;font-weight:600}.loader{filter:blur(3px);height:40px}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.close-popup{position:absolute;right:7px;top:4px;width:25px;cursor:pointer;opacity:.6;transition:all .2s ease}.close-popup:hover{opacity:1}.back-btn,.skip-btn{height:42px;min-width:130px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover,.skip-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.back-btn.edit,.skip-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-left:15px}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.save-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.create-btn{height:42px;min-width:9rem;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.create-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.create-btn:active{transform:translateY(0)}.continue-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.continue-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.continue-btn:active{transform:translateY(0)}.continue-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.continue-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn.add{background:#2d5a8a}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:64px}.skill-preview-wrapper{margin-bottom:24px}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;margin-bottom:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease}.skill-preview-wrapper{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff;transition:box-shadow .25s ease}.skill-preview-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;font-size:15px;font-weight:700;color:#1e293b;border-bottom:1px solid transparent;cursor:pointer}.skill-preview-header.open{background:#ebf2f9;color:#2d5a8a;border-bottom:1px solid #e2e8f0}.skill-preview-body{padding:0;background:#fff}.skill-preview-body>div{padding:16px 20px;border-bottom:1px solid #e2e8f0}.skill-preview-body>div:last-child{border-bottom:none}.skill-preview-body label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.skill-preview-body p{margin:0;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5}h5.title{font-size:22px;font-weight:700;color:#1e293b!important;margin-bottom:4px}.preview-detail-grid,.preview-edit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.preview-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0;border-right:1px solid #e2e8f0}.preview-cell:nth-child(3n){border-right:none}.preview-full{grid-column:1/-1;border-right:none;border-bottom:none}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.stars-readonly{pointer-events:none;display:block}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.rotate{transform:rotate(-180deg)}@media screen and (max-width: 767px){.skills-container{padding:16px}.title{font-size:18px}.form-control,textarea{font-size:16px}.footer-actions{flex-direction:column-reverse;gap:8px;margin-top:48px}.back-btn,.skip-btn{width:100%}.continue-btn{padding:10px 22px;width:100%}.mb-res{display:flex;flex-direction:column-reverse;gap:8px;width:100%}.preview-detail-grid,.preview-edit-grid{grid-template-columns:1fr}.preview-cell{border-right:none}}\n"], dependencies: [{ kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "component", type: NgxStarsComponent, selector: "ngx-stars", inputs: ["maxStars", "initialStars", "readonly", "size", "color", "animation", "animationSpeed", "customPadding", "wholeStars", "customStarIcons"], outputs: ["ratingOutput"] }, { kind: "directive", type: i14.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { 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$1.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i14$1.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }], animations: [
|
|
7647
7647
|
trigger('expandCollapse', [
|
|
7648
7648
|
state('open', style({
|
|
7649
7649
|
height: '*',
|
|
@@ -7681,7 +7681,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
7681
7681
|
})),
|
|
7682
7682
|
transition('open <=> closed', animate('300ms ease'))
|
|
7683
7683
|
])
|
|
7684
|
-
], template: "<!-- SKILL PREVIEW LIST -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'preview'\">\r\n <h5 class=\"title text-secondary\"><i class=\"bi bi-stars me-2\" style=\"color:#16a34a;\"></i>Skills Preview</h5>\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)\">Cancel</button>\r\n <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserSkillset()\" [disabled]=\"showLoader\">Update</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\" class=\"preview-detail-grid\">\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Service Provider</span>\r\n <span class=\"preview-value\">{{ skill.providerName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Skill</span>\r\n <span class=\"preview-value\">{{ skill.skillSetName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Self Ability Rating</span>\r\n <span class=\"preview-value stars-readonly\">\r\n <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n </span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Years of Experience</span>\r\n <span class=\"preview-value\">{{ skill?.year || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Visible</span>\r\n <span class=\"preview-value\">\r\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"skill.profileVisibility\" disabled>\r\n </span>\r\n </div>\r\n <div class=\"preview-cell preview-full\">\r\n <span class=\"preview-label\">Description</span>\r\n <span class=\"preview-value\">{{ skill.notes || '\u2014' }}</span>\r\n </div>\r\n </div>\r\n <!-- EDIT MODE -->\r\n <div *ngIf=\"isEditMode && model?.skillSetId === skill.skillSetId\" [formGroup]=\"tab.at(0)\" class=\"preview-edit-grid\">\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Service Provider</span>\r\n <span class=\"preview-value\">{{ skill.providerName }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Skill</span>\r\n <span class=\"preview-value\">{{ skill.skillSetName }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Self Ability Rating</span>\r\n <ngx-stars *ngIf=\"tab.at(0)?.get('starRating')?.value !== null\"\r\n [key]=\"tab.at(0).get('starRating')?.value\"\r\n [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\"\r\n [maxStars]=\"5\"\r\n (ratingOutput)=\"onEditRating($event)\">\r\n </ngx-stars>\r\n </div>\r\n <div class=\"preview-cell\">\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\"></ng-select>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <label class=\"label\">Visible</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n <div class=\"preview-cell preview-full\">\r\n <label class=\"label\">Description</label>\r\n <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\" placeholder=\"Enter notes\"></textarea>\r\n </div>\r\n </div>\r\n </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 <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 Rating is 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 <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 required</div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1 text-center\">\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-2 mt-1\" *ngIf=\"tab.controls.length>1 && index == copyOptionIndex\">\r\n <label class=\"label mb-2\">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>\r\n </div>\r\n</div>\r\n\r\n<!-- Footer buttons -->\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\r\n </button>\r\n </div>\r\n</div>\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\r\n </button>\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.skills-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}.skills-container.last{min-height:unset}.title{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.subtitle{font-size:14px;color:#64748b;margin-bottom:24px}.content-part{background:#fff}.content-part p{font-size:13px;color:#64748b}.content-part div{font-size:13px}.content-part .card{margin-top:15px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.content-part .card .row{margin-top:-15px}.content-part .card .sub-section{padding:0 10px}.content-part .card .sub-section .title{font-size:15px;font-weight:500;color:#1e293b}.content-part .card .sub-section .info-title{font-size:12px;font-weight:400;color:#64748b;margin-left:5px}.content-part .card .sub-section .content{font-size:13px;color:#64748b}.content-part .card .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px;color:#64748b}.content-part .card .sub-section .subsection input{width:30%}.content-part .card .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#1e293b;margin-top:15px}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;height:42px;background:#f9fafb;transition:all .2s ease}.content-part .search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.content-part .search-part input::placeholder{color:#94a3b8}.content-part .search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;display:flex;align-items:center;justify-content:center;margin-right:0;border:none;cursor:pointer;transition:all .2s ease}.content-part .search-part .btn:hover{background:#2d5a8a}.content-part .search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.content-part textarea{width:100%;height:100px;min-height:96px;background:#f9fafb;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-size:15px;color:#1e293b;resize:vertical;outline:none;transition:all .2s ease}.content-part textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .skills-section{margin-left:5px}.content-part .skills-section .category-title{margin-bottom:8px;font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-left:5px}.content-part .skills-section .text-title{font-size:14px;margin-left:3px;color:#1e293b;display:contents}.content-part .skills-section input[type=checkbox]{border:1.5px solid #e2e8f0!important;height:14px!important;width:15px!important;border-radius:6px!important;margin:2px;accent-color:#4077AD}.content-part .skills-section input[type=checkbox]:checked{background-color:#4077ad!important;border:1.5px solid #4077AD!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:#4077ad;width:15px;display:flex;justify-content:center;border:1.5px solid #4077AD;height:14px;align-items:center;border-radius:6px}.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:#22c55e!important;border:1px solid #22c55e!important}::ng-deep .ng-select .ng-select-container{min-height:42px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:14px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .ng-select.ng-select-focused .ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f}.label{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;padding-bottom:6px;display:block;margin-bottom:2px}.form-control{color:#1e293b;background:#f9fafb!important;min-height:36px;font-size:15px;height:42px;border:1.5px solid #e2e8f0;border-radius:8px;transition:all .2s ease}.form-control:focus{border-color:#4077ad;background:#fff!important;box-shadow:0 0 0 3px #4077ad1f!important}.form-control:focus{border:1.5px solid #4077AD;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .nav-link{color:#64748b!important}::ng-deep .nav-link.active{color:#4077ad!important;font-weight:600}.loader{filter:blur(3px);height:40px}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.close-popup{position:absolute;right:7px;top:4px;width:25px;cursor:pointer;opacity:.6;transition:all .2s ease}.close-popup:hover{opacity:1}.back-btn,.skip-btn{height:42px;min-width:130px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover,.skip-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.back-btn.edit,.skip-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-left:15px}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.save-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.create-btn{height:42px;min-width:9rem;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.create-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.create-btn:active{transform:translateY(0)}.continue-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.continue-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.continue-btn:active{transform:translateY(0)}.continue-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.continue-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn.add{background:#2d5a8a}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:64px}.skill-preview-wrapper{margin-bottom:24px}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;margin-bottom:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease}.skill-preview-wrapper{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff;transition:box-shadow .25s ease}.skill-preview-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;font-size:15px;font-weight:700;color:#1e293b;border-bottom:1px solid transparent;cursor:pointer}.skill-preview-header.open{background:#ebf2f9;color:#2d5a8a;border-bottom:1px solid #e2e8f0}.skill-preview-body{padding:0;background:#fff}.skill-preview-body>div{padding:16px 20px;border-bottom:1px solid #e2e8f0}.skill-preview-body>div:last-child{border-bottom:none}.skill-preview-body label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.skill-preview-body p{margin:0;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5}h5.title{font-size:22px;font-weight:700;color:#1e293b!important;margin-bottom:4px}.preview-detail-grid,.preview-edit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.preview-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0;border-right:1px solid #e2e8f0}.preview-cell:nth-child(3n){border-right:none}.preview-full{grid-column:1/-1;border-right:none;border-bottom:none}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.stars-readonly{pointer-events:none;display:block}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.rotate{transform:rotate(-180deg)}@media screen and (max-width: 767px){.skills-container{padding:16px}.title{font-size:18px}.form-control,textarea{font-size:16px}.footer-actions{flex-direction:column-reverse;gap:8px;margin-top:48px}.back-btn,.skip-btn{width:100%}.continue-btn{padding:10px 22px;width:100%}.mb-res{display:flex;flex-direction:column-reverse;gap:8px;width:100%}.preview-detail-grid,.preview-edit-grid{grid-template-columns:1fr}.preview-cell{border-right:none}}\n"] }]
|
|
7684
|
+
], template: "<!-- SKILL PREVIEW LIST -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'preview'\">\r\n <h5 class=\"title text-secondary\"><img src=\"/assets/images/icons/stars.svg\" alt=\"skills\" class=\"me-2\" width=\"18\" height=\"18\" />Skills Preview</h5>\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)\">Cancel</button>\r\n <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserSkillset()\" [disabled]=\"showLoader\">Update</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\" class=\"preview-detail-grid\">\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Service Provider</span>\r\n <span class=\"preview-value\">{{ skill.providerName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Skill</span>\r\n <span class=\"preview-value\">{{ skill.skillSetName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Self Ability Rating</span>\r\n <span class=\"preview-value stars-readonly\">\r\n <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n </span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Years of Experience</span>\r\n <span class=\"preview-value\">{{ skill?.year || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Visible</span>\r\n <span class=\"preview-value\">\r\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"skill.profileVisibility\" disabled>\r\n </span>\r\n </div>\r\n <div class=\"preview-cell preview-full\">\r\n <span class=\"preview-label\">Description</span>\r\n <span class=\"preview-value\">{{ skill.notes || '\u2014' }}</span>\r\n </div>\r\n </div>\r\n <!-- EDIT MODE -->\r\n <div *ngIf=\"isEditMode && model?.skillSetId === skill.skillSetId\" [formGroup]=\"tab.at(0)\" class=\"preview-edit-grid\">\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Service Provider</span>\r\n <span class=\"preview-value\">{{ skill.providerName }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Skill</span>\r\n <span class=\"preview-value\">{{ skill.skillSetName }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Self Ability Rating</span>\r\n <ngx-stars *ngIf=\"tab.at(0)?.get('starRating')?.value !== null\"\r\n [key]=\"tab.at(0).get('starRating')?.value\"\r\n [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\"\r\n [maxStars]=\"5\"\r\n (ratingOutput)=\"onEditRating($event)\">\r\n </ngx-stars>\r\n </div>\r\n <div class=\"preview-cell\">\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\"></ng-select>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <label class=\"label\">Visible</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n <div class=\"preview-cell preview-full\">\r\n <label class=\"label\">Description</label>\r\n <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\" placeholder=\"Enter notes\"></textarea>\r\n </div>\r\n </div>\r\n </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 <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 Rating is 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 <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 required</div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1 text-center\">\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-2 mt-1\" *ngIf=\"tab.controls.length>1 && index == copyOptionIndex\">\r\n <label class=\"label mb-2\">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>\r\n </div>\r\n</div>\r\n\r\n<!-- Footer buttons -->\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\r\n </button>\r\n </div>\r\n</div>\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\r\n </button>\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.skills-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}.skills-container.last{min-height:unset}.title{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.subtitle{font-size:14px;color:#64748b;margin-bottom:24px}.content-part{background:#fff}.content-part p{font-size:13px;color:#64748b}.content-part div{font-size:13px}.content-part .card{margin-top:15px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.content-part .card .row{margin-top:-15px}.content-part .card .sub-section{padding:0 10px}.content-part .card .sub-section .title{font-size:15px;font-weight:500;color:#1e293b}.content-part .card .sub-section .info-title{font-size:12px;font-weight:400;color:#64748b;margin-left:5px}.content-part .card .sub-section .content{font-size:13px;color:#64748b}.content-part .card .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px;color:#64748b}.content-part .card .sub-section .subsection input{width:30%}.content-part .card .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#1e293b;margin-top:15px}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;height:42px;background:#f9fafb;transition:all .2s ease}.content-part .search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.content-part .search-part input::placeholder{color:#94a3b8}.content-part .search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;display:flex;align-items:center;justify-content:center;margin-right:0;border:none;cursor:pointer;transition:all .2s ease}.content-part .search-part .btn:hover{background:#2d5a8a}.content-part .search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.content-part textarea{width:100%;height:100px;min-height:96px;background:#f9fafb;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-size:15px;color:#1e293b;resize:vertical;outline:none;transition:all .2s ease}.content-part textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .skills-section{margin-left:5px}.content-part .skills-section .category-title{margin-bottom:8px;font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-left:5px}.content-part .skills-section .text-title{font-size:14px;margin-left:3px;color:#1e293b;display:contents}.content-part .skills-section input[type=checkbox]{border:1.5px solid #e2e8f0!important;height:14px!important;width:15px!important;border-radius:6px!important;margin:2px;accent-color:#4077AD}.content-part .skills-section input[type=checkbox]:checked{background-color:#4077ad!important;border:1.5px solid #4077AD!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:#4077ad;width:15px;display:flex;justify-content:center;border:1.5px solid #4077AD;height:14px;align-items:center;border-radius:6px}.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:#22c55e!important;border:1px solid #22c55e!important}::ng-deep .ng-select .ng-select-container{min-height:42px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:14px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .ng-select.ng-select-focused .ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f}.label{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;padding-bottom:6px;display:block;margin-bottom:2px}.form-control{color:#1e293b;background:#f9fafb!important;min-height:36px;font-size:15px;height:42px;border:1.5px solid #e2e8f0;border-radius:8px;transition:all .2s ease}.form-control:focus{border-color:#4077ad;background:#fff!important;box-shadow:0 0 0 3px #4077ad1f!important}.form-control:focus{border:1.5px solid #4077AD;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .nav-link{color:#64748b!important}::ng-deep .nav-link.active{color:#4077ad!important;font-weight:600}.loader{filter:blur(3px);height:40px}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.close-popup{position:absolute;right:7px;top:4px;width:25px;cursor:pointer;opacity:.6;transition:all .2s ease}.close-popup:hover{opacity:1}.back-btn,.skip-btn{height:42px;min-width:130px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover,.skip-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.back-btn.edit,.skip-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-left:15px}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.save-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.create-btn{height:42px;min-width:9rem;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.create-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.create-btn:active{transform:translateY(0)}.continue-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.continue-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.continue-btn:active{transform:translateY(0)}.continue-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.continue-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn.add{background:#2d5a8a}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:64px}.skill-preview-wrapper{margin-bottom:24px}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;margin-bottom:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease}.skill-preview-wrapper{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff;transition:box-shadow .25s ease}.skill-preview-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;font-size:15px;font-weight:700;color:#1e293b;border-bottom:1px solid transparent;cursor:pointer}.skill-preview-header.open{background:#ebf2f9;color:#2d5a8a;border-bottom:1px solid #e2e8f0}.skill-preview-body{padding:0;background:#fff}.skill-preview-body>div{padding:16px 20px;border-bottom:1px solid #e2e8f0}.skill-preview-body>div:last-child{border-bottom:none}.skill-preview-body label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.skill-preview-body p{margin:0;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5}h5.title{font-size:22px;font-weight:700;color:#1e293b!important;margin-bottom:4px}.preview-detail-grid,.preview-edit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.preview-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0;border-right:1px solid #e2e8f0}.preview-cell:nth-child(3n){border-right:none}.preview-full{grid-column:1/-1;border-right:none;border-bottom:none}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.stars-readonly{pointer-events:none;display:block}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.rotate{transform:rotate(-180deg)}@media screen and (max-width: 767px){.skills-container{padding:16px}.title{font-size:18px}.form-control,textarea{font-size:16px}.footer-actions{flex-direction:column-reverse;gap:8px;margin-top:48px}.back-btn,.skip-btn{width:100%}.continue-btn{padding:10px 22px;width:100%}.mb-res{display:flex;flex-direction:column-reverse;gap:8px;width:100%}.preview-detail-grid,.preview-edit-grid{grid-template-columns:1fr}.preview-cell{border-right:none}}\n"] }]
|
|
7685
7685
|
}], ctorParameters: () => [{ type: SkillSetService }, { type: UserSkillSetService }, { type: UserService }, { type: i8.UntypedFormBuilder }, { type: UtilsService }, { type: i1$1.RoleContextService }, { type: CredentialingStore }, { type: i1$1.TokenService }], propDecorators: { providerId: [{
|
|
7686
7686
|
type: Input
|
|
7687
7687
|
}], providerName: [{
|
|
@@ -8113,11 +8113,11 @@ class LicensesComponent {
|
|
|
8113
8113
|
this.fileName = '';
|
|
8114
8114
|
}
|
|
8115
8115
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LicensesComponent, deps: [{ token: UserDocumentService }, { token: UserService }, { token: i1$1.RoleContextService }, { token: CredentialingStore }, { token: LicenseStore }, { token: i1$1.TokenService }, { token: PostalCodeServices }, { token: i8.FormBuilder }, { token: FileService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
|
|
8116
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: LicensesComponent, isStandalone: false, selector: "app-licenses", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl", states: "states" }, ngImport: i0, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n\r\n <h3><i class=\"bi bi-card-checklist me-2\" style=\"color:#d97706;\"></i>Add Licenses</h3>\r\n <p class=\"hint\">\r\n Recommended for your role\r\n </p>\r\n <div class=\"document-container\">\r\n <div class=\"search-part\">\r\n <input type=\"text\" placeholder=\"Search / Add License type here...\" [formControl]=\"searchControl\" />\r\n <button class=\"btn\" type=\"button\" (click)=\"addManualDocumentType()\" tooltip=\"Add manually\">\r\n <img src=\"/assets/images/icons/plus.svg\" alt=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n </button>\r\n </div>\r\n <div *ngIf=\"manualTypeError\" class=\"invalid-feedback is-invalid d-block mb-2\">{{ manualTypeError }}</div>\r\n\r\n <div class=\"grid\">\r\n <div *ngFor=\"let item of documentTypes\">\r\n <label class=\"checkbox-row\">\r\n <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n <span class=\"title\">{{ item.type }}</span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <form [formGroup]=\"certificateForm\">\r\n <div class=\"row\" style=\"margin-top: 20px;\">\r\n <div class=\"field\">\r\n <div class=\"head\">License Number</div>\r\n <input type=\"text\" placeholder=\"Enter your License Number here\" formControlName=\"number\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n certificateForm.get('number')?.hasError('required')\">\r\n License number is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">License Issued By</div>\r\n <input type=\"text\" placeholder=\"Enter License Issued By here\" formControlName=\"issuedBy\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n certificateForm.get('issuedBy')?.hasError('required')\">\r\n License issued by is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Issued State</div>\r\n <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select Issued State\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Issued Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n certificateForm.get('issueDate')?.hasError('required')\">\r\n Issued date is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Expiration Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n certificateForm.get('expiryDate')?.hasError('required')\">\r\n Expiry date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">License Document</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your license document or proof of licensure (PDF, DOC, DOCX)</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Document\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"action\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3><i class=\"bi bi-card-checklist me-2\" style=\"color:#d97706;\"></i>Licenses</h3>\r\n <p class=\"preview-subtitle\">Review your licenses below</p>\r\n </div>\r\n\r\n <div class=\"preview-list\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button preview-accordion-btn\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#lic_' + i\"\r\n aria-expanded=\"true\">\r\n <div class=\"preview-acc-left\">\r\n <span class=\"preview-acc-title\">{{ exp.documentTypeName }}</span>\r\n <span class=\"preview-acc-meta\">Issued by {{ exp.issuedBy }}</span>\r\n </div>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n\r\n <div [id]=\"'lic_' + i\" class=\"accordion-collapse collapse show\">\r\n <div class=\"preview-body\">\r\n <div class=\"detail-grid\">\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">License Name</span>\r\n <span class=\"preview-value\">{{ exp.documentTypeName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">License Number</span>\r\n <span class=\"preview-value\">{{ exp.number || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued By</span>\r\n <span class=\"preview-value\">{{ exp.issuedBy || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued State</span>\r\n <span class=\"preview-value\">{{ exp.issuedState | stateName }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued Date</span>\r\n <span class=\"preview-value\">{{ exp.issueDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Expiry Date</span>\r\n <span class=\"preview-value\">{{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n <span class=\"preview-label\">Document</span>\r\n <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n </div>\r\n </div>\r\n <div class=\"detail-cell detail-full\">\r\n <span class=\"preview-label\">Description</span>\r\n <span class=\"preview-value\">{{ exp.notes || '\u2014' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Licenses</button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input[type=text]::placeholder,input[type=email]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input[type=text].is-invalid,input[type=email].is-invalid,input[type=number].is-invalid,input[type=password].is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.action{display:flex;justify-content:space-between;margin:48px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.document-container{max-width:1100px;margin:auto}.search-part{width:100%;max-width:400px;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;height:42px;background:#f9fafb;transition:all .2s ease}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none;height:100%;padding:0}.search-part input::placeholder{color:#94a3b8}.search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;min-width:unset;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:all .2s ease}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.search-input{width:100%;max-width:400px;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease;box-sizing:border-box;outline:none;margin-bottom:16px}.search-input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.search-input::placeholder{color:#94a3b8}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px;accent-color:#4077AD}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 12px;transition:all .2s ease;width:100%}.checkbox-row:hover{border-color:#4077ad;background:#ebf2f9}.checkbox-row input{margin:0;accent-color:#4077AD}.content .title{font-weight:600;font-size:14px;color:#1e293b}.title{font-size:14px;font-weight:600;color:#1e293b}.content .desc{font-size:12px;color:#94a3b8;margin-top:4px}.save-btn{height:42px;margin-top:20px;padding:10px 22px;border-radius:8px;border:none;background:#4077ad;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#f8fafc}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.edit-icon{cursor:pointer}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.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}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.hint{margin-bottom:7px}.date-time-filter{font-size:14px}.search-input{margin-bottom:0;max-width:100%}.right-actions{gap:8px}.detail-grid{grid-template-columns:1fr}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.actions{flex-direction:column-reverse;gap:8px;margin:48px 0 20px}.right-actions{gap:8px;flex-direction:column-reverse}.add-btn{width:unset}.action{display:flex;flex-direction:column-reverse;gap:8px}button{width:100%}}\n"], dependencies: [{ kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "directive", type: i14.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
|
|
8116
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: LicensesComponent, isStandalone: false, selector: "app-licenses", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl", states: "states" }, ngImport: i0, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n\r\n <h3><img src=\"/assets/images/icons/card-checklist.svg\" alt=\"licenses\" class=\"me-2\" width=\"18\" height=\"18\" />Add Licenses</h3>\r\n <p class=\"hint\">\r\n Recommended for your role\r\n </p>\r\n <div class=\"document-container\">\r\n <div class=\"search-part\">\r\n <input type=\"text\" placeholder=\"Search / Add License type here...\" [formControl]=\"searchControl\" />\r\n <button class=\"btn\" type=\"button\" (click)=\"addManualDocumentType()\" tooltip=\"Add manually\">\r\n <img src=\"/assets/images/icons/plus.svg\" alt=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n </button>\r\n </div>\r\n <div *ngIf=\"manualTypeError\" class=\"invalid-feedback is-invalid d-block mb-2\">{{ manualTypeError }}</div>\r\n\r\n <div class=\"grid\">\r\n <div *ngFor=\"let item of documentTypes\">\r\n <label class=\"checkbox-row\">\r\n <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n <span class=\"title\">{{ item.type }}</span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <form [formGroup]=\"certificateForm\">\r\n <div class=\"row\" style=\"margin-top: 20px;\">\r\n <div class=\"field\">\r\n <div class=\"head\">License Number</div>\r\n <input type=\"text\" placeholder=\"Enter your License Number here\" formControlName=\"number\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n certificateForm.get('number')?.hasError('required')\">\r\n License number is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">License Issued By</div>\r\n <input type=\"text\" placeholder=\"Enter License Issued By here\" formControlName=\"issuedBy\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n certificateForm.get('issuedBy')?.hasError('required')\">\r\n License issued by is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Issued State</div>\r\n <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select Issued State\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Issued Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n certificateForm.get('issueDate')?.hasError('required')\">\r\n Issued date is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Expiration Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n certificateForm.get('expiryDate')?.hasError('required')\">\r\n Expiry date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">License Document</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your license document or proof of licensure (PDF, DOC, DOCX)</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Document\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"action\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3><img src=\"/assets/images/icons/card-checklist.svg\" alt=\"licenses\" class=\"me-2\" width=\"18\" height=\"18\" />Licenses</h3>\r\n <p class=\"preview-subtitle\">Review your licenses below</p>\r\n </div>\r\n\r\n <div class=\"preview-list\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button preview-accordion-btn\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#lic_' + i\"\r\n aria-expanded=\"true\">\r\n <div class=\"preview-acc-left\">\r\n <span class=\"preview-acc-title\">{{ exp.documentTypeName }}</span>\r\n <span class=\"preview-acc-meta\">Issued by {{ exp.issuedBy }}</span>\r\n </div>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n\r\n <div [id]=\"'lic_' + i\" class=\"accordion-collapse collapse show\">\r\n <div class=\"preview-body\">\r\n <div class=\"detail-grid\">\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">License Name</span>\r\n <span class=\"preview-value\">{{ exp.documentTypeName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">License Number</span>\r\n <span class=\"preview-value\">{{ exp.number || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued By</span>\r\n <span class=\"preview-value\">{{ exp.issuedBy || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued State</span>\r\n <span class=\"preview-value\">{{ exp.issuedState | stateName }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued Date</span>\r\n <span class=\"preview-value\">{{ exp.issueDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Expiry Date</span>\r\n <span class=\"preview-value\">{{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n <span class=\"preview-label\">Document</span>\r\n <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n </div>\r\n </div>\r\n <div class=\"detail-cell detail-full\">\r\n <span class=\"preview-label\">Description</span>\r\n <span class=\"preview-value\">{{ exp.notes || '\u2014' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Licenses</button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input[type=text]::placeholder,input[type=email]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input[type=text].is-invalid,input[type=email].is-invalid,input[type=number].is-invalid,input[type=password].is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.action{display:flex;justify-content:space-between;margin:48px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.document-container{max-width:1100px;margin:auto}.search-part{width:100%;max-width:400px;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;height:42px;background:#f9fafb;transition:all .2s ease}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none;height:100%;padding:0}.search-part input::placeholder{color:#94a3b8}.search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;min-width:unset;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:all .2s ease}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.search-input{width:100%;max-width:400px;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease;box-sizing:border-box;outline:none;margin-bottom:16px}.search-input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.search-input::placeholder{color:#94a3b8}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px;accent-color:#4077AD}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 12px;transition:all .2s ease;width:100%}.checkbox-row:hover{border-color:#4077ad;background:#ebf2f9}.checkbox-row input{margin:0;accent-color:#4077AD}.content .title{font-weight:600;font-size:14px;color:#1e293b}.title{font-size:14px;font-weight:600;color:#1e293b}.content .desc{font-size:12px;color:#94a3b8;margin-top:4px}.save-btn{height:42px;margin-top:20px;padding:10px 22px;border-radius:8px;border:none;background:#4077ad;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#f8fafc}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.edit-icon{cursor:pointer}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.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}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.hint{margin-bottom:7px}.date-time-filter{font-size:14px}.search-input{margin-bottom:0;max-width:100%}.right-actions{gap:8px}.detail-grid{grid-template-columns:1fr}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.actions{flex-direction:column-reverse;gap:8px;margin:48px 0 20px}.right-actions{gap:8px;flex-direction:column-reverse}.add-btn{width:unset}.action{display:flex;flex-direction:column-reverse;gap:8px}button{width:100%}}\n"], dependencies: [{ kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "directive", type: i14.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
|
|
8117
8117
|
}
|
|
8118
8118
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LicensesComponent, decorators: [{
|
|
8119
8119
|
type: Component,
|
|
8120
|
-
args: [{ selector: 'app-licenses', standalone: false, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n\r\n <h3><i class=\"bi bi-card-checklist me-2\" style=\"color:#d97706;\"></i>Add Licenses</h3>\r\n <p class=\"hint\">\r\n Recommended for your role\r\n </p>\r\n <div class=\"document-container\">\r\n <div class=\"search-part\">\r\n <input type=\"text\" placeholder=\"Search / Add License type here...\" [formControl]=\"searchControl\" />\r\n <button class=\"btn\" type=\"button\" (click)=\"addManualDocumentType()\" tooltip=\"Add manually\">\r\n <img src=\"/assets/images/icons/plus.svg\" alt=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n </button>\r\n </div>\r\n <div *ngIf=\"manualTypeError\" class=\"invalid-feedback is-invalid d-block mb-2\">{{ manualTypeError }}</div>\r\n\r\n <div class=\"grid\">\r\n <div *ngFor=\"let item of documentTypes\">\r\n <label class=\"checkbox-row\">\r\n <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n <span class=\"title\">{{ item.type }}</span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <form [formGroup]=\"certificateForm\">\r\n <div class=\"row\" style=\"margin-top: 20px;\">\r\n <div class=\"field\">\r\n <div class=\"head\">License Number</div>\r\n <input type=\"text\" placeholder=\"Enter your License Number here\" formControlName=\"number\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n certificateForm.get('number')?.hasError('required')\">\r\n License number is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">License Issued By</div>\r\n <input type=\"text\" placeholder=\"Enter License Issued By here\" formControlName=\"issuedBy\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n certificateForm.get('issuedBy')?.hasError('required')\">\r\n License issued by is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Issued State</div>\r\n <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select Issued State\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Issued Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n certificateForm.get('issueDate')?.hasError('required')\">\r\n Issued date is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Expiration Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n certificateForm.get('expiryDate')?.hasError('required')\">\r\n Expiry date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">License Document</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your license document or proof of licensure (PDF, DOC, DOCX)</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Document\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"action\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3><i class=\"bi bi-card-checklist me-2\" style=\"color:#d97706;\"></i>Licenses</h3>\r\n <p class=\"preview-subtitle\">Review your licenses below</p>\r\n </div>\r\n\r\n <div class=\"preview-list\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button preview-accordion-btn\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#lic_' + i\"\r\n aria-expanded=\"true\">\r\n <div class=\"preview-acc-left\">\r\n <span class=\"preview-acc-title\">{{ exp.documentTypeName }}</span>\r\n <span class=\"preview-acc-meta\">Issued by {{ exp.issuedBy }}</span>\r\n </div>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n\r\n <div [id]=\"'lic_' + i\" class=\"accordion-collapse collapse show\">\r\n <div class=\"preview-body\">\r\n <div class=\"detail-grid\">\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">License Name</span>\r\n <span class=\"preview-value\">{{ exp.documentTypeName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">License Number</span>\r\n <span class=\"preview-value\">{{ exp.number || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued By</span>\r\n <span class=\"preview-value\">{{ exp.issuedBy || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued State</span>\r\n <span class=\"preview-value\">{{ exp.issuedState | stateName }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued Date</span>\r\n <span class=\"preview-value\">{{ exp.issueDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Expiry Date</span>\r\n <span class=\"preview-value\">{{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n <span class=\"preview-label\">Document</span>\r\n <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n </div>\r\n </div>\r\n <div class=\"detail-cell detail-full\">\r\n <span class=\"preview-label\">Description</span>\r\n <span class=\"preview-value\">{{ exp.notes || '\u2014' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Licenses</button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input[type=text]::placeholder,input[type=email]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input[type=text].is-invalid,input[type=email].is-invalid,input[type=number].is-invalid,input[type=password].is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.action{display:flex;justify-content:space-between;margin:48px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.document-container{max-width:1100px;margin:auto}.search-part{width:100%;max-width:400px;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;height:42px;background:#f9fafb;transition:all .2s ease}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none;height:100%;padding:0}.search-part input::placeholder{color:#94a3b8}.search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;min-width:unset;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:all .2s ease}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.search-input{width:100%;max-width:400px;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease;box-sizing:border-box;outline:none;margin-bottom:16px}.search-input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.search-input::placeholder{color:#94a3b8}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px;accent-color:#4077AD}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 12px;transition:all .2s ease;width:100%}.checkbox-row:hover{border-color:#4077ad;background:#ebf2f9}.checkbox-row input{margin:0;accent-color:#4077AD}.content .title{font-weight:600;font-size:14px;color:#1e293b}.title{font-size:14px;font-weight:600;color:#1e293b}.content .desc{font-size:12px;color:#94a3b8;margin-top:4px}.save-btn{height:42px;margin-top:20px;padding:10px 22px;border-radius:8px;border:none;background:#4077ad;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#f8fafc}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.edit-icon{cursor:pointer}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.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}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.hint{margin-bottom:7px}.date-time-filter{font-size:14px}.search-input{margin-bottom:0;max-width:100%}.right-actions{gap:8px}.detail-grid{grid-template-columns:1fr}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.actions{flex-direction:column-reverse;gap:8px;margin:48px 0 20px}.right-actions{gap:8px;flex-direction:column-reverse}.add-btn{width:unset}.action{display:flex;flex-direction:column-reverse;gap:8px}button{width:100%}}\n"] }]
|
|
8120
|
+
args: [{ selector: 'app-licenses', standalone: false, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n\r\n <h3><img src=\"/assets/images/icons/card-checklist.svg\" alt=\"licenses\" class=\"me-2\" width=\"18\" height=\"18\" />Add Licenses</h3>\r\n <p class=\"hint\">\r\n Recommended for your role\r\n </p>\r\n <div class=\"document-container\">\r\n <div class=\"search-part\">\r\n <input type=\"text\" placeholder=\"Search / Add License type here...\" [formControl]=\"searchControl\" />\r\n <button class=\"btn\" type=\"button\" (click)=\"addManualDocumentType()\" tooltip=\"Add manually\">\r\n <img src=\"/assets/images/icons/plus.svg\" alt=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n </button>\r\n </div>\r\n <div *ngIf=\"manualTypeError\" class=\"invalid-feedback is-invalid d-block mb-2\">{{ manualTypeError }}</div>\r\n\r\n <div class=\"grid\">\r\n <div *ngFor=\"let item of documentTypes\">\r\n <label class=\"checkbox-row\">\r\n <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n <span class=\"title\">{{ item.type }}</span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <form [formGroup]=\"certificateForm\">\r\n <div class=\"row\" style=\"margin-top: 20px;\">\r\n <div class=\"field\">\r\n <div class=\"head\">License Number</div>\r\n <input type=\"text\" placeholder=\"Enter your License Number here\" formControlName=\"number\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n certificateForm.get('number')?.hasError('required')\">\r\n License number is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">License Issued By</div>\r\n <input type=\"text\" placeholder=\"Enter License Issued By here\" formControlName=\"issuedBy\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n certificateForm.get('issuedBy')?.hasError('required')\">\r\n License issued by is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Issued State</div>\r\n <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select Issued State\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Issued Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n certificateForm.get('issueDate')?.hasError('required')\">\r\n Issued date is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Expiration Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n certificateForm.get('expiryDate')?.hasError('required')\">\r\n Expiry date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">License Document</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your license document or proof of licensure (PDF, DOC, DOCX)</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Document\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"action\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3><img src=\"/assets/images/icons/card-checklist.svg\" alt=\"licenses\" class=\"me-2\" width=\"18\" height=\"18\" />Licenses</h3>\r\n <p class=\"preview-subtitle\">Review your licenses below</p>\r\n </div>\r\n\r\n <div class=\"preview-list\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button preview-accordion-btn\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#lic_' + i\"\r\n aria-expanded=\"true\">\r\n <div class=\"preview-acc-left\">\r\n <span class=\"preview-acc-title\">{{ exp.documentTypeName }}</span>\r\n <span class=\"preview-acc-meta\">Issued by {{ exp.issuedBy }}</span>\r\n </div>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n\r\n <div [id]=\"'lic_' + i\" class=\"accordion-collapse collapse show\">\r\n <div class=\"preview-body\">\r\n <div class=\"detail-grid\">\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">License Name</span>\r\n <span class=\"preview-value\">{{ exp.documentTypeName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">License Number</span>\r\n <span class=\"preview-value\">{{ exp.number || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued By</span>\r\n <span class=\"preview-value\">{{ exp.issuedBy || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued State</span>\r\n <span class=\"preview-value\">{{ exp.issuedState | stateName }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued Date</span>\r\n <span class=\"preview-value\">{{ exp.issueDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Expiry Date</span>\r\n <span class=\"preview-value\">{{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n <span class=\"preview-label\">Document</span>\r\n <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n </div>\r\n </div>\r\n <div class=\"detail-cell detail-full\">\r\n <span class=\"preview-label\">Description</span>\r\n <span class=\"preview-value\">{{ exp.notes || '\u2014' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Licenses</button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input[type=text]::placeholder,input[type=email]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input[type=text].is-invalid,input[type=email].is-invalid,input[type=number].is-invalid,input[type=password].is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.action{display:flex;justify-content:space-between;margin:48px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.document-container{max-width:1100px;margin:auto}.search-part{width:100%;max-width:400px;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;height:42px;background:#f9fafb;transition:all .2s ease}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none;height:100%;padding:0}.search-part input::placeholder{color:#94a3b8}.search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;min-width:unset;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:all .2s ease}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.search-input{width:100%;max-width:400px;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease;box-sizing:border-box;outline:none;margin-bottom:16px}.search-input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.search-input::placeholder{color:#94a3b8}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px;accent-color:#4077AD}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 12px;transition:all .2s ease;width:100%}.checkbox-row:hover{border-color:#4077ad;background:#ebf2f9}.checkbox-row input{margin:0;accent-color:#4077AD}.content .title{font-weight:600;font-size:14px;color:#1e293b}.title{font-size:14px;font-weight:600;color:#1e293b}.content .desc{font-size:12px;color:#94a3b8;margin-top:4px}.save-btn{height:42px;margin-top:20px;padding:10px 22px;border-radius:8px;border:none;background:#4077ad;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#f8fafc}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.edit-icon{cursor:pointer}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.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}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.hint{margin-bottom:7px}.date-time-filter{font-size:14px}.search-input{margin-bottom:0;max-width:100%}.right-actions{gap:8px}.detail-grid{grid-template-columns:1fr}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.actions{flex-direction:column-reverse;gap:8px;margin:48px 0 20px}.right-actions{gap:8px;flex-direction:column-reverse}.add-btn{width:unset}.action{display:flex;flex-direction:column-reverse;gap:8px}button{width:100%}}\n"] }]
|
|
8121
8121
|
}], ctorParameters: () => [{ type: UserDocumentService }, { type: UserService }, { type: i1$1.RoleContextService }, { type: CredentialingStore }, { type: LicenseStore }, { type: i1$1.TokenService }, { type: PostalCodeServices }, { type: i8.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
|
|
8122
8122
|
type: Input
|
|
8123
8123
|
}], providerName: [{
|
|
@@ -8703,7 +8703,7 @@ class ToolsComponent {
|
|
|
8703
8703
|
});
|
|
8704
8704
|
}
|
|
8705
8705
|
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: i1$1.TokenService }, { token: i1$1.RoleContextService }, { token: UserDetailService }, { token: LIBRARY_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
|
|
8706
|
-
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", signatureUrl: "signatureUrl", signatureFileId: "signatureFileId" }, ngImport: i0, template: "<!-- Tool PREVIEW LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n <h5 class=\"title text-secondary\"><i class=\"bi bi-tools me-2\" style=\"color:#0891b2;\"></i>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\">\r\n <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n <div class=\"preview-detail-grid\">\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Service Provider</span>\r\n <span class=\"preview-value\">{{ tool.providerName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Tools / Equipment</span>\r\n <span class=\"preview-value\">{{ tool.toolName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Manufacturer</span>\r\n <span class=\"preview-value\">{{ tool.make || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Model</span>\r\n <span class=\"preview-value\">{{ tool.model || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Serial Number</span>\r\n <span class=\"preview-value\">{{ tool.serialNumber || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Years of Experience</span>\r\n <span class=\"preview-value\">{{ tool.year || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Self Ability Rating</span>\r\n <span class=\"preview-value stars-readonly\">\r\n <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\"></ngx-stars>\r\n </span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Active</span>\r\n <span class=\"preview-value\">\r\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"tool.profileVisibility\" disabled>\r\n </span>\r\n </div>\r\n <div class=\"preview-cell preview-full\">\r\n <span class=\"preview-label\">Description</span>\r\n <span class=\"preview-value\">{{ tool.notes || '\u2014' }}</span>\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 (ratingOutput)=\"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)=\"openDashboardModal()\"\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>\r\n\r\n<!-- Dashboard Confirmation Modal -->\r\n<div class=\"dashboard-modal-overlay\" *ngIf=\"showDashboardModal\" (click)=\"closeDashboardModal()\">\r\n <div class=\"dashboard-modal\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"dashboard-modal-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"12\" cy=\"12\" r=\"11\" stroke=\"#22c55e\" stroke-width=\"1.5\"/>\r\n <path d=\"M7 12.5l3.5 3.5 6.5-7\" stroke=\"#22c55e\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n <h3 class=\"dashboard-modal-title\">All Information Saved!</h3>\r\n <p class=\"dashboard-modal-message\">\r\n Your profile setup is complete. All your information has been saved successfully.\r\n Clicking <strong>Go to Dashboard</strong> will take you to your dashboard.\r\n </p>\r\n <div class=\"dashboard-modal-actions\">\r\n <button type=\"button\" class=\"modal-cancel-btn\" (click)=\"closeDashboardModal()\">Cancel</button>\r\n <button type=\"button\" class=\"modal-confirm-btn\" [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\"\r\n (click)=\"closeDashboardModal(); saveFinal()\">\r\n Go to Dashboard\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: ["@charset \"UTF-8\";.tools-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}.tools-container.last{min-height:unset}.tools-container h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.tools-container .info{font-size:14px;color:#64748b;margin-bottom:24px}.content-part{background:#fff}.content-part p{font-size:13px;color:#64748b}.content-part div{font-size:14px}.content-part div .label{font-size:12px!important;font-weight:700!important;color:#64748b!important;text-transform:uppercase;letter-spacing:.05em;padding-bottom:6px!important}.content-part .row{margin-top:-15px}.content-part .sub-section{padding:0 10px}.content-part .sub-section .title{font-size:15px;font-weight:500;color:#1e293b}.content-part .sub-section .info-title{font-size:12px;font-weight:400;color:#64748b;margin-left:5px}.content-part .sub-section .content{font-size:13px;color:#64748b}.content-part .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px;color:#64748b}.content-part .sub-section .subsection input{width:30%}.content-part .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#1e293b}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;height:42px;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;background:#f9fafb;transition:all .2s ease}.content-part .search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.content-part .search-part input::placeholder{color:#94a3b8}.content-part .search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;display:flex;align-items:center;justify-content:center;margin-right:0;border:none;cursor:pointer;transition:all .2s ease}.content-part .search-part .btn:hover{background:#2d5a8a}.content-part .search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.content-part textarea{width:100%;min-height:96px;background:#f9fafb;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-size:15px;color:#1e293b;resize:vertical;outline:none;transition:all .2s ease}.content-part textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .tools-section{margin-left:5px}.content-part .tools-section .category-title{margin-bottom:8px;font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-left:5px}.content-part .tools-section .text-title{font-size:14px;margin-left:3px;color:#1e293b}.content-part .tools-section input[type=checkbox]{border:1.5px solid #e2e8f0!important;height:14px!important;width:15px!important;border-radius:6px!important;margin:2px;accent-color:#4077AD}.content-part .tools-section input[type=checkbox]:checked{background-color:#4077ad!important;border:1.5px solid #4077AD!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:#4077ad;width:15px;display:flex;justify-content:center;border:1.5px solid #4077AD;height:14px;align-items:center;border-radius:6px}.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:#22c55e!important;border:1px solid #22c55e!important}.copyAll{position:absolute;right:0;text-align:end;top:-40px}.close-popup{position:absolute;right:7px;top:4px;width:25px;cursor:pointer;opacity:.6;transition:all .2s ease}.close-popup:hover{opacity:1}.form-control{color:#1e293b;background:#f9fafb!important;font-size:15px;height:42px;border:1.5px solid #e2e8f0;border-radius:8px;transition:all .2s ease}.form-control:focus{border-color:#4077ad;background:#fff!important;box-shadow:0 0 0 3px #4077ad1f!important}.form-control:focus{border:1.5px solid #4077AD;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .nav-link{color:#64748b!important}::ng-deep .nav-link.active{color:#4077ad!important;font-weight:600}.loader{filter:blur(3px)}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.back-btn{height:42px;min-width:130px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.back-btn.edit{padding:5px 20px;min-height:20px;min-width:auto}.back-btn.add{background:#2d5a8a;color:#fff;border:none}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-left:15px}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.save-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.create-btn{height:42px;min-width:9rem;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.create-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.create-btn:active{transform:translateY(0)}.continue-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.continue-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.continue-btn:active{transform:translateY(0)}.continue-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;margin-bottom:16px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden;background:#fff;transition:box-shadow .25s ease}.skill-preview-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;font-size:15px;font-weight:700;color:#1e293b;border-bottom:1px solid transparent;cursor:pointer}.skill-preview-header.open{background:#ebf2f9;color:#2d5a8a;border-bottom:1px solid #e2e8f0}.skill-preview-body{padding:0;background:#fff}.skill-preview-body label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.skill-preview-body .value{font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word}h5.title{font-size:22px;font-weight:700;color:#1e293b!important;margin-bottom:4px}.preview-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.preview-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0;border-right:1px solid #e2e8f0}.preview-cell:nth-child(3n){border-right:none}.preview-full{grid-column:1/-1;border-right:none;border-bottom:none}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.stars-readonly{pointer-events:none;display:block}.action-btns{display:flex;justify-content:space-between;align-items:center}.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:16px}.actions button{height:42px;padding:10px 22px;border:none;border-radius:8px;font-size:14px;transition:all .2s ease;font-weight:600;min-width:120px;cursor:pointer}.actions .secondary{color:#64748b;background:#fff;border:1.5px solid #e2e8f0}.actions .secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.actions .primary{background:#4077ad;color:#fff}.actions .primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.actions .primary:active{transform:translateY(0)}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:64px}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;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 only screen and (min-width: 300px) and (max-width: 450px){.modal-content .close-popup{width:16px}}@media (max-width: 600px){.actions{flex-direction:column;align-items:stretch}.actions button{width:100%}}@media screen and (max-width: 767px){.tools-container h3{font-size:18px}.form-control,textarea{font-size:16px}.tools-container{padding:16px}.tools-container .mob-view{display:flex;justify-content:space-between;flex-direction:column-reverse;gap:8px}.tools-container .mob-res{flex-direction:column-reverse;gap:8px}.footer-actions{flex-direction:column-reverse;gap:8px;margin-top:48px}.continue-btn{padding:10px 22px;width:100%}.back-btn{width:100%}.save-btn{padding:10px 15px;width:unset;margin-left:0!important}.preview-detail-grid{grid-template-columns:1fr}.preview-cell{border-right:none}}.dashboard-modal-overlay{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:1050;animation:fadeInOverlay .2s ease}@keyframes fadeInOverlay{0%{opacity:0}to{opacity:1}}.dashboard-modal{background:#fff;border-radius:12px;padding:40px 36px 32px;max-width:440px;width:90%;text-align:center;box-shadow:0 20px 60px #0000002e;animation:slideUpModal .25s ease}@keyframes slideUpModal{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.dashboard-modal-icon{display:flex;justify-content:center;margin-bottom:20px}.dashboard-modal-icon svg{width:56px;height:56px}.dashboard-modal-title{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:12px}.dashboard-modal-message{font-size:14px;color:#64748b;line-height:1.6;margin-bottom:28px}.dashboard-modal-actions{display:flex;gap:12px;justify-content:center}.modal-cancel-btn{height:42px;min-width:110px;border-radius:8px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.modal-cancel-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.modal-confirm-btn{height:42px;min-width:150px;border-radius:8px;border:none;background:#4077ad;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.modal-confirm-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.modal-confirm-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}\n"], dependencies: [{ kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "component", type: NgxStarsComponent, selector: "ngx-stars", inputs: ["maxStars", "initialStars", "readonly", "size", "color", "animation", "animationSpeed", "customPadding", "wholeStars", "customStarIcons"], outputs: ["ratingOutput"] }, { kind: "directive", type: i14.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { 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$1.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i14$1.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }], animations: [
|
|
8706
|
+
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", signatureUrl: "signatureUrl", signatureFileId: "signatureFileId" }, ngImport: i0, template: "<!-- Tool PREVIEW LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n <h5 class=\"title text-secondary\"><img src=\"/assets/images/icons/tools.svg\" alt=\"tools\" class=\"me-2\" width=\"18\" height=\"18\" />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\">\r\n <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n <div class=\"preview-detail-grid\">\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Service Provider</span>\r\n <span class=\"preview-value\">{{ tool.providerName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Tools / Equipment</span>\r\n <span class=\"preview-value\">{{ tool.toolName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Manufacturer</span>\r\n <span class=\"preview-value\">{{ tool.make || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Model</span>\r\n <span class=\"preview-value\">{{ tool.model || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Serial Number</span>\r\n <span class=\"preview-value\">{{ tool.serialNumber || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Years of Experience</span>\r\n <span class=\"preview-value\">{{ tool.year || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Self Ability Rating</span>\r\n <span class=\"preview-value stars-readonly\">\r\n <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\"></ngx-stars>\r\n </span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Active</span>\r\n <span class=\"preview-value\">\r\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"tool.profileVisibility\" disabled>\r\n </span>\r\n </div>\r\n <div class=\"preview-cell preview-full\">\r\n <span class=\"preview-label\">Description</span>\r\n <span class=\"preview-value\">{{ tool.notes || '\u2014' }}</span>\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 (ratingOutput)=\"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)=\"openDashboardModal()\"\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>\r\n\r\n<!-- Dashboard Confirmation Modal -->\r\n<div class=\"dashboard-modal-overlay\" *ngIf=\"showDashboardModal\" (click)=\"closeDashboardModal()\">\r\n <div class=\"dashboard-modal\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"dashboard-modal-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"12\" cy=\"12\" r=\"11\" stroke=\"#22c55e\" stroke-width=\"1.5\"/>\r\n <path d=\"M7 12.5l3.5 3.5 6.5-7\" stroke=\"#22c55e\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n <h3 class=\"dashboard-modal-title\">All Information Saved!</h3>\r\n <p class=\"dashboard-modal-message\">\r\n Your profile setup is complete. All your information has been saved successfully.\r\n Clicking <strong>Go to Dashboard</strong> will take you to your dashboard.\r\n </p>\r\n <div class=\"dashboard-modal-actions\">\r\n <button type=\"button\" class=\"modal-cancel-btn\" (click)=\"closeDashboardModal()\">Cancel</button>\r\n <button type=\"button\" class=\"modal-confirm-btn\" [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\"\r\n (click)=\"closeDashboardModal(); saveFinal()\">\r\n Go to Dashboard\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: ["@charset \"UTF-8\";.tools-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}.tools-container.last{min-height:unset}.tools-container h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.tools-container .info{font-size:14px;color:#64748b;margin-bottom:24px}.content-part{background:#fff}.content-part p{font-size:13px;color:#64748b}.content-part div{font-size:14px}.content-part div .label{font-size:12px!important;font-weight:700!important;color:#64748b!important;text-transform:uppercase;letter-spacing:.05em;padding-bottom:6px!important}.content-part .row{margin-top:-15px}.content-part .sub-section{padding:0 10px}.content-part .sub-section .title{font-size:15px;font-weight:500;color:#1e293b}.content-part .sub-section .info-title{font-size:12px;font-weight:400;color:#64748b;margin-left:5px}.content-part .sub-section .content{font-size:13px;color:#64748b}.content-part .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px;color:#64748b}.content-part .sub-section .subsection input{width:30%}.content-part .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#1e293b}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;height:42px;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;background:#f9fafb;transition:all .2s ease}.content-part .search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.content-part .search-part input::placeholder{color:#94a3b8}.content-part .search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;display:flex;align-items:center;justify-content:center;margin-right:0;border:none;cursor:pointer;transition:all .2s ease}.content-part .search-part .btn:hover{background:#2d5a8a}.content-part .search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.content-part textarea{width:100%;min-height:96px;background:#f9fafb;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-size:15px;color:#1e293b;resize:vertical;outline:none;transition:all .2s ease}.content-part textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .tools-section{margin-left:5px}.content-part .tools-section .category-title{margin-bottom:8px;font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-left:5px}.content-part .tools-section .text-title{font-size:14px;margin-left:3px;color:#1e293b}.content-part .tools-section input[type=checkbox]{border:1.5px solid #e2e8f0!important;height:14px!important;width:15px!important;border-radius:6px!important;margin:2px;accent-color:#4077AD}.content-part .tools-section input[type=checkbox]:checked{background-color:#4077ad!important;border:1.5px solid #4077AD!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:#4077ad;width:15px;display:flex;justify-content:center;border:1.5px solid #4077AD;height:14px;align-items:center;border-radius:6px}.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:#22c55e!important;border:1px solid #22c55e!important}.copyAll{position:absolute;right:0;text-align:end;top:-40px}.close-popup{position:absolute;right:7px;top:4px;width:25px;cursor:pointer;opacity:.6;transition:all .2s ease}.close-popup:hover{opacity:1}.form-control{color:#1e293b;background:#f9fafb!important;font-size:15px;height:42px;border:1.5px solid #e2e8f0;border-radius:8px;transition:all .2s ease}.form-control:focus{border-color:#4077ad;background:#fff!important;box-shadow:0 0 0 3px #4077ad1f!important}.form-control:focus{border:1.5px solid #4077AD;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .nav-link{color:#64748b!important}::ng-deep .nav-link.active{color:#4077ad!important;font-weight:600}.loader{filter:blur(3px)}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.back-btn{height:42px;min-width:130px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.back-btn.edit{padding:5px 20px;min-height:20px;min-width:auto}.back-btn.add{background:#2d5a8a;color:#fff;border:none}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-left:15px}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.save-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.create-btn{height:42px;min-width:9rem;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.create-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.create-btn:active{transform:translateY(0)}.continue-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.continue-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.continue-btn:active{transform:translateY(0)}.continue-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;margin-bottom:16px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden;background:#fff;transition:box-shadow .25s ease}.skill-preview-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;font-size:15px;font-weight:700;color:#1e293b;border-bottom:1px solid transparent;cursor:pointer}.skill-preview-header.open{background:#ebf2f9;color:#2d5a8a;border-bottom:1px solid #e2e8f0}.skill-preview-body{padding:0;background:#fff}.skill-preview-body label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.skill-preview-body .value{font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word}h5.title{font-size:22px;font-weight:700;color:#1e293b!important;margin-bottom:4px}.preview-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.preview-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0;border-right:1px solid #e2e8f0}.preview-cell:nth-child(3n){border-right:none}.preview-full{grid-column:1/-1;border-right:none;border-bottom:none}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.stars-readonly{pointer-events:none;display:block}.action-btns{display:flex;justify-content:space-between;align-items:center}.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:16px}.actions button{height:42px;padding:10px 22px;border:none;border-radius:8px;font-size:14px;transition:all .2s ease;font-weight:600;min-width:120px;cursor:pointer}.actions .secondary{color:#64748b;background:#fff;border:1.5px solid #e2e8f0}.actions .secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.actions .primary{background:#4077ad;color:#fff}.actions .primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.actions .primary:active{transform:translateY(0)}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:64px}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;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 only screen and (min-width: 300px) and (max-width: 450px){.modal-content .close-popup{width:16px}}@media (max-width: 600px){.actions{flex-direction:column;align-items:stretch}.actions button{width:100%}}@media screen and (max-width: 767px){.tools-container h3{font-size:18px}.form-control,textarea{font-size:16px}.tools-container{padding:16px}.tools-container .mob-view{display:flex;justify-content:space-between;flex-direction:column-reverse;gap:8px}.tools-container .mob-res{flex-direction:column-reverse;gap:8px}.footer-actions{flex-direction:column-reverse;gap:8px;margin-top:48px}.continue-btn{padding:10px 22px;width:100%}.back-btn{width:100%}.save-btn{padding:10px 15px;width:unset;margin-left:0!important}.preview-detail-grid{grid-template-columns:1fr}.preview-cell{border-right:none}}.dashboard-modal-overlay{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:1050;animation:fadeInOverlay .2s ease}@keyframes fadeInOverlay{0%{opacity:0}to{opacity:1}}.dashboard-modal{background:#fff;border-radius:12px;padding:40px 36px 32px;max-width:440px;width:90%;text-align:center;box-shadow:0 20px 60px #0000002e;animation:slideUpModal .25s ease}@keyframes slideUpModal{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.dashboard-modal-icon{display:flex;justify-content:center;margin-bottom:20px}.dashboard-modal-icon svg{width:56px;height:56px}.dashboard-modal-title{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:12px}.dashboard-modal-message{font-size:14px;color:#64748b;line-height:1.6;margin-bottom:28px}.dashboard-modal-actions{display:flex;gap:12px;justify-content:center}.modal-cancel-btn{height:42px;min-width:110px;border-radius:8px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.modal-cancel-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.modal-confirm-btn{height:42px;min-width:150px;border-radius:8px;border:none;background:#4077ad;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.modal-confirm-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.modal-confirm-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}\n"], dependencies: [{ kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "component", type: NgxStarsComponent, selector: "ngx-stars", inputs: ["maxStars", "initialStars", "readonly", "size", "color", "animation", "animationSpeed", "customPadding", "wholeStars", "customStarIcons"], outputs: ["ratingOutput"] }, { kind: "directive", type: i14.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { 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$1.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i14$1.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }], animations: [
|
|
8707
8707
|
trigger('expandCollapse', [
|
|
8708
8708
|
state('open', style({
|
|
8709
8709
|
height: '*',
|
|
@@ -8741,7 +8741,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
8741
8741
|
})),
|
|
8742
8742
|
transition('open <=> closed', animate('300ms ease'))
|
|
8743
8743
|
])
|
|
8744
|
-
], template: "<!-- Tool PREVIEW LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n <h5 class=\"title text-secondary\"><i class=\"bi bi-tools me-2\" style=\"color:#0891b2;\"></i>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\">\r\n <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n <div class=\"preview-detail-grid\">\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Service Provider</span>\r\n <span class=\"preview-value\">{{ tool.providerName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Tools / Equipment</span>\r\n <span class=\"preview-value\">{{ tool.toolName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Manufacturer</span>\r\n <span class=\"preview-value\">{{ tool.make || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Model</span>\r\n <span class=\"preview-value\">{{ tool.model || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Serial Number</span>\r\n <span class=\"preview-value\">{{ tool.serialNumber || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Years of Experience</span>\r\n <span class=\"preview-value\">{{ tool.year || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Self Ability Rating</span>\r\n <span class=\"preview-value stars-readonly\">\r\n <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\"></ngx-stars>\r\n </span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Active</span>\r\n <span class=\"preview-value\">\r\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"tool.profileVisibility\" disabled>\r\n </span>\r\n </div>\r\n <div class=\"preview-cell preview-full\">\r\n <span class=\"preview-label\">Description</span>\r\n <span class=\"preview-value\">{{ tool.notes || '\u2014' }}</span>\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 (ratingOutput)=\"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)=\"openDashboardModal()\"\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>\r\n\r\n<!-- Dashboard Confirmation Modal -->\r\n<div class=\"dashboard-modal-overlay\" *ngIf=\"showDashboardModal\" (click)=\"closeDashboardModal()\">\r\n <div class=\"dashboard-modal\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"dashboard-modal-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"12\" cy=\"12\" r=\"11\" stroke=\"#22c55e\" stroke-width=\"1.5\"/>\r\n <path d=\"M7 12.5l3.5 3.5 6.5-7\" stroke=\"#22c55e\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n <h3 class=\"dashboard-modal-title\">All Information Saved!</h3>\r\n <p class=\"dashboard-modal-message\">\r\n Your profile setup is complete. All your information has been saved successfully.\r\n Clicking <strong>Go to Dashboard</strong> will take you to your dashboard.\r\n </p>\r\n <div class=\"dashboard-modal-actions\">\r\n <button type=\"button\" class=\"modal-cancel-btn\" (click)=\"closeDashboardModal()\">Cancel</button>\r\n <button type=\"button\" class=\"modal-confirm-btn\" [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\"\r\n (click)=\"closeDashboardModal(); saveFinal()\">\r\n Go to Dashboard\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: ["@charset \"UTF-8\";.tools-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}.tools-container.last{min-height:unset}.tools-container h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.tools-container .info{font-size:14px;color:#64748b;margin-bottom:24px}.content-part{background:#fff}.content-part p{font-size:13px;color:#64748b}.content-part div{font-size:14px}.content-part div .label{font-size:12px!important;font-weight:700!important;color:#64748b!important;text-transform:uppercase;letter-spacing:.05em;padding-bottom:6px!important}.content-part .row{margin-top:-15px}.content-part .sub-section{padding:0 10px}.content-part .sub-section .title{font-size:15px;font-weight:500;color:#1e293b}.content-part .sub-section .info-title{font-size:12px;font-weight:400;color:#64748b;margin-left:5px}.content-part .sub-section .content{font-size:13px;color:#64748b}.content-part .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px;color:#64748b}.content-part .sub-section .subsection input{width:30%}.content-part .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#1e293b}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;height:42px;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;background:#f9fafb;transition:all .2s ease}.content-part .search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.content-part .search-part input::placeholder{color:#94a3b8}.content-part .search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;display:flex;align-items:center;justify-content:center;margin-right:0;border:none;cursor:pointer;transition:all .2s ease}.content-part .search-part .btn:hover{background:#2d5a8a}.content-part .search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.content-part textarea{width:100%;min-height:96px;background:#f9fafb;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-size:15px;color:#1e293b;resize:vertical;outline:none;transition:all .2s ease}.content-part textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .tools-section{margin-left:5px}.content-part .tools-section .category-title{margin-bottom:8px;font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-left:5px}.content-part .tools-section .text-title{font-size:14px;margin-left:3px;color:#1e293b}.content-part .tools-section input[type=checkbox]{border:1.5px solid #e2e8f0!important;height:14px!important;width:15px!important;border-radius:6px!important;margin:2px;accent-color:#4077AD}.content-part .tools-section input[type=checkbox]:checked{background-color:#4077ad!important;border:1.5px solid #4077AD!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:#4077ad;width:15px;display:flex;justify-content:center;border:1.5px solid #4077AD;height:14px;align-items:center;border-radius:6px}.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:#22c55e!important;border:1px solid #22c55e!important}.copyAll{position:absolute;right:0;text-align:end;top:-40px}.close-popup{position:absolute;right:7px;top:4px;width:25px;cursor:pointer;opacity:.6;transition:all .2s ease}.close-popup:hover{opacity:1}.form-control{color:#1e293b;background:#f9fafb!important;font-size:15px;height:42px;border:1.5px solid #e2e8f0;border-radius:8px;transition:all .2s ease}.form-control:focus{border-color:#4077ad;background:#fff!important;box-shadow:0 0 0 3px #4077ad1f!important}.form-control:focus{border:1.5px solid #4077AD;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .nav-link{color:#64748b!important}::ng-deep .nav-link.active{color:#4077ad!important;font-weight:600}.loader{filter:blur(3px)}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.back-btn{height:42px;min-width:130px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.back-btn.edit{padding:5px 20px;min-height:20px;min-width:auto}.back-btn.add{background:#2d5a8a;color:#fff;border:none}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-left:15px}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.save-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.create-btn{height:42px;min-width:9rem;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.create-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.create-btn:active{transform:translateY(0)}.continue-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.continue-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.continue-btn:active{transform:translateY(0)}.continue-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;margin-bottom:16px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden;background:#fff;transition:box-shadow .25s ease}.skill-preview-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;font-size:15px;font-weight:700;color:#1e293b;border-bottom:1px solid transparent;cursor:pointer}.skill-preview-header.open{background:#ebf2f9;color:#2d5a8a;border-bottom:1px solid #e2e8f0}.skill-preview-body{padding:0;background:#fff}.skill-preview-body label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.skill-preview-body .value{font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word}h5.title{font-size:22px;font-weight:700;color:#1e293b!important;margin-bottom:4px}.preview-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.preview-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0;border-right:1px solid #e2e8f0}.preview-cell:nth-child(3n){border-right:none}.preview-full{grid-column:1/-1;border-right:none;border-bottom:none}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.stars-readonly{pointer-events:none;display:block}.action-btns{display:flex;justify-content:space-between;align-items:center}.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:16px}.actions button{height:42px;padding:10px 22px;border:none;border-radius:8px;font-size:14px;transition:all .2s ease;font-weight:600;min-width:120px;cursor:pointer}.actions .secondary{color:#64748b;background:#fff;border:1.5px solid #e2e8f0}.actions .secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.actions .primary{background:#4077ad;color:#fff}.actions .primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.actions .primary:active{transform:translateY(0)}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:64px}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;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 only screen and (min-width: 300px) and (max-width: 450px){.modal-content .close-popup{width:16px}}@media (max-width: 600px){.actions{flex-direction:column;align-items:stretch}.actions button{width:100%}}@media screen and (max-width: 767px){.tools-container h3{font-size:18px}.form-control,textarea{font-size:16px}.tools-container{padding:16px}.tools-container .mob-view{display:flex;justify-content:space-between;flex-direction:column-reverse;gap:8px}.tools-container .mob-res{flex-direction:column-reverse;gap:8px}.footer-actions{flex-direction:column-reverse;gap:8px;margin-top:48px}.continue-btn{padding:10px 22px;width:100%}.back-btn{width:100%}.save-btn{padding:10px 15px;width:unset;margin-left:0!important}.preview-detail-grid{grid-template-columns:1fr}.preview-cell{border-right:none}}.dashboard-modal-overlay{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:1050;animation:fadeInOverlay .2s ease}@keyframes fadeInOverlay{0%{opacity:0}to{opacity:1}}.dashboard-modal{background:#fff;border-radius:12px;padding:40px 36px 32px;max-width:440px;width:90%;text-align:center;box-shadow:0 20px 60px #0000002e;animation:slideUpModal .25s ease}@keyframes slideUpModal{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.dashboard-modal-icon{display:flex;justify-content:center;margin-bottom:20px}.dashboard-modal-icon svg{width:56px;height:56px}.dashboard-modal-title{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:12px}.dashboard-modal-message{font-size:14px;color:#64748b;line-height:1.6;margin-bottom:28px}.dashboard-modal-actions{display:flex;gap:12px;justify-content:center}.modal-cancel-btn{height:42px;min-width:110px;border-radius:8px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.modal-cancel-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.modal-confirm-btn{height:42px;min-width:150px;border-radius:8px;border:none;background:#4077ad;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.modal-confirm-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.modal-confirm-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}\n"] }]
|
|
8744
|
+
], template: "<!-- Tool PREVIEW LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n <h5 class=\"title text-secondary\"><img src=\"/assets/images/icons/tools.svg\" alt=\"tools\" class=\"me-2\" width=\"18\" height=\"18\" />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\">\r\n <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n <div class=\"preview-detail-grid\">\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Service Provider</span>\r\n <span class=\"preview-value\">{{ tool.providerName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Tools / Equipment</span>\r\n <span class=\"preview-value\">{{ tool.toolName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Manufacturer</span>\r\n <span class=\"preview-value\">{{ tool.make || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Model</span>\r\n <span class=\"preview-value\">{{ tool.model || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Serial Number</span>\r\n <span class=\"preview-value\">{{ tool.serialNumber || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Years of Experience</span>\r\n <span class=\"preview-value\">{{ tool.year || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Self Ability Rating</span>\r\n <span class=\"preview-value stars-readonly\">\r\n <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\"></ngx-stars>\r\n </span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Active</span>\r\n <span class=\"preview-value\">\r\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"tool.profileVisibility\" disabled>\r\n </span>\r\n </div>\r\n <div class=\"preview-cell preview-full\">\r\n <span class=\"preview-label\">Description</span>\r\n <span class=\"preview-value\">{{ tool.notes || '\u2014' }}</span>\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 (ratingOutput)=\"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)=\"openDashboardModal()\"\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>\r\n\r\n<!-- Dashboard Confirmation Modal -->\r\n<div class=\"dashboard-modal-overlay\" *ngIf=\"showDashboardModal\" (click)=\"closeDashboardModal()\">\r\n <div class=\"dashboard-modal\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"dashboard-modal-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"12\" cy=\"12\" r=\"11\" stroke=\"#22c55e\" stroke-width=\"1.5\"/>\r\n <path d=\"M7 12.5l3.5 3.5 6.5-7\" stroke=\"#22c55e\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n <h3 class=\"dashboard-modal-title\">All Information Saved!</h3>\r\n <p class=\"dashboard-modal-message\">\r\n Your profile setup is complete. All your information has been saved successfully.\r\n Clicking <strong>Go to Dashboard</strong> will take you to your dashboard.\r\n </p>\r\n <div class=\"dashboard-modal-actions\">\r\n <button type=\"button\" class=\"modal-cancel-btn\" (click)=\"closeDashboardModal()\">Cancel</button>\r\n <button type=\"button\" class=\"modal-confirm-btn\" [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\"\r\n (click)=\"closeDashboardModal(); saveFinal()\">\r\n Go to Dashboard\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: ["@charset \"UTF-8\";.tools-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}.tools-container.last{min-height:unset}.tools-container h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.tools-container .info{font-size:14px;color:#64748b;margin-bottom:24px}.content-part{background:#fff}.content-part p{font-size:13px;color:#64748b}.content-part div{font-size:14px}.content-part div .label{font-size:12px!important;font-weight:700!important;color:#64748b!important;text-transform:uppercase;letter-spacing:.05em;padding-bottom:6px!important}.content-part .row{margin-top:-15px}.content-part .sub-section{padding:0 10px}.content-part .sub-section .title{font-size:15px;font-weight:500;color:#1e293b}.content-part .sub-section .info-title{font-size:12px;font-weight:400;color:#64748b;margin-left:5px}.content-part .sub-section .content{font-size:13px;color:#64748b}.content-part .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px;color:#64748b}.content-part .sub-section .subsection input{width:30%}.content-part .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#1e293b}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;height:42px;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;background:#f9fafb;transition:all .2s ease}.content-part .search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.content-part .search-part input::placeholder{color:#94a3b8}.content-part .search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;display:flex;align-items:center;justify-content:center;margin-right:0;border:none;cursor:pointer;transition:all .2s ease}.content-part .search-part .btn:hover{background:#2d5a8a}.content-part .search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.content-part textarea{width:100%;min-height:96px;background:#f9fafb;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-size:15px;color:#1e293b;resize:vertical;outline:none;transition:all .2s ease}.content-part textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .tools-section{margin-left:5px}.content-part .tools-section .category-title{margin-bottom:8px;font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-left:5px}.content-part .tools-section .text-title{font-size:14px;margin-left:3px;color:#1e293b}.content-part .tools-section input[type=checkbox]{border:1.5px solid #e2e8f0!important;height:14px!important;width:15px!important;border-radius:6px!important;margin:2px;accent-color:#4077AD}.content-part .tools-section input[type=checkbox]:checked{background-color:#4077ad!important;border:1.5px solid #4077AD!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:#4077ad;width:15px;display:flex;justify-content:center;border:1.5px solid #4077AD;height:14px;align-items:center;border-radius:6px}.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:#22c55e!important;border:1px solid #22c55e!important}.copyAll{position:absolute;right:0;text-align:end;top:-40px}.close-popup{position:absolute;right:7px;top:4px;width:25px;cursor:pointer;opacity:.6;transition:all .2s ease}.close-popup:hover{opacity:1}.form-control{color:#1e293b;background:#f9fafb!important;font-size:15px;height:42px;border:1.5px solid #e2e8f0;border-radius:8px;transition:all .2s ease}.form-control:focus{border-color:#4077ad;background:#fff!important;box-shadow:0 0 0 3px #4077ad1f!important}.form-control:focus{border:1.5px solid #4077AD;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .nav-link{color:#64748b!important}::ng-deep .nav-link.active{color:#4077ad!important;font-weight:600}.loader{filter:blur(3px)}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.back-btn{height:42px;min-width:130px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.back-btn.edit{padding:5px 20px;min-height:20px;min-width:auto}.back-btn.add{background:#2d5a8a;color:#fff;border:none}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-left:15px}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.save-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.create-btn{height:42px;min-width:9rem;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.create-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.create-btn:active{transform:translateY(0)}.continue-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.continue-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.continue-btn:active{transform:translateY(0)}.continue-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;margin-bottom:16px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden;background:#fff;transition:box-shadow .25s ease}.skill-preview-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;font-size:15px;font-weight:700;color:#1e293b;border-bottom:1px solid transparent;cursor:pointer}.skill-preview-header.open{background:#ebf2f9;color:#2d5a8a;border-bottom:1px solid #e2e8f0}.skill-preview-body{padding:0;background:#fff}.skill-preview-body label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.skill-preview-body .value{font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word}h5.title{font-size:22px;font-weight:700;color:#1e293b!important;margin-bottom:4px}.preview-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.preview-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0;border-right:1px solid #e2e8f0}.preview-cell:nth-child(3n){border-right:none}.preview-full{grid-column:1/-1;border-right:none;border-bottom:none}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.stars-readonly{pointer-events:none;display:block}.action-btns{display:flex;justify-content:space-between;align-items:center}.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:16px}.actions button{height:42px;padding:10px 22px;border:none;border-radius:8px;font-size:14px;transition:all .2s ease;font-weight:600;min-width:120px;cursor:pointer}.actions .secondary{color:#64748b;background:#fff;border:1.5px solid #e2e8f0}.actions .secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.actions .primary{background:#4077ad;color:#fff}.actions .primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.actions .primary:active{transform:translateY(0)}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:64px}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;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 only screen and (min-width: 300px) and (max-width: 450px){.modal-content .close-popup{width:16px}}@media (max-width: 600px){.actions{flex-direction:column;align-items:stretch}.actions button{width:100%}}@media screen and (max-width: 767px){.tools-container h3{font-size:18px}.form-control,textarea{font-size:16px}.tools-container{padding:16px}.tools-container .mob-view{display:flex;justify-content:space-between;flex-direction:column-reverse;gap:8px}.tools-container .mob-res{flex-direction:column-reverse;gap:8px}.footer-actions{flex-direction:column-reverse;gap:8px;margin-top:48px}.continue-btn{padding:10px 22px;width:100%}.back-btn{width:100%}.save-btn{padding:10px 15px;width:unset;margin-left:0!important}.preview-detail-grid{grid-template-columns:1fr}.preview-cell{border-right:none}}.dashboard-modal-overlay{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:1050;animation:fadeInOverlay .2s ease}@keyframes fadeInOverlay{0%{opacity:0}to{opacity:1}}.dashboard-modal{background:#fff;border-radius:12px;padding:40px 36px 32px;max-width:440px;width:90%;text-align:center;box-shadow:0 20px 60px #0000002e;animation:slideUpModal .25s ease}@keyframes slideUpModal{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.dashboard-modal-icon{display:flex;justify-content:center;margin-bottom:20px}.dashboard-modal-icon svg{width:56px;height:56px}.dashboard-modal-title{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:12px}.dashboard-modal-message{font-size:14px;color:#64748b;line-height:1.6;margin-bottom:28px}.dashboard-modal-actions{display:flex;gap:12px;justify-content:center}.modal-cancel-btn{height:42px;min-width:110px;border-radius:8px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.modal-cancel-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.modal-confirm-btn{height:42px;min-width:150px;border-radius:8px;border:none;background:#4077ad;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.modal-confirm-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.modal-confirm-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}\n"] }]
|
|
8745
8745
|
}], ctorParameters: () => [{ type: ToolService }, { type: UserToolService }, { type: i8.UntypedFormBuilder }, { type: UserService }, { type: UtilsService }, { type: CredentialingStore }, { type: i1$1.TokenService }, { type: i1$1.RoleContextService }, { type: UserDetailService }, { type: undefined, decorators: [{
|
|
8746
8746
|
type: Inject,
|
|
8747
8747
|
args: [LIBRARY_CONFIG]
|
|
@@ -32288,11 +32288,11 @@ class Step2CoverageComponent {
|
|
|
32288
32288
|
}));
|
|
32289
32289
|
}
|
|
32290
32290
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Step2CoverageComponent, deps: [{ token: CredentialingStore }, { token: UsMapLatestService }, { token: PostalCodeServices }, { token: UserCoverageAreaService }, { token: AlertService }, { token: i1$1.RoleContextService }, { token: i1$1.TokenService }], target: i0.ɵɵFactoryTarget.Component });
|
|
32291
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: Step2CoverageComponent, isStandalone: false, selector: "app-coverage", inputs: { providerId: "providerId", providerName: "providerName", states: "states" }, ngImport: i0, template: "<div class=\"coverage-container\">\r\n <div class=\"first-section\">\r\n <h4 class=\"head\">Coverage Area</h4>\r\n </div>\r\n\r\n <div class=\"coverage-options\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n <h6 class=\"coverage-question\">Where can you complete assignments?</h6>\r\n <div class=\"d-flex gap-1 align-items-center\">\r\n <label class=\"form-check-label\">Show Map</label>\r\n <div class=\"form-check form-switch ms-1\">\r\n <input class=\"form-check-input\" type=\"checkbox\" (change)=\"toggleMap()\" role=\"switch\">\r\n </div>\r\n </div>\r\n </div>\r\n <hr class=\"m-0 border-3\">\r\n\r\n <div class=\"pb-1 d-flex align-items-center mt-2\">\r\n <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length > 0\"></span>\r\n <span class=\"coverage-option-text ms-3\">My Current Coverage Area</span>\r\n </div>\r\n <div class=\"d-flex align-items-center option-cursor\" (click)=\"skip()\">\r\n <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length == 0\"></span>\r\n <span class=\"coverage-option-text ms-3\">Not Applicable</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"state-selector\">\r\n <div class=\"row pb-2\">\r\n <div class=\"col-md-12\">\r\n <div class=\"position-relative\">\r\n <ng-select [clearable]=\"true\" [multiple]=\"true\" (change)=\"setSelectedStates($event)\" [items]=\"states\"\r\n [(ngModel)]=\"selectedStates\" bindLabel=\"stateName\" bindValue=\"stateCode\" [closeOnSelect]=\"false\"\r\n placeholder=\"Select State\" id=\"reqStates\" [loading]=\"isStatesLoading\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <span class=\"form-check\">\r\n <span class=\"form-check-input-wrapper\">\r\n <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n </span>\r\n {{ item.stateName }}\r\n </span>\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <ng-container *ngIf=\"!isStatesLoading\">\r\n <span class=\"ng-value-label\">{{ item.stateName }}</span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-container>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"empty-message mt-4\" *ngIf=\"!isStatesLoading && coverages.length == 0\">\r\n <div class=\"text-center text-secondary\">No States Selected yet</div>\r\n </div>\r\n\r\n <div class=\"coverage-options\">\r\n <div class=\"col-md-10 col-12 py-2 map-wrapper\" [class.open]=\"showMap\">\r\n <us-map [filteredLocations]=\"filteredLocations\"></us-map>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12 mt-4\" *ngIf=\"!isStatesLoading\">\r\n <div *ngIf=\"coverages.length > 0\" class=\"counties-heading\">\r\n <h4 class=\"head\">Coverage Area Counties</h4>\r\n </div>\r\n <div class=\"row pt-2 pb-2\">\r\n <div class=\"col-12\">\r\n <div class=\"row\">\r\n <div class=\"col-12\" *ngFor=\"let coverage of coverages; let coverageIndex = index\">\r\n <div class=\"state-header-row\">\r\n <div class=\"state-header-left\">\r\n <div class=\"select-all-wrap\">\r\n <input type=\"checkbox\" class=\"state-checkbox\"\r\n id=\"stateCheckbox{{ coverage.state + coverageIndex }}\"\r\n [(ngModel)]=\"coverage.checked\"\r\n [indeterminate]=\"coverage.indeterminate\"\r\n (change)=\"onSelectAllChanged(coverage)\" />\r\n <label class=\"select-all-label\" for=\"stateCheckbox{{ coverage?.state + coverageIndex }}\">\r\n Select All\r\n </label>\r\n </div>\r\n <label class=\"state-name\" [attr.for]=\"'stateCheckbox' + coverage.state + coverageIndex\">\r\n {{ coverage.state | stateName }}\r\n </label>\r\n </div>\r\n <button type=\"button\" class=\"state-toggle-btn\" (click)=\"coverage.isShow = !coverage?.isShow\">\r\n <img [src]=\"coverage?.isShow ? '/assets/images/icons/arrow-up.svg' : '/assets/images/icons/arrow-down.svg'\" alt=\"toggle\" />\r\n </button>\r\n </div>\r\n <hr class=\"mt-0\" />\r\n <ng-container *ngIf=\"coverage?.isShow\">\r\n <div class=\"form-group mb-1\">\r\n <input type=\"text\" class=\"font-default form-check-inline form-control h-37\"\r\n placeholder=\"Select Counties In {{ coverage.state | stateName }}\"\r\n [(ngModel)]=\"coverage.query\" />\r\n </div>\r\n <div class=\"county-list-scroll row m-lg-2\">\r\n <div class=\"list-group-item col-3 res-coverage col-sm-6 p-1\"\r\n *ngFor=\"let county of coverage.counties | SearchBy: 'countyName':coverage.query; let countyIndex = index\">\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"checkbox\"\r\n [id]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\"\r\n [(ngModel)]=\"county.checked\"\r\n (change)=\"onChangedCounty($event, coverage.state, county.countyName)\" />\r\n <label class=\"form-check-label\"\r\n [for]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\">\r\n {{ county.countyName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"previousStep()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"skip()\">Skip</button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"coverageSave\" [ng2-loading]=\"coverageSave\"\r\n (click)=\"saveCoverage()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".coverage-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}.coverage-container .head{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.coverage-container p{font-size:14px;color:#64748b;margin-bottom:16px;margin-top:20px;font-weight:400}.coverage-container .form-check-label{font-size:15px;color:#64748b}.coverage-container .first-section span{color:#64748b;font-size:13px}.coverage-container .location-inputs{display:flex;gap:12px;margin-bottom:32px;margin-top:16px}.coverage-container .location-inputs input{flex:1;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;box-sizing:border-box}.coverage-container .location-inputs input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.coverage-container .location-inputs input::placeholder{color:#94a3b8;font-size:14px}.coverage-container .state-selector .empty-message{width:100%;padding:16px;background:#f8fafc;text-align:center;color:#64748b;border-radius:8px;border:1px solid #e2e8f0;font-size:14px}.coverage-container .state-selector .custom-control{font-size:14px;display:flex;align-items:center;gap:7px;color:#64748b;padding-left:13px}.coverage-container .state-selector .custom-control-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.coverage-container .state-selector .form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.coverage-container .coverage-options{margin-bottom:16px}.coverage-container .coverage-options label{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;gap:6px;width:110px}.coverage-container .coverage-options label .show-map{margin-left:auto}.coverage-container .coverage-options .icon-black{filter:brightness(0) saturate(100%) invert(10%) sepia(47%) saturate(3454%) hue-rotate(184deg) brightness(98%) contrast(101%)}.coverage-container .coverage-options .icon-gray{filter:brightness(0) saturate(100%) invert(100%) sepia(4%) saturate(29%) hue-rotate(68deg) brightness(112%) contrast(80%)}.coverage-container .coverage-options .form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.coverage-container .coverage-options .square-box{width:12px;height:12px;border:2px solid;display:inline-block}.coverage-container .coverage-options .square-box.black{background:#002b49;border:0;width:15px;height:14px}.coverage-container .coverage-options .square-box.gray{border:1px solid rgba(128,128,128,.23)!important;border:0;width:15px;height:15px}.coverage-container .coverage-options .map-wrapper{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s ease,opacity .3s ease}.coverage-container .coverage-options .map-wrapper>*{overflow:hidden}.coverage-container .coverage-options .map-wrapper.open{grid-template-rows:1fr;opacity:1}.coverage-container .navigation-buttons{display:flex;justify-content:flex-end;gap:12px;margin-top:48px;margin-bottom:32px}.coverage-container .navigation-buttons .back{height:42px;min-width:130px;padding:10px 22px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.coverage-container .navigation-buttons .back:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.coverage-container .navigation-buttons .next{height:42px;min-width:130px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.coverage-container .navigation-buttons .next:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.coverage-container .navigation-buttons .next:active{transform:translateY(0)}.coverage-container .navigation-buttons .next:disabled{background:#94a3b8;cursor:not-allowed;transform:none}::ng-deep .ng-select .ng-select-container{min-height:42px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:14px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container:hover{border-color:#94a3b8}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8;font-size:14px}.custom-checkbox1{display:inline-block;width:16px;height:16px;border:1.5px solid #e2e8f0;margin-right:8px;vertical-align:middle;position:relative;cursor:pointer;border-radius:6px;background-color:#fff;transition:all .2s ease}.custom-checkbox1.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox1.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg)}.custom-checkbox2{display:inline-block;width:16px;height:16px;border:1.5px solid #e2e8f0;vertical-align:middle;position:relative;cursor:pointer;border-radius:6px;background-color:#fff;transition:all .2s ease}.custom-checkbox2.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox2.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg)}.select-loader{position:absolute;top:-28px;left:0;font-size:12px;color:#4077ad;display:flex;align-items:center;gap:6px}::ng-deep .form-check{display:block;min-height:1.5rem;margin-bottom:.125rem}.actions{display:flex;justify-content:space-between;margin:48px 0 32px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.icon-color{cursor:pointer;background:transparent;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.custom-control label{padding-top:8px;font-size:14px;color:#64748b}.coverage-question{font-size:15px;font-weight:600;color:#64748b;margin:0}.coverage-option-text{font-size:14px;color:#64748b}.option-cursor{cursor:pointer}.counties-heading{margin-bottom:8px}.state-header-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#ebf2f9;border:1px solid #e2e8f0;border-radius:8px 8px 0 0;gap:12px}.state-header-left{display:flex;align-items:center;gap:20px;flex:1}.select-all-wrap{display:flex;align-items:center;gap:6px}.state-checkbox{width:16px;height:16px;border:1.5px solid #e2e8f0;border-radius:6px;cursor:pointer;accent-color:#4077AD;flex-shrink:0}.select-all-label{font-size:13px;font-weight:600;color:#64748b;cursor:pointer;margin:0}.state-name{font-size:14px;font-weight:700;color:#1e293b;cursor:pointer;margin:0}.state-toggle-btn{background:none;border:none;padding:4px 6px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s ease;min-width:unset;height:auto;font-size:0}.state-toggle-btn:hover{background:#4077ad1f}.state-toggle-btn img{width:18px;height:18px}.county-list-scroll{height:160px;overflow-y:auto;padding-left:1rem}@media screen and (max-width: 767px){.coverage-container{padding:16px}.coverage-container .head{font-size:18px}.coverage-container input{font-size:16px}.actions{gap:8px;display:flex;flex-direction:column-reverse}.actions button{min-width:100%}.right-actions{gap:8px;justify-content:space-between;display:flex;flex-direction:column-reverse}.custom-control label{padding-top:0}.res-coverage{width:50%}.pointer{display:none}}\n"], dependencies: [{ kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UsMapComponent, selector: "us-map", inputs: ["selectedStates", "allowedStates", "isReadOnly", "filteredLocations"], outputs: ["onMapClick"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: SearchPipe, name: "SearchBy" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
|
|
32291
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: Step2CoverageComponent, isStandalone: false, selector: "app-coverage", inputs: { providerId: "providerId", providerName: "providerName", states: "states" }, ngImport: i0, template: "<div class=\"coverage-container\">\r\n <div class=\"first-section\">\r\n <h4 class=\"head\"><img src=\"/assets/images/icons/geo-alt.svg\" alt=\"coverage area\" class=\"me-2\" width=\"18\" height=\"18\" />Coverage Area</h4>\r\n </div>\r\n\r\n <div class=\"coverage-options\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n <h6 class=\"coverage-question\">Where can you complete assignments?</h6>\r\n <div class=\"d-flex gap-1 align-items-center\">\r\n <label class=\"form-check-label\">Show Map</label>\r\n <div class=\"form-check form-switch ms-1\">\r\n <input class=\"form-check-input\" type=\"checkbox\" (change)=\"toggleMap()\" role=\"switch\">\r\n </div>\r\n </div>\r\n </div>\r\n <hr class=\"m-0 border-3\">\r\n\r\n <div class=\"pb-1 d-flex align-items-center mt-2\">\r\n <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length > 0\"></span>\r\n <span class=\"coverage-option-text ms-3\">My Current Coverage Area</span>\r\n </div>\r\n <div class=\"d-flex align-items-center option-cursor\" (click)=\"skip()\">\r\n <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length == 0\"></span>\r\n <span class=\"coverage-option-text ms-3\">Not Applicable</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"state-selector\">\r\n <div class=\"row pb-2\">\r\n <div class=\"col-md-12\">\r\n <div class=\"position-relative\">\r\n <ng-select [clearable]=\"true\" [multiple]=\"true\" (change)=\"setSelectedStates($event)\" [items]=\"states\"\r\n [(ngModel)]=\"selectedStates\" bindLabel=\"stateName\" bindValue=\"stateCode\" [closeOnSelect]=\"false\"\r\n placeholder=\"Select State\" id=\"reqStates\" [loading]=\"isStatesLoading\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <span class=\"form-check\">\r\n <span class=\"form-check-input-wrapper\">\r\n <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n </span>\r\n {{ item.stateName }}\r\n </span>\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <ng-container *ngIf=\"!isStatesLoading\">\r\n <span class=\"ng-value-label\">{{ item.stateName }}</span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-container>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"empty-message mt-4\" *ngIf=\"!isStatesLoading && coverages.length == 0\">\r\n <div class=\"text-center text-secondary\">No States Selected yet</div>\r\n </div>\r\n\r\n <div class=\"coverage-options\">\r\n <div class=\"col-md-10 col-12 py-2 map-wrapper\" [class.open]=\"showMap\">\r\n <us-map [filteredLocations]=\"filteredLocations\"></us-map>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12 mt-4\" *ngIf=\"!isStatesLoading\">\r\n <div *ngIf=\"coverages.length > 0\" class=\"counties-heading\">\r\n <h4 class=\"head\">Coverage Area Counties</h4>\r\n </div>\r\n <div class=\"row pt-2 pb-2\">\r\n <div class=\"col-12\">\r\n <div class=\"row\">\r\n <div class=\"col-12\" *ngFor=\"let coverage of coverages; let coverageIndex = index\">\r\n <div class=\"state-header-row\">\r\n <div class=\"state-header-left\">\r\n <div class=\"select-all-wrap\">\r\n <input type=\"checkbox\" class=\"state-checkbox\"\r\n id=\"stateCheckbox{{ coverage.state + coverageIndex }}\"\r\n [(ngModel)]=\"coverage.checked\"\r\n [indeterminate]=\"coverage.indeterminate\"\r\n (change)=\"onSelectAllChanged(coverage)\" />\r\n <label class=\"select-all-label\" for=\"stateCheckbox{{ coverage?.state + coverageIndex }}\">\r\n Select All\r\n </label>\r\n </div>\r\n <label class=\"state-name\" [attr.for]=\"'stateCheckbox' + coverage.state + coverageIndex\">\r\n {{ coverage.state | stateName }}\r\n </label>\r\n </div>\r\n <button type=\"button\" class=\"state-toggle-btn\" (click)=\"coverage.isShow = !coverage?.isShow\">\r\n <img [src]=\"coverage?.isShow ? '/assets/images/icons/arrow-up.svg' : '/assets/images/icons/arrow-down.svg'\" alt=\"toggle\" />\r\n </button>\r\n </div>\r\n <hr class=\"mt-0\" />\r\n <ng-container *ngIf=\"coverage?.isShow\">\r\n <div class=\"form-group mb-1\">\r\n <input type=\"text\" class=\"font-default form-check-inline form-control h-37\"\r\n placeholder=\"Select Counties In {{ coverage.state | stateName }}\"\r\n [(ngModel)]=\"coverage.query\" />\r\n </div>\r\n <div class=\"county-list-scroll row m-lg-2\">\r\n <div class=\"list-group-item col-3 res-coverage col-sm-6 p-1\"\r\n *ngFor=\"let county of coverage.counties | SearchBy: 'countyName':coverage.query; let countyIndex = index\">\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"checkbox\"\r\n [id]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\"\r\n [(ngModel)]=\"county.checked\"\r\n (change)=\"onChangedCounty($event, coverage.state, county.countyName)\" />\r\n <label class=\"form-check-label\"\r\n [for]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\">\r\n {{ county.countyName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"previousStep()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"skip()\">Skip</button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"coverageSave\" [ng2-loading]=\"coverageSave\"\r\n (click)=\"saveCoverage()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".coverage-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}.coverage-container .head{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.coverage-container p{font-size:14px;color:#64748b;margin-bottom:16px;margin-top:20px;font-weight:400}.coverage-container .form-check-label{font-size:15px;color:#64748b}.coverage-container .first-section span{color:#64748b;font-size:13px}.coverage-container .location-inputs{display:flex;gap:12px;margin-bottom:32px;margin-top:16px}.coverage-container .location-inputs input{flex:1;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;box-sizing:border-box}.coverage-container .location-inputs input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.coverage-container .location-inputs input::placeholder{color:#94a3b8;font-size:14px}.coverage-container .state-selector .empty-message{width:100%;padding:16px;background:#f8fafc;text-align:center;color:#64748b;border-radius:8px;border:1px solid #e2e8f0;font-size:14px}.coverage-container .state-selector .custom-control{font-size:14px;display:flex;align-items:center;gap:7px;color:#64748b;padding-left:13px}.coverage-container .state-selector .custom-control-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.coverage-container .state-selector .form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.coverage-container .coverage-options{margin-bottom:16px}.coverage-container .coverage-options label{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;gap:6px;width:110px}.coverage-container .coverage-options label .show-map{margin-left:auto}.coverage-container .coverage-options .icon-black{filter:brightness(0) saturate(100%) invert(10%) sepia(47%) saturate(3454%) hue-rotate(184deg) brightness(98%) contrast(101%)}.coverage-container .coverage-options .icon-gray{filter:brightness(0) saturate(100%) invert(100%) sepia(4%) saturate(29%) hue-rotate(68deg) brightness(112%) contrast(80%)}.coverage-container .coverage-options .form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.coverage-container .coverage-options .square-box{width:12px;height:12px;border:2px solid;display:inline-block}.coverage-container .coverage-options .square-box.black{background:#002b49;border:0;width:15px;height:14px}.coverage-container .coverage-options .square-box.gray{border:1px solid rgba(128,128,128,.23)!important;border:0;width:15px;height:15px}.coverage-container .coverage-options .map-wrapper{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s ease,opacity .3s ease}.coverage-container .coverage-options .map-wrapper>*{overflow:hidden}.coverage-container .coverage-options .map-wrapper.open{grid-template-rows:1fr;opacity:1}.coverage-container .navigation-buttons{display:flex;justify-content:flex-end;gap:12px;margin-top:48px;margin-bottom:32px}.coverage-container .navigation-buttons .back{height:42px;min-width:130px;padding:10px 22px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.coverage-container .navigation-buttons .back:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.coverage-container .navigation-buttons .next{height:42px;min-width:130px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.coverage-container .navigation-buttons .next:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.coverage-container .navigation-buttons .next:active{transform:translateY(0)}.coverage-container .navigation-buttons .next:disabled{background:#94a3b8;cursor:not-allowed;transform:none}::ng-deep .ng-select .ng-select-container{min-height:42px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:14px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container:hover{border-color:#94a3b8}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8;font-size:14px}.custom-checkbox1{display:inline-block;width:16px;height:16px;border:1.5px solid #e2e8f0;margin-right:8px;vertical-align:middle;position:relative;cursor:pointer;border-radius:6px;background-color:#fff;transition:all .2s ease}.custom-checkbox1.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox1.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg)}.custom-checkbox2{display:inline-block;width:16px;height:16px;border:1.5px solid #e2e8f0;vertical-align:middle;position:relative;cursor:pointer;border-radius:6px;background-color:#fff;transition:all .2s ease}.custom-checkbox2.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox2.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg)}.select-loader{position:absolute;top:-28px;left:0;font-size:12px;color:#4077ad;display:flex;align-items:center;gap:6px}::ng-deep .form-check{display:block;min-height:1.5rem;margin-bottom:.125rem}.actions{display:flex;justify-content:space-between;margin:48px 0 32px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.icon-color{cursor:pointer;background:transparent;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.custom-control label{padding-top:8px;font-size:14px;color:#64748b}.coverage-question{font-size:15px;font-weight:600;color:#64748b;margin:0}.coverage-option-text{font-size:14px;color:#64748b}.option-cursor{cursor:pointer}.counties-heading{margin-bottom:8px}.state-header-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#ebf2f9;border:1px solid #e2e8f0;border-radius:8px 8px 0 0;gap:12px}.state-header-left{display:flex;align-items:center;gap:20px;flex:1}.select-all-wrap{display:flex;align-items:center;gap:6px}.state-checkbox{width:16px;height:16px;border:1.5px solid #e2e8f0;border-radius:6px;cursor:pointer;accent-color:#4077AD;flex-shrink:0}.select-all-label{font-size:13px;font-weight:600;color:#64748b;cursor:pointer;margin:0}.state-name{font-size:14px;font-weight:700;color:#1e293b;cursor:pointer;margin:0}.state-toggle-btn{background:none;border:none;padding:4px 6px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s ease;min-width:unset;height:auto;font-size:0}.state-toggle-btn:hover{background:#4077ad1f}.state-toggle-btn img{width:18px;height:18px}.county-list-scroll{height:160px;overflow-y:auto;padding-left:1rem}@media screen and (max-width: 767px){.coverage-container{padding:16px}.coverage-container .head{font-size:18px}.coverage-container input{font-size:16px}.actions{gap:8px;display:flex;flex-direction:column-reverse}.actions button{min-width:100%}.right-actions{gap:8px;justify-content:space-between;display:flex;flex-direction:column-reverse}.custom-control label{padding-top:0}.res-coverage{width:50%}.pointer{display:none}}\n"], dependencies: [{ kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UsMapComponent, selector: "us-map", inputs: ["selectedStates", "allowedStates", "isReadOnly", "filteredLocations"], outputs: ["onMapClick"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: SearchPipe, name: "SearchBy" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
|
|
32292
32292
|
}
|
|
32293
32293
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Step2CoverageComponent, decorators: [{
|
|
32294
32294
|
type: Component,
|
|
32295
|
-
args: [{ selector: 'app-coverage', standalone: false, template: "<div class=\"coverage-container\">\r\n <div class=\"first-section\">\r\n <h4 class=\"head\">Coverage Area</h4>\r\n </div>\r\n\r\n <div class=\"coverage-options\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n <h6 class=\"coverage-question\">Where can you complete assignments?</h6>\r\n <div class=\"d-flex gap-1 align-items-center\">\r\n <label class=\"form-check-label\">Show Map</label>\r\n <div class=\"form-check form-switch ms-1\">\r\n <input class=\"form-check-input\" type=\"checkbox\" (change)=\"toggleMap()\" role=\"switch\">\r\n </div>\r\n </div>\r\n </div>\r\n <hr class=\"m-0 border-3\">\r\n\r\n <div class=\"pb-1 d-flex align-items-center mt-2\">\r\n <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length > 0\"></span>\r\n <span class=\"coverage-option-text ms-3\">My Current Coverage Area</span>\r\n </div>\r\n <div class=\"d-flex align-items-center option-cursor\" (click)=\"skip()\">\r\n <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length == 0\"></span>\r\n <span class=\"coverage-option-text ms-3\">Not Applicable</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"state-selector\">\r\n <div class=\"row pb-2\">\r\n <div class=\"col-md-12\">\r\n <div class=\"position-relative\">\r\n <ng-select [clearable]=\"true\" [multiple]=\"true\" (change)=\"setSelectedStates($event)\" [items]=\"states\"\r\n [(ngModel)]=\"selectedStates\" bindLabel=\"stateName\" bindValue=\"stateCode\" [closeOnSelect]=\"false\"\r\n placeholder=\"Select State\" id=\"reqStates\" [loading]=\"isStatesLoading\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <span class=\"form-check\">\r\n <span class=\"form-check-input-wrapper\">\r\n <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n </span>\r\n {{ item.stateName }}\r\n </span>\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <ng-container *ngIf=\"!isStatesLoading\">\r\n <span class=\"ng-value-label\">{{ item.stateName }}</span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-container>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"empty-message mt-4\" *ngIf=\"!isStatesLoading && coverages.length == 0\">\r\n <div class=\"text-center text-secondary\">No States Selected yet</div>\r\n </div>\r\n\r\n <div class=\"coverage-options\">\r\n <div class=\"col-md-10 col-12 py-2 map-wrapper\" [class.open]=\"showMap\">\r\n <us-map [filteredLocations]=\"filteredLocations\"></us-map>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12 mt-4\" *ngIf=\"!isStatesLoading\">\r\n <div *ngIf=\"coverages.length > 0\" class=\"counties-heading\">\r\n <h4 class=\"head\">Coverage Area Counties</h4>\r\n </div>\r\n <div class=\"row pt-2 pb-2\">\r\n <div class=\"col-12\">\r\n <div class=\"row\">\r\n <div class=\"col-12\" *ngFor=\"let coverage of coverages; let coverageIndex = index\">\r\n <div class=\"state-header-row\">\r\n <div class=\"state-header-left\">\r\n <div class=\"select-all-wrap\">\r\n <input type=\"checkbox\" class=\"state-checkbox\"\r\n id=\"stateCheckbox{{ coverage.state + coverageIndex }}\"\r\n [(ngModel)]=\"coverage.checked\"\r\n [indeterminate]=\"coverage.indeterminate\"\r\n (change)=\"onSelectAllChanged(coverage)\" />\r\n <label class=\"select-all-label\" for=\"stateCheckbox{{ coverage?.state + coverageIndex }}\">\r\n Select All\r\n </label>\r\n </div>\r\n <label class=\"state-name\" [attr.for]=\"'stateCheckbox' + coverage.state + coverageIndex\">\r\n {{ coverage.state | stateName }}\r\n </label>\r\n </div>\r\n <button type=\"button\" class=\"state-toggle-btn\" (click)=\"coverage.isShow = !coverage?.isShow\">\r\n <img [src]=\"coverage?.isShow ? '/assets/images/icons/arrow-up.svg' : '/assets/images/icons/arrow-down.svg'\" alt=\"toggle\" />\r\n </button>\r\n </div>\r\n <hr class=\"mt-0\" />\r\n <ng-container *ngIf=\"coverage?.isShow\">\r\n <div class=\"form-group mb-1\">\r\n <input type=\"text\" class=\"font-default form-check-inline form-control h-37\"\r\n placeholder=\"Select Counties In {{ coverage.state | stateName }}\"\r\n [(ngModel)]=\"coverage.query\" />\r\n </div>\r\n <div class=\"county-list-scroll row m-lg-2\">\r\n <div class=\"list-group-item col-3 res-coverage col-sm-6 p-1\"\r\n *ngFor=\"let county of coverage.counties | SearchBy: 'countyName':coverage.query; let countyIndex = index\">\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"checkbox\"\r\n [id]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\"\r\n [(ngModel)]=\"county.checked\"\r\n (change)=\"onChangedCounty($event, coverage.state, county.countyName)\" />\r\n <label class=\"form-check-label\"\r\n [for]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\">\r\n {{ county.countyName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"previousStep()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"skip()\">Skip</button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"coverageSave\" [ng2-loading]=\"coverageSave\"\r\n (click)=\"saveCoverage()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".coverage-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}.coverage-container .head{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.coverage-container p{font-size:14px;color:#64748b;margin-bottom:16px;margin-top:20px;font-weight:400}.coverage-container .form-check-label{font-size:15px;color:#64748b}.coverage-container .first-section span{color:#64748b;font-size:13px}.coverage-container .location-inputs{display:flex;gap:12px;margin-bottom:32px;margin-top:16px}.coverage-container .location-inputs input{flex:1;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;box-sizing:border-box}.coverage-container .location-inputs input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.coverage-container .location-inputs input::placeholder{color:#94a3b8;font-size:14px}.coverage-container .state-selector .empty-message{width:100%;padding:16px;background:#f8fafc;text-align:center;color:#64748b;border-radius:8px;border:1px solid #e2e8f0;font-size:14px}.coverage-container .state-selector .custom-control{font-size:14px;display:flex;align-items:center;gap:7px;color:#64748b;padding-left:13px}.coverage-container .state-selector .custom-control-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.coverage-container .state-selector .form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.coverage-container .coverage-options{margin-bottom:16px}.coverage-container .coverage-options label{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;gap:6px;width:110px}.coverage-container .coverage-options label .show-map{margin-left:auto}.coverage-container .coverage-options .icon-black{filter:brightness(0) saturate(100%) invert(10%) sepia(47%) saturate(3454%) hue-rotate(184deg) brightness(98%) contrast(101%)}.coverage-container .coverage-options .icon-gray{filter:brightness(0) saturate(100%) invert(100%) sepia(4%) saturate(29%) hue-rotate(68deg) brightness(112%) contrast(80%)}.coverage-container .coverage-options .form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.coverage-container .coverage-options .square-box{width:12px;height:12px;border:2px solid;display:inline-block}.coverage-container .coverage-options .square-box.black{background:#002b49;border:0;width:15px;height:14px}.coverage-container .coverage-options .square-box.gray{border:1px solid rgba(128,128,128,.23)!important;border:0;width:15px;height:15px}.coverage-container .coverage-options .map-wrapper{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s ease,opacity .3s ease}.coverage-container .coverage-options .map-wrapper>*{overflow:hidden}.coverage-container .coverage-options .map-wrapper.open{grid-template-rows:1fr;opacity:1}.coverage-container .navigation-buttons{display:flex;justify-content:flex-end;gap:12px;margin-top:48px;margin-bottom:32px}.coverage-container .navigation-buttons .back{height:42px;min-width:130px;padding:10px 22px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.coverage-container .navigation-buttons .back:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.coverage-container .navigation-buttons .next{height:42px;min-width:130px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.coverage-container .navigation-buttons .next:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.coverage-container .navigation-buttons .next:active{transform:translateY(0)}.coverage-container .navigation-buttons .next:disabled{background:#94a3b8;cursor:not-allowed;transform:none}::ng-deep .ng-select .ng-select-container{min-height:42px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:14px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container:hover{border-color:#94a3b8}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8;font-size:14px}.custom-checkbox1{display:inline-block;width:16px;height:16px;border:1.5px solid #e2e8f0;margin-right:8px;vertical-align:middle;position:relative;cursor:pointer;border-radius:6px;background-color:#fff;transition:all .2s ease}.custom-checkbox1.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox1.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg)}.custom-checkbox2{display:inline-block;width:16px;height:16px;border:1.5px solid #e2e8f0;vertical-align:middle;position:relative;cursor:pointer;border-radius:6px;background-color:#fff;transition:all .2s ease}.custom-checkbox2.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox2.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg)}.select-loader{position:absolute;top:-28px;left:0;font-size:12px;color:#4077ad;display:flex;align-items:center;gap:6px}::ng-deep .form-check{display:block;min-height:1.5rem;margin-bottom:.125rem}.actions{display:flex;justify-content:space-between;margin:48px 0 32px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.icon-color{cursor:pointer;background:transparent;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.custom-control label{padding-top:8px;font-size:14px;color:#64748b}.coverage-question{font-size:15px;font-weight:600;color:#64748b;margin:0}.coverage-option-text{font-size:14px;color:#64748b}.option-cursor{cursor:pointer}.counties-heading{margin-bottom:8px}.state-header-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#ebf2f9;border:1px solid #e2e8f0;border-radius:8px 8px 0 0;gap:12px}.state-header-left{display:flex;align-items:center;gap:20px;flex:1}.select-all-wrap{display:flex;align-items:center;gap:6px}.state-checkbox{width:16px;height:16px;border:1.5px solid #e2e8f0;border-radius:6px;cursor:pointer;accent-color:#4077AD;flex-shrink:0}.select-all-label{font-size:13px;font-weight:600;color:#64748b;cursor:pointer;margin:0}.state-name{font-size:14px;font-weight:700;color:#1e293b;cursor:pointer;margin:0}.state-toggle-btn{background:none;border:none;padding:4px 6px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s ease;min-width:unset;height:auto;font-size:0}.state-toggle-btn:hover{background:#4077ad1f}.state-toggle-btn img{width:18px;height:18px}.county-list-scroll{height:160px;overflow-y:auto;padding-left:1rem}@media screen and (max-width: 767px){.coverage-container{padding:16px}.coverage-container .head{font-size:18px}.coverage-container input{font-size:16px}.actions{gap:8px;display:flex;flex-direction:column-reverse}.actions button{min-width:100%}.right-actions{gap:8px;justify-content:space-between;display:flex;flex-direction:column-reverse}.custom-control label{padding-top:0}.res-coverage{width:50%}.pointer{display:none}}\n"] }]
|
|
32295
|
+
args: [{ selector: 'app-coverage', standalone: false, template: "<div class=\"coverage-container\">\r\n <div class=\"first-section\">\r\n <h4 class=\"head\"><img src=\"/assets/images/icons/geo-alt.svg\" alt=\"coverage area\" class=\"me-2\" width=\"18\" height=\"18\" />Coverage Area</h4>\r\n </div>\r\n\r\n <div class=\"coverage-options\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n <h6 class=\"coverage-question\">Where can you complete assignments?</h6>\r\n <div class=\"d-flex gap-1 align-items-center\">\r\n <label class=\"form-check-label\">Show Map</label>\r\n <div class=\"form-check form-switch ms-1\">\r\n <input class=\"form-check-input\" type=\"checkbox\" (change)=\"toggleMap()\" role=\"switch\">\r\n </div>\r\n </div>\r\n </div>\r\n <hr class=\"m-0 border-3\">\r\n\r\n <div class=\"pb-1 d-flex align-items-center mt-2\">\r\n <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length > 0\"></span>\r\n <span class=\"coverage-option-text ms-3\">My Current Coverage Area</span>\r\n </div>\r\n <div class=\"d-flex align-items-center option-cursor\" (click)=\"skip()\">\r\n <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length == 0\"></span>\r\n <span class=\"coverage-option-text ms-3\">Not Applicable</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"state-selector\">\r\n <div class=\"row pb-2\">\r\n <div class=\"col-md-12\">\r\n <div class=\"position-relative\">\r\n <ng-select [clearable]=\"true\" [multiple]=\"true\" (change)=\"setSelectedStates($event)\" [items]=\"states\"\r\n [(ngModel)]=\"selectedStates\" bindLabel=\"stateName\" bindValue=\"stateCode\" [closeOnSelect]=\"false\"\r\n placeholder=\"Select State\" id=\"reqStates\" [loading]=\"isStatesLoading\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <span class=\"form-check\">\r\n <span class=\"form-check-input-wrapper\">\r\n <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n </span>\r\n {{ item.stateName }}\r\n </span>\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <ng-container *ngIf=\"!isStatesLoading\">\r\n <span class=\"ng-value-label\">{{ item.stateName }}</span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-container>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"empty-message mt-4\" *ngIf=\"!isStatesLoading && coverages.length == 0\">\r\n <div class=\"text-center text-secondary\">No States Selected yet</div>\r\n </div>\r\n\r\n <div class=\"coverage-options\">\r\n <div class=\"col-md-10 col-12 py-2 map-wrapper\" [class.open]=\"showMap\">\r\n <us-map [filteredLocations]=\"filteredLocations\"></us-map>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12 mt-4\" *ngIf=\"!isStatesLoading\">\r\n <div *ngIf=\"coverages.length > 0\" class=\"counties-heading\">\r\n <h4 class=\"head\">Coverage Area Counties</h4>\r\n </div>\r\n <div class=\"row pt-2 pb-2\">\r\n <div class=\"col-12\">\r\n <div class=\"row\">\r\n <div class=\"col-12\" *ngFor=\"let coverage of coverages; let coverageIndex = index\">\r\n <div class=\"state-header-row\">\r\n <div class=\"state-header-left\">\r\n <div class=\"select-all-wrap\">\r\n <input type=\"checkbox\" class=\"state-checkbox\"\r\n id=\"stateCheckbox{{ coverage.state + coverageIndex }}\"\r\n [(ngModel)]=\"coverage.checked\"\r\n [indeterminate]=\"coverage.indeterminate\"\r\n (change)=\"onSelectAllChanged(coverage)\" />\r\n <label class=\"select-all-label\" for=\"stateCheckbox{{ coverage?.state + coverageIndex }}\">\r\n Select All\r\n </label>\r\n </div>\r\n <label class=\"state-name\" [attr.for]=\"'stateCheckbox' + coverage.state + coverageIndex\">\r\n {{ coverage.state | stateName }}\r\n </label>\r\n </div>\r\n <button type=\"button\" class=\"state-toggle-btn\" (click)=\"coverage.isShow = !coverage?.isShow\">\r\n <img [src]=\"coverage?.isShow ? '/assets/images/icons/arrow-up.svg' : '/assets/images/icons/arrow-down.svg'\" alt=\"toggle\" />\r\n </button>\r\n </div>\r\n <hr class=\"mt-0\" />\r\n <ng-container *ngIf=\"coverage?.isShow\">\r\n <div class=\"form-group mb-1\">\r\n <input type=\"text\" class=\"font-default form-check-inline form-control h-37\"\r\n placeholder=\"Select Counties In {{ coverage.state | stateName }}\"\r\n [(ngModel)]=\"coverage.query\" />\r\n </div>\r\n <div class=\"county-list-scroll row m-lg-2\">\r\n <div class=\"list-group-item col-3 res-coverage col-sm-6 p-1\"\r\n *ngFor=\"let county of coverage.counties | SearchBy: 'countyName':coverage.query; let countyIndex = index\">\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"checkbox\"\r\n [id]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\"\r\n [(ngModel)]=\"county.checked\"\r\n (change)=\"onChangedCounty($event, coverage.state, county.countyName)\" />\r\n <label class=\"form-check-label\"\r\n [for]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\">\r\n {{ county.countyName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"previousStep()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"skip()\">Skip</button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"coverageSave\" [ng2-loading]=\"coverageSave\"\r\n (click)=\"saveCoverage()\">\r\n Continue\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".coverage-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}.coverage-container .head{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.coverage-container p{font-size:14px;color:#64748b;margin-bottom:16px;margin-top:20px;font-weight:400}.coverage-container .form-check-label{font-size:15px;color:#64748b}.coverage-container .first-section span{color:#64748b;font-size:13px}.coverage-container .location-inputs{display:flex;gap:12px;margin-bottom:32px;margin-top:16px}.coverage-container .location-inputs input{flex:1;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;box-sizing:border-box}.coverage-container .location-inputs input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.coverage-container .location-inputs input::placeholder{color:#94a3b8;font-size:14px}.coverage-container .state-selector .empty-message{width:100%;padding:16px;background:#f8fafc;text-align:center;color:#64748b;border-radius:8px;border:1px solid #e2e8f0;font-size:14px}.coverage-container .state-selector .custom-control{font-size:14px;display:flex;align-items:center;gap:7px;color:#64748b;padding-left:13px}.coverage-container .state-selector .custom-control-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.coverage-container .state-selector .form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.coverage-container .coverage-options{margin-bottom:16px}.coverage-container .coverage-options label{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;gap:6px;width:110px}.coverage-container .coverage-options label .show-map{margin-left:auto}.coverage-container .coverage-options .icon-black{filter:brightness(0) saturate(100%) invert(10%) sepia(47%) saturate(3454%) hue-rotate(184deg) brightness(98%) contrast(101%)}.coverage-container .coverage-options .icon-gray{filter:brightness(0) saturate(100%) invert(100%) sepia(4%) saturate(29%) hue-rotate(68deg) brightness(112%) contrast(80%)}.coverage-container .coverage-options .form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.coverage-container .coverage-options .square-box{width:12px;height:12px;border:2px solid;display:inline-block}.coverage-container .coverage-options .square-box.black{background:#002b49;border:0;width:15px;height:14px}.coverage-container .coverage-options .square-box.gray{border:1px solid rgba(128,128,128,.23)!important;border:0;width:15px;height:15px}.coverage-container .coverage-options .map-wrapper{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s ease,opacity .3s ease}.coverage-container .coverage-options .map-wrapper>*{overflow:hidden}.coverage-container .coverage-options .map-wrapper.open{grid-template-rows:1fr;opacity:1}.coverage-container .navigation-buttons{display:flex;justify-content:flex-end;gap:12px;margin-top:48px;margin-bottom:32px}.coverage-container .navigation-buttons .back{height:42px;min-width:130px;padding:10px 22px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.coverage-container .navigation-buttons .back:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.coverage-container .navigation-buttons .next{height:42px;min-width:130px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.coverage-container .navigation-buttons .next:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.coverage-container .navigation-buttons .next:active{transform:translateY(0)}.coverage-container .navigation-buttons .next:disabled{background:#94a3b8;cursor:not-allowed;transform:none}::ng-deep .ng-select .ng-select-container{min-height:42px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:14px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container:hover{border-color:#94a3b8}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8;font-size:14px}.custom-checkbox1{display:inline-block;width:16px;height:16px;border:1.5px solid #e2e8f0;margin-right:8px;vertical-align:middle;position:relative;cursor:pointer;border-radius:6px;background-color:#fff;transition:all .2s ease}.custom-checkbox1.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox1.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg)}.custom-checkbox2{display:inline-block;width:16px;height:16px;border:1.5px solid #e2e8f0;vertical-align:middle;position:relative;cursor:pointer;border-radius:6px;background-color:#fff;transition:all .2s ease}.custom-checkbox2.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox2.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg)}.select-loader{position:absolute;top:-28px;left:0;font-size:12px;color:#4077ad;display:flex;align-items:center;gap:6px}::ng-deep .form-check{display:block;min-height:1.5rem;margin-bottom:.125rem}.actions{display:flex;justify-content:space-between;margin:48px 0 32px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.icon-color{cursor:pointer;background:transparent;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.custom-control label{padding-top:8px;font-size:14px;color:#64748b}.coverage-question{font-size:15px;font-weight:600;color:#64748b;margin:0}.coverage-option-text{font-size:14px;color:#64748b}.option-cursor{cursor:pointer}.counties-heading{margin-bottom:8px}.state-header-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#ebf2f9;border:1px solid #e2e8f0;border-radius:8px 8px 0 0;gap:12px}.state-header-left{display:flex;align-items:center;gap:20px;flex:1}.select-all-wrap{display:flex;align-items:center;gap:6px}.state-checkbox{width:16px;height:16px;border:1.5px solid #e2e8f0;border-radius:6px;cursor:pointer;accent-color:#4077AD;flex-shrink:0}.select-all-label{font-size:13px;font-weight:600;color:#64748b;cursor:pointer;margin:0}.state-name{font-size:14px;font-weight:700;color:#1e293b;cursor:pointer;margin:0}.state-toggle-btn{background:none;border:none;padding:4px 6px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s ease;min-width:unset;height:auto;font-size:0}.state-toggle-btn:hover{background:#4077ad1f}.state-toggle-btn img{width:18px;height:18px}.county-list-scroll{height:160px;overflow-y:auto;padding-left:1rem}@media screen and (max-width: 767px){.coverage-container{padding:16px}.coverage-container .head{font-size:18px}.coverage-container input{font-size:16px}.actions{gap:8px;display:flex;flex-direction:column-reverse}.actions button{min-width:100%}.right-actions{gap:8px;justify-content:space-between;display:flex;flex-direction:column-reverse}.custom-control label{padding-top:0}.res-coverage{width:50%}.pointer{display:none}}\n"] }]
|
|
32296
32296
|
}], ctorParameters: () => [{ type: CredentialingStore }, { type: UsMapLatestService }, { type: PostalCodeServices }, { type: UserCoverageAreaService }, { type: AlertService }, { type: i1$1.RoleContextService }, { type: i1$1.TokenService }], propDecorators: { providerId: [{
|
|
32297
32297
|
type: Input
|
|
32298
32298
|
}], providerName: [{
|
|
@@ -32670,11 +32670,11 @@ class WorkexperienceComponent {
|
|
|
32670
32670
|
this.fileName = '';
|
|
32671
32671
|
}
|
|
32672
32672
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WorkexperienceComponent, deps: [{ token: UserExperienceService }, { token: UserService }, { token: WorkExperienceStore }, { token: CredentialingStore }, { token: CountryServices }, { token: PostalCodeServices }, { token: i1$1.TokenService }, { token: i1$1.RoleContextService }, { token: i8.FormBuilder }, { token: FileService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
|
|
32673
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: WorkexperienceComponent, isStandalone: false, selector: "app-workexperience", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div *ngIf=\"!showpreview()\">\r\n <div class=\"education-container\">\r\n <h3><i class=\"bi bi-briefcase-fill me-2\" style=\"color:#4077ad;\"></i>Add Work Experience</h3>\r\n <p class=\"hint\">\r\n Add your prior and current work history below\r\n </p>\r\n <form [formGroup]=\"workexperienceForm\">\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Company Name</div>\r\n <input type=\"text\" placeholder=\"Enter your company name here\" formControlName=\"companyName\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('companyName')?.touched &&\r\n workexperienceForm.get('companyName')?.hasError('required')\">\r\n Company name is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">Job Title</div>\r\n <input type=\"text\" placeholder=\"Enter your job title here\" formControlName=\"jobTitle\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('jobTitle')?.touched &&\r\n workexperienceForm.get('jobTitle')?.hasError('required')\">\r\n Job title is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Country</div>\r\n <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n {{ item.country }}\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n <div class=\"field\">\r\n <div class=\"head\">State</div>\r\n <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select State\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n <div class=\"row form-row\">\r\n <div class=\"field\">\r\n <div class=\"head\">City</div>\r\n <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('city')?.touched &&\r\n workexperienceForm.get('city')?.hasError('required')\">\r\n City is required\r\n </small>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Start Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Start date\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"{ adaptivePosition: true, isAnimated: true, showWeekNumbers: false,\r\n customTodayClass: !workexperienceForm.get('fromDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"fromDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('fromDate')?.touched &&\r\n workexperienceForm.get('fromDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !workexperienceForm.get('toDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"toDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('toDate')?.touched &&\r\n workexperienceForm.get('toDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Job Description or duties</div>\r\n <textarea placeholder=\"Description\" formControlName=\"jobDescription\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Supporting Documents</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your employment contract, offer letter, or reference letter (PDF, DOC, DOCX)</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Document\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n <div class=\"actions\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n class=\"secondary\" (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3><i class=\"bi bi-briefcase-fill me-2\" style=\"color:#4077ad;\"></i>Work Experiences</h3>\r\n <p class=\"preview-subtitle\">Review your work history below</p>\r\n </div>\r\n\r\n <div class=\"preview-list\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button preview-accordion-btn\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#exp_' + i\"\r\n aria-expanded=\"true\">\r\n <div class=\"preview-acc-left\">\r\n <span class=\"preview-acc-title\">{{ exp.companyName }}</span>\r\n <span class=\"preview-acc-meta\">{{ exp.jobTitle }}</span>\r\n </div>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n\r\n <div [id]=\"'exp_' + i\" class=\"accordion-collapse collapse show\">\r\n <div class=\"preview-body\">\r\n <div class=\"detail-grid\">\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Company Name</span>\r\n <span class=\"preview-value\">{{ exp.companyName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Job Title</span>\r\n <span class=\"preview-value\">{{ exp.jobTitle || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">From Date</span>\r\n <span class=\"preview-value\">{{ exp.fromDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">To Date</span>\r\n <span class=\"preview-value\">{{ exp.toDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Country</span>\r\n <span class=\"preview-value\">{{ exp.country || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">State</span>\r\n <span class=\"preview-value\">{{ exp.state | stateName }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">City</span>\r\n <span class=\"preview-value\">{{ exp.city || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n <span class=\"preview-label\">Document</span>\r\n <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n </div>\r\n </div>\r\n <div class=\"detail-cell detail-full\">\r\n <span class=\"preview-label\">Job Description</span>\r\n <span class=\"preview-value\">{{ exp.jobDescription || '\u2014' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"action\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Experiences</button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n </div>\r\n </div>\r\n</div>", styles: [".icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input,select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input.is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 0 20px}.action{display:flex;justify-content:space-between;margin:48px 100px 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#f8fafc}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.edit-icon{cursor:pointer}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.detail-grid{grid-template-columns:1fr}.actions,.action{flex-direction:column-reverse;gap:8px}.action{margin:48px 0 20px}.right-actions{justify-content:space-between;gap:8px;display:flex;flex-direction:column-reverse}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.form-row{gap:14px;flex-direction:column}.pointer{display:none}.add-btn{width:unset}button{width:100%}}\n"], dependencies: [{ kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
|
|
32673
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: WorkexperienceComponent, isStandalone: false, selector: "app-workexperience", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div *ngIf=\"!showpreview()\">\r\n <div class=\"education-container\">\r\n <h3><img src=\"/assets/images/icons/briefcase-fill.svg\" alt=\"work experience\" class=\"me-2\" width=\"18\" height=\"18\" />Add Work Experience</h3>\r\n <p class=\"hint\">\r\n Add your prior and current work history below\r\n </p>\r\n <form [formGroup]=\"workexperienceForm\">\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Company Name</div>\r\n <input type=\"text\" placeholder=\"Enter your company name here\" formControlName=\"companyName\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('companyName')?.touched &&\r\n workexperienceForm.get('companyName')?.hasError('required')\">\r\n Company name is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">Job Title</div>\r\n <input type=\"text\" placeholder=\"Enter your job title here\" formControlName=\"jobTitle\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('jobTitle')?.touched &&\r\n workexperienceForm.get('jobTitle')?.hasError('required')\">\r\n Job title is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Country</div>\r\n <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n {{ item.country }}\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n <div class=\"field\">\r\n <div class=\"head\">State</div>\r\n <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select State\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n <div class=\"row form-row\">\r\n <div class=\"field\">\r\n <div class=\"head\">City</div>\r\n <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('city')?.touched &&\r\n workexperienceForm.get('city')?.hasError('required')\">\r\n City is required\r\n </small>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Start Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Start date\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"{ adaptivePosition: true, isAnimated: true, showWeekNumbers: false,\r\n customTodayClass: !workexperienceForm.get('fromDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"fromDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('fromDate')?.touched &&\r\n workexperienceForm.get('fromDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !workexperienceForm.get('toDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"toDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('toDate')?.touched &&\r\n workexperienceForm.get('toDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Job Description or duties</div>\r\n <textarea placeholder=\"Description\" formControlName=\"jobDescription\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Supporting Documents</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your employment contract, offer letter, or reference letter (PDF, DOC, DOCX)</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Document\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n <div class=\"actions\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n class=\"secondary\" (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3><img src=\"/assets/images/icons/briefcase-fill.svg\" alt=\"work experience\" class=\"me-2\" width=\"18\" height=\"18\" />Work Experiences</h3>\r\n <p class=\"preview-subtitle\">Review your work history below</p>\r\n </div>\r\n\r\n <div class=\"preview-list\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button preview-accordion-btn\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#exp_' + i\"\r\n aria-expanded=\"true\">\r\n <div class=\"preview-acc-left\">\r\n <span class=\"preview-acc-title\">{{ exp.companyName }}</span>\r\n <span class=\"preview-acc-meta\">{{ exp.jobTitle }}</span>\r\n </div>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n\r\n <div [id]=\"'exp_' + i\" class=\"accordion-collapse collapse show\">\r\n <div class=\"preview-body\">\r\n <div class=\"detail-grid\">\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Company Name</span>\r\n <span class=\"preview-value\">{{ exp.companyName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Job Title</span>\r\n <span class=\"preview-value\">{{ exp.jobTitle || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">From Date</span>\r\n <span class=\"preview-value\">{{ exp.fromDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">To Date</span>\r\n <span class=\"preview-value\">{{ exp.toDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Country</span>\r\n <span class=\"preview-value\">{{ exp.country || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">State</span>\r\n <span class=\"preview-value\">{{ exp.state | stateName }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">City</span>\r\n <span class=\"preview-value\">{{ exp.city || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n <span class=\"preview-label\">Document</span>\r\n <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n </div>\r\n </div>\r\n <div class=\"detail-cell detail-full\">\r\n <span class=\"preview-label\">Job Description</span>\r\n <span class=\"preview-value\">{{ exp.jobDescription || '\u2014' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"action\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Experiences</button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n </div>\r\n </div>\r\n</div>", styles: [".icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input,select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input.is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 0 20px}.action{display:flex;justify-content:space-between;margin:48px 100px 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#f8fafc}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.edit-icon{cursor:pointer}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.detail-grid{grid-template-columns:1fr}.actions,.action{flex-direction:column-reverse;gap:8px}.action{margin:48px 0 20px}.right-actions{justify-content:space-between;gap:8px;display:flex;flex-direction:column-reverse}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.form-row{gap:14px;flex-direction:column}.pointer{display:none}.add-btn{width:unset}button{width:100%}}\n"], dependencies: [{ kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
|
|
32674
32674
|
}
|
|
32675
32675
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WorkexperienceComponent, decorators: [{
|
|
32676
32676
|
type: Component,
|
|
32677
|
-
args: [{ selector: 'app-workexperience', standalone: false, template: "<div *ngIf=\"!showpreview()\">\r\n <div class=\"education-container\">\r\n <h3><i class=\"bi bi-briefcase-fill me-2\" style=\"color:#4077ad;\"></i>Add Work Experience</h3>\r\n <p class=\"hint\">\r\n Add your prior and current work history below\r\n </p>\r\n <form [formGroup]=\"workexperienceForm\">\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Company Name</div>\r\n <input type=\"text\" placeholder=\"Enter your company name here\" formControlName=\"companyName\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('companyName')?.touched &&\r\n workexperienceForm.get('companyName')?.hasError('required')\">\r\n Company name is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">Job Title</div>\r\n <input type=\"text\" placeholder=\"Enter your job title here\" formControlName=\"jobTitle\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('jobTitle')?.touched &&\r\n workexperienceForm.get('jobTitle')?.hasError('required')\">\r\n Job title is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Country</div>\r\n <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n {{ item.country }}\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n <div class=\"field\">\r\n <div class=\"head\">State</div>\r\n <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select State\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n <div class=\"row form-row\">\r\n <div class=\"field\">\r\n <div class=\"head\">City</div>\r\n <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('city')?.touched &&\r\n workexperienceForm.get('city')?.hasError('required')\">\r\n City is required\r\n </small>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Start Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Start date\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"{ adaptivePosition: true, isAnimated: true, showWeekNumbers: false,\r\n customTodayClass: !workexperienceForm.get('fromDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"fromDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('fromDate')?.touched &&\r\n workexperienceForm.get('fromDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !workexperienceForm.get('toDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"toDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('toDate')?.touched &&\r\n workexperienceForm.get('toDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Job Description or duties</div>\r\n <textarea placeholder=\"Description\" formControlName=\"jobDescription\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Supporting Documents</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your employment contract, offer letter, or reference letter (PDF, DOC, DOCX)</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Document\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n <div class=\"actions\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n class=\"secondary\" (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3><i class=\"bi bi-briefcase-fill me-2\" style=\"color:#4077ad;\"></i>Work Experiences</h3>\r\n <p class=\"preview-subtitle\">Review your work history below</p>\r\n </div>\r\n\r\n <div class=\"preview-list\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button preview-accordion-btn\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#exp_' + i\"\r\n aria-expanded=\"true\">\r\n <div class=\"preview-acc-left\">\r\n <span class=\"preview-acc-title\">{{ exp.companyName }}</span>\r\n <span class=\"preview-acc-meta\">{{ exp.jobTitle }}</span>\r\n </div>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n\r\n <div [id]=\"'exp_' + i\" class=\"accordion-collapse collapse show\">\r\n <div class=\"preview-body\">\r\n <div class=\"detail-grid\">\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Company Name</span>\r\n <span class=\"preview-value\">{{ exp.companyName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Job Title</span>\r\n <span class=\"preview-value\">{{ exp.jobTitle || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">From Date</span>\r\n <span class=\"preview-value\">{{ exp.fromDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">To Date</span>\r\n <span class=\"preview-value\">{{ exp.toDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Country</span>\r\n <span class=\"preview-value\">{{ exp.country || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">State</span>\r\n <span class=\"preview-value\">{{ exp.state | stateName }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">City</span>\r\n <span class=\"preview-value\">{{ exp.city || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n <span class=\"preview-label\">Document</span>\r\n <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n </div>\r\n </div>\r\n <div class=\"detail-cell detail-full\">\r\n <span class=\"preview-label\">Job Description</span>\r\n <span class=\"preview-value\">{{ exp.jobDescription || '\u2014' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"action\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Experiences</button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n </div>\r\n </div>\r\n</div>", styles: [".icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input,select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input.is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 0 20px}.action{display:flex;justify-content:space-between;margin:48px 100px 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#f8fafc}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.edit-icon{cursor:pointer}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.detail-grid{grid-template-columns:1fr}.actions,.action{flex-direction:column-reverse;gap:8px}.action{margin:48px 0 20px}.right-actions{justify-content:space-between;gap:8px;display:flex;flex-direction:column-reverse}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.form-row{gap:14px;flex-direction:column}.pointer{display:none}.add-btn{width:unset}button{width:100%}}\n"] }]
|
|
32677
|
+
args: [{ selector: 'app-workexperience', standalone: false, template: "<div *ngIf=\"!showpreview()\">\r\n <div class=\"education-container\">\r\n <h3><img src=\"/assets/images/icons/briefcase-fill.svg\" alt=\"work experience\" class=\"me-2\" width=\"18\" height=\"18\" />Add Work Experience</h3>\r\n <p class=\"hint\">\r\n Add your prior and current work history below\r\n </p>\r\n <form [formGroup]=\"workexperienceForm\">\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Company Name</div>\r\n <input type=\"text\" placeholder=\"Enter your company name here\" formControlName=\"companyName\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('companyName')?.touched &&\r\n workexperienceForm.get('companyName')?.hasError('required')\">\r\n Company name is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">Job Title</div>\r\n <input type=\"text\" placeholder=\"Enter your job title here\" formControlName=\"jobTitle\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('jobTitle')?.touched &&\r\n workexperienceForm.get('jobTitle')?.hasError('required')\">\r\n Job title is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Country</div>\r\n <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n {{ item.country }}\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n <div class=\"field\">\r\n <div class=\"head\">State</div>\r\n <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select State\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n <div class=\"row form-row\">\r\n <div class=\"field\">\r\n <div class=\"head\">City</div>\r\n <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('city')?.touched &&\r\n workexperienceForm.get('city')?.hasError('required')\">\r\n City is required\r\n </small>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Start Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Start date\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"{ adaptivePosition: true, isAnimated: true, showWeekNumbers: false,\r\n customTodayClass: !workexperienceForm.get('fromDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"fromDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('fromDate')?.touched &&\r\n workexperienceForm.get('fromDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !workexperienceForm.get('toDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"toDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('toDate')?.touched &&\r\n workexperienceForm.get('toDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Job Description or duties</div>\r\n <textarea placeholder=\"Description\" formControlName=\"jobDescription\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Supporting Documents</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your employment contract, offer letter, or reference letter (PDF, DOC, DOCX)</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Document\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n <div class=\"actions\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n class=\"secondary\" (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3><img src=\"/assets/images/icons/briefcase-fill.svg\" alt=\"work experience\" class=\"me-2\" width=\"18\" height=\"18\" />Work Experiences</h3>\r\n <p class=\"preview-subtitle\">Review your work history below</p>\r\n </div>\r\n\r\n <div class=\"preview-list\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button preview-accordion-btn\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#exp_' + i\"\r\n aria-expanded=\"true\">\r\n <div class=\"preview-acc-left\">\r\n <span class=\"preview-acc-title\">{{ exp.companyName }}</span>\r\n <span class=\"preview-acc-meta\">{{ exp.jobTitle }}</span>\r\n </div>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n\r\n <div [id]=\"'exp_' + i\" class=\"accordion-collapse collapse show\">\r\n <div class=\"preview-body\">\r\n <div class=\"detail-grid\">\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Company Name</span>\r\n <span class=\"preview-value\">{{ exp.companyName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Job Title</span>\r\n <span class=\"preview-value\">{{ exp.jobTitle || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">From Date</span>\r\n <span class=\"preview-value\">{{ exp.fromDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">To Date</span>\r\n <span class=\"preview-value\">{{ exp.toDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Country</span>\r\n <span class=\"preview-value\">{{ exp.country || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">State</span>\r\n <span class=\"preview-value\">{{ exp.state | stateName }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">City</span>\r\n <span class=\"preview-value\">{{ exp.city || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n <span class=\"preview-label\">Document</span>\r\n <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n </div>\r\n </div>\r\n <div class=\"detail-cell detail-full\">\r\n <span class=\"preview-label\">Job Description</span>\r\n <span class=\"preview-value\">{{ exp.jobDescription || '\u2014' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"action\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Experiences</button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n </div>\r\n </div>\r\n</div>", styles: [".icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input,select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input.is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 0 20px}.action{display:flex;justify-content:space-between;margin:48px 100px 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#f8fafc}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.edit-icon{cursor:pointer}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.detail-grid{grid-template-columns:1fr}.actions,.action{flex-direction:column-reverse;gap:8px}.action{margin:48px 0 20px}.right-actions{justify-content:space-between;gap:8px;display:flex;flex-direction:column-reverse}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.form-row{gap:14px;flex-direction:column}.pointer{display:none}.add-btn{width:unset}button{width:100%}}\n"] }]
|
|
32678
32678
|
}], ctorParameters: () => [{ type: UserExperienceService }, { type: UserService }, { type: WorkExperienceStore }, { type: CredentialingStore }, { type: CountryServices }, { type: PostalCodeServices }, { type: i1$1.TokenService }, { type: i1$1.RoleContextService }, { type: i8.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
|
|
32679
32679
|
type: Input
|
|
32680
32680
|
}], providerName: [{
|
|
@@ -33002,11 +33002,11 @@ class FirstComponent {
|
|
|
33002
33002
|
this.backToParent.emit();
|
|
33003
33003
|
}
|
|
33004
33004
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FirstComponent, deps: [{ token: CredentialingStore }, { token: i1$1.RoleContextService }, { token: i1$1.TokenService }, { token: ResumeDetailService }, { token: FileService }], target: i0.ɵɵFactoryTarget.Component });
|
|
33005
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: FirstComponent, isStandalone: false, selector: "app-first", outputs: { backToParent: "backToParent", nextStep: "nextStep" }, ngImport: i0, template: "<div class=\"wrapper position-relative\">\r\n\r\n <h2 class=\"title\"
|
|
33005
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: FirstComponent, isStandalone: false, selector: "app-first", outputs: { backToParent: "backToParent", nextStep: "nextStep" }, ngImport: i0, template: "<div class=\"wrapper position-relative\">\r\n\r\n <h2 class=\"title\"><img src=\"/assets/images/icons/file-person.svg\" alt=\"resume\" class=\"me-2\" width=\"22\" height=\"22\" />Upload your resume *</h2>\r\n <p class=\"subtitle\">Upload your resume and we\u2019ll fill the rest.</p>\r\n\r\n\r\n <div class=\"option-card\" [class.drag-over]=\"isDragOver\" (click)=\"openFile(fileInput, $event)\"\r\n (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\">\r\n\r\n\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"onFileSelected($event)\" hidden />\r\n\r\n\r\n <div class=\"card-content\" style=\"margin-left: 15px;gap: 18px;\">\r\n <div class=\"left\">\r\n <img src=\"assets/images/icons/upload-resume.png\" style=\"width: 55px;\" alt=\"Upload\" />\r\n </div>\r\n\r\n <div class=\"right\">\r\n <h3>Upload my resume</h3>\r\n <p>Drag & drop your resume here, or click to browse.</p>\r\n </div>\r\n </div>\r\n <div class=\"error-text\" *ngIf=\"uploadError\">{{ uploadError }}</div>\r\n </div>\r\n\r\n <label class=\"option-card\" (click)=\"manual()\">\r\n\r\n <div class=\"card-content\" (click)=\"manual()\" >\r\n <div class=\"left\">\r\n <img src=\"assets/images/icons/Edit Manually.svg\" alt=\"Manual\" />\r\n </div>\r\n\r\n <div class=\"right\" (click)=\"manual()\">\r\n <h3>Enter manually</h3>\r\n <p>You will enter all information manually.</p>\r\n </div>\r\n </div>\r\n </label>\r\n\r\n <div *ngIf=\"isUploading\" class=\"overlay\">\r\n <div class=\"spinner-container\">\r\n <div class=\"spinner\"></div>\r\n <p>Processing your resume...</p>\r\n </div>\r\n </div>\r\n <div>\r\n <button class=\"back-btn\" (click)=\"onBackClick()\">Back</button>\r\n </div>\r\n</div>", styles: [".wrapper{max-width:600px;margin:0 auto;padding:28px 24px;background:#f8fafc;position:relative;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.title{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.subtitle{font-size:14px;color:#64748b;margin-bottom:24px}.option-card{display:block;border:1.5px solid #e2e8f0;border-radius:12px;padding:20px;margin-bottom:16px;cursor:pointer;transition:all .2s ease;position:relative;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.option-card:hover{border-color:#4077ad;box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-2px)}.option-card.drag-over{border-color:#4077ad;background:#ebf2f9;box-shadow:0 0 0 3px #4077ad26}.option-card:has(input:checked){border:2px solid #4077AD;background:#ebf2f9}.option-card input[type=radio]{position:absolute;left:15px;top:43px;accent-color:#4077AD}.card-content{display:flex;gap:16px;margin-left:30px;align-items:flex-start}.left img{width:37px;opacity:.75}.right h3{margin:0;font-size:16px;font-weight:600;color:#1e293b}.right p{margin:5px 0 10px;color:#64748b;font-size:14px}.file-display input{font-size:15px;cursor:pointer;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;color:#1e293b;width:100%;transition:all .2s ease;box-sizing:border-box}.file-display input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.file-display input::placeholder{color:#94a3b8}.error-text{font-size:12px;color:#ef4444;margin-top:4px}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#ffffffd9;z-index:100;display:flex;justify-content:center;align-items:center;pointer-events:all;border-radius:12px}.spinner{width:40px;height:40px;margin-left:60px;border:3px solid #e2e8f0;border-top:3px solid #4077AD;border-radius:50%;animation:spin .8s linear infinite}.spinner-container{text-align:center}@keyframes spin{to{transform:rotate(360deg)}}.back-btn{height:42px;min-width:120px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}@media screen and (max-width: 767px){.wrapper{padding:16px;width:90%}.title{font-size:18px}.file-display input{font-size:16px}.back-btn{width:100%}}\n"], dependencies: [{ kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
33006
33006
|
}
|
|
33007
33007
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FirstComponent, decorators: [{
|
|
33008
33008
|
type: Component,
|
|
33009
|
-
args: [{ selector: 'app-first', standalone: false, template: "<div class=\"wrapper position-relative\">\r\n\r\n <h2 class=\"title\"
|
|
33009
|
+
args: [{ selector: 'app-first', standalone: false, template: "<div class=\"wrapper position-relative\">\r\n\r\n <h2 class=\"title\"><img src=\"/assets/images/icons/file-person.svg\" alt=\"resume\" class=\"me-2\" width=\"22\" height=\"22\" />Upload your resume *</h2>\r\n <p class=\"subtitle\">Upload your resume and we\u2019ll fill the rest.</p>\r\n\r\n\r\n <div class=\"option-card\" [class.drag-over]=\"isDragOver\" (click)=\"openFile(fileInput, $event)\"\r\n (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\">\r\n\r\n\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"onFileSelected($event)\" hidden />\r\n\r\n\r\n <div class=\"card-content\" style=\"margin-left: 15px;gap: 18px;\">\r\n <div class=\"left\">\r\n <img src=\"assets/images/icons/upload-resume.png\" style=\"width: 55px;\" alt=\"Upload\" />\r\n </div>\r\n\r\n <div class=\"right\">\r\n <h3>Upload my resume</h3>\r\n <p>Drag & drop your resume here, or click to browse.</p>\r\n </div>\r\n </div>\r\n <div class=\"error-text\" *ngIf=\"uploadError\">{{ uploadError }}</div>\r\n </div>\r\n\r\n <label class=\"option-card\" (click)=\"manual()\">\r\n\r\n <div class=\"card-content\" (click)=\"manual()\" >\r\n <div class=\"left\">\r\n <img src=\"assets/images/icons/Edit Manually.svg\" alt=\"Manual\" />\r\n </div>\r\n\r\n <div class=\"right\" (click)=\"manual()\">\r\n <h3>Enter manually</h3>\r\n <p>You will enter all information manually.</p>\r\n </div>\r\n </div>\r\n </label>\r\n\r\n <div *ngIf=\"isUploading\" class=\"overlay\">\r\n <div class=\"spinner-container\">\r\n <div class=\"spinner\"></div>\r\n <p>Processing your resume...</p>\r\n </div>\r\n </div>\r\n <div>\r\n <button class=\"back-btn\" (click)=\"onBackClick()\">Back</button>\r\n </div>\r\n</div>", styles: [".wrapper{max-width:600px;margin:0 auto;padding:28px 24px;background:#f8fafc;position:relative;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.title{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.subtitle{font-size:14px;color:#64748b;margin-bottom:24px}.option-card{display:block;border:1.5px solid #e2e8f0;border-radius:12px;padding:20px;margin-bottom:16px;cursor:pointer;transition:all .2s ease;position:relative;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.option-card:hover{border-color:#4077ad;box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-2px)}.option-card.drag-over{border-color:#4077ad;background:#ebf2f9;box-shadow:0 0 0 3px #4077ad26}.option-card:has(input:checked){border:2px solid #4077AD;background:#ebf2f9}.option-card input[type=radio]{position:absolute;left:15px;top:43px;accent-color:#4077AD}.card-content{display:flex;gap:16px;margin-left:30px;align-items:flex-start}.left img{width:37px;opacity:.75}.right h3{margin:0;font-size:16px;font-weight:600;color:#1e293b}.right p{margin:5px 0 10px;color:#64748b;font-size:14px}.file-display input{font-size:15px;cursor:pointer;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;color:#1e293b;width:100%;transition:all .2s ease;box-sizing:border-box}.file-display input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.file-display input::placeholder{color:#94a3b8}.error-text{font-size:12px;color:#ef4444;margin-top:4px}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#ffffffd9;z-index:100;display:flex;justify-content:center;align-items:center;pointer-events:all;border-radius:12px}.spinner{width:40px;height:40px;margin-left:60px;border:3px solid #e2e8f0;border-top:3px solid #4077AD;border-radius:50%;animation:spin .8s linear infinite}.spinner-container{text-align:center}@keyframes spin{to{transform:rotate(360deg)}}.back-btn{height:42px;min-width:120px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}@media screen and (max-width: 767px){.wrapper{padding:16px;width:90%}.title{font-size:18px}.file-display input{font-size:16px}.back-btn{width:100%}}\n"] }]
|
|
33010
33010
|
}], ctorParameters: () => [{ type: CredentialingStore }, { type: i1$1.RoleContextService }, { type: i1$1.TokenService }, { type: ResumeDetailService }, { type: FileService }], propDecorators: { backToParent: [{
|
|
33011
33011
|
type: Output
|
|
33012
33012
|
}], nextStep: [{
|