1const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["progress-bar-T5n4wUb2.js","main-DP3nfA8R.js","main-CkdUgSz6.css","progress-bar-DoOr9PuH.css"])))=>i.map(i=>d[i]); 2import{q as I,N as S,F,u,w as c,x as l,Q as g,z as x,y as b,H as y,P as L,I as $,Y as j,A as _,B as h,C as T}from"./main-DP3nfA8R.js";import{r as D}from"./shared-calculator-DpMeSXkv.js";import{r as k}from"./query-async-BoLSFKfI.js";var V=Object.defineProperty,N=Object.getOwnPropertyDescriptor,n=(t,e,a,i)=>{for(var s=i>1?void 0:i?N(e,a):e,r=t.length-1,d;r>=0;r--)(d=t[r])&&(s=(i?d(e,a,s):d(s))||s);return i&&s&&V(e,a,s),s};j(()=>import("./progress-bar-T5n4wUb2.js"),__vite__mapDeps([0,1,2,3]));let o=class extends I{constructor(){super(),this.heading="",this.formId="",this.tokenSetHeaderName="",this.tokenSetRequestToken="",this.expectedSalaryDifference="0",this.isLoading=!0,this.isCalculatingPrice=!1,this.currentStep=-1,this.currentFlow=-1,this.showInitialView=!0,this.showPriceCalculation=!1,this.showResults=!1,this.showSendingOffer=!1,this.showConfirmation=!1,this.getDataFailed=!1,this.isMobile=!1,this.jobInputValue="",this.salaryInputValue="",this.workingHoursInputValue="",this.userData={jobTitle:null,experience:null,salary:null,hours:null,sector:null,industry:null,region:null,isManager:null,defaultSalaryIncreasePercent:null},this.salaryData=null,this.experienceIntervals=[],this.sectors=[],this.industries=[],this.regions=[],this.calculationMap=new Map,this.isTransitioning=!1,this.debounceDuration=100,this.transitionDelay=20,this.nextStepDelay=500,this.flows=[{index:0,totalSteps:8},{index:1,totalSteps:4}],this.text="",this.userContactData={name:null,phone:null,isAMember:null,email:null,acceptPhoneMarketing:null,acceptEmailMarketing:null},this.locale=document.documentElement.getAttribute("lang")??"da-DK",this.debounceFunction=S((t,e)=>{e.apply(this,[t])},this.debounceDuration),this.debounceValidateStep=S((t,e,a,i)=>{i.apply(this,[t,e,a])},300)}connectedCallback(){super.connectedCallback(),this.isMobile=F,this.get
2SalaryData();const t=this.querySelector("[data-text-container]");t&&(this.text=t.innerHTML),document.addEventListener("click",e=>this.debounceFunction(e,this.handleDocumentClick)),this.isMobile&&!location.href.includes("localhost")&&window.addEventListener("beforeunload",e=>{e.preventDefault(),e.returnValue=!0})}disconnectedCallback(){document.removeEventListener("click",t=>this.debounceFunction(t,this.handleDocumentClick)),this.isMobile&&!location.href.includes("localhost")&&window.removeEventListener("beforeunload",t=>{t.preventDefault(),t.returnValue=!0}),super.disconnectedCallback()}createRenderRoot(){return this}render(){return l` 3 <div class="calculator --salary ${u({"--is-transitioning":this.isTransitioning})}" data-calculator> 4 ${c(this.isLoading,()=>l` ${this.renderLoading()} `,()=>l` 5 ${this.renderInitialView()} ${this.renderFirstFlow()} ${this.renderPriceCalculation()} ${this.renderResults()} 6 ${this.renderSecondFlow()} ${this.renderSendingOffer()} ${this.renderConfirmation()} 7 ${this.renderNoData()} 8 `)} 9 </div> 10 ${c(this.getDataFailed,()=>l` ${this.renderFailure()} `)} 11 `}renderLoading(){return l` 12 <div class="calculator__step --is-active"> 13 <h3 class="calculator__heading">Indlæser beregner</h3> 14 <canvas class="calculator__dot-lottie" style="width: 100px; height:100px;" data-dotlottie-loading></canvas> 15 <p class="calculator__medium text-center">Vent venligst...</p> 16 </div> 17 ${this.playLottieAnimation("[data-dotlottie-loading]","/assets/lottiefiles/salary-calculator/loading.json",!0,!0)} 18 `}renderFailure(){return l` 19 <dialog class="dialog --calculator" data-failure-dialog> 20 <button 21 class="btn --close" 22 @click="${t=>this.closeDialog(t,"[data-failure-dialog]")}" 23 type="button" 24 ></button> 25 <div class="dialog__content"> 26 <img class="dialog__tooltip-icon" src="/assets/icons/circle-exclamation-full.svg" width="20" height="20" /> 27 <p class="semibold">Ingen forbindelse til Det Faglige Hus Forsikring</p> 28 <p>Prøv venligst igen om et øjeblik, eller opdater siden for at genoprette forbindelsen.</p> 29 <div class="calculator__buttons --single"> 30 <button 31 class="btn btn-primary --arrow" 32 @click="${t=>{this.getDataFailed=!1,this.getSalaryData(),this.closeDialog(t,"[data-failure-dialog]")}}" 33 > 34 Prøv igen 35 </button> 36 </div> 37 </div> 38 </dialog> 39 `}renderNoData(){return l` 40 <dialog class="dialog --calculator" data-no-data-dialog> 41 <button 42 class="btn --close" 43 @click="${t=>this.closeDialog(t,"[data-no-data-dialog]")}" 44 type="button" 45 ></button> 46 <div class="dialog__content"> 47 <i class="dialog__exclamation-icon fa-solid fa-triangle-exclamation"></i> 48 <p class="semibold">For lidt data</p> 49 <p>Vi kan ikke lave en beregning, fordi vi ikke har nok data ud fra de oplysninger du har indtastet.</p> 50 <p>Du kan prøve at ændre dit svar eller springe spørgsmålet over.</p> 51 <div class="calculator__buttons --single"> 52 <button 53 class="btn btn-secondary" 54 @click="${t=>{this.closeDialog(t,"[data-no-data-dialog]")}}" 55 > 56 Luk 57 </button> 58 </div> 59 </div> 60 </dialog> 61 `}renderInitialView(){return l` 62 <div class="calculator__step --initial-view ${u({"--is-active":this.showInitialView})}" inert="${g(this.showInitialView?void 0:"")}"> 63 <canvas class="calculator__dot-lottie" style="width: 100px; height:100px;" data-dotlottie-intro></canvas> 64 <h2>${this.heading}</h2> 65 <div class="small mb-4">${x(this.text)}</div> 66 <div class="calculator__buttons --single"> 67 <button 68 class="btn btn-primary --arrow" 69 @click="${t=>this.nextStep(t)}" 70 ?disabled=${this.getDataFailed} 71 > 72 Start 73 </button> 74 </div> 75 </div> 76 ${c(this.showInitialView,()=>l` 77 ${this.playLottieAnimation("[data-dotlottie-intro]","/assets/lottiefiles/salary-calculator/intro.json")} 78 `)} 79 `}renderFirstFlow(){return l` 80 <!-- STEP 1: Job --> 81 <div class="calculator__step ${u({"--is-active":this.currentFlow===0&&this.currentStep===1})}" inert="${g(this.currentFlow!==0||this.currentStep!==1?"":void 0)}"> 82 ${this.renderProgressBar(this.currentStep)} 83 <h3 class="calculator__heading">${this.heading}</h3> 84 85 <div class="calculator__transition-container ${u({"--no-transition":this.showInitialView})}"> 86 <form class="calculator__form" data-step-form> 87 <div class="calculator__input-group form-group"> 88 <div class="calculator__label-and-tooltip"> 89 <label class="calculator__form-label form-label" for="job">Hvad er din jobfunktion? *</label> 90 ${this.renderTooltipButton("[data-job-info-dialog]")} 91 </div> 92 <p class="info ultra-small">Vælg den jobfunktion der passer bedst.</p> 93 ${c(this.isMobile,()=>l` 94 <div class="calculator__search-input-wrapper"> 95 <input 96 id="job" 97 class="calculator__input form-control" 98 type="text" 99 name="job" 100 placeholder="Jobfunktion" 101 required 102 data-job-type-input 103 @click="${t=>this.openDialog(t,"[data-job-dialog]")}" 104 @change="${t=>this.debounceFunction(t,this.handleInput)}"
105 @input="${t=>this.debounceFunction(t,this.handleInput)}" 106 /> 107 <i class="fa-regular fa-magnifying-glass --no-value" aria-hidden="true"></i> 108 <i 109 class="fa-solid fa-circle-xmark --has-value" 110 @click="${t=>this.clearInput(t)}" 111 ></i> 112 </div> 113 `,()=>l` 114 <div class="calculator__search-input-wrapper"> 115 <input 116 id="job" 117 class="calculator__input form-control" 118 type="text" 119 name="job" 120 placeholder="Jobfunktion" 121 list="job-types" 122 required 123 data-job-type-input 124 @change="${t=>this.debounceFunction(t,this.handleInput)}" 125 @input="${t=>this.debounceFunction(t,this.handleInput)}" 126 @keydown="${t=>this.navigateDropdown(t)}" 127 /> 128 <i class="fa-regular fa-magnifying-glass --no-value" aria-hidden="true"></i> 129 <i 130 class="calculator__clear-button fa-solid fa-circle-xmark --has-value" 131 @click="${t=>this.clearInput(t)}" 132 ></i> 133 </div> 134 `)} 135 <ul id="job-types" class="calculator__result-list d-none" data-job-types-l
135ist> 136 ${b(this.getJobs(),t=>t,(t,e)=>l` 137 <li 138 id="${t.key}" 139 class="calculator__result" 140 @click="${()=>this.setJob(t)}" 141 ><span class="line-clamp-1">${t.value}</span></li> 142 ${c(e!==this.getJobs().length-1,()=>l` 143 <li class="calculator__result-divider"></li> 144 `)} 145 `)} 146 <div class="calculator__no-results ${u({"d-none":this.getJobs().length!==0})}"> 147 <p>Din søgning gav ingen resultater.</p> 148 <p>Tjek for stavefejl, eller prøv et andet søgeord.</p> 149 </div> 150 </ul> 151 <p class="calculator__input-error --value-missing warning">Husk at vælge en jobfunktion.</p> 152 <p class="calculator__input-error --value-invalid warning">Du skal vælge en jobfunktion fra listen.</p> 153 </div> 154 </form> 155 </div> 156 157 <div class="calculator__buttons"> 158 ${this.renderPreviousStepButton()} 159 ${this.renderNextStepButton()} 160 </div> 161 162 ${this.renderTemporaryResult()} 163 164 <dialog class="dialog --calculator" data-job-info-dialog> 165 <button 166 class="btn --close" 167 @click="${t=>this.closeDialog(t,"[data-job-info-dialog]")}" 168 type="button" 169 ></button> 170 <div class="dialog__content"> 171 <img class="dialog__tooltip-icon" src="/assets/icons/tooltip-hover.svg" width="20" height="20" /> 172 <p class="semibold">Jobfunktion</p> 173 <p>Du skal vælge den jobfunktion, der passer bedst til dit job. Listen indeholder ikke alle job.</p> 174 <div class="btn-container --grow"> 175 <button 176 class="btn btn-secondary --no-margin" 177 @click="${t=>this.closeDialog(t,"[data-job-info-dialog]")}" 178 > 179 Luk 180 </button> 181 </div> 182 </div> 183 </dialog> 184 185 <dialog class="dialog --calculator --fullscreen" data-job-dialog> 186 <button 187 class="btn --close" 188 @click="${t=>this.closeDialog(t,"[data-job-dialog]")}" 189 type="button" 190 tabindex="${this.currentFlow===0&&this.currentStep===2?0:-1}" 191 ></button> 192 <div class="dialog__content"> 193 <div class="calculator__input-group form-group"> 194 <label class="calculator__form-label form-label" for="job-dialog">Jobfunktion *</label> 195 <div class="calculator__search-input-wrapper"> 196 <input 197 id="job-dialog" 198 class="calculator__input form-control" 199 type="text" 200 name="job-dialog" 201 placeholder="Søg efter jobfunktion" 202 data-dialog-job-type-input 203 @change="${t=>this.debounceFunction(t,this.handleInput)}" 204 @input="${t=>this.debounceFunction(t,this.handleInput)}" 205 @keydown="${t=>this.navigateDropdown(t)}" 206 /> 207 <i class="fa-regular fa-magnifying-glass --no-value" aria-hidden="true"></i> 208 <i 209 class="calculator__clear-button fa-solid fa-circle-xmark --has-value" 210 @click="${t=>this.clearInput(t)}" 211 ></i> 212 </div> 213 <ul id="job-types" class="calculator__result-list" data-dialog-job-types-l
213ist> 214 ${b(this.getJobs(),t=>t,(t,e)=>l` 215 <li 216 id="${t.key}" 217 class="calculator__result" 218 @click="${()=>this.setJob(t)}" 219 ><span class="line-clamp-1">${t.value}</span></li> 220 ${c(e!==this.getJobs().length-1,()=>l` 221 <li> 222 <hr class="calculator__result-divider" /> 223 </li> 224 `)} 225 `)} 226 <div class="calculator__no-results ${u({"d-none":this.getJobs().length!==0})}"> 227 <p>Din søgning gav ingen resultater.</p> 228 <p>Tjek for stavefejl, eller prøv et andet søgeord.</p> 229 </div> 230 </ul> 231 </div> 232 </div> 233 </dialog> 234 </div> 235 236 <!-- STEP 2: Years of experience --> 237 <div class="calculator__step ${u({"--is-active":this.currentFlow===0&&this.currentStep===2})}" inert="${g(this.currentFlow!==0||this.currentStep!==2?"":void 0)}"> 238 ${this.renderProgressBar(this.currentStep)} 239 <h3 class="calculator__heading">${this.heading}</h3> 240 241 <div class="calculator__transition-container"> 242 <form class="calculator__form" data-step-form> 243 <div class="calculator__input-group form-group"> 244 <div class="calculator__label-and-tooltip"> 245 <label class="calculator__form-label form-label" for="experience">Hvor mange års erhvervserfaring har du?</label> 246 </div> 247 ${c(this.isMobile,()=>l` 248 <select class="calculator__input form-control" @change="${t=>this.handleExperienceChange(t)}"> 249 <option value="">Ikke relevant</option> 250 ${b(this.experienceIntervals??[],t=>t,(t,e)=>l` 251 <option 252 id="${t.key}" 253 class="calculator__result" 254 value="${t.key}" 255 > 256 <span class="line-clamp-1">${t.value}</span> 257 </option> 258 `)} 259 </select> 260 `,()=>l` 261 <div class="calculator__search-input-wrapper"> 262 <input 263 class="umbraco-forms-hidden" 264 type="text" 265 name="experience" 266 data-experience-input 267 @change="${t=>this.debounceFunction(t,this.handleInput)}" 268 @input="${t=>this.debounceFunction(t,this.handleInput)}" 269 /> 270 <button 271 class="calculator__input form-control input --arrow --pseudo-select ${u({"--has-value":this.userData.experience!==null})}" 272 type="button" 273 list="years-of-experience" 274 @keydown="${t=>this.navigateDropdown(t,!0)}" 275 > 276 ${this.userData.experience!==null?this.getExperienceIntervalValue():"Erhvervserfaring"} 277 </button> 278 </div>
279 <ul id="years-of-experience" class="calculator__result-list d-none"> 280 <li 281 class="calculator__result" 282 @click="${()=>this.setYearsOfExperience({key:"",value:"Ikke relevant"})}" 283 >Ikke relevant</li> 284 <li class="calculator__result-divider"></li> 285 ${b(this.salaryData?.experienceIntervals??[],t=>t,(t,e)=>l` 286 <li 287 id="${t.key}" 288 class="calculator__result" 289 @click="${()=>this.setYearsOfExperience(t)}" 290 ><span class="line-clamp-1">${t.value}</span></li> 291 ${c(this.salaryData&&e!==this.salaryData?.experienceIntervals.length-1,()=>l` 292 <li class="calculator__result-divider"></li> 293 `)} 294 `)} 295 </ul> 296 `)} 297 </div> 298 </form> 299 </div> 300 301 <div class="calculator__buttons"> 302 ${this.renderPreviousStepButton()} 303 ${this.renderNextStepButton()} 304 </div> 305 306 ${this.renderTemporaryResult()} 307 </div> 308 309 <!-- STEP 3: Salary --> 310 <div class="calculator__step ${u({"--is-active":this.currentFlow===0&&this.currentStep===3})}" inert="${g(this.currentFlow!==0||this.currentStep!==3?"":void 0)}"> 311 ${this.renderProgressBar(this.currentStep)} 312 <h3 class="calculator__heading">${this.heading}</h3> 313 314 <div class="calculator__transition-container"> 315 <form class="calculator__form" data-step-form> 316 <div class="calculator__input-group form-group"> 317 <div class="calculator__label-and-tooltip"> 318 <label class="calculator__form-label form-label" for="salary">Hvad er din bruttoløn før skat alt inklusiv?</label> 319 ${this.renderTooltipButton("[data-salary-info-dialog]")} 320 </div> 321 <p class="info ultra-small">Du skal medregne eks. pension, fritvalgsopsparing, fri telefoni eller andre goder.</p> 322 <input 323 id="salary" 324 class="calculator__input form-control" 325 name="salary" 326 type="text" 327 inputmode="numeric" 328 placeholder="F.eks. 25.000 kr." 329 data-salary-input 330 @change="${t=>this.handleInput(t)}" 331 @input="${t=>this.handleInput(t)}" 332 @keydown="${t=>this.handleNonNumericInput(t)}" 333 > 334 <p class="calculator__input-error --value-invalid warning">Indtast venligst kun tal.</p> 335 </div> 336 </form> 337 </div> 338 339 <div class="calculator__buttons"> 340 ${this.renderPreviousStepButton()} 341 ${this.renderNextStepButton()} 342 </div> 343 344 ${this.renderTemporaryResult()} 345 346 <dialog class="dialog --calculator" data-salary-info-dialog> 347 <button 348 class="btn --close" 349 @click="${t=>this.closeDialog(t,"[data-salary-info-dialog]")}" 350 type="button" 351 ></button> 352 <div class="dialog__content"> 353 <img class="dialog__tooltip-icon" src="/assets/icons/tooltip-hover.svg" width="20" height="20" /> 354 <p class="semibold">Bruttoløn</p> 355 <p>Du skal indtaste din bruttoløn som er din skattepligtige bruttoløn, inklusiv pension, evt. almindelig bonus, provision, fritvalgsopsparing og tillæg, fx beskattet firmabil og fri telefon. Du skal ikke medregne betaling for overtid.</p> 356 <div class="btn-container --grow"> 357 <button 358 class="btn btn-secondary --no-margin" 359 @click="${t=>this.closeDialog(t,"[data-salary-info-dialog]")}" 360 > 361 Luk 362 </button> 363 </div> 364 </div> 365 </dialog> 366 </div> 367 368 <!-- STEP 4: Working hours --> 369 <div class="calculator__step ${u({"--is-active":this.currentFlow===0&&this.currentStep===4})}" inert="${g(this.currentFlow!==0||this.currentStep!==4?"":void 0)}"> 370 ${this.renderProgressBar(this.currentStep)} 371 <h3 class="calculator__heading">${this.heading}</h3> 372 373 <div class="calculator__transition-container"> 374 <form class="calculator__form" data-step-form> 375 <div class="calculator__input-group form-group"> 376 <div class="calculator__label-and-tooltip"> 377 <label class="calculator__form-label form-label" for="working-hours">Hvad er din ugentlige arbejdstid?</label> 378 ${this.renderTooltipButton("[data-working-hours-info-dialog]")} 379 </div> 380 <input 381 id="working-hours" 382 class="calculator__input form-control" 383 name="working-hours" 384 type="text" 385 inputmode="numeric" 386 placeholder="F.eks. 37 timer" 387 data-working-hours-input 388 @change="${t=>this.handleInput(t)}"
389 @input="${t=>this.handleInput(t)}" 390 @keydown="${t=>this.handleNonNumericInput(t)}" 391 > 392 <p class="calculator__input-error --value-invalid warning">Indtast venligst kun tal.</p> 393 </div> 394 </form> 395 </div> 396 397 <div class="calculator__buttons"> 398 ${this.renderPreviousStepButton()} 399 ${this.renderNextStepButton()} 400 </div> 401 402 ${this.renderTemporaryResult()} 403 404 <dialog class="dialog --calculator" data-working-hours-info-dialog> 405 <button 406 class="btn --close" 407 @click="${t=>this.closeDialog(t,"[data-working-hours-info-dialog]")}" 408 type="button" 409 ></button> 410 <div class="dialog__content"> 411 <img class="dialog__tooltip-icon" src="/assets/icons/tooltip-hover.svg" width="20" height="20" /> 412 <p class="semibold">Ugentlig arbejdstid</p> 413 <p>Inkluder både dine faste arbejdstimer og eventuelle overarbejde, hvis det er relevant. Hvis din arbejdstid varierer fra uge til uge, så opgiv et gennemsnit baseret på din normale arbejdsrutine. Hvis du arbejder på deltid, midlertidigt eller har fleksible arbejdstider, så angiv det antal timer, du typisk arbejder hver uge.</p> 414 <div class="btn-container --grow"> 415 <button 416 class="btn btn-secondary --no-margin" 417 @click="${t=>this.closeDialog(t,"[data-working-hours-info-dialog]")}" 418 > 419 Luk 420 </button> 421 </div> 422 </div> 423 </dialog> 424 </div> 425 426 <!-- STEP 5: Sector --> 427 <div class="calculator__step ${u({"--is-active":this.currentFlow===0&&this.currentStep===5})}" inert="${g(this.currentFlow!==0||this.currentStep!==5?"":void 0)}"> 428 ${this.renderProgressBar(this.currentStep)} 429 <h3 class="calculator__heading">${this.heading}</h3> 430 431 <div class="calculator__transition-container"> 432 <form class="calculator__form" data-step-form> 433 <div class="calculator__input-group form-group"> 434 <div class="calculator__label-and-tooltip"> 435 <label class="calculator__form-label form-label" for="sector">Hvilken sektor er du ansat i?</label> 436 </div> 437 <p class="info ultra-small">Du kan enten være ansat i den offentlige eller private sektor.</p> 438 ${c(this.isMobile,()=>l` 439 <select class="calculator__input form-control" @change="${t=>this.handleSectorChange(t)}"> 440 <option value="">Vælg privat og offentlig</option> 441 ${b(this.sectors??[],t=>t,(t,e)=>l` 442 <option 443 id="${t.key}" 444 class="calculator__result" 445 value="${t.key}" 446 > 447 <span class="line-clamp-1">${t.value}</span> 448 </option> 449 `)} 450 </select> 451 `,()=>l` 452 <div class="calculator__search-input-wrapper"> 453 <input 454 class="umbraco-forms-hidden" 455 type="text" 456 name="sector" 457 @change="${t=>this.debounceFunction(t,this.handleInput)}"
458 @input="${t=>this.debounceFunction(t,this.handleInput)}" 459 data-sector-input 460 /> 461 <button 462 class="calculator__input form-control input --arrow --pseudo-select ${u({"--has-value":this.userData.sector!==null})}" 463 type="button" 464 list="sector" 465 @keydown="${t=>this.navigateDropdown(t,!0)}" 466 > 467 ${this.userData.sector!==null?`${this.getSectorValue()}`:"Vælg sektor"} 468 </button> 469 </div> 470 <ul id="sector" class="calculator__result-list d-none"> 471 <li 472 class="calculator__result" 473 @click="${()=>this.setSector({key:-1,value:""})}" 474 >Vælg privat og offentlig</li> 475 <li class="calculator__result-divider"></li> 476 ${b(this.salaryData?.sectors??[],t=>t,(t,e)=>l` 477 <li 478 id="${t.key}" 479 class="calculator__result" 480 @click="${()=>this.setSector(t)}" 481 ><span class="line-clamp-1">${t.value}</span></li> 482 ${c(this.salaryData&&e!==this.salaryData?.sectors.length-1,()=>l` 483 <li class="calculator__result-divider"></li> 484 `)} 485 `)} 486 </ul> 487 488 `)} 489 </div> 490 </form> 491 </div> 492 493 <div class="calculator__buttons"> 494 ${this.renderPreviousStepButton()} 495 ${this.renderNextStepButton()} 496 </div> 497 498 ${this.renderTemporaryResult()} 499 </div> 500 501 <!-- STEP 6: Industry --> 502 <div class="calculator__step ${u({"--is-active":this.currentFlow===0&&this.currentStep===6})}" inert="${g(this.currentFlow!==0||this.currentStep!==6?"":void 0)}"> 503 ${this.renderProgressBar(this.currentStep)} 504 <h3 class="calculator__heading">${this.heading}</h3> 505 506 <div class="calculator__transition-container"> 507 <form class="calculator__form" data-step-form> 508 <div class="calculator__input-group form-group"> 509 <div class="calculator__label-and-tooltip"> 510 <label class="calculator__form-label form-label" for="industry">Hvilken branche er du ansat i?</label> 511 </div> 512 ${c(this.isMobile,()=>l` 513 <select class="calculator__input form-control" @change="${t=>this.handleIndustryChange(t)}
513"> 514 <option value="">Vælg alle</option> 515 ${b(this.industries??[],t=>t,(t,e)=>l` 516 <option 517 id="${t.key}" 518 class="calculator__result" 519 value="${t.key}" 520 > 521 <span class="line-clamp-1">${t.value.length>40?t.value.substring(0,37)+"...":t.value}</span> 522 </option> 523 `)} 524 </select> 525 `,()=>l` 526 <div class="calculator__search-input-wrapper"> 527 <input 528 class="umbraco-forms-hidden" 529 type="text" 530 name="industry" 531 @change="${t=>this.debounceFunction(t,this.handleInput)}" 532 @input="${t=>this.debounceFunction(t,this.handleInput)}" 533 data-industry-input 534 /> 535 <button 536 class="calculator__input form-control input --arrow --pseudo-select ${u({"--has-value":this.userData.industry!==null})}" 537 type="button" 538 list="industry" 539 @keydown="${t=>this.navigateDropdown(t,!0)}" 540 > 541 ${this.userData.industry!==null?`${this.getIndustryValue()}`:"Vælg branche"} 542 </button> 543 </div> 544 <ul id="industry" class="calculator__result-list d-none"> 545 <li 546 class="calculator__result" 547 @click="${()=>this.setIndustry({key:"",value:""})}" 548 >Vælg alle</li> 549 <li class="calculator__result-divider"></li> 550 ${b(this.salaryData?.industries??[],t=>t,(t,e)=>l` 551 <li 552 id="${t.key}" 553 class="calculator__result" 554 @click="${()=>this.setIndustry(t)}" 555 ><span class="line-clamp-1">${t.value}</span></li> 556 ${c(this.salaryData&&e!==this.salaryData.industries.length-1,()=>l` 557 <li class="calculator__result-divider"></li> 558 `)} 559 `)} 560 </ul> 561 `)} 562 </div> 563 </form> 564 </div> 565 566 <div class="calculator__buttons"> 567 ${this.renderPreviousStepButton()} 568 ${this.renderNextStepButton()} 569 </div> 570 571 ${this.renderTemporaryResult()} 572 </div> 573 574 <!-- STEP 7: Region --> 575 <div class="calculator__step ${u({"--is-active":this.currentFlow===0&&this.currentStep===7})}" inert="${g(this.currentFlow!==0||this.currentStep!==7?"":void 0)}"> 576 ${this.renderProgressBar(this.currentStep)} 577 <h3 class="calculator__heading">${this.heading}</h3> 578 579 <div class="calculator__transition-container"> 580 <form class="calculator__form" data-step-form> 581 <div class="calculator__input-group form-group"> 582 <div class="calculator__label-and-tooltip"> 583 <label class="calculator__form-label form-label" for="region">Hvilken region ligger din arbejdsplads i?</label> 584 </div> 585 ${c(this.isMobile,()=>l` 586 <select class="calculator__input form-control" @change="${t=>this.handleRegionChange(t)}
586"> 587 <option value="">Vælg alle</option> 588 ${b(this.regions??[],t=>t,(t,e)=>l` 589 <option 590 id="${t}" 591 class="calculator__result" 592 value="${t}" 593 > 594 <span class="line-clamp-1">${t.length>40?t.substring(0,37)+"...":t}</span> 595 </option> 596 `)} 597 </select> 598 `,()=>l` 599 <div class="calculator__search-input-wrapper"> 600 <input 601 class="umbraco-forms-hidden" 602 type="text" 603 name="region" 604 @change="${t=>this.debounceFunction(t,this.handleInput)}" 605 @input="${t=>this.debounceFunction(t,this.handleInput)}" 606 data-region-input 607 /> 608 <button 609 class="calculator__input form-control input --arrow --pseudo-select ${u({"--has-value":this.userData.region!==null})}" 610 type="button" 611 list="region" 612 @keydown="${t=>this.navigateDropdown(t,!0)}" 613 > 614 ${this.userData.region===null?"Vælg region":this.userData.region.length?`${this.userData.region}`:"Vælg alle"} 615 </button> 616 </div> 617 <ul id="region" class="calculator__result-list d-none"> 618 <li 619 class="calculator__result" 620 @click="${()=>this.setRegion("")}" 621 >Vælg alle</li> 622 <li class="calculator__result-divider"></li> 623 ${b(this.salaryData?.regions??[],t=>t,(t,e)=>l` 624 <li 625 id="${t}" 626 class="calculator__result" 627 @click="${()=>this.setRegion(t)}" 628 ><span class="line-clamp-1">${`${t}`}</span></li> 629 ${c(this.salaryData&&e!==this.salaryData.regions.length-1,()=>l` 630 <li class="calculator__result-divider"></li> 631 `)} 632 `)} 633 </ul> 634 `)} 635 </div> 636 </form> 637 </div> 638 639 <div class="calculator__buttons"> 640 ${this.renderPreviousStepButton()} 641 ${this.renderNextStepButton()} 642 </div> 643 644 ${this.renderTemporaryResult()} 645 </div> 646 647 <!-- STEP 8: Leadership --> 648 <div class="calculator__step ${u({"--is-active":this.currentFlow===0&&this.currentStep===8})}" inert="${g(this.currentFlow!==0||this.currentStep!==8?"":void 0)}"> 649 ${this.renderProgressBar(this.currentStep)} 650 <h3 class="calculator__heading">${this.heading}</h3> 651 652 <div class="calculator__transition-container"> 653 <form class="calculator__form" data-step-form> 654 <div class="calculator__input-group form-group singlechoice"> 655 <div class="calculator__label-and-tooltip"> 656 <label class="calculator__form-label form-label" for="leadership">Har du lederansvar?</label> 657 ${this.renderTooltipButton("[data-leadership-info-dialog]")} 658 </div> 659 <div class="form-control radiobuttonlist"> 660 <label class="calculator__radio-button-label" for="leadership-true"> 661 <input 662 class="calculator__input" 663 @change="${t=>this.handleInput(t)}" 664 type="radio" 665 id="leadership-true" 666 name="leadership" 667 value="true" 668 data-value="true" 669 /> 670 Ja 671 </label> 672 <label class="calculator__radio-button-label" for="leadership-false"> 673 <input 674 class="calculator__input" 675 @change="${t=>this.handleInput(t)}" 676 type="radio" 677 id="leadership-false" 678 name="leadership" 679 value="false" 680 data-value="false" 681 /> 682 Nej 683 </label> 684 </div> 685 </div> 686 </form> 687 </div> 688 689 <div class="calculator__buttons"> 690 ${this.renderPreviousStepButton()} 691 ${this.renderNextStepButton()} 692 </div> 693 694 ${this.renderTemporaryResult()} 695 696 <dialog class="dialog --calculator" data-leadership-info-dialog> 697 <button 698 class="btn --close" 699 @click="${t=>this.closeDialog(t,"[data-leadership-info-dialog]")}" 700 type="button" 701 ></button> 702 <div class="dialog__content"> 703 <img class="dialog__tooltip-icon" src="/assets/icons/tooltip-hover.svg" width="20" height="20" /> 704 <p class="semibold">Lederansvar</p> 705 <p>Hvis du er ansvarlig for at vejlede, motivere eller evaluere præstationer for et team eller en gruppe personer, vil dette typisk betyde, at du har lederansvar. Dette kan inkludere både formelle ledelsesroller, hvor du har direkte personaleansvar, samt mere uformelle ledelsesopgaver, hvor du fungerer som en mentor eller koordinator. Hvis du har overordnet ledelsesansvar kan du opleve at statistikken er mindre repræsentabel.</p> 706 <div class="btn-container --grow"> 707 <button 708 class="btn btn-secondary --no-margin" 709 @click="${t=>this.closeDialog(t,"[data-leadership-info-dialog]")}" 710 > 711 Luk 712 </button> 713 </div> 714 </div> 715 </dialog> 716 </div> 717 `}renderTemporaryResult(){return l` 718 ${c(this.userData.jobTitle!==null&&this.salaryData?.calculationSucceeded,()=>l` 719 <div class="calculator__user-data-summary --temporary-result"> 720 <h4 class="mb-3">Midlertidigt resultat</h4> 721 <p class="small bold mb-3">Her kan du se gennemsnitslønnen ud fra det du har indtastet ind til videre.</p> 722 ${c(this.getRemainingQuestions()>
7220,()=>l` 723 <p class="info ultra-small mb-3">Du mangler at svare på <strong>${this.getRemainingQuestions()}</strong> spørgsmål.</p> 724 `)} 725 ${this.renderAverageSalary()} 726 <button class="btn --link mb-0" type="button" @click="${t=>this.goToResults()}">Vis resultat</button> 727 </div> 728 `)} 729 `}renderAverageSalary(){return l` 730 <div class="calculator__average-salary ${u({"--result-page":this.showResults})}"> 731 <p class="small mb-1">Gennemsnitslønnen er</p> 732 <p class="calculator__average-salary-value mb-0">${this.salaryData?.averageSalary?.toLocaleString(this.locale,{minimumFractionDigits:0,maximumFractionDigits:0})} kr./md.</p> 733 <p class="ultra-small text-dark-grey mb-1">med pensionsbidrag og evt. bonus, men betaling som fx overtid er fratrukket.</p> 734 ${c(this.salaryData?.salaryDifference,()=>l` 735 <p class="small text-center mb-3"> 736 ${c(this.getSalaryDifference()===0,()=>l` 737 <i class="fa-regular fa-check"></i> 738 Du tjener det samme som gennemsnittet. 739 `)} 740 ${c(this.getSalaryDifference()>0,()=>l` 741 <i class="fa-regular fa-thumbs-up"></i> 742 Du tjener ${Math.abs(this.salaryData?.salaryDifference??0).toLocaleString(this.locale,{minimumFractionDigits:0,maximumFractionDigits:0})} kr. <strong>mere</strong> end gennemsnittet. 743 `)} 744 ${c(this.getSalaryDifference()<0,()=>l` 745 <i class="fa-regular fa-thumbs-down"></i> 746 Du tjener ${Math.abs(this.salaryData?.salaryDifference??0).toLocaleString(this.locale,{minimumFractionDigits:0,maximumFractionDigits:0})} kr. <strong>mindre</strong> end gennemsnittet. 747 `)} 748 </p> 749 `)} 750 </div> 751 `}renderPriceCalculation(){return l` 752 <div class="calculator__step ${u({"--is-active":this.showPriceCalculation})}" inert="${g(this.showPriceCalculation?"":void 0)}"> 753 <h3 class="calculator__heading">Henter information</h3> 754 <canvas class="calculator__dot-lottie" style="width: 100px; height:100px;" data-dotlottie-calculating></canvas> 755 <p class="calculator__medium text-center">Vent venligst...</p> 756 </div> 757 ${c(this.showPriceCalculation,()=>l` 758 ${this.playLottieAnimation("[data-dotlottie-calculating]","/assets/lottiefiles/salary-calculator/calculating.json",!0,!0)} 759 `)} 760 `}renderResults(){return l` 761 <div class="calculator__step ${u({"--is-active":this.showResults})}" inert="${g(this.showResults?void 0:"")}"> 762 <h3 class="calculator__heading">Dit resultat</h3> 763 <canvas class="calculator__dot-lottie" style="width: 100px; height:100px;" data-dotlottie-result></canvas> 764 765 ${this.renderAverageSalary()} 766 767 <div class="calculator__buttons --single"> 768 ${this.renderNextStepButton("Send til mail")} 769 </div> 770 771 <hr class="calculator__page-divider --large"> 772 773 <dl class="calculator__result-data-list small"> 774 <div class="calculator__result-data-group"> 775 <dt>Gennemsnitsløn:</dt> 776 <dd class="semibold">${this.salaryData?.averageSalary?.toLocaleString(this.locale,{minimumFractionDigits:0,maximumFractionDigits:0})} kr./md.</dd> 777 </div> 778 </dl> 779 780 <p class="small text-dark-grey">Gennemsnitslønnen er baseret på arbejdsmarkedspligtig A-indkomst inden for dit arbejdsområde og indeholder l
780øn, pension og værdien af nogle personalegoder (fx fri bil eller telefon). ATP er ikke medregnet.</p> 781 782 <hr class="calculator__page-divider"> 783 784 <dl class="calculator__result-data-list small"> 785 <div class="calculator__result-data-group"> 786 <dt>Din forventede lønudvikling er pÃ¥ ${this.salaryData?.expectedSalaryIncreasePercent!==null?this.salaryData?.expectedSalaryIncreasePercent?.toLocaleString(this.locale,{minimumFractionDigits:0,maximumFractionDigits:2}):this.expectedSalaryDifference}%:</dt> 787 <dd class="semibold">${this.getExpectedNewSalary()}</dd> 788 </div> 789 </dl> 790 791 <p class="small text-dark-grey">Dette er ikke et udtryk for, hvad du kan kræve i en lønsamtale, men du skal se det som et udgangspunkt i din lønforhandling.</p> 792 793 <hr class="calculator__page-divider"> 794 795 <dl class="calculator__result-data-list small"> 796 <div class="calculator__result-data-group"> 797 <dt>Data og beregning</dt> 798 </div> 799 </dl> 800 801 <p class="small text-dark-grey">Udgangspunktet for beregningen er data fra Danmarks Statistik og viser en sammenhæng mellem de seneste 2 Ã¥rs løndata.</p> 802 803 <hr class="calculator__page-divider --double-bottom"> 804 805 <p class="small bold mb-0">FÃ¥ en mere præcis beregning</p> 806 <p class="small text-dark-grey">Jo flere felter du udfylder i beregningen, desto mere præcis bliver resultatet, klik âRetâ for at ændre i dine svar eller udfylde flere felter.</p> 807 808 ${this.renderUserDataSummary(!0)} 809 810 <p class="small bold mb-0">Gem lønberegning</p> 811 <p class="small text-dark-grey mb-4">FÃ¥ tilsendt lønstatistikken, sÃ¥ du kan bruge den til din lønsamtale eller til din næste jobsamtale.</p> 812 813 <div class="calculator__buttons mb-2"> 814 ${this.renderPreviousStepButton()} 815 ${this.renderNextStepButton("Send til mail")} 816 </div> 817 818 <div class="calculator__buttons --single"> 819 <button class="btn --rotate-right" @click="${()=>this.goToInitialView()}">Prøv igen</button> 820 </div> 821 </div> 822 ${c(this.showResults,()=>l` 823 ${this.playLottieAnimation("[data-dotlottie-result]","/assets/lottiefiles/salary-calculator/result.json")} 824 `)} 825 `}renderUserDataSummary(t){return l` 826 <div class="calculator__user-data-summary"> 827 <h3 class="mb-1">Du har indtastet</h3> 828 <table class="calculator__user-data-table"> 829 <tr> 830 <td> 831 <p>Jobfunktion</p> 832 <p class="semibold"> 833 ${this.userData.jobTitle?this.getJobValue():"Ikke besvaret"} 834 </p> 835 </td> 836 ${c(t,()=>l` 837 <td> 838 <a 839 @click="${e=>this.goToStepInFirstFlow(e,1)}" 840 href="#" 841 >Ret</a 842 > 843 </td> 844 `)} 845 </tr> 846 <tr> 847 <td> 848 <p>à rs erhvervserfaring</p> 849 <p class="semibold"> 850 ${this.userData.experience!==null?this.getExperienceIntervalValue():"Ikke besvaret"} 851 </p> 852 </td> 853 ${c(t,()=>l` 854 <td> 855 <a 856 @click="${e=>this.goToStepInFirstFlow(e,2)}" 857 href="#" 858 >Ret</a 859 > 860 </td> 861 `)} 862 </tr> 863 <tr> 864 <td> 865 <p>
865Bruttoløn</p> 866 <p class="semibold"> 867 ${this.userData.salary!==null?this.userData.salary?.toLocaleString(this.locale)+" kr.":"Ikke besvaret"} 868 </p> 869 </td> 870 ${c(t,()=>l` 871 <td> 872 <a 873 @click="${e=>this.goToStepInFirstFlow(e,3)}" 874 href="#" 875 >Ret</a 876 > 877 </td> 878 `)} 879 </tr> 880 <tr> 881 <td> 882 <p>Ugentlig arbejdstid</p> 883 <p class="semibold"> 884 ${this.userData.hours!==null?this.userData.hours+" timer":"Ikke besvaret"} 885 </p> 886 </td> 887 ${c(t,()=>l` 888 <td> 889 <a 890 @click="${e=>this.goToStepInFirstFlow(e,4)}" 891 href="#" 892 >Ret</a 893 > 894 </td> 895 `)} 896 </tr> 897 <tr> 898 <td> 899 <p>Sektor</p> 900 <p class="semibold"> 901 ${this.userData.sector?this.getSectorValue():"Ikke besvaret"} 902 </p> 903 </td> 904 ${c(t,()=>l` 905 <td> 906 <a 907 @click="${e=>this.goToStepInFirstFlow(e,5)}" 908 href="#" 909 >Ret</a 910 > 911 </td> 912 `)} 913 </tr> 914 <tr> 915 <td> 916 <p>Branche</p> 917 <p class="semibold"> 918 ${this.userData.industry?this.getIndustryValue():"Ikke besvaret"} 919 </p> 920 </td> 921 ${c(t,()=>l` 922 <td> 923 <a 924 @click="${e=>this.goToStepInFirstFlow(e,6)}" 925 href="#" 926 >Ret</a 927 > 928 </td> 929 `)} 930 </tr> 931 <tr> 932 <td> 933 <p>Region</p> 934 <p class="semibold"> 935 ${this.userData.region?this.userData.region:"Ikke besvaret"} 936 </p> 937 </td> 938 ${c(t,()=>l` 939 <td> 940 <a 941 @click="${e=>this.goToStepInFirstFlow(e,7)}" 942 href="#" 943 >Ret</a 944 > 945 </td> 946 `)} 947 </tr> 948 <tr> 949 <td> 950 <p>Lederansvar</p> 951 <p class="semibold"> 952 ${this.userData.isManager!==null?this.userData.isManager?"Ja":"Nej":"Ikke besvaret"} 953 </p> 954 </td> 955 ${c(t,()=>l` 956 <td> 957 <a 958 @click="${e=>this.goToStepInFirstFlow(e,8)}" 959 href="#" 960 >Ret</a 961 > 962 </td> 963 `)} 964 </tr> 965 </table> 966 </div> 967 `}renderSecondFlow(){return l` 968 <!-- STEP 1: Name --> 969 <div class="calculator__step ${u({"--is-active":this.currentFlow===1&&this.currentStep===1})}" inert="${g(this.currentFlow!==1||this.currentStep!==1?"":void 0)}"> 970 ${this.renderProgressBar(this.currentStep)} 971 <h3 class="calculator__heading">Send lønstatistik til mail</h3> 972 973 <div class="calculator__transition-container"> 974 <form class="calculator__form" data-step-form @submit="${this.preventFormSubmission}"> 975 <div class="calculator__input-group form-group"> 976 <label class="calculator__form-label form-label" for="name">Navn *</label> 977 <input 978 id="name" 979 class="calculator__input form-control" 980 type="text" 981 name="name" 982 placeholder="Fx Signe Lund" 983 required 984 @change="${t=>this.debounceFunction(t,this.handleInput)}"
985 @input="${t=>this.debounceFunction(t,this.handleInput)}" 986 @keydown="${t=>this.handleEnterKey(t)}" 987 /> 988 <p class="calculator__input-error --value-missing warning">Husk at udfylde Navn.</p> 989 </div> 990 </form> 991 </div> 992 993 <div class="calculator__buttons"> 994 ${this.renderPreviousStepButton()} 995 ${this.renderNextStepButton()} 996 </div> 997 </div> 998 999 <!-- STEP 2: Phone --> 1000 <div class="calculator__step ${u({"--is-active":this.currentFlow===1&&this.currentStep===2})}" inert="${g(this.currentFlow!==1||this.currentStep!==2?"":void 0)}"> 1001 ${this.renderProgressBar(this.currentStep)} 1002 <h3 class="calculator__heading">Send lønstatistik til mail</h3> 1003 1004 <div class="calculator__transition-container"> 1005 <form class="calculator__form" data-step-form @submit="${this.preventFormSubmission}"> 1006 <div class="calculator__input-group form-group"> 1007 <label class="calculator__form-label form-label" for="phone">Tlf.nr.</label> 1008 <input 1009 id="phone" 1010 class="calculator__input --phone --is-pristine form-control" 1011 type="tel" 1012 name="phone" 1013 minlength="8" 1014 maxlength="8" 1015 placeholder="Fx 7020 2064" 1016 @keydown="${t=>this.handleEnterKey(t)}" 1017 @change="${t=>this.debounceFunction(t,this.handleInput)}" 1018 @input="${t=>this.debounceFunction(t,this.handleInput)}" 1019 @blur="${t=>{const e=t.target;e.className.includes("--is-pristine")&&e.classList.remove("--is-pristine")}}" 1020 /> 1021 <p class="calculator__input-error --value-missing warning">Husk at udfylde Tlf.nr.</p> 1022 <p class="calculator__input-error --too-short --too-long warning">Indtast venligst et gyldigt Tlf.nr.</p> 1023 </div> 1024 <div> 1025 <div class="calculator__input-group --accept-terms form-group checkbox"> 1026 <input 1027 id="accept-phone" 1028 class="calculator__input form-control" 1029 @change="${t=>this.handleInput(t)}" 1030 type="checkbox" 1031 name="accept-phone" 1032 /> 1033 <label class="form-check-label" for="accept-phone">Ja tak, Det Faglige Hus må kontakte mig.</label> 1034 </div> 1035 <p class="small mt-1">De oplysninger, du har givet, vil blive sendt videre til Det Faglige Hus, hvor vi ringer dig op og fortæller dig mere om fordelene ved at være medlem i Det Faglige Hus. Se hvordan vi behandler dine personoplysninger i vores <a href="https://www.detfagligehus.dk/om-os/info-om-persondata/" target="_blank">persondatapolitik</a>.</p> 1036 </div> 1037 </form> 1038 </div> 1039 1040 <div class="calculator__buttons"> 1041 ${this.renderPreviousStepButton()} 1042 ${this.renderNextStepButton()} 1043 </div> 1044 </div> 1045 1046 <!-- STEP 3: Membership --> 1047 <div class="calculator__step ${u({"--is-active":this.currentFlow===1&&this.currentStep===3})}" inert="${g(this.currentFlow!==1||this.currentStep!==3?"":void 0)}"> 1048 ${this.renderProgressBar(this.currentStep)} 1049 <h3 class="calculator__heading">Send lønstatistik til mail</h3> 1050 1051 <div class="calculator__transition-container"> 1052 <form class="calculator__form" data-step-form @submit="${this.preventFormSubmission}"> 1053 <div class="calculator__input-group form-group singlechoice"> 1054 <div class="calculator__label-and-tooltip"> 1055 <label class="calculator__form-label form-label">Er du medlem af Det Faglige Hus? *</label> 1056 </div> 1057 <div class="form-control radiobuttonlist"> 1058 <label class="calculator__radio-button-label" for="membership-true"> 1059 <input 1060 class="calculator__input" 1061 @change="${t=>this.handleInput(t)}" 1062 type="radio" 1063 id="membership-true" 1064 name="membership" 1065 value="true" 1066 required 1067 /> 1068 Ja 1069 </label> 1070 <label class="calculator__radio-button-label" for="membership-false"> 1071 <input 1072 class="calculator__input" 1073 @change="${t=>this.handleInput(t)}" 1074 type="radio" 1075 id="membership-false" 1076 name="membership" 1077 value="false" 1078 required 1079 /> 1080 Nej 1081 </label> 1082 </div> 1083 <p class="calculator__input-error --value-missing warning">Husk at vælge om du er medlem af Det Faglige Hus.</p> 1084 </div> 1085 </form> 1086 </div> 1087 1088 <div class="calculator__buttons"> 1089 ${this.renderPreviousStepButton()} 1090 ${this.renderNextStepButton()} 1091 </div> 1092 </div> 1093 1094 <!-- STEP 4: Email --> 1095 <div class="calculator__step ${u({"--is-active":this.currentFlow===1&&this.currentStep===4})}" inert="${g(this.currentFlow!==1||this.currentStep!==4?"":void 0)}"> 1096 ${this.renderProgressBar(this.currentStep)} 1097 <h3 class="calculator__heading">Send beregning til mail</h3> 1098 1099 <div class="calculator__transition-container ${u({"--no-transition":this.showSendingOffer})}"> 1100 <form class="calculator__form mb-0" data-step-form @submit="${this.preventFormSubmission}"> 1101 <div class="calculator__input-group form-group"> 1102 <label class="calculator__form-label form-label" for="phone">E-mail *</label> 1103 <input 1104 id="email" 1105 class="calculator__input --phone form-control" 1106 type="email" 1107 name="email" 1108 placeholder="Fx [email protected]" 1109 required 1110 @keydown="${t=>this.handleEnterKey(t)}" 1111 @blur="${t=>{this.handleInput(t)}}" 1112 /> 1113 <p class="calculator__input-error --value-missing warning">Husk at udfylde e-mail.</p> 1114 <p class="calculator__input-error --value-invalid warning">Husk at udfylde med en gyldig e-mail.</p> 1115 </div> 1116 <div class="calculator__input-group --accept-terms form-group checkbox"> 1117 <input 1118 id="accept-email" 1119 class="calculator__input form-control" 1120 @change="${t=>this.handleInput(t)}" 1121 type="checkbox" 1122 name="accept-email" 1123 /> 1124 <label class="form-check-label" for="accept-email">Ja tak, jeg giver samtykke til, at Det Faglige Hus må sende mig nyheder, gode tilbud og anden markedsføring på mail.</label> 1125 </div> 1126 </form> 1127 <div class="rte mb-4 mt-1"> 1128 <p class="small">
1128Jeg giver samtidig samtykke til, at Det Faglige Hus registrerer åbningsraten for at forbedre deres nyhedsservice og markedsføring overfor mig. I Det Faglige Hus' <a href="https://www.detfagligehus.dk/om-os/info-om-persondata/" target="_blank">persondatapolitik</a> kan jeg læse mere om, hvordan data opbevares og behandles.</p> 1129 <p class="small">Hvis Det Faglige Hus i fremtiden udvider produktkategorier eller kommunikationsformer, som ikke er indeholdt i dette samtykke, kontakter de mig igen med opfordring til at opdatere samtykket.</p> 1130 <p class="small">Samtykket er frivilligt, og jeg kan altid trække det tilbage ved at framelde mig på linket i mailen.</p> 1131 <strong class="d-block mb-1">Eksempler på markedsføring</strong> 1132 <ul> 1133 <li class="small">Nyhedsbrevet "Aktuelt" med vigtig information fra fagforening og a-kasse, medlemstilbud og konkurrencer.</li> 1134 <li class="small">Nyhedsbrevet "Aktuelt under uddannelse" til studerende.</li> 1135 <li class="small">Påmindelser om at udfylde dagpenge- eller efterlønskort til ledige og efterlønsmodtagere.</li> 1136 <li class="small">Tilbud om åben vejledning i forhold til jobsøgning, messer eller karrierenetværk.</li> 1137 <li class="small">Tilbud om webinarer eller kurser med temaer inden for a-kasse- eller fagforeningsområdet.</li> 1138 <li class="small">Tilbud fra Det Faglige Hus' samarbejdspartnere, der formidles via Det Faglige Hus. Fx forsikringer fra forsikringsselskabet Det Faglige Hus Forsikring, billige billetter til forlystelsesparker, billetter til sport eller ferietilbud. Derudover kan jeg få tilbud inden for produktkategorierne bil, bolig, beklædning, elektronik og personlig pleje. Jeg kan altid se de aktuelle tilbud i Det Faglige Hus' <a href="https://www.detfagligehus.dk/medlemsfordele/tilbudsshoppen/" target="_blank">Tilbudsshop</a>.</li> 1139 </ul> 1140 </div> 1141 </div> 1142 1143 <div class="calculator__buttons"> 1144 ${this.renderPreviousStepButton()} 1145 ${this.renderNextStepButton("Få statistik")} 1146 </div> 1147 </div> 1148 `}renderSendingOffer(){return l` 1149 <div class="calculator__step ${u({"--is-active":this.showSendingOffer})}"> 1150 <h3 class="calculator__heading">Sender information</h3> 1151 <canvas class="calculator__dot-lottie" style="width: 100px; height:100px;" data-dotlottie-submitting></canvas> 1152 <p class="calculator__medium text-center">Vent venligst...</p> 1153 </div> 1154 ${c(this.showSendingOffer,()=>l` 1155 ${this.playLottieAnimation("[data-dotlottie-submitting]","/assets/lottiefiles/salary-calculator/submitting.json",!0,!0)} 1156 `)} 1157 `}renderConfirmation(){return l` 1158 <div class="calculator__step ${u({"--is-active":this.showConfirmation})}"> 1159 <h3 class="calculator__heading">Lønstatistikken er sendt til din mail</h3> 1160 <canvas class="calculator__dot-lottie" style="width: 100px; height:100px;" data-dotlottie-confirmation></canvas> 1161 <p class="calculator__medium text-center mb-4">Der kan gå op til et par minutter før du modtager mailen.</p> 1162 <div class="calculator__buttons --single"> 1163 ${this.renderNextStepButton("Lav ny beregning")} 1164 </div> 1165 </div> 1166 ${c(this.showConfirmation,()=>l` 1167 ${this.playLottieAnimation("[data-dotlottie-confirmation]","/assets/lottiefiles/salary-calculator/confirmation.json")} 1168 `)} 1169 `}renderProgressBar(t){if(this.currentFlow!==-1&&this.currentStep!==-1)return l` 1170 <progress-bar 1171 currentStep="${t}" 1172 totalSteps="${this.flows[this.currentFlow].totalSteps}" 1173 ></progress-bar> 1174 `}renderTooltipButton(t){return l` 1175 <button 1176 class="tooltip-button help-block" 1177 @click="${e=>this.openDialog(e,t)}" 1178 type="button" 1179 > 1180 <img class="tooltip-button__image --default" src="/assets/icons/tooltip.svg" alt="tooltip icon" /> 1181 <img class="tooltip-button__image --hover" src="/assets/icons/tooltip-hover.svg" alt="tooltip icon" /> 1182 <img class="tooltip-button__image --active" src="/assets/icons/tooltip-active.svg" alt="tooltip icon" /> 1183 </button> 1184 `}renderPreviousStepButton(t="Tilbage"){return l` 1185 <button 1186 class="btn btn-tertiary" 1187 @click="${e=>this.previousStep(e)}" 1188 > 1189 ${t} 1190 </button> 1191 `}renderNextStepButton(t="Næste"){return l` 1192 <button 1193 class="btn btn-primary --arrow" 1194 @click="${e=>this.nextStep(e)}" 1195 ?disabled="${this.currentFlow===0&&!this.calculationMap.get(this.currentStep)}" 1196 > 1197 ${t} 1198 </button> 1199 `}async getSalaryData(t=!1){let e=!0;if(setTimeout(()=>{e=!1,this.salaryData!==null&&(this.isLoading=!1)},2e3),this.checkIfFailedStepsShouldBeReset(),this.expectedSalaryDifference&&(this.userData.defaultSalaryIncreasePercent=Number(this.expectedSalaryDifference)),t){const s=new Headers;s.append("Content-Type","application/json"),s.append(this.tokenSetHeaderName,this.tokenSetRequestToken);const r={values:{}};r.values={...this.userContactData,isAMember:this.userContactData.isAMember?"Yes":"No",acceptPhoneMarketing:this.userContactData.acceptPhoneMarketing?"Yes":"No",acceptEmailMarketing:this.userContactData.acceptEmailMarketing?"Yes":"No"},await fetch(`/umbraco/forms/delivery/api/v1/entries/${this.formId}`,{method:"POST",headers:s,body:JSON.stringify(r)}).then(d=>{if(!d.ok)throw new Error("Offer data submit failed")}
1199).catch(d=>{console.error(d)})}const a={...this.userData},i=new Headers;i.append("Content-Type","application/json"),await fetch(`/api/salarycalculator/calculate${t?`?sendMail=true&email=${this.userContactData.email}`:""}`,{method:"POST",headers:i,body:JSON.stringify(a)}).then(s=>{if(s.ok)return s.json();throw new Error("Calculate request failed")}).then(s=>{if(!s.calculationSucceeded){this.noDataDialog?.then(r=>{r.getAttribute("open")===null&&y(r,80)}),this.calculationMap.set(this.currentStep,!1),this.checkIfFailedStepsShouldBeReset();return}this.salaryData=s,this.experienceIntervals.length!==s.experienceIntervals.length&&(this.experienceIntervals=s.experienceIntervals),this.sectors.length!==s.sectors.length&&(this.sectors=s.sectors),this.industries.length!==s.industries.length&&(this.industries=s.industries),this.regions.length!==s.regions.length&&(this.regions=s.regions),!e&&this.isLoading&&(this.isLoading=!1),this.currentFlow===0&&this.calculationMap.set(this.currentStep,s.calculationSucceeded)}).catch(s=>{console.error(s),this.getDataFailed=!0,this.salaryData=null,this.dataFailureDialog?.then(r=>{y(r,80)})})}checkIfFailedStepsShouldBeReset(){if(this.currentFlow===0&&this.currentStep<=this.flows[0].totalSteps){const t=[];for(const e of this.calculationMap)e[0]===this.currentStep&&!e[1]&&t.push(e[0]);if(t.length)for(const e of t){switch(e){case 1:this.userData.jobTitle=null;break;case 2:this.userData.experience=null;break;case 3:this.userData.salary=null;break;case 4:this.userData.hours=null;break;case 5:this.userData.sector=null;break;case 6:this.userData.industry=null;break;case 7:this.userData.region=null;break;case 8:this.userData.isManager=null;break}this.calculationMap.set(e,!0),this.resetStepForm(e),this.getSalaryData()}}}resetStepForm(t){const e=this.stepForms[t-1];for(const a of e.elements){if(a.nodeName==="INPUT"){const i=a;i.classList.remove("--has-value"),(i.type==="checkbox"||i.type==="radio")&&(i.checked=!1),(i.type==="text"&&!i.className.includes("d-none")||!i.className.includes("umbraco-forms-hidden"))&&(i.value="")}if(a.nodeName==="SELECT"){const i=a;i.value=""}}}playLottieAnimation(t,e,a=!0,i=!1){const s=this.querySelector(t);s?s.getAttribute("data-is-initialized")===null&&(new L({autoplay:a,loop:i,canvas:s,src:e}),s.setAttribute("data-is-initialized","")):setTimeout(()=>{this.playLottieAnimation(t,e,a,i)},50)}previousStep(t){this.isTransitioning=!0,setTimeout(()=>{this.isTransitioning=!1},500),this.hideNavigationButtons(t),setTimeout(()=>{if(this.calculator?.then(e=>{e.scrollIntoView({behavior:"smooth"})}),this.currentFlow===1&&this.currentStep===1){this.showResults=!0,this.currentFlow=-1,this.currentStep=-1;return}if(this.showResults){this.showResults=!1,this.currentFlow=0,this.currentStep=this.flows[0].totalSteps;return}if(this.currentFlow===0&&this.currentStep===1){this.showInitialView=!0,this.currentFlow=-1,this.currentStep=-1;return}this.currentStep>1&&this.currentStep--},this.transitionDelay)}nextStep(t){if(this.isTransitioning=!0,setTimeout(()=>{this.isTransitioning=!1},500),this.showInitialView){this.showInitialView=!1,this.currentFlow=0,this.currentStep=1;for(let e=1;e<this.flows[0].totalSteps+1;e++)this.calculationMap.set(e,!0),this.resetStepForm(e);this.userData={jobTitle:null,salary:null,experience:null,hours:null,sector:null,industry:null,region:null,isManager:null,defaultSalaryIncreasePercent:null},this.hideNavigationButtons(t),this.calculator?.then(e=>{e.scrollIntoView({behavior:"smooth"})});return}setTimeout(()=>{if(this.showResults){this.showResults=!1,this.currentFlow=1,this.currentStep=1,this.calculator?.then(a=>{a.scrollIntoView({behavior:"smooth"})});return}if(this.showConfirmation){this.goToInitialView();return}if(this.checkStepValidity()){if(this.hideNavigationButtons(t),this.calculator?.then(a=>{a.scrollIntoView({behavior:"smooth"})}),this.currentStep++,this.currentFlow===0&&this.currentStep>this.flows[0].totalSteps){this.currentFlow=-1,this.currentStep=-1,this.showPriceCalculation=!0,setTimeout(()=>{this.showPriceCalculation=!1,this.showResults=!0},1e3);return}if(this.currentFlow===1&&this.currentStep>this.flows[1].totalSteps){this.currentFlow=-1,this.currentStep=-1,this.showSendingOffer=!0,this.get
1199SalaryData(!0),setTimeout(()=>{this.showSendingOffer=!1,this.showConfirmation=!0},1e3);return}}},this.transitionDelay)}checkStepValidity(){let t=0;this.currentFlow===1&&(t=this.currentStep-1+this.flows[0].totalSteps),this.currentFlow===0&&(t=this.currentStep-1);const e=this.stepForms[t];let a=!1;if(e){let i="";if(a=e.checkValidity(),this.currentFlow===0&&this.currentStep===1&&(this.userData.jobTitle?this.salaryData?.jobtitles.find(r=>r.key===this.userData.jobTitle)||(a=!1,i="value-invalid"):a=!1),this.currentFlow===0&&this.currentStep===3&&this.salaryInputValue.length){const s=this.querySelector("[data-salary-input]"),r=s.closest(".calculator__input-group");a=this.validateSalaryStep(this.salaryInputValue,s,r),a||(i="value-invalid")}if(this.currentFlow===0&&this.currentStep===4&&this.workingHoursInputValue.length){const s=this.querySelector("[data-working-hours-input]"),r=s.closest(".calculator__input-group");a=this.validateWorkingHoursStep(this.workingHoursInputValue,s,r),a||(i="value-invalid")}if(a){const s=Array.from(e.querySelectorAll(".calculator__input-group"));if(s.length)for(const r of s)this.removeErrorStates(r)}else for(const s of e.elements)if(["input","select"].includes(s.nodeName.toLowerCase())&&!s.className.includes("d-none")){s.classList.remove("--is-pristine");const r=s.closest(".calculator__input-group");this.setValidityStates(r,s,i)}}return a}goToStepInFirstFlow(t,e){t.preventDefault(),this.calculator?.then(a=>{a.scrollIntoView({behavior:"smooth"})}),this.showResults=!1,this.currentFlow=0,this.currentStep=e}goToResults(){this.calculator?.then(t=>{t.scrollIntoView({behavior:"smooth"})}),this.currentFlow=-1,this.currentStep=-1,this.showPriceCalculation=!0,setTimeout(()=>{this.showPriceCalculation=!1,this.showResults=!0},1e3)}goToInitialView(){this.getDataFailed=!1,this.showResults=!1,this.showConfirmation=!1,this.showInitialView=!0,this.isLoading=!0,this.calculator?.then(s=>{s.scrollIntoView({behavior:"smooth"})}),this.userData={jobTitle:null,experience:null,salary:null,hours:null,sector:null,industry:null,region:null,isManager:null,defaultSalaryIncreasePercent:Number(this.expectedSalaryDifference)??0},this.userContactData={name:null,phone:null,isAMember:null,email:null,acceptPhoneMarketing:null,acceptEmailMarketing:null},this.jobInputValue="",this.salaryInputValue="",this.workingHoursInputValue="";for(const s of this.stepForms){const r=s.elements;if(r.length){for(const d of r)if(d.nodeName.toLowerCase()==="input"){const m=d;(m.type==="checkbox"||m.type==="radio")&&(m.checked=!1),m.type==="text"&&(m.value="")}}}const t=this.querySelector("#name");t&&(t.value="");const e=this.querySelector("#phone");e&&(e.value="");const a=this.querySelectorAll('[name="membership"]');if(a.length)for(const s of a)s.checked=!1;const i=this.querySelector("#email");i&&(i.value=""),this.getSalaryData()}preventFormSubmission(t){t.preventDefault(),this.nextStep(t)}handleEnterKey(t){t.key==="Enter"&&(t.preventDefault(),this.nextStep(t))}handleNonNumericInput(t){const e=t.key.toLowerCase();if(e==="enter"){t.preventDefault(),this.nextStep(t);return}e==="delete"||e==="backspace"||e==="arrowleft"||e==="arrowright"||e==="home"||e==="end"||e==="tab"||isNaN(Number(t.key))&&t.preventDefault()}handleInput(t){const e=t.target;let a=e.value;!a&&e.name==="leadership"&&(a=e.dataset.value??""),a.length?e.classList.add("--has-value"):e.classList.remove("--has-value");const i=e.closest(".calculator__input-group");if(!i){console.error('Cannot find "inputGroup" element');return}switch(e.name){case"job":{this.jobInputValue=a,this.userData={...this.userData,jobTitle:null};
1199const s=this.querySelector("[data-job-types-list]");s&&s.className.includes("d-none")&&s.classList.remove("d-none"),this.setValidityStates(i,e,a.length?"value-invalid":"");break}case"job-dialog":{this.jobInputValue=a;const s=this.querySelector("[data-dialog-job-types-list]");s&&s.className.includes("d-none")&&s.classList.remove("d-none");break}case"salary":{this.salaryInputValue=a,this.debounceValidateStep(a,e,i,this.validateSalaryStep);break}case"working-hours":{this.workingHoursInputValue=a,this.debounceValidateStep(a,e,i,this.validateWorkingHoursStep);break}case"leadership":this.userData={...this.userData,isManager:a==="true"},this.getSalaryData();break;case"name":{this.setValidityStates(i,e),this.userContactData={...this.userContactData,name:a.length?a:null};break}case"phone":{e.className.includes("--is-pristine")||this.setValidityStates(i,e),this.userContactData={...this.userContactData,phone:a.length?a:null};break}case"membership":{this.setValidityStates(i,e),this.userContactData={...this.userContactData,isAMember:a==="true"};break}case"email":{const s=a.length?new RegExp("^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$").test(a):!0;this.setValidityStates(i,e,s?"":"value-invalid"),this.userContactData={...this.userContactData,email:a.length&&s?a:null};break}case"correct-info":this.setValidityStates(i,e);break;case"accept-phone":{const s=e.checked;this.userContactData={...this.userContactData,acceptPhoneMarketing:s};const r=this.querySelector('[name="phone"]'),d=this.querySelector('[for="phone"]');r&&d&&(s?(r.setAttribute("required",""),d.innerText+=" *"):(r.removeAttribute("required"),d.innerText=d.innerText.substring(0,d.innerText.length-2),this.checkStepValidity()));break}case"accept-email":{const s=e.checked;this.userContactData={...this.userContactData,acceptEmailMarketing:s};break}}}setValidityStates(t,e,a=""){if(a)t.classList.remove("--value-missing"),t.classList.remove("--range-overflow"),t.classList.remove("--too-short"),t.classList.remove("--too-long"),t.classList.add(`--${a}`);else{t.classList.remove("--value-invalid");const i=e.validity;i.valueMissing?t.classList.add("--value-missing"):t.classList.remove("--value-missing"),i.rangeOverflow?t.classList.add("--range-overflow"):t.classList.remove("--range-overflow"),i.tooShort?t.classList.add("--too-short"):t.classList.remove("--too-short"),i.tooLong?t.classList.add("--too-long"):t.classList.remove("--too-long")}}removeErrorStates(t){t.classList.remove("--value-missing"),t.classList.remove("--range-overflow"),t.classList.remove("--too-short"),t.classList.remove("--too-long"),t.classList.remove("--value-invalid")}validateSalaryStep(t,e,a){let i;if(t.length){const s=t.replaceAll(".","");!isNaN(Number(s))?(i=!0,this.userData={...this.userData,salary:Number(s)}
1199,this.getSalaryData(),e.value=Number(s).toLocaleString(this.locale),this.removeErrorStates(a)):(i=!1,this.setValidityStates(a,e,"value-invalid"),this.userData={...this.userData,salary:null})}else i=!1,this.setValidityStates(a,e),this.userData={...this.userData,salary:null},this.getSalaryData();return i}validateWorkingHoursStep(t,e,a){let i;return t.length?!isNaN(Number(t))?(i=!0,this.userData={...this.userData,hours:Number(t)},this.getSalaryData(),this.removeErrorStates(a)):(i=!1,this.setValidityStates(a,e,"value-invalid"),this.userData={...this.userData,hours:null}):(i=!1,this.setValidityStates(a,e),this.userData={...this.userData,hours:null}),i}openDialog(t,e){t.stopImmediatePropagation(),t.preventDefault(),t.stopPropagation();const a=this.querySelector(`${e}`);if(a){y(a,80),a.querySelector(".btn.--close")?.blur(),a.querySelector("input")?.focus();const i=a.querySelector(".calculator__result-list");i&&i.classList.remove("d-none")}}closeDialog(t,e){t.preventDefault(),t.stopPropagation();const a=this.querySelector(`${e}`);if(a){const i=a.querySelector("input");i&&(i.value="",i.blur()),$(a,80);const s=this.querySelector(".calculator__step.--is-active");if(s){const r=s.querySelector("form");if(r){for(const d of r.elements)d instanceof HTMLInputElement&&d.type==="text"&&d.blur();r.focus()}}this.isMobile&&this.calculator?.then(r=>{r.scrollIntoView({behavior:"smooth"})})}}clearInput(t){const a=t.target.parentElement?.querySelector(".calculator__input");if(a){a.classList.remove("--has-value"),a.value="",this.jobInputValue="";const i=a.form;if(i){const s=i.querySelector(".calculator__result-list");s&&s.classList.remove("d-none")}}}hideNavigationButtons(t){if(!t.target)return;const e=t.target;e.classList.contains("btn")&&e.parentElement?.classList.contains("calculator__buttons")&&(e.parentElement.style.display="none",setTimeout(()=>{e.parentElement&&(e.parentElement.style.display="flex")},500))}navigateDropdown(t,e=!1){const a=t.code.toLowerCase(),i=t.target,s=i.value?i.value:"";if(a!=="tab"){if((e||a==="enter")&&t.preventDefault(),a==="enter"||a==="space"){const r=i.getAttribute("list");if(r){const d=this.querySelector(`#${r}`);d?.className.includes("d-none")&&d?.classList.remove("d-none")}}if(a==="arrowdown"||a==="arrowup"||a==="enter"){const r=a==="arrowdown"?1:-1,d=i.getAttribute("list");if(d){const m=this.querySelector(`#${d}`);if(m&&!m.className.includes("d-none")){const p=Array.from(m.children).filter(v=>!v.className.includes("calculator__result-divider")&&!v.className.includes("d-none"));if(p.length){const v=p.findIndex(f=>f.className.includes("--is-active"));if(a==="enter"&&v!==-1){const f=p[v];if(!f.textContent?.toLocaleLowerCase().includes(s.toLocaleLowerCase()))return;f.addEventListener("click",()=>{t.preventDefault(),t.stopImmediatePropagation()}),f.click(),f.removeEventListener("click",()=>{t.preventDefault(),t.stopImmediatePropagation()}),p.forEach(w=>w.classList.remove("--is-active"))}v===-1?r===1?p[0].classList.add("--is-active"):(p.at(-1)?.classList.add("--is-active"),m.scrollTop=p.at(-1).offsetTop-167):v===p.length-1&&r===1?(p.forEac
1199h(f=>f.classList.remove("--is-active")),p[0].classList.add("--is-active"),m.scrollTop=p[0].offsetTop-10):v===0&&r===-1?(p.forEach(f=>f.classList.remove("--is-active")),p.at(-1)?.classList.add("--is-active"),m.scrollTop=p.at(-1).offsetTop-167):(p.forEach(f=>f.classList.remove("--is-active")),p[v+r].classList.add("--is-active"),v>1&&(m.scrollTop=p[v+r].offsetTop-167))}}}}}}handleDocumentClick(t){t.stopPropagation();const e=t.target;if(e.className==="calculator__result"||e.closest(".calculator__result")){this.resultDropdowns.forEach(a=>{a.className.includes("d-none")||a.classList.add("d-none")});return}if(!(e.className.includes("dialog")||e.closest(".dialog"))){if(e.className.includes("calculator__input")){e.closest(".calculator__form")?.querySelector(".calculator__result-list")?.classList.remove("d-none");return}e.className.includes("calculator__result-list")||e.className!=="calculator__result"&&e.closest(".calculator__result-list")||this.resultDropdowns.forEach(a=>{a.className.includes("d-none")||a.classList.add("d-none")})}}getJobs(){return this.jobInputValue?this.salaryData?.jobtitles.filter(t=>t.value.toLocaleLowerCase().includes(this.jobInputValue.toLocaleLowerCase().trim()))??[]:this.salaryData?.jobtitles??[]}setJob(t){this.userData={...this.userData,jobTitle:t.key},this.jobInputValue="",this.getSalaryData();const e=this.querySelector("[data-job-type-input]");if(e){e.value=t.value;const a=e.closest(".calculator__input-group");a&&this.removeErrorStates(a)}if(this.isMobile){const a=this.querySelector("[data-job-dialog]");if(a){const i=a.querySelector("[data-dialog-job-type-input]");i&&(i.value="",i.blur()),$(a),e&&e.blur()}this.calculator?.then(i=>{i.scrollIntoView({behavior:"smooth"})})}}handleExperienceChange(t){const a=t.target.value;if(a){const i=this.salaryData?.experienceIntervals.find(s=>s.key===a);i&&this.setYearsOfExperience(i)}else this.setYearsOfExperience({key:"",value:"Ikke relevant"})}setYearsOfExperience(t){this.userData={...this.userData,experience:t.key},this.getSalaryData();const e=this.querySelector("[data-experience-input]");if(e){e.value=t.value;const a=e.closest(".calculator__input-group");a&&this.removeErrorStates(a)}}handleSectorChange(t){const a=t.target.value;if(a){const i=this.salaryData?.sectors.find(s=>s.key===Number(a));i&&this.setSector(i)}else this.setSector({key:-1,value:"Vælg privat og offentlig"})}setSector(t){this.userData={...this.userData,sector:t.key},this.getSalaryData();const e=this.querySelector("[data-sector-input]");if(e){e.value=t.value;const a=e.closest(".calculator__input-group");a&&this.removeErrorStates(a)}}handleIndustryChange(t){const a=t.target.value;if(a){const i=this.salaryData?.industries.find(s=>s.key===a);i&&this.setIndustry(i)}else this.setIndustry({key:"",value:"Vælg alle"})}setIndustry(t){this.userData={...this.userData,industry:t.key},this.getSalaryData();const e=this.querySelector("[data-industry-input]");if(e){e.value=t.value;const a=e.closest(".calculator__input-group");a&&this.removeErrorStates(a)}}handleRegionChange(t){const a=t.target.value;if(a){const i=this.salaryData?.regions.find(s=>s===a);i&&this.setRegion(i)}else this.setRegion("")}setRegion(t){this.userData={...this.userData,region:t},this.getSalaryData();const e=this.querySelector("[data-region-input]");if(e){e.value=t;const a=e.closest(".calculator__input-group");a&&this.removeErrorStates(a)}}getJobValue(){return this.salaryData?.jobtitles.find(t=>t.key===this.userData.jobTitle)?.value??""}getExperienceIntervalValue(){return this.salaryData?.experienceIntervals.find(t=>t.key===this.userData.experience)?.value??"Ikke relevant"}getSectorValue(){return this.salaryData?.sectors.find(t=>t.key===this.userData.sector)?.value??"Vælg privat og offentlig"}getIndustryValue(){return this.salaryData?.industries.find(t=>t.key===this.userData.industry)?.value??"Vælg alle"}getSalaryDifference(){return this.salaryData&&this.salaryData.salaryDifference?Number.parseInt(this.salaryData.salaryDifference.toString()):0}getExpectedNewSalary(){let t=0;return this.salaryData?.expectedNewSalary?t=this.salaryData.expectedNewSalary:this.salaryData?.averageSalary&&(t=this.salaryData?.averageSalary*Number(this.expectedSalaryDifference)),`${t.toLocaleStr
1199ing(this.locale,{minimumFractionDigits:0,maximumFractionDigits:0})} kr./md. i ${new Date().getFullYear()}`}getRemainingQuestions(){let t=this.flows[0].totalSteps;for(const e of[this.userData.jobTitle,this.userData.experience,this.userData.salary,this.userData.hours,this.userData.sector,this.userData.industry,this.userData.region,this.userData.isManager])e!==null&&t--;return t}};n([_()],o.prototype,"heading",2);n([_()],o.prototype,"formId",2);n([_()],o.prototype,"tokenSetHeaderName",2);n([_()],o.prototype,"tokenSetRequestToken",2);n([_({type:String})],o.prototype,"expectedSalaryDifference",2);n([h()],o.prototype,"isLoading",2);n([h()],o.prototype,"isCalculatingPrice",2);n([h()],o.prototype,"currentStep",2);n([h()],o.prototype,"currentFlow",2);n([h()],o.prototype,"showInitialView",2);n([h()],o.prototype,"showPriceCalculation",2);n([h()],o.prototype,"showResults",2);n([h()],o.prototype,"showSendingOffer",2);n([h()],o.prototype,"showConfirmation",2);n([h()],o.prototype,"getDataFailed",2);n([h()],o.prototype,"isMobile",2);n([h()],o.prototype,"jobInputValue",2);n([h()],o.prototype,"salaryInputValue",2);n([h()],o.prototype,"workingHoursInputValue",2);n([h()],o.prototype,"userData",2);n([h()],o.prototype,"salaryData",2);n([h()],o.prototype,"experienceIntervals",2);n([h()],o.prototype,"sectors",2);n([h()],o.prototype,"industries",2);n([h()],o.prototype,"regions",2);n([h()],o.prototype,"calculationMap",2);n([h()],o.prototype,"isTransitioning",2);n([D("[data-step-form]")],o.prototype,"stepForms",2);n([D(".calculator__result-list")],o.prototype,"resultDropdowns",2);n([k("[data-failure-dialog]")],o.prototype,"dataFailureDialog",2);n([k("[data-no-data-dialog]")],o.prototype,"noDataDialog",2);n([k("[data-calculator]")],o.prototype,"calculator",2);o=n([T("calculator-salary")],o);export{o as CalculatorSalary};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.