1const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["progress-bar-D_VCK7e-.js","main-D9p2ehdz.js","main-Qtz_DZOS.css","progress-bar-DoOr9PuH.css"])))=>i.map(i=>d[i]); 2import{J as $,K as C,L as P,M as q,q as V,N as F,F as R,P as y,u as d,w as c,x as l,z as E,E as M,y as m,Q as v,R as H,T as N,U as B,V as J,H as D,W as A,I as k,X as O,Y as z,A as w,B as u,C as U}from"./main-D9p2ehdz.js";import{r as T}from"./shared-calculator-zp_5pxy3.js";import{r as S}from"./query-async-BU-AefB8.js";function x(t,e,a){const{years:i=0,months:s=0,weeks:r=0,days:p=0,hours:f=0,minutes:h=0,seconds:b=0}=e,g=$(t,a?.in),_=s||i?C(g,s+i*12):g,L=p||r?P(_,p+r*7):_,I=h+f*60,j=(b+I*60)*1e3;return q(t,+L+j)}function Y(t,e){return+$(t)<+$(e)}class K{constructor(){this.dawaUrl="https://adressevaelger.dk/",this.adresseVaelgerTempToken="adressevaelger123"}async checkDawaConnection(){let e;try{(await fetch(`${this.dawaUrl}soeg?tekst=havnegade 6700&token=${this.adresseVaelgerTempToken}&maal=navngivenvejpostnummer`)).ok?e=!0:e=!1}catch{e=!1}return e}async getDawaAdresses(e){return fetch(`${this.dawaUrl}soeg?tekst=${encodeURIComponent(e)}&token=${this.adresseVaelgerTempToken}&maal=navngivenvejpostnummer`).then(a=>{if(a.ok)return a.json();throw new Error("Dawa address fetch failed")}).then(a=>a.fund).catch(a=>(console.error(a),a))}}class W{constructor(e){this.element=e,this.summary=e.querySelector("summary"),this.content=e.querySelector("[data-details-content]"),this.animation=null,this.isClosing=!1,this.isExpanding=!1,this.duration=300,this.summary&&this.content&&this.summary.addEventListener("click",a=>this.onClick(a))}onClick(e){e.preventDefault(),this.element.style.overflow="hidden",this.isClosing||!this.element.open?this.open():(this.isExpanding||this.element.open)&&this.shrink()}shrink(){if(!this.summary)return;this.isClosing=!0;const e=`${this.element.offsetHeight}px`,a=`${this.summary.offsetHeight}px`;this.animation&&this.animation.cancel(),this.animation=this.element.animate({height:[e,a]},{duration:this.duration,easing:"ease-out"}),this.animation.onfinish=()=>this.onAnimationFinish(!1),this.animation.oncancel=()=>this.isClosing=!1}open(){this.element.style.height=`${this.element.offsetHeight}px`,this.element.open=!0,window.requestAnimationFrame(()=>this.expand())}expand(){if(!this.summary||!this.content)return;this.isExpanding=!0;const e=`${this.element.offsetHeight}px`,a=`${this.summary.offsetHeight+this.content.offsetHeight}px`;this.animation&&this.animation.cancel(),this.animation=this.element.animate({height:[e,a]},{duration:this.duration,easing:"ease-out"}),this.animation.onfinish=()=>this.onAnimationFinish(!0),this.animation.oncancel=()=>this.isExpanding=!1}onAnimationFinish(e){this.element.open=e,this.animation=null,this.isClosing=!1,this.isExpanding=!1,this.element.style.height=this.element.style.overflow=""}}var Q=Object.defineProperty,X=Object.getOwnPropertyDescriptor,n=(t,e,a,i)=>{for(var s=i>1?void 0:i?X(e,a):e,r=t.length-1,p;r>=0;r--)(p=t[r])&&(s=(i?p(e,a,s):p(s))||s);return i&&s&&Q(e,a,s),s};z(()=>import("./progress-bar-D_VCK7e-.js"),__vite__mapDeps([0,1,2,3]));let o=class extends V{constructor(){super(),this.heading="",this.formId="",this.tokenSetHeaderName="",this.tokenSetRequestToken="",this.isLoading=!0,this.isCalculatingPrice=!1,this.currentStep=-1,this.currentFlow=-1,this.showInitialView=!0,this.showPriceCalculation=!1,this.showPriceResults=!1,this.showFinalSummary=!1,this.showSendingOffer=!1,this.showConfirmation=!1,this.getDataFailed=!1,this.dawaResults=[],this.isMobile=!1,this.dawaConnectionWorks=!0,this.hasTyped=!1,this.offerData={name:"",phone:"",contactTime:"",contactDescription:""},this.pikadayHasBeenInit=!1,this.isTransitioning=!1,this.filteredJobTypes=[],this.searchValue="",this.isFilteringJobs=!1,this.api={dataUrl:"/api/salaryprotection/data",calculateUrl:"/api/salaryprotection/calculate"},this.debounceDuration=200,this.transitionDelay=20,this.nextStepDelay=500,this.flows=[{index:0,totalSteps:6},{index:1,totalSteps:3}],this.insuranceData=null,this.text="",this.userData={salaryStep:0,jobTypeCode:"",jobTypeDescription:"",qualifyingDaysCode:"",coverPeriodMonthsCode:"",coverPeriodMonthsDescription:"",zipCode:"",street:"",city:"",b
2irthdayYear:0,birthdayMonth:0,birthdayDay:0},this.calculationData=null,this.dawaQuery="",this.locale=document.documentElement.getAttribute("lang")??"da-DK",this.debounceFunction=F((t,e)=>{e.apply(this,[t])},this.debounceDuration),this.debouncedHandleDawaInput=F(t=>{this.dawaConnectionWorks?this.handleDawaInput(t):this.handleInput(t)},this.debounceDuration),this.dawaService=new K,this.getInsuranceData()}connectedCallback(){super.connectedCallback(),this.isMobile=R;const t=this.querySelector("[data-text-container]");t&&(this.text=t.innerHTML),document.addEventListener("click",e=>this.debounceFunction(e,this.handleDocumentClick))}disconnectedCallback(){document.removeEventListener("click",t=>this.debounceFunction(t,this.handleDocumentClick)),super.disconnectedCallback()}firstUpdated(t){super.firstUpdated(t),this.isLoading&&new y({autoplay:!0,loop:!0,canvas:document.querySelector("[data-dotlottie-loading]"),src:"/assets/lottiefiles/loading.json"})}createRenderRoot(){return this}render(){return l` 3 <div class="calculator ${d({"--is-transitioning":this.isTransitioning})}" data-calculator> 4 ${c(this.isLoading,()=>l` ${this.renderLoading()} `,()=>l` 5 ${this.renderInitialView()} ${this.renderFirstFlow()} ${this.renderPriceCalculation()} ${this.renderPriceResults()} 6 ${this.renderSecondFlow()} ${this.renderFinalSummary()} ${this.renderSendingOffer()} ${this.renderConfirmation()} 7 ${c(!this.pikadayHasBeenInit&&!this.isMobile,()=>l`${this.initPikaday()}`)} 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 `}renderFailure(){return l` 18 <dialog class="dialog --calculator" data-failure-dialog> 19 <button 20 class="btn --close" 21 @click="${t=>this.closeDialog(t,"[data-failure-dialog]")}" 22 type="button" 23 ></button> 24 <div class="dialog__content"> 25 <img class="dialog__tooltip-icon" src="/assets/icons/circle-exclamation-full.svg" width="20" height="20" /> 26 <p class="semibold">Ingen forbindelse til Det Faglige Hus Forsikring</p> 27 <p>Prøv venligst igen om et øjeblik, eller opdater siden for at genoprette forbindelsen.</p> 28 <div class="calculator__buttons --single"> 29 <button 30 class="btn btn-primary --arrow" 31 @click="${t=>{this.getDataFailed=!1,this.getInsuranceData(),this.closeDialog(t,"[data-failure-dialog]")}}" 32 > 33 Prøv igen 34 </button> 35 </div> 36 </div> 37 </dialog> 38 `}renderProgressBar(t){if(this.currentFlow!==-1&&this.currentStep!==-1)return l` 39 <progress-bar 40 currentStep="${t}" 41 totalSteps="${this.flows[this.currentFlow].totalSteps}" 42 ></progress-bar> 43 `}renderInitialView(){return l` 44 <div class="calculator__step --initial-view ${d({"--is-active":this.showInitialView})}"> 45 <img class="calculator__calculator-icon" src="/assets/icons/calculator.svg" height="100" width="97" alt="calculator icon" /> 46 <h2>${this.heading}</h2> 47 <div>${E(this.text)}</div> 48 <div class="calculator__buttons --single"> 49 <button 50 class="btn btn-primary --arrow" 51 @click="${t=>this.nextStep(t)}" 52 ?disabled=${this.getDataFailed} 53 > 54 Start 55 </button> 56 </div> 57 </div> 58 `}renderFirstFlow(){return l` 59 <!-- STEP 1: Birthday --> 60 <div class="calculator__step ${d({"--is-active":this.currentFlow===0&&this.currentStep===1})}"> 61 ${this.renderProgressBar(this.currentStep)} 62 <h3 class="calculator__heading">Beregn din pris på lønsikring</h3> 63 64 <div class="calculator__transition-container ${d({"--no-transition":this.showInitialView})}"> 65 <form class="calculator__form" data-step-form> 66 <div class="calculator__input-group form-group form-group date"> 67 <label class="calculator__form-label form-label" for="birthday">Fødselsdato *</label> 68 <div class="calculator__date-input-wrapper" data-placeholder="Fødselsdato"> 69 ${c(this.isMobile,()=>l` 70 <input 71 id="birthday" 72 class="calculator__input --date form-control" 73 @change="${t=>this.debounceFunction(t,this.handleInput)}"
74 @input="${t=>this.debounceFunction(t,this.handleInput)}" 75 type="date" 76 name="birthday" 77 value="${v(this.userData.birthdayYear?`${this.userData.birthdayYear}-${this.userData.birthdayMonth<10?`0${this.userData.birthdayMonth}`:this.userData.birthdayMonth}-${this.userData.birthdayDay<10?`0${this.userData.birthdayDay}`:this.userData.birthdayDay}`:void 0)}" 78 tabindex="${this.currentFlow===0&&this.currentStep===1?0:-1}" 79 required 80 /> 81 `,()=>l` 82 <input 83 id="birthday" 84 class="calculator__input --date form-control datepickerfield" 85 type="text" 86 name="birthday" 87 @change="${t=>this.debounceFunction(t,this.handleInput)}" 88 @input="${t=>this.debounceFunction(t,this.handleInput)}" 89 @keydown="${t=>this.handleEnterKey(t)}" 90 value="${v(this.userData.birthdayYear?`${this.userData.birthdayYear}-${this.userData.birthdayMonth<10?`0${this.userData.birthdayMonth}`:this.userData.birthdayMonth}-${this.userData.birthdayDay<10?`0${this.userData.birthdayDay}`:this.userData.birthdayDay}`:void 0)}" 91 @birthday="${t=>this.setBirthDay(t)}" 92 tabindex="${this.currentFlow===0&&this.currentStep===1?0:-1}" 93 required 94 /> 95 `)} 96 </div> 97 <p class="calculator__input-error --value-missing warning">Indtast venligst din fødselsdato.</p> 98 <p class="calculator__input-error --range-overflow warning">Du skal vælge mindst 18 år.</p> 99 </div> 100 </form> 101 </div> 102 103 <div class="calculator__buttons"> 104 <button 105 class="btn btn-tertiary" 106 @click="${t=>this.previousStep(t)}" 107 tabindex="${this.currentFlow===0&&this.currentStep===1?0:-1}" 108 > 109 Tilbage 110 </button> 111 <button 112 class="btn btn-primary --arrow" 113 @click="${t=>this.nextStep(t)}" 114 tabindex="${this.currentFlow===0&&this.currentStep===1?0:-1}" 115 > 116 Næste 117 </button> 118 </div> 119 120 <dialog class="dialog --calculator" data-birthday-dialog-too-young> 121 <button 122 class="btn --close" 123 @click="${t=>this.closeDialog(t,"[data-birthday-dialog-too-young]")}" 124 type="button" 125 ></button> 126 <div class="dialog__content"> 127 <img class="dialog__tooltip-icon" src="/assets/icons/circle-exclamation-full.svg" width="20" height="20" /> 128 <p class="semibold">Du skal være fyldt 18 år for at kunne tegne lønsikring</p> 129 <p>Du kan først tegne en lønsikring fra du er fyldt 18 år. Det skyldes, at forsikringen kun kan tegnes af myndige personer.</p> 130 <p>Du er velkommen til at bruge beregneren igen, når du er fyldt 18 år, eller læse mere om, hvordan lønsikring fungerer.</p> 131 <div class="calculator__buttons --single"> 132 <button 133 class="btn btn-primary --arrow" 134 @click="${t=>{this.closeDialog(t,"[data-birthday-dialog-too-young]")}}" 135 > 136 Prøv igen 137 </button> 138 </div> 139 </div> 140 </dialog> 141 142 <dialog class="dialog --calculator" data-birthday-dialog-too-old> 143 <button 144 class="btn --close" 145 @click="${t=>this.closeDialog(t,"[data-birthday-dialog-too-old]")}" 146 type="button" 147 ></button> 148 <div class="dialog__content"> 149 <img class="dialog__tooltip-icon" src="/assets/icons/circle-exclamation-full.svg" width="20" height="20" /> 150 <p class="semibold">Lønsikring er ikke en mulighed, når du er over 60 år</p> 151 <p>Ud fra de oplysninger, du har indtastet, er det desværre ikke muligt at tegne en lønsikring. Lønsikring kan kun oprettes frem til du er fyldt 60 år.</p> 152 <p>Hvis du ønsker at undersøge andre muligheder eller har spørgsmål til dine valgmuligheder, er du altid velkommen til at kontakte os for rådgivning.</p> 153 <div class="calculator__buttons --single"> 154 <button 155 class="btn btn-primary --arrow" 156 @click="${t=>{this.closeDialog(t,"[data-birthday-dialog-too-old]")}}" 157 > 158 Prøv igen 159 </button> 160 </div> 161 </div> 162 </dialog> 163 164 </div> 165 166 <!-- STEP 2: Address --> 167 <div class="calculator__step ${d({"--is-active":this.currentFlow===0&&this.currentStep===2})}"> 168 ${this.renderProgressBar(this.currentStep)} 169 <h3 class="calculator__heading">Beregn din pris på lønsikring</h3> 170 171 <div class="calculator__transition-container"> 172 <form class="calculator__form" data-step-form> 173 <div class="calculator__input-group form-group"> 174 <label class="calculator__form-label form-label" for="address">Vejnavn og postnummer *</label> 175 ${c(this.isMobile,()=>l` 176 <div class="calculator__search-input-wrapper"> 177 <input 178 id="address" 179 class="calculator__input form-control" 180 @click="${t=>this.openDialog(t,"[data-dawa-dialog]")}" 181 @change="${t=>this.debounceFunction(t,this.handleInput)}"
182 @input="${t=>this.debounceFunction(t,this.handleInput)}" 183 type="text" 184 name="address" 185 placeholder="F.eks. Lærkevej 8000" 186 .value="${this.userData.street??""}" 187 tabindex="${this.currentFlow===0&&this.currentStep===2?0:-1}" 188 required 189 data-dawa-address-input 190 /> 191 <i class="fa-regular fa-magnifying-glass --no-value" aria-hidden="true"></i> 192 <i 193 class="fa-solid fa-circle-xmark --has-value" 194 @click="${t=>this.clearInput(t)}" 195 ></i> 196 </div> 197 `,()=>l` 198 <div class="calculator__search-input-wrapper"> 199 <input 200 id="address" 201 class="calculator__input form-control" 202 list="dawa-addresses" 203 @change="${t=>this.debouncedHandleDawaInput(t)}" 204 @input="${t=>this.debouncedHandleDawaInput(t)}" 205 @keydown="${t=>this.navigateDropdown(t)}" 206 type="text" 207 name="address" 208 placeholder="F.eks. Lærkevej 8000" 209 .value="${this.userData.street??""}" 210 autocomplete="off" 211 tabindex="${this.currentFlow===0&&this.currentStep===2?0:-1}" 212 required 213 data-dawa-address-input 214 /> 215 <i class="fa-regular fa-magnifying-glass --no-value" aria-hidden="true"></i> 216 <i 217 class="fa-solid fa-circle-xmark --has-value" 218 @click="${t=>this.clearInput(t)}" 219 ></i> 220 </div> 221 ${c(this.hasTyped&&this.dawaResults.length===0||this.dawaResults.length>0,()=>l` 222 <ul id="dawa-addresses" class="calculator__result-list --dawa"> 223 ${m(this.dawaResults,t=>t.id,(t,e)=>l` 224 <li 225 id="${t.id}" 226 class="calculator__result" 227 @click="${a=>this.setDawaAddress(t)}" 228 value="${t.vejnavn}" 229 > 230 ${t.titel} 231 </li> 232 ${c(e!==this.dawaResults.length-1,()=>l` 233 <li> 234 <hr class="calculator__result-divider" /> 235 </li> 236 `)} 237 `)} 238 ${c(this.hasTyped&&this.dawaResults.length===0,()=>l` 239 <div class="calculator__no-results"> 240 <p>Din søgning gav ingen resultater.</p> 241 <p>Tjek for stavefejl, eller prøv et andet søgeord.</p> 242 </div> 243 `)} 244 </ul> 245 `)} 246 `)} 247 <p class="calculator__input-error --value-missing warning">Indtast venligst vejnavn og postnummer.</p> 248 <p class="calculator__input-error --value-invalid warning">Du skal vælge en adresse fra listen.</p> 249 </div> 250 251 <div class="calculator__input-group form-group"> 252 <label class="calculator__form-label form-label" for="zipcode">Postnr *</label> 253 <input 254 id="zipcode" 255 class="calculator__input form-control" 256 @change="${t=>this.debouncedHandleDawaInput(t)}"
257 @input="${t=>this.debouncedHandleDawaInput(t)}" 258 type="text" 259 name="zipcode" 260 placeholder="F.eks. 8000" 261 ?disabled="${this.dawaConnectionWorks??M}" 262 .value="${this.userData.zipCode??""}" 263 required 264 data-dawa-zipcode-input 265 /> 266 ${c(!this.dawaConnectionWorks,()=>l` <p class="calculator__input-error --value-missing warning">Du skal indtaste et postnummer</p> `)} 267 </div> 268 </form> 269 </div> 270 271 <div class="calculator__buttons"> 272 <button 273 class="btn btn-tertiary" 274 @click="${t=>this.previousStep(t)}" 275 tabindex="${this.currentFlow===0&&this.currentStep===2?0:-1}" 276 > 277 Tilbage 278 </button> 279 <button 280 class="btn btn-primary --arrow" 281 @click="${t=>this.nextStep(t)}" 282 tabindex="${this.currentFlow===0&&this.currentStep===2?0:-1}" 283 > 284 Næste 285 </button> 286 </div> 287 288 <dialog class="dialog --calculator --fullscreen" data-dawa-dialog> 289 <button 290 class="btn --close" 291 @click="${t=>this.closeDialog(t,"[data-dawa-dialog]")}" 292 type="button" 293 tabindex="${this.currentFlow===0&&this.currentStep===2?0:-1}" 294 ></button> 295 <div class="dialog__content"> 296 <label class="calculator__form-label form-label" for="address-dialog">Vejnavn og postnummer *</label> 297 <div class="calculator__search-input-wrapper"> 298 <input 299 id="address-dialog" 300 class="calculator__input form-control" 301 @change="${t=>this.debouncedHandleDawaInput(t)}" 302 @input="${t=>{const e=t.target;e?this.hasTyped=e.value.length>2:this.hasTyped=!1,this.debouncedHandleDawaInput(t)}}" 303 @keydown="${t=>this.navigateDropdown(t)}" 304 list="dawa-addresses-mobile" 305 type="text" 306 name="address-dialog" 307 placeholder="F.eks. Lærkevej 8000" 308 tabindex="${this.currentFlow===0&&this.currentStep===2?0:-1}" 309 required 310 data-dialog-dawa-address-input 311 /> 312 <i class="fa-regular fa-magnifying-glass --no-value" aria-hidden="true"></i> 313 <i class="fa-solid fa-circle-xmark --has-value" @click="${t=>this.clearInput(t)}"></i> 314 </div> 315 ${c(this.dawaResults.length>0,()=>l` 316 <ul id="dawa-addresses-mobile" class="calculator__result-list"> 317 ${m(this.dawaResults,t=>t.id,(t,e)=>l` 318 <li class="calculator__result" @click="${a=>this.setDawaAddress(t)}"> 319 ${t.titel} 320 </li> 321 ${c(e!==this.dawaResults.length-1,()=>l` 322 <li> 323 <hr class="calculator__result-divider" /> 324 </li> 325 `)} 326 `)} 327 </ul> 328 `,()=>this.hasTyped?l`<div class="calculator__no-results"> 329 <p>Din søgning gav ingen resultater.</p> 330 <p>Tjek for stavefejl, eller prøv et andet søgeord.</p> 331 </div>`:null)} 332 </div> 333 </dialog> 334 </div> 335 336 <!-- STEP 3: Job --> 337 <div class="calculator__step ${d({"--is-active":this.currentFlow===0&&this.currentStep===3})}"> 338 ${this.renderProgressBar(this.currentStep)} 339 <h3 class="calculator__heading">Beregn din pris på lønsikring</h3> 340 341 <div class="calculator__transition-container"> 342 <form class="calculator__form" data-step-form> 343 <div class="calculator__input-group form-group"> 344 <div class="calculator__label-and-tooltip"> 345 <label class="calculator__form-label form-label" for="job">Jobfunktion *</label> 346 <button 347 class="tooltip-button help-block" 348 @click="${t=>this.openDialog(t,"[data-job-info-dialog]")}" 349 type="button" 350 tabindex="${this.currentFlow===0&&this.currentStep===3?0:-1}" 351 > 352 <img class="tooltip-button__image --default" src="/assets/icons/tooltip.svg" alt="tooltip icon" /> 353 <img class="tooltip-button__image --hover" src="/assets/icons/tooltip-hover.svg" alt="tooltip icon" /> 354 <img class="tooltip-button__image --active" src="/assets/icons/tooltip-active.svg" alt="tooltip icon" /> 355 </button> 356 </div> 357 ${c(this.isMobile,()=>l` 358 <input 359 class="calculator__input d-none" 360 type="text" 361 name="jobCode" 362 value="${v(this.userData.jobTypeCode)}" 363 tabindex="${this.currentFlow===0&&this.currentStep===3?0:-1}" 364 required 365 data-job-code 366 /> 367 <div class="calculator__search-input-wrapper"> 368 <input 369 id="job" 370 class="calculator__input form-control" 371 @click="${t=>this.openDialog(t,"[data-job-type-dialog]")}"
372 @input="${t=>this.debounceFunction(t,this.handleInput)}" 373 type="text" 374 name="job" 375 placeholder="Jobfunktion" 376 .value="${this.userData.jobTypeDescription??""}" 377 tabindex="${this.currentFlow===0&&this.currentStep===3?0:-1}" 378 required 379 data-job-type-input 380 /> 381 <i class="fa-regular fa-magnifying-glass --no-value" aria-hidden="true"></i> 382 <i 383 class="fa-solid fa-circle-xmark --has-value" 384 @click="${t=>this.clearInput(t)}" 385 ></i> 386 </div> 387 <p class="calculator__input-error --value-missing warning" data-job-error>Du skal vælge en jobfunktion</p> 388 <p class="calculator__input-error --value-invalid warning" data-job-error>Du skal vælge en jobfunktion fra listen.</p> 389 `,()=>l` 390 <div class="calculator__search-input-wrapper"> 391 <input 392 id="job" 393 class="calculator__input form-control" 394 list="job-types" 395 @input="${t=>this.debounceFunction(t,this.filterJobTypes)}" 396 @keydown="${t=>this.navigateDropdown(t)}" 397 type="text" 398 name="job" 399 placeholder="Jobfunktion" 400 .value="${this.userData.jobTypeDescription??""}" 401 autocomplete="off" 402 tabindex="${this.currentFlow===0&&this.currentStep===3?0:-1}" 403 required 404 data-job-type-input 405 /> 406 <i class="fa-regular fa-magnifying-glass --no-value" aria-hidden="true"></i> 407 <i 408 class="fa-solid fa-circle-xmark --has-value" 409 @click="${t=>this.clearInput(t)}" 410 ></i> 411 </div> 412 ${c(this.searchValue.trim().length>0,()=>l` 413 <ul id="job-types" class="calculator__result-list" data-job-types-l
413ist> 414 415 ${c(this.searchValue.trim().length>0&&this.searchValue.length<3,()=>l` 416 <div class="calculator__search-hint calculator__result_search-hint"> 417 Skriv mindst 3 bogstaver for at søge. 418 </div> 419 `)} 420 421 ${m(this.filteredJobTypes,t=>t.code,(t,e)=>l` 422 <li 423 id="${t.code}" 424 class="calculator__result" 425 @click="${()=>this.setJob(t)}" 426 value="${t.description}" 427 > 428 ${t.description} 429 </li> 430 ${c(e!==this.filteredJobTypes.length-1,()=>l` 431 <li> 432 <hr class="calculator__result-divider" /> 433 </li> 434 `)} 435 `)} 436 437 438 ${c(this.searchValue.trim().length>=3&&!this.isFilteringJobs&&this.filteredJobTypes.length===0,()=>l` 439 <div class="calculator__no-results"> 440 <p>Din søgning gav ingen resultater.</p> 441 <p>Tjek for stavefejl, eller prøv et andet søgeord.</p> 442 </div> 443 `)} 444 </ul> 445 446 `)} 447 <p class="calculator__input-error --value-missing warning" data-job-error>Indtast venligst din jobfunktion.</p> 448 <p class="calculator__input-error --value-invalid warning" data-job-error>Du skal vælge en jobfunktion fra listen.</p> 449 `)} 450 </div> 451 </form> 452 </div> 453 454 <div class="calculator__buttons"> 455 <button 456 class="btn btn-tertiary" 457 @click="${t=>this.previousStep(t)}" 458 tabindex="${this.currentFlow===0&&this.currentStep===3?0:-1}" 459 > 460 Tilbage 461 </button> 462 <button 463 class="btn btn-primary --arrow" 464 @click="${t=>this.nextStep(t)}" 465 tabindex="${this.currentFlow===0&&this.currentStep===3?0:-1}" 466 > 467 Næste 468 </button> 469 </div> 470 471 <dialog class="dialog --calculator --fullscreen --no-translate" data-job-type-dialog> 472 <button 473 class="btn --close" 474 @click="${t=>this.closeDialog(t,"[data-job-type-dialog]")}" 475 type="button" 476 tabindex="${this.currentFlow===0&&this.currentStep===3?0:-1}" 477 ></button> 478 <div class="dialog__content"> 479 <label class="calculator__form-label form-label" for="job-dialog">Jobfunktion *</label> 480 <div class="calculator__search-input-wrapper"> 481 <input 482 id="job-dialog" 483 class="calculator__input form-control" 484 @input="${t=>this.debounceFunction(t,this.filterJobTypes)}" 485 @keydown="${t=>this.navigateDropdown(t)}" 486 list="job-types-mobile" 487 type="text" 488 name="job-dialog" 489 placeholder="Søg efter jobfunktion" 490 tabindex="${this.currentFlow===0&&this.currentStep===3?0:-1}" 491 required 492 data-dialog-job-type 493 /> 494 <i class="fa-regular fa-magnifying-glass --no-value" aria-hidden="true"></i> 495 <i class="fa-solid fa-circle-xmark --has-value" @click="${t=>this.clearInput(t)}"></i> 496 </div> 497 498 ${c(this.searchValue.trim().length>0,()=>l` 499 <ul id="job-types-mobile" class="calculator__result-list" data-job-types-l
499ist @touchmove="${()=>this.hideMobileKeyboard()}" 500 > 501 ${c(this.searchValue.length>0&&!this.isFilteringJobs&&this.searchValue.length<3,()=>l` 502 <div class="calculator__search-hint calculator__result_search-hint"> 503 Skriv mindst 3 bogstaver for at søge. 504 </div> 505 `)} 506 507 ${m(this.filteredJobTypes,t=>t.code,(t,e)=>l` 508 <li class="calculator__result" @click="${()=>this.setJob(t)}">${t.description}</li> 509 ${c(e!==this.filteredJobTypes.length-1,()=>l` 510 <li> 511 <hr class="calculator__result-divider" /> 512 </li> 513 `)} 514 515 `)} 516 517 ${c(this.searchValue.trim().length>=3&&this.filteredJobTypes.length===0,()=>l` 518 <div class="calculator__no-results"> 519 <p>Din søgning gav ingen resultater.</p> 520 <p>Tjek for stavefejl, eller prøv et andet søgeord.</p> 521 </div> 522 `)} 523 524 </ul> 525 `)} 526 </div> 527 </dialog> 528 529 <dialog class="dialog --calculator" data-job-info-dialog> 530 <button 531 class="btn --close" 532 @click="${t=>this.closeDialog(t,"[data-job-info-dialog]")}" 533 type="button" 534 tabindex="${this.currentFlow===0&&this.currentStep===3?0:-1}" 535 ></button> 536 <div class="dialog__content"> 537 <img class="dialog__tooltip-icon" src="/assets/icons/tooltip-hover.svg" width="20" height="20" /> 538 <p class="semibold">Jobfunktion</p> 539 <p>Du skal vælge den jobfunktion, der passer bedst til dit job. Listen indeholder ikke alle jobfunktioner.</p> 540 <div class="btn-container --grow"> 541 <button 542 class="btn btn-secondary --no-margin" 543 @click="${t=>this.closeDialog(t,"[data-job-info-dialog]")}" 544 tabindex="${this.currentFlow===0&&this.currentStep===3?0:-1}" 545 > 546 Luk 547 </button> 548 </div> 549 </div> 550 </dialog> 551 </div> 552 553 <!-- STEP 4: Salary --> 554 <div class="calculator__step ${d({"--is-active":this.currentFlow===0&&this.currentStep===4})}"> 555 ${this.renderProgressBar(this.currentStep)} 556 <h3 class="calculator__heading">Beregn din pris på lønsikring</h3> 557 558 <div class="calculator__transition-container"> 559 <form class="calculator__form" data-step-form> 560 <div class="calculator__input-group form-group"> 561 <div class="calculator__label-and-tooltip"> 562 <label class="calculator__form-label form-label" for="salary">Bruttoløn *</label> 563 <button 564 class="tooltip-button help-block" 565 @click="${t=>this.openDialog(t,"[data-salary-dialog]")}" 566 type="button" 567 tabindex="${this.currentFlow===0&&this.currentStep===4?0:-1}" 568 > 569 <img class="tooltip-button__image --default" src="/assets/icons/tooltip.svg" alt="tooltip icon" /> 570 <img class="tooltip-button__image --hover" src="/assets/icons/tooltip-hover.svg" alt="tooltip icon" /> 571 <img class="tooltip-button__image --active" src="/assets/icons/tooltip-active.svg" alt="tooltip icon" /> 572 </button> 573 </div> 574 <select 575 id="salary" 576 class="calculator__input form-control" 577 @change="${t=>this.handleInput(t)}" 578 name="salary" 579 tabindex="${this.currentFlow===0&&this.currentStep===4?0:-1}" 580 required 581 data-salary-select 582 > 583 <option value="" selected>Vælg din bruttoløn</option> 584 ${m(this.insuranceData?.salarySteps.length?this.insuranceData.salarySteps:[],t=>t,t=>l` <option value="${t}">${t}</option> `)} 585 </select> 586 <p class="calculator__input-error --value-missing warning">Indtast venligst din bruttoløn.</p> 587 </div> 588 </form> 589 </div> 590 591 <div class="calculator__buttons"> 592 <button 593 class="btn btn-tertiary" 594 @click="${t=>this.previousStep(t)}" 595 tabindex="${this.currentFlow===0&&this.currentStep===4?0:-1}" 596 > 597 Tilbage 598 </button> 599 <button 600 class="btn btn-primary" 601 @click="${t=>this.nextStep(t)}" 602 tabindex="${this.currentFlow===0&&this.currentStep===4?0:-1}" 603 > 604 Næste 605 </button> 606 </div> 607 608 <dialog class="dialog --calculator" data-salary-dialog> 609 <button 610 class="btn --close" 611 @click="${t=>this.closeDialog(t,"[data-salary-dialog]")}" 612 type="button" 613 tabindex="${this.currentFlow===0&&this.currentStep===4?0:-1}" 614 ></button> 615 <div class="dialog__content"> 616 <img class="dialog__tooltip-icon" src="/assets/icons/tooltip-hover.svg" width="20" height="20" /> 617 <p class="semibold">Bruttoløn</p> 618 <p> 619 Du skal indtaste din bruttoløn pr. måned, som er din løn før skat. Hvis du får bonus, provision eller tillæg, 620 skal du regne det med. 621 </p> 622 <p>I tillæggene indgår fx den skattepligtige værdi af evt. firmabil, fri telefon, kost, logi m.m.</p> 623 <div class="btn-container --grow"> 624 <button 625 class="btn btn-secondary --no-margin" 626 @click="${t=>this.closeDialog(t,"[data-salary-dialog]")}" 627 tabindex="${this.currentFlow===0&&this.currentStep===4?0:-1}" 628 > 629 Luk 630 </button> 631 </div> 632 </div> 633 </dialog> 634 </div> 635
636 <!-- STEP 5: Cover period --> 637 <div class="calculator__step ${d({"--is-active":this.currentFlow===0&&this.currentStep===5})}"> 638 ${this.renderProgressBar(this.currentStep)} 639 <h3 class="calculator__heading">Beregn din pris på lønsikring</h3> 640 641 <div class="calculator__transition-container"> 642 <form class="calculator__form" data-step-form> 643 <div class="calculator__input-group form-group form-group singlechoice"> 644 <div class="calculator__label-and-tooltip"> 645 <label class="calculator__form-label form-label">Dækningsperiode *</label> 646 <button 647 class="tooltip-button help-block" 648 @click="${t=>this.openDialog(t,"[data-cover-period-dialog]")}" 649 type="button" 650 tabindex="${this.currentFlow===0&&this.currentStep===5?0:-1}" 651 > 652 <img class="tooltip-button__image --default" src="/assets/icons/tooltip.svg" alt="tooltip icon" /> 653 <img class="tooltip-button__image --hover" src="/assets/icons/tooltip-hover.svg" alt="tooltip icon" /> 654 <img class="tooltip-button__image --active" src="/assets/icons/tooltip-active.svg" alt="tooltip icon" /> 655 </button> 656 </div> 657 <div class="form-control radiobuttonlist"> 658 ${m(this.insuranceData?.coverPeriodMonths.length?this.insuranceData.coverPeriodMonths:[],t=>t.code,t=>l` 659 <label class="calculator__radio-button-label" for="${t.description}"> 660 <input 661 class="calculator__input" 662 @change="${e=>this.handleInput(e)}" 663 type="radio" 664 id="${t.description}" 665 name="coverperiod" 666 value="${t.code}" 667 tabindex="${this.currentFlow===0&&this.currentStep===5?0:-1}" 668 ?checked="${t.code===this.userData.coverPeriodMonthsCode}" 669 required 670 /> 671 ${t.description} 672 </label> 673 `)} 674 </div> 675 <p class="calculator__input-error --value-missing warning">Vælg venligst en dækningsperiode.</p> 676 </div> 677 </form> 678 </div> 679 680 <div class="calculator__buttons"> 681 <button 682 class="btn btn-tertiary" 683 @click="${t=>this.previousStep(t)}" 684 tabindex="${this.currentFlow===0&&this.currentStep===5?0:-1}" 685 > 686 Tilbage 687 </button> 688 <button 689 class="btn btn-primary --arrow" 690 @click="${t=>this.nextStep(t)}" 691 tabindex="${this.currentFlow===0&&this.currentStep===5?0:-1}" 692 > 693 Næste 694 </button> 695 </div> 696 697 <dialog class="dialog --calculator" data-cover-period-dialog> 698 <button 699 class="btn --close" 700 @click="${t=>this.closeDialog(t,"[data-cover-period-dialog]")}" 701 type="button" 702 tabindex="${this.currentFlow===0&&this.currentStep===5?0:-1}" 703 ></button> 704 <div class="dialog__content"> 705 <img class="dialog__tooltip-icon" src="/assets/icons/tooltip-hover.svg" width="20" height="20" /> 706 <p class="semibold">Dækningsperiode</p> 707 <p>Vælg, hvor længe du ønsker at få udbetalt din lønsikring.</p> 708 <div class="btn-container --grow"> 709 <button 710 class="btn btn-secondary --no-margin" 711 @click="${t=>this.closeDialog(t,"[data-cover-period-dialog]")}" 712 tabindex="${this.currentFlow===0&&this.currentStep===5?0:-1}" 713 > 714 Luk 715 </button> 716 </div> 717 </div> 718 </dialog> 719 </div> 720 721 <!-- STEP 6: Qualifying Days --> 722 <div class="calculator__step ${d({"--is-active":this.currentFlow===0&&this.currentStep===6})}"> 723 ${this.renderProgressBar(this.currentStep)} 724 <h3 class="calculator__heading">Beregn din pris på lønsikring</h3> 725 726 <div class="calculator__transition-container ${d({"--no-transition":this.showPriceCalculation})}"> 727 <form class="calculator__form" data-step-form> 728 <div class="calculator__input-group form-group form-group singlechoice"> 729 <div class="calculator__label-and-tooltip"> 730 <label class="calculator__form-label form-label">Karensperiode *</label> 731 <button 732 class="tooltip-button help-block" 733 @click="${t=>this.openDialog(t,"[data-qualifying-period-dialog]")}" 734 type="button" 735 tabindex="${this.currentFlow===0&&this.currentStep===6?0:-1}" 736 > 737 <img class="tooltip-button__image --default" src="/assets/icons/tooltip.svg" alt="tooltip icon" /> 738 <img class="tooltip-button__image --hover" src="/assets/icons/tooltip-hover.svg" alt="tooltip icon" /> 739 <img class="tooltip-button__image --active" src="/assets/icons/tooltip-active.svg" alt="tooltip icon" /> 740 </button> 741 </div> 742 <div class="form-control radiobuttonlist"> 743 ${m(this.insuranceData?.qualifyingDays.length?this.insuranceData.qualifyingDays:[],t=>t.code,t=>l` 744 <label class="calculator__radio-button-label" for="${t.description}"> 745 <input 746 class="calculator__input" 747 @change="${e=>this.handleInput(e)}" 748 type="radio" 749 id="${t.description}" 750 name="qualifyingdays" 751 value="${t.code}" 752 tabindex="${this.currentFlow===0&&this.currentStep===6?0:-1}" 753 ?checked="${t.code===this.userData.qualifyingDaysCode}" 754 required 755 /> 756 ${t.description} 757 </label> 758 `)} 759 </div> 760 <p class="calculator__input-error --value-missing warning">Vælg venligst en karensperiode.</p> 761 </div> 762 </form> 763 </div> 764 765 <div class="calculator__buttons"> 766 <button 767 class="btn btn-tertiary" 768 @click="${t=>this.previousStep(t)}" 769 tabindex="${this.currentFlow===0&&this.currentStep===6?0:-1}" 770 > 771 Tilbage 772 </button> 773 <button 774 class="btn btn-primary --arrow" 775 @click="${t=>this.nextStep(t)}" 776 tabindex="${this.currentFlow===0&&this.currentStep===6?0:-1}" 777 > 778 Beregn 779 </button> 780 </div> 781 782 <dialog class="dialog --calculator" data-qualifying-period-dialog> 783 <button 784 class="btn --close" 785 @click="${t=>this.closeDialog(t,"[data-qualifying-period-dialog]")}" 786 type="button" 787 tabindex="${this.currentFlow===0&&this.currentStep===6?0:-1}" 788 ></button> 789 <div class="dialog__content"> 790 <img class="dialog__tooltip-icon" src="/assets/icons/tooltip-hover.svg" width="20" height="20" /> 791 <p class="semibold">Karensperiode</p> 792 <p> 793 Du kan ikke få udbetalt din lønsikring i den valgte karensperiode. Karensperioden starter den dag, du bliver 794 ledig og får dagpenge fra a-kassen. 795 </p> 796 <div class="btn-container --grow"> 797 <button 798 class="btn btn-secondary --no-margin" 799 @click="${t=>this.closeDialog(t,"[data-qualifying-period-dialog]")}" 800 tabindex="${this.currentFlow===0&&this.currentStep===6?0:-1}" 801 > 802 Luk 803 </button> 804 </div> 805 </div> 806 </dialog> 807 </div> 808 `}renderPriceCalculation(){return l` 809 <div class="calculator__step ${d({"--is-active":this.showPriceCalculation})}"> 810 <h3 class="calculator__heading">Beregner pris</h3> 811 <canvas class="calculator__dot-lottie" style="width: 100px; height:100px;" data-dotlottie-calculating></canvas> 812 <p class="calculator__medium text-center">Vent venligst...</p> 813 </div> 814 <dialog class="dialog --calculator" data-calculation-failure-dialog> 815 <button 816 class="btn --close" 817 @click="${t=>this.closeDialog(t,"[data-calculation-failure-dialog]")}" 818 type="button" 819 ></button> 820 <div class="dialog__content"> 821 <p class="semibold">Ingen forbindelse til Det Faglige Hus Forsikring</p> 822 <p>Der skete en fejl under udregning af prisen. Prøv venligst igen om et øjeblik.</p> 823 <div class="calculator__buttons --single"> 824 <button 825 class="btn btn-primary --arrow" 826 @click="${t=>{this.submitUserData(),this.closeDialog(t,"[data-calculation-failure-dialog]")}}" 827 > 828 Prøv igen 829 </button> 830 </div> 831 </div> 832 </dialog> 833 `}renderPriceResults(){return l` 834 <div class="calculator__step ${d({"--is-active":this.showPriceResults})}"> 835 <p class="calculator__step-label ultra-small text-center text-dark-grey">Resultat</p> 836 <h3 class="calculator__heading">Din pris på lønsikring</h3> 837 ${this.renderResultsData(!1)} ${this.renderUserDataSummary(!0)} 838 839 <div class="calculator__buttons"> 840 <button 841 class="btn btn-tertiary" 842 @click="${t=>this.previousStep(t)}" 843 tabindex="${this.showPriceResults?0:-1}" 844 > 845 Tilbage 846 </button> 847 <button 848 class="btn btn-primary --arrow" 849 @click="${t=>this.nextStep(t)}" 850 tabindex="${this.showPriceResults?0:-1}" 851 > 852 Få tilbud 853 </button> 854 </div> 855 </div> 856 `}renderResultsData(t){return this.calculationData!==null?t?l` 857 <div class="calculator__result-data --collapsed"> 858 <h4>Din pris på lønsikring</h4> 859 <details class="calculator__result-details"> 860 <summary class="calculator__result-summary" tabindex="${this.show
860FinalSummary?0:-1}">Vis beregning</summary> 861 <dl class="calculator__result-data-list" data-details-content> 862 <div class="calculator__result-data-group"> 863 <dt>90% af din løn før skat på ${this.userData.salaryStep.toLocaleString(this.locale)} kr.</dt> 864 <dd class="semibold">${this.calculationData.coveredSalary.toLocaleString(this.locale)} kr.</dd> 865 </div> 866 <div class="calculator__result-data-divider"></div> 867 <div class="calculator__result-data-group"> 868 <dt>Lønsikring pr. md. i ${this.userData.coverPeriodMonthsDescription}</dt> 869 <dd class="semibold">${this.calculationData.salaryProtectionValue.toLocaleString(this.locale)} kr.</dd> 870 <dt>Dagpenge</dt> 871 <dd class="semibold"> 872 ${this.calculationData.unemploymentSecurityAmount.toLocaleString(this.locale)} kr. 873 </dd> 874 </div> 875 <div class="calculator__result-data-divider"></div> 876 <div class="calculator__result-data-group"> 877 <dt>Udbetalt i alt pr. måned</dt> 878 <dd class="semibold"> 879 ${(this.calculationData.salaryProtectionValue+this.calculationData.unemploymentSecurityAmount).toLocaleString(this.locale)} 880 kr. 881 </dd> 882 </div> 883 <div class="calculator__result-data-divider"></div> 884 </dl> 885 </details> 886 <div class="calculator__result-data-group"> 887 <dt>Pris pr. måned</dt> 888 <dd class="semibold">${this.calculationData.monthlyPrice.toLocaleString(this.locale)} kr.</dd> 889 </div> 890 <p class="info mini">Bemærk, at du kan trække prisen på din lønsikring fra i skat.</p> 891 </div> 892 `:l` 893 <div class="calculator__result-data"> 894 <dl class="calculator__result-data-list"> 895 <div class="calculator__result-data-group"> 896 <dt> 897 <span class="text-blue">90%</span> af din løn før skat på 898 <span class="text-blue">${this.userData.salaryStep.toLocaleString(this.locale)} kr.</span> 899 </dt> 900 <dd class="semibold">${this.calculationData.coveredSalary.toLocaleString(this.locale)} kr.</dd> 901 </div> 902 <div class="calculator__result-data-divider"></div> 903 <div class="calculator__result-data-group"> 904 <dt>Lønsikring pr. md. i <span class="text-blue">${this.userData.coverPeriodMonthsDescription}</span></dt> 905 <dd class="semibold">${this.calculationData.salaryProtectionValue.toLocaleString(this.locale)} kr.</dd> 906 <dt>Dagpenge</dt> 907 <dd class="semibold">${this.calculationData.unemploymentSecurityAmount.toLocaleString(this.locale)} kr.</dd> 908 </div> 909 <div class="calculator__result-data-divider"></div> 910 <div class="calculator__result-data-group"> 911 <dt>Udbetalt i alt pr. måned</dt> 912 <dd class="semibold"> 913 ${(this.calculationData.salaryProtectionValue+this.calculationData.unemploymentSecurityAmount).toLocaleStr
913ing(this.locale)} 914 kr. 915 </dd> 916 </div> 917 <div class="calculator__result-data-divider"></div> 918 <div class="calculator__result-data-group"> 919 <dt class="semibold"><span class="text-blue">Pris pr. måned</span></dt> 920 <dd class="semibold --large"> 921 <span class="text-blue">${this.calculationData.monthlyPrice.toLocaleString(this.locale)} kr.</span> 922 </dd> 923 </div> 924 </dl> 925 <p class="info mini">Bemærk, at du kan trække prisen på din lønsikring fra i skat.</p> 926 </div> 927 `:l``}renderUserDataSummary(t){return l` 928 <div class="calculator__user-data-summary"> 929 <h3>Du har indtastet</h3> 930 <table class="calculator__user-data-table"> 931 <tr> 932 <td> 933 <p>Fødselsdato</p> 934 <p class="semibold"> 935 ${this.userData.birthdayDay}.${this.userData.birthdayMonth}.${this.userData.birthdayYear} 936 </p> 937 </td> 938 ${c(t,()=>l` 939 <td> 940 <a 941 @click="${e=>this.goToStepInFirstFlow(e,1)}" 942 href="#" 943 tabindex="${this.showPriceResults?0:-1}" 944 >Ret</a 945 > 946 </td> 947 `)} 948 </tr> 949 <tr> 950 <td> 951 <p>Adresse</p> 952 <p class="semibold">${this.userData.street}, ${this.userData.zipCode} ${this.userData.city}</p> 953 </td> 954 ${c(t,()=>l` 955 <td> 956 <a 957 @click="${e=>this.goToStepInFirstFlow(e,2)}" 958 href="#" 959 tabindex="${this.showPriceResults?0:-1}" 960 >Ret</a 961 > 962 </td> 963 `)} 964 </tr> 965 <tr> 966 <td> 967 <p>Jobfunktion</p> 968 <p class="semibold">${this.userData.jobTypeDescription}</p> 969 </td> 970 ${c(t,()=>l` 971 <td> 972 <a 973 @click="${e=>this.goToStepInFirstFlow(e,3)}" 974 href="#" 975 tabindex="${this.showPriceResults?0:-1}" 976 >Ret</a 977 > 978 </td> 979 `)} 980 </tr> 981 <tr> 982 <td> 983 <p>Bruttoløn</p> 984 <p class="semibold">${this.userData.salaryStep.toLocaleString(this.locale)} kr./md</p> 985 </td> 986 ${c(t,()=>l` 987 <td> 988 <a 989 @click="${e=>this.goToStepInFirstFlow(e,4)}" 990 href="#" 991 tabindex="${this.showPriceResults?0:-1}" 992 >Ret</a 993 > 994 </td> 995 `)} 996 </tr> 997 <tr> 998 <td> 999 <p>Dækningsperiode</p> 1000 <p class="semibold">${this.userData.coverPeriodMonthsDescription}</p> 1001 </td> 1002 ${c(t,()=>l` 1003 <td> 1004 <a 1005 @click="${e=>this.goToStepInFirstFlow(e,5)}" 1006 href="#" 1007 tabindex="${this.showPriceResults?0:-1}" 1008 >Ret</a 1009 > 1010 </td> 1011 `)} 1012 </tr> 1013 <tr> 1014 <td> 1015 <p>Karensperiode</p> 1016 <p class="semibold">${this.userData.qualifyingDaysDescription}</p> 1017 </td> 1018 ${c(t,()=>l` 1019 <td> 1020 <a 1021 @click="${e=>this.goToStepInFirstFlow(e,6)}" 1022 href="#" 1023 tabindex="${this.showPriceResults?0:-1}" 1024 >Ret</a 1025 > 1026 </td> 1027 `)} 1028 </tr>
1029 ${c(this.showFinalSummary&&this.offerData.name.length,()=>l` 1030 <tr> 1031 <td> 1032 <p>Navn</p> 1033 <p class="semibold">${this.offerData.name}</p> 1034 </td> 1035 </tr> 1036 `)} 1037 ${c(this.showFinalSummary&&this.offerData.phone.length,()=>l` 1038 <tr> 1039 <td> 1040 <p>Tlf.</p> 1041 <p class="semibold">${this.offerData.phone}</p> 1042 </td> 1043 </tr> 1044 `)} 1045 ${c(this.showFinalSummary&&this.offerData.contactTime.length&&this.offerData.contactDescription.length,()=>l` 1046 <tr> 1047 <td> 1048 <p>Kontakttidspunkt</p> 1049 <p class="semibold">${this.offerData.contactDescription}</p> 1050 </td> 1051 </tr> 1052 `)} 1053 </table> 1054 </div> 1055 `}renderSecondFlow(){return l` 1056 <!-- STEP 1 --> 1057 <div class="calculator__step ${d({"--is-active":this.currentFlow===1&&this.currentStep===1})}"> 1058 ${this.renderProgressBar(this.currentStep)} 1059 <h3 class="calculator__heading">Få tilbud på lønsikring</h3> 1060 1061 <div class="calculator__transition-container"> 1062 <form class="calculator__form" data-step-form @submit="${this.preventFormSubmission}"> 1063 <div class="calculator__input-group form-group"> 1064 <label class="calculator__form-label form-label" for="name">Navn *</label> 1065 <input 1066 id="name" 1067 class="calculator__input form-control" 1068 @keydown="${t=>this.handleEnterKey(t)}" 1069 @change="${t=>this.debounceFunction(t,this.handleInput)}" 1070 @input="${t=>this.debounceFunction(t,this.handleInput)}" 1071 type="text" 1072 name="name" 1073 value="${v(this.offerData.name)}" 1074 placeholder="Fornavn og efternavn" 1075 tabindex="${this.currentFlow===1&&this.currentStep===1?0:-1}" 1076 required 1077 /> 1078 <p class="calculator__input-error --value-missing warning">Indtast venligst dit navn.</p> 1079 </div> 1080 </form> 1081 </div> 1082 1083 <div class="calculator__buttons"> 1084 <button 1085 class="btn btn-tertiary" 1086 @click="${t=>this.previousStep(t)}" 1087 tabindex="${this.currentFlow===1&&this.currentStep===1?0:-1}" 1088 > 1089 Tilbage 1090 </button> 1091 <button 1092 class="btn btn-primary --arrow" 1093 @click="${t=>this.nextStep(t)}" 1094 tabindex="${this.currentFlow===1&&this.currentStep===1?0:-1}" 1095 > 1096 Næste 1097 </button> 1098 </div> 1099 </div> 1100 1101 <!-- STEP 2 --> 1102 <div class="calculator__step ${d({"--is-active":this.currentFlow===1&&this.currentStep===2})}"> 1103 ${this.renderProgressBar(this.currentStep)} 1104 <h3 class="calculator__heading">Få tilbud på lønsikring</h3> 1105 1106 <div class="calculator__transition-container"> 1107 <form class="calculator__form" data-step-form @submit="${this.preventFormSubmission}"> 1108 <div class="calculator__input-group form-group"> 1109 <label class="calculator__form-label form-label" for="phone">Tlf. *</label> 1110 <input 1111 id="phone" 1112 class="calculator__input --phone --is-pristine form-control" 1113 @keydown="${t=>this.handleEnterKey(t)}" 1114 @change="${t=>this.debounceFunction(t,this.handleInput)}"
1115 @input="${t=>this.debounceFunction(t,this.handleInput)}" 1116 @blur="${t=>{const e=t.target;e.className.includes("--is-pristine")&&e.classList.remove("--is-pristine")}}" 1117 type="tel" 1118 name="phone" 1119 value="${v(this.offerData.phone)}" 1120 minlength="8" 1121 maxlength="8" 1122 placeholder="Tlf." 1123 tabindex="${this.currentFlow===1&&this.currentStep===2?0:-1}" 1124 required 1125 /> 1126 <p class="calculator__input-error --value-missing warning">Indtast venligst dit tlf.</p> 1127 <p class="calculator__input-error --too-short --too-long warning">Indtast venligst et gyldigt tlf.</p> 1128 </div> 1129 <div> 1130 <p class="mb-2">Ja tak, Det Faglige Hus Forsikring må kontakte mig.</p> 1131 <p class="mb-0">De oplysninger, du har givet, vil blive sendt videre til Det Faglige Hus Forsikring, 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> 1132 </div> 1133 </form> 1134 </div> 1135 1136 <div class="calculator__buttons"> 1137 <button 1138 class="btn btn-tertiary" 1139 @click="${t=>this.previousStep(t)}" 1140 tabindex="${this.currentFlow===1&&this.currentStep===2?0:-1}" 1141 > 1142 Tilbage 1143 </button> 1144 <button 1145 class="btn btn-primary --arrow" 1146 @click="${t=>this.nextStep(t)}" 1147 tabindex="${this.currentFlow===1&&this.currentStep===2?0:-1}" 1148 > 1149 Næste 1150 </button> 1151 </div> 1152 </div> 1153 1154 <!-- STEP 3 --> 1155 <div class="calculator__step ${d({"--is-active":this.currentFlow===1&&this.currentStep===3})}"> 1156 ${this.renderProgressBar(this.currentStep)} 1157 <h3 class="calculator__heading">Få tilbud på lønsikring</h3> 1158 1159 <div class="calculator__transition-container ${d({"--no-transition":this.showFinalSummary})}"> 1160 <form class="calculator__form" data-step-form @submit="${this.preventFormSubmission}"> 1161 <div class="calculator__input-group form-group"> 1162 <label class="calculator__form-label form-label" for="contact-time" 1163 >Vælg tidspunkt, hvor vi må kontakte dig *</label 1164 > 1165 ${c(this.isMobile,()=>l` 1166 <select 1167 id="contact-time" 1168 class="calculator__input form-control" 1169 @change="${t=>this.handleInput(t)}" 1170 type="text" 1171 name="contact-time" 1172 value="${v(this.offerData.contactTime)}" 1173 tabindex="${this.currentFlow===1&&this.currentStep===3?0:-1}" 1174 required 1175 > 1176 <option value="">Vælg tidspunkt</option> 1177 <option value="morning">Formiddag</option> 1178 <option value="afternoon">Eftermiddag</option> 1179 </select> 1180 `,()=>l` 1181 <div class="calculator__search-input-wrapper"> 1182 <input 1183 id="contact-time" 1184 class="calculator__input form-control umbraco-forms-hidden" 1185 @change="${t=>this.debounceFunction(t,this.handleInput)}" 1186 type="text" 1187 name="contact-time" 1188 placeholder="Vælg tidspunkt" 1189 value="${v(this.offerData.contactTime)}" 1190 required 1191 /> 1192 <button 1193 class="calculator__input form-control input --arrow --pseudo-select ${d({"--has-value":this.offerData.contactTime.length})}" 1194 type="button" 1195 list="contact-times" 1196 @click="${()=>this.toggleContactTimes()}" 1197 @keydown="${t=>this.navigateDropdown(t,!0)}" 1198 > 1199 ${this.getContactTimeLabel()} 1200 </button> 1201 </div> 1202 <ul id="contact-times" class="calculator__result-list d-none"> 1203 <li 1204 class="calculator__result" 1205 @click="${t=>this.setContactTime("contact-time","morning","Formiddag")}" 1206 value="morning" 1207 > 1208 Formiddag 1209 </li> 1210 <li> 1211 <hr class="calculator__result-divider" /> 1212 </li> 1213 <li 1214 class="calculator__result" 1215 @click="${t=>this.setContactTime("contact-time","afternoon","Eftermiddag")}" 1216 value="afternoon" 1217 > 1218 Eftermiddag 1219 </li> 1220 </ul> 1221 `)} 1222 <p class="calculator__input-error --value-missing warning">Vælg venligst tidspunkt, hvor vi må kontakte dig.</p> 1223 </div> 1224 </form> 1225 </div> 1226 1227 <div class="calculator__buttons"> 1228 <button 1229 class="btn btn-tertiary" 1230 @click="${t=>this.previousStep(t)}" 1231 tabindex="${this.currentFlow===1&&this.currentStep===3?0:-1}" 1232 > 1233 Tilbage 1234 </button> 1235 <button 1236 class="btn btn-primary --arrow" 1237 @click="${t=>this.nextStep(t)}" 1238 tabindex="${this.currentFlow===1&&this.currentStep===3?0:-1}" 1239 > 1240 Næste 1241 </button> 1242 </div> 1243 </div> 1244 `}renderFinalSummary(){return l` 1245 <div class="calculator__step ${d({"--is-active":this.show
1245FinalSummary})}"> 1246 <p class="calculator__step-label ultra-small text-center text-dark-grey">Opsummering</p> 1247 <h3 class="calculator__heading">Få tilbud på lønsikring</h3> 1248 <p class="semibold">Tjek om dine oplysninger er korrekte.</p> 1249 1250 ${this.renderResultsData(!0)} ${this.renderUserDataSummary(!1)} 1251 1252 <form class="calculator__form" data-step-form> 1253 <div class="calculator__input-group --accept-terms form-group checkbox"> 1254 <input 1255 id="accept" 1256 class="calculator__input form-control" 1257 @change="${t=>this.handleInput(t)}" 1258 type="checkbox" 1259 name="accept" 1260 value="accept" 1261 tabindex="${this.showFinalSummary?0:-1}" 1262 required 1263 /> 1264 <label class="form-check-label" for="accept"> 1265 Ja tak jeg vil gerne have et opkald via telefonen fra Det Faglige Hus Forsikring. De oplysninger, du har givet i 1266 denne beregning, bliver delt med Det Faglige Hus Forsikring, så de kan lave et tilbud på lønsikring. 1267 <br /> 1268 <div> 1269 Læs mere om, 1270 <a 1271 class="link" 1272 href="https://www.detfagligehus.dk/om-os/info-om-persondata/" 1273 target="_blank" 1274 tabindex="${this.showFinalSummary?0:-1}" 1275 >hvordan vi arbejder med personlige oplysninger.</a 1276 > 1277 </div> 1278 </label> 1279 <p class="calculator__input-error --value-missing warning">Du skal acceptere betingelserne.</p> 1280 </div> 1281 </form> 1282 1283 <div class="calculator__buttons"> 1284 <button 1285 class="btn btn-secondary grey-border" 1286 @click="${t=>this.previousStep(t)}" 1287 tabindex="${this.showFinalSummary?0:-1}" 1288 > 1289 Ret 1290 </button> 1291 <button 1292 class="btn btn-primary --arrow" 1293 @click="${t=>this.nextStep(t)}" 1294 tabindex="${this.showFinalSummary?0:-1}" 1295 > 1296 Få tilbud 1297 </button> 1298 </div> 1299 </div> 1300 `}renderSendingOffer(){return l` 1301 <div class="calculator__step ${d({"--is-active":this.showSendingOffer})}"> 1302 <h3 class="calculator__heading">Sender information</h3> 1303 <canvas class="calculator__dot-lottie" style="width: 100px; height:100px;" data-dotlottie-submitting></canvas> 1304 <p class="calculator__medium text-center">Vent venligst...</p> 1305 </div> 1306 `}renderConfirmation(){return l` 1307 <div class="calculator__step ${d({"--is-active":this.showConfirmation})}"> 1308 <p class="calculator__step-label ultra-small text-center text-dark-grey">Tak</p> 1309 <h3 class="calculator__heading">Dine oplysninger bliver sendt til Det Faglige Hus Forsikring</h3> 1310 <canvas class="calculator__dot-lottie" style="width: 100px; height:100px;" data-dotlottie-confirmation></canvas> 1311 <p class="calculator__medium text-center">Du vil blive kontaktet.</p> 1312 <div class="calculator__buttons --single"> 1313 <button 1314 class="btn btn-primary --arrow" 1315 @click="${t=>this.nextStep(t)}" 1316 type="button" 1317 tabindex="${this.showConfirmation?0:-1}" 1318 > 1319 Lav ny beregning 1320 </button> 1321 </div> 1322 </div> 1323 `}initPikaday(){setTimeout(()=>{const t=this.querySelectorAll(".datepickerfield");
1323t?.length?(t.forEach(e=>{if(e._picker)return;const a=new H({field:e,format:"DD.MM.YYYY",yearRange:[1900,new Date().getFullYear()],position:"top left",firstDay:1,parse(i){for(const s of N){const r=B(i,s,new Date,{locale:O});if(J(r)){const p=new Date(r.getTime()-r.getTimezoneOffset()*6e4),f=p.toISOString().split("T")[0];return e.setAttribute("data-date",f),p}}return null},toString(i){return Intl.DateTimeFormat("da-DK",{dateStyle:"long"}).format(i)},onSelect(i){const r=new Date(i.getTime()-i.getTimezoneOffset()*6e4).toISOString().split("T")[0],p=new CustomEvent("birthday",{bubbles:!1});e.setAttribute("data-date",r),e.dispatchEvent(p)}});e._picker=a,this.addEventListener("disconnected",()=>{a&&a.destroy(),delete e._picker})}),this.pikadayHasBeenInit=!0):console.error("Calculator Salary Insurance: no Pikaday elements found")},0)}setBirthDay(t){const i=(t.target.getAttribute("data-date")??"").split("-");this.userData.birthdayYear=Number(i[0]),this.userData.birthdayMonth=Number(i[1]),this.userData.birthdayDay=Number(i[2])}async getInsuranceData(){let t=!0;setTimeout(()=>{t=!1,this.insuranceData!==null&&(this.isLoading=!1)},2e3),await fetch(this.api.dataUrl).then(e=>{if(e.ok)return e.json();throw new Error("Insurance data fetch failed")}).then(e=>{this.insuranceData=e,this.insuranceData?.jobTypes.sort((a,i)=>a.description.localeCompare(i.description)),this.insuranceData?.qualifyingDays.sort((a,i)=>a.description.localeCompare(i.description)),this.insuranceData?.coverPeriodMonths.sort((a,i)=>Number(a.code)-Number(i.code)),this.getDataFailed=!1,!t&&this.isLoading&&(this.isLoading=!1)}).catch(e=>{console.error(e),this.getDataFailed=!0,this.dataFailureDialog?.then(a=>{a.getAttribute("open")===null&&D(a,80)})})}previousStep(t){this.isTransitioning=!0,setTimeout(()=>{this.isTransitioning=!1},500),this.hideNavigationButtons(t),setTimeout(()=>{if(this.calculator?.then(e=>{e.scrollIntoView({behavior:"smooth"})}),this.showFinalSummary){this.showFinalSummary=!1,this.showPriceResults=!0;return}if(this.currentFlow===1&&this.currentStep===1){this.showPriceResults=!0,this.currentFlow=-1,this.currentStep=-1;return}if(this.showPriceResults){this.showPriceResults=!1,this.currentFlow=0,this.currentStep=6;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){window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"dfh_loensikring_beregn_start"}),this.showInitialView=!1,this.currentFlow=0,this.currentStep=1,this.hideNavigationButtons(t),this.calculator?.then(e=>{e.scrollIntoView({behavior:"smooth"})}),this.dawaService.checkDawaConnection().then(e=>{this.dawaConnectionWorks=e}),new y({autoplay:!0,loop:!0,canvas:document.querySelector("[data-dotlottie-calculating]"),src:"/assets/lottiefiles/calculating.json"}),new y({autoplay:!0,loop:!0,canvas:document.querySelector("[data-dotlottie-submitting]"),src:"/assets/lottiefiles/submitting.json"});return}setTimeout(()=>{if(this.showPriceResults){this.showPriceResults=!1,this.currentFlow=1,this.currentStep=1,this.calculator?.then(a=>{a.scrollIntoView({behavior:"smooth"})});return}if(this.showConfirmation){this.showConfirmation=!1,this.showInitialView=!0,this.calculator?.then(a=>{a.scrollIntoView({behavior:"smooth"})});return}if(this.checkStepValidity()){if(this.hideNavigationButtons(t),this.calculator?.then(a=>{a.scrollIntoView({behavior:"smooth"})}),this.showFinalSummary){window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"dfh_loensikring_beregn_faa_tilbud"}),this.showFinalSummary=!1,this.showSendingOffer=!0,this.submitOfferData();return}if(this.currentStep++,this.currentFlow===0&&this.currentStep===4&&this.setSalaryValue(),this.currentFlow===0&&this.currentStep>this.flows[0].totalSteps){this.currentFlow=-1,this.currentStep=-1,this.showPriceCalculation=!0,this.submitUserData();return}if(this.currentFlow===1&&this.currentStep>this.flows[1].totalSteps){this.currentFlow=-1,this.currentStep=-1,this.show
1323FinalSummary=!0,setTimeout(()=>{const a=this.querySelector("details");a&&new W(a)},100);return}}},this.transitionDelay)}checkStepValidity(){let t=0;this.showFinalSummary&&(t=this.stepForms.length-1),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){const s=e.querySelector('.calculator__input[name="birthday"]'),r=s?.getAttribute("data-date")??s?.value;s&&r&&(a=this.validateBirthday(r))}if(this.currentFlow===0&&this.currentStep===2){const s=e.querySelector('.calculator__input[name="address"]');s&&s.value&&(this.userData.street.toLocaleLowerCase()===s.value.toLocaleLowerCase()||(a=!1,i="value-invalid"))}if(this.currentFlow===0&&this.currentStep===3){const s=e.querySelector('.calculator__input[name="job"]');s&&s.value&&(this.userData.jobTypeDescription&&this.userData.jobTypeDescription.toLocaleLowerCase()===s.value.toLocaleLowerCase()||(a=!1,i="value-invalid"))}if(a)e.classList.value="calculator__form";else{let s;for(const r of e.elements)if(["input","select"].includes(r.nodeName.toLowerCase())&&!r.className.includes("d-none")){s=r;break}if(s&&this.setValidityStates(e,s,i),this.currentStep===1){const r=e.querySelector("#birthday");r&&(r.value="")}}}return a}goToStepInFirstFlow(t,e){t.preventDefault(),this.calculator?.then(a=>{a.scrollIntoView({behavior:"smooth"})}),this.showPriceResults=!1,this.currentFlow=0,this.currentStep=e,this.currentStep===4&&this.setSalaryValue()}setMaxDate(){const t=new Date;return x(new Date(t.getFullYear()-18,t.getMonth(),t.getDate()),{days:1}).toISOString().split("T")[0]}setMinDate(){const t=new Date;return x(new Date(t.getFullYear()-60,t.getMonth(),t.getDate()),{days:1}).toISOString().split("T")[0]}preventFormSubmission(t){t.preventDefault(),this.nextStep(t)}handleEnterKey(t){const e=t.target;if(t.key==="Enter"&&e.className.includes("datepickerfield")){t.preventDefault();return}t.key==="Enter"&&(t.preventDefault(),this.nextStep(t))}handleInput(t){const e=t.target,a=e.value;a.length?e.classList.add("--has-value"):e.classList.remove("--has-value");const i=e.form;if(i.classList.value="calculator__form",e.checkValidity())switch(e.name){case"birthday":{if(this.isMobile){const r=a.split("-");this.userData.birthdayYear=Number(r[0]),this.userData.birthdayMonth=Number(r[1]),this.userData.birthdayDay=Number(r[2])}break}case"salary":this.userData.salaryStep=Number(e.value);break;case"coverperiod":this.userData.coverPeriodMonthsCode=e.value,this.userData.coverPeriodMonthsDescription=this.insuranceData?.coverPeriodMonths.find(r=>r.code===e.value)?.description??"";break;case"qualifyingdays":this.userData.qualifyingDaysCode=e.value,this.userData.qualifyingDaysDescription=this.insuranceData?.qualifyingDays.find(r=>r.code===e.value)?.description??"";break;case"name":this.offerData.name=e.value;break;case"phone":this.offerData.phone=e.value;break;case"contact-time":{if(this.offerData.contactTime=e.value,e instanceof HTMLSelectElement){const r=e.selectedIndex;this.offerData.contactDescription=e.options[r].text}break}}}validateBirthday(t){const e=new Date(t),a=new Date(this.setMaxDate()),i=new Date(this.setMinDate());return A(e,a)?(this.openDialog(new Event("click"),"[data-birthday-dialog-too-young]"),!1):Y(e,i)?(this.openDialog(new Event("click"),"[data-birthday-dialog-too-old]"),!1):!0}setValidityStates(t,e,a=""){if(a)t.classList.add(`--${a}`);else{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")}}setSalaryValue(){this.userData.salaryStep!==0&&setTimeout(()=>{const t=document.querySelector("[data-salary-select]");t&&(t.value=this.userData.salaryStep.toString())},0)}openDialog(t,e){t.preventDefault(),t.stopPropagation();const a=this.querySelector(`${e}`);a&&(this.hasTyped=!1,D(a,80),a.querySelector(".btn.--close")?.blur(),a.querySelector("input")?.focus())}closeDialog(t,e){t.preventDefault(),t.stopPropagation();const a=this.querySelector(`${e}`);if(a){const i=a.querySelector("input");i&&(i.value="",i.blur()),k(a,80);const s=this.querySelector(".calculator__step.--is-active");if(s){const r=s.querySelector("form");if(r){for(const p of r.elements)p instanceof HTMLInputElement&&p.type==="text"&&p.blur();
1323r.focus()}}this.isMobile&&this.calculator?.then(r=>{r.scrollIntoView({behavior:"smooth"})})}}hideMobileKeyboard(){document.querySelector("[data-dialog-job-type]")?.blur()}async handleDawaInput(t){if(t.type==="change"&&this.userData.street.length&&this.userData.zipCode.length)return;const e=t.target,a=e.value;if(a.length?e.classList.add("--has-value"):e.classList.remove("--has-value"),a.length>2&&a!==this.dawaQuery){this.hasTyped=!0,this.dawaQuery=a;const i=await this.dawaService.getDawaAdresses(a);i&&i.length?this.dawaResults=i.filter(s=>s.postnr).slice(0,30):this.dawaResults=[]}else if(a.length===0){this.hasTyped=!1,this.dawaQuery="",this.dawaResults=[],this.userData.street="",this.userData.zipCode="";const i=this.querySelector("[data-dawa-zipcode-input]");i&&(i.value="")}}setDawaAddress(t){if(!t.postnr)return;this.userData.street=t.vejnavn,this.userData.zipCode=t.postnr,this.userData.city=t.postdistrikt??"";const e=this.querySelector("[data-dawa-address-input]");e&&(e.value=t.vejnavn,e.form?.classList.remove("--value-missing"),e.form?.classList.remove("--value-invalid"));const a=this.querySelector("[data-dawa-zipcode-input]");if(a&&(a.value=t.postnr),this.isMobile){const i=this.querySelector("[data-dawa-dialog]");if(i){const s=i.querySelector("[data-dialog-dawa-address-input]");s&&(this.hasTyped=!1,s.value="",s.blur()),k(i),e&&e.blur()}this.calculator?.then(s=>{s.scrollIntoView({behavior:"smooth"})})}this.dawaQuery="",this.dawaResults=[],this.hasTyped=!1}setJob(t){this.userData.jobTypeCode=t.code,this.userData.jobTypeDescription=t.description;const e=this.querySelector("[data-job-type-input]");e&&(e.value=t.description,e.form?.classList.remove("--value-missing"),e.form?.classList.remove("--value-invalid"));const a=this.querySelector("[data-job-code]");a&&(a.value=t.code);const i=document.querySelector("[data-job-error]");if(i&&(i.innerHTML="Du skal vælge en jobfunktion"),this.isMobile){const s=this.querySelector("[data-job-type-dialog]");if(s){const r=s.querySelector("[data-dialog-job-type]");r&&(r.value="",r.classList.remove("--has-value")),this.searchValue="",this.filteredJobTypes=[],k(s),e&&e.blur()}this.calculator?.then(r=>{r.scrollIntoView({behavior:"smooth"})})}
1323else this.querySelector("[data-job-types-list]")?.classList.add("d-none")}filterJobTypes(t){if(!(t.type==="change")){const r=this.querySelector("[data-job-code]");r&&(r.value=""),this.userData.jobTypeCode=""}const a=document.querySelector("[data-job-error]");a&&(a.innerHTML="Du skal vælge en jobfunktion fra listen.");const i=t.target,s=i.value;this.searchValue=s,s.length?i.classList.add("--has-value"):i.classList.remove("--has-value"),s.length>2?(this.isFilteringJobs=!0,this.filteredJobTypes=this.insuranceData?.jobTypes.filter(r=>r.description.toLocaleLowerCase().includes(s.toLocaleLowerCase())).slice(0,30)??[],this.isFilteringJobs=!1):this.filteredJobTypes=[]}getContactTimeLabel(){return this.offerData.contactDescription.length?this.offerData.contactDescription:"Vælg tidspunkt"}toggleContactTimes(){const t=this.querySelector("#contact-times");t&&t.classList.toggle("d-none")}setContactTime(t,e,a){const i=this.querySelector(`#${t}`);i&&e&&(i.value=e,i.dispatchEvent(new Event("change"))),this.offerData={...this.offerData,contactTime:e,contactDescription:a},this.toggleContactTimes()}clearInput(t){const a=t.target.parentElement?.querySelector(".calculator__input");a&&(a.classList.remove("--has-value"),a.value=""),this.hasTyped=!1}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){e&&t.preventDefault();const a=t.key.toLowerCase(),i=t.target,s=i.value?i.value:"";if(a==="enter"&&t.preventDefault(),a==="arrowdown"||a==="arrowup"||a==="enter"){const r=a==="arrowdown"?1:-1,p=i.getAttribute("list")??"";if(p){const f=this.querySelector(`#${p}`);if(f){const h=Array.from(f.children).filter(b=>b.className.includes("calculator__result")&&!b.className.includes("d-none"));if(h.length){const b=h.findIndex(g=>g.className.includes("--is-active"));if(a==="enter"&&b!==-1){const g=h[b];if(!g.textContent?.toLocaleLowerCase().includes(s.toLocaleLowerCase()))return;g.addEventListener("click",()=>{t.preventDefault(),t.stopImmediatePropagation()}),g.click(),g.removeEventListener("click",()=>{t.preventDefault(),t.stopImmediatePropagation()}),h.forEach(_=>_.classList.remove("--is-active"))}b===-1?r===1?h[0].classList.add("--is-active"):(h.at(-1)?.classList.add("--is-active"),f.scrollTop=h.at(-1).offsetTop-167):b===h.length-1&&r===1?(h.forEac
1323h(g=>g.classList.remove("--is-active")),h[0].classList.add("--is-active"),f.scrollTop=h[0].offsetTop-10):b===0&&r===-1?(h.forEach(g=>g.classList.remove("--is-active")),h.at(-1)?.classList.add("--is-active"),f.scrollTop=h.at(-1).offsetTop-167):(h.forEach(g=>g.classList.remove("--is-active")),h[b+r].classList.add("--is-active"),b>1&&(f.scrollTop=h[b+r].offsetTop-167))}}}}}handleDocumentClick(t){const e=t.target;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")||this.resultDropdowns.forEach(a=>{a.className.includes("d-none")||a.classList.add("d-none")})}async submitUserData(){let t=!0;setTimeout(()=>{t=!1,this.calculationData!==null&&(this.showPriceCalculation=!1,this.showPriceResults=!0)},2e3);const e={salaryStep:this.userData.salaryStep,jobTypeCode:this.userData.jobTypeCode,birthdayYear:this.userData.birthdayYear,birthdayMonth:this.userData.birthdayMonth,birthdayDay:this.userData.birthdayDay,zipCode:this.userData.zipCode,street:this.userData.street,coverPeriodMonthsCode:this.userData.coverPeriodMonthsCode,qualifyingDaysCode:this.userData.qualifyingDaysCode},a=new Headers;a.append("Content-Type","application/json"),await fetch(this.api.calculateUrl,{method:"POST",headers:a,body:JSON.stringify(e)}).then(i=>{if(!i.ok)i.json().then(s=>{throw this.calculationFailureDialog?.then(r=>{D(r,80)}),new Error("Calculate request failed",{cause:s})});else return i.json()}).then(i=>{i!==void 0&&(this.calculationData=i,t||(this.showPriceCalculation=!1,this.showPriceResults=!0))}).catch(i=>{console.error(i)})}async submitOfferData(){let t=!1,e=!0;setTimeout(()=>{e=!1,t&&(this.showSendingOffer=!1,this.showConfirmation=!0,new y({autoplay:!0,loop:!1,canvas:document.querySelector("[data-dotlottie-confirmation]"),src:"/assets/lottiefiles/confirmation.json"}))},2e3);const a={values:{}};for(const s of Object.keys(this.userData))a.values[s]=this.userData[s];for(const s of Object.keys(this.offerData))a.values[s]=this.offerData[s];const i=new Headers;i.append("Content-Type","application/json"),i.append(this.tokenSetHeaderName,this.tokenSetRequestToken),await fetch(`/umbraco/forms/delivery/api/v1/entries/${this.formId}`,{method:"POST",headers:i,body:JSON.stringify(a)}).then(s=>{if(s.ok)return s.json();throw new Error("Offer data submit failed")}).then(()=>{t=!0,e||(this.showSendingOffer=!1,this.showConfirmation=!0,new y({autoplay:!0,loop:!1,canvas:document.querySelector("[data-dotlottie-confirmation]"),src:"/assets/lottiefiles/confirmation.json"}))}).catch(s=>{console.error(s)})}};n([w()],o.prototype,"heading",2);n([w()],o.prototype,"formId",2);n([w()],o.prototype,"tokenSetHeaderName",2);n([w()],o.prototype,"tokenSetRequestToken",2);n([u()],o.prototype,"isLoading",2);n([u()],o.prototype,"isCalculatingPrice",2);n([u()],o.prototype,"currentStep",2);n([u()],o.prototype,"currentFlow",2);n([u()],o.prototype,"showInitialView",2);n([u()],o.prototype,"showPriceCalculation",2);n([u()],o.prototype,"showPriceResults",2);n([u()],o.prototype,"showFinalSummary",2);n([u()],o.prototype,"showSendingOffer",2);n([u()],o.prototype,"showConfirmation",2);n([u()],o.prototype,"getDataFailed",2);n([u()],o.prototype,"dawaResults",2);n([u()],o.prototype,"isMobile",2);n([u()],o.prototype,"dawaConnectionWorks",2);n([u()],o.prototype,"hasTyped",2);n([u()],o.prototype,"offerData",2);n([u()],o.prototype,"pikadayHasBeenInit",2);n([u()],o.prototype,"isTransitioning",2);n([u()],o.prototype,"filteredJobTypes",2);n([u()],o.prototype,"searchValue",2);n([u()],o.prototype,"isFilteringJobs",2);n([T("[data-step-form]")],o.prototype,"stepForms",2);n([T(".calculator__result-list")],o.prototype,"resultDropdowns",2);n([S("[data-failure-dialog]")],o.prototype,"dataFailureDialog",2);n([S("[data-calculation-failure-dialog]")],o.prototype,"calculationFailureDialog",2);n([S("[data-calculator]")],o.prototype,"calculator",2);o=n([U("calculator-salary-insurance")],o);export{o as CalculatorSalaryInsurance};
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.