1import{q as v,D as L,F as k,G as f,w as c,x as s,y as o,u,H as b,I as d,A as S,B as $,C as D}from"./main-DP3nfA8R.js";import{r as y}from"./query-async-BoLSFKfI.js";var P=Object.defineProperty,x=Object.getOwnPropertyDescriptor,p=(t,e,i,a)=>{for(var l=a>1?void 0:a?x(e,i):e,m=t.length-1,_;m>=0;m--)(_=t[m])&&(l=(a?_(e,i,l):_(l))||l);return a&&l&&P(e,i,l),l};const h=Object.freeze({Student:"studerende-eller-lærling",Employee:"lønmodtager-eller-ledig",Selfemployed:"selvstændig"}),n=Object.freeze({UnionOnly:"kun-fagforening",UnemploymentFundOnly:"kun-a-kasse",UnionAndFund:"fagforening-og-a-kasse",UnionAndFundAndInsurance:"fagforening-a-kasse-og-lønsikring",DanishSelfemployedAssociation:"foreningen-danske-selvstændige"}),g=Object.freeze({UnemploymentFundOnly:1,UnionOnly:5,DanishSelfemployedAssociation:9});let r=class extends v{constructor(){super(...arguments),this.isBusy=!0,this.activeSituation="",this.isMobile=!1,this.adTractionId="",this.adTractionUtmSource="",this.basicPricePack=null,this.benefitsLabel="",this.description="",this.dictionary=L.getInstance(),this.extrasLabel="",this.heading="",this.isPopularLabel="",this.membershipPrices=new Map,this.monthlyPriceLabel="",this.preselectedSituation="",this.seeYourBenefitsLabel="",this.selectMembershipLabel="",this.situations=[],this.subscriptions=[],this.wageInsuranceDiscount=null}connectedCallback(){super.connectedCallback(),this.init(),this.isMobile=k}init(){this.getData(),this.benefitsLabel=this.dictionary.get("benefitsLabel"),this.description=this.dictionary.get("description"),this.extrasLabel=this.dictionary.get("extrasLabel"),this.isPopularLabel=this.dictionary.get("isPopularLabel"),this.monthlyPriceLabel=this.dictionary.get("monthlyPriceLabel"),this.seeYourBenefitsLabel=this.dictionary.get("seeYourBenefitsLabel"),this.selectMembershipLabel=this.dictionary.get("selectMembershipLabel"),this.situations=this.dictionary.get("situations"),this.heading=this.dictionary.get("title"),this.preselectedSituation=this.situations.find(i=>i.isSelected)?.type||"",this.activeSituation=this.preselectedSituation,this.studentImportantInfo={title:this.dictionary.get("importantInfoTitle"),text:this.dictionary.get("importantInfoText"),confirm:this.dictionary.get("importantInfoConfirm"),deny:this.dictionary.get("importantInfoDeny")},this.studentChooseSituation={title:this.dictionary.get("chooseSituationTitle"),text:this.dictionary.get("chooseSituationText"),label:this.dictionary.get("chooseSituationLabel")},this.studentChooseMembership={title:this.dictionary.get("chooseMembershipTitle"),text:this.dictionary.get("chooseMembershipText")},this.studentExemptionCheck={imageUrl:this.dictionary.get("exemptionCheckImageUrl"),imageAltText:this.dictionary.get("exemptionCheckImageAltText"),title:this.dictionary.get("exemptionCheckTitle"),text:this.dictionary.get("exemptionCheckText"),start:this.dictionary.get("exemptionCheckStart")};const t=f.get("_at_gd");t&&(this.adTractionId=t);const e=f.get("_utm_source");e&&(this.adTractionUtmSource=e)}createRenderRoot(){return this}render(){return s` 2 <div class="choose-membership"> 3 ${c(this.heading.length,()=>s`<h2 class="choose-membership__title h1">${this.heading}</h2>`)} 4 ${c(this.description.length,()=>s`<p class="choose-membership__description">${this.description}</p>`)} 5 ${c(!this.isBusy,()=>s` 6 ${this.renderSituations()} 7 ${c(!this.isMobile,()=>s` 8 ${this.renderMemberships()} 9 `)} 10 ${this.renderStudentFlow()} 11 `)} 12 </div> 13 `}renderSituations(){return s` 14 <div class="choose-membership__situations"> 15 ${o(this.situations,t=>s` 16 <button 17 class="choose-membership__situation-button ${u({"--is-active":t.type===this.activeSituation,"--is-preselected":t.type===this.preselectedSituation})}" 18 data-situation-type="${t.type}" 19 @click="${()=>this.selectSituation(t.type)}" 20 > 21 <div class="choose-membership__situation-circle"></div> 22 <img class="choose-membership__situation-icon" src="${t.imageUrl}" alt="Situation icon" width="42"> 23 <p class="choose-membership__situation-text">${t.title}</p> 24 <p class="choose-membership__situation-price"><span class="semibold --blue">${t.priceFromLabel}
24 ${this.getSituationMinimumPrice(t.type)}</span> ${this.monthlyPriceLabel}</p> 25 </button> 26 ${c(this.isMobile,()=>s` 27 <div class="choose-membership__memberships --mobile-only ${u({"d-none":t.type!==this.activeSituation})}"> 28 <div 29 class="choose-membership__membership-group ${u({"--is-active":t.type===this.activeSituation,"--full":t.memberships.length>2})}" 30 data-situation-type="${t.type}" 31 > 32 ${o(t.memberships,e=>s` 33 ${this.renderMembership(t,e)} 34 `)} 35 </div> 36 </div> 37 `)} 38 `)} 39 </div> 40 `}renderMemberships(){return s` 41 <div class="choose-membership__memberships"> 42 ${o(this.situations,t=>s` 43 <div 44 class="choose-membership__membership-group ${u({"--is-active":t.type===this.activeSituation,"--full":t.memberships.length>2})}" 45 data-situation-type="${t.type}" 46 > 47 ${o(t.memberships,e=>s` 48 ${this.renderMembership(t,e)} 49 `)} 50 </div> 51 `)} 52 </div> 53 `}renderMembership(t,e){return s` 54 <div class="choose-membership__membership ${u({"--is-popular":e.isPopular})}"> 55 <span class="choose-membership__membership-popular-label">${this.isPopularLabel}</span> 56 <h2 class="choose-membership__membership-title">${this.getMembershipTypeLabel(e.type)}</h2> 57 ${c(e.benefitsHighlighted.length,()=>s` 58 <ul class="choose-membership__membership-list --mobile-only"> 59 ${o(e.benefitsHighlighted,i=>s`<li class="choose-membership__membership-list-item --highlighted">${i}</li>`)} 60 </ul> 61 `)} 62 <div class="choose-membership__membership-cost"> 63 ${c(t.type===h.Student,()=>s`<span>0</span>`,()=>s`${e.priceFromLabel??null} <span>${this.membershipPrices.get(e.type)}</span>`)} 64 ${this.monthlyPriceLabel} 65 66 ${c(this.getDiscountInfo(t.type,e.type),()=>s` 67 <div class="choose-membership__membership-discount">${this.getDiscountInfo(t.type,e.type)}</div> 68 `)} 69 </div> 70 71 <div class="choose-membership__membership-benefits"> 72 <p class="choose-membership__membership-list-title">${this.benefitsLabel}</p> 73 <ul class="choose-membership__membership-list"> 74 ${o(e.benefitsHighlighted,i=>s`<li class="choose-membership__membership-list-item --highlighted">${i}</li>`)} 75 ${o(e.benefitsYouGet,i=>s`<li class="choose-membership__membership-list-item --check">${i}</li>`)} 76 ${o(e.benefitsYouDontGet,i=>s`<li class="choose-membership__membership-list-item --cross">${i}</li>`)} 77 </ul> 78 79 <p class="choose-membership__membership-list-title">${this.extrasLabel}</p> 80 <ul class="choose-membership__membership-list"> 81 ${o(e.extrasYouGet,i=>s`<li class="choose-membership__membership-list-item --dash">${i}</li>`)} 82 ${o(e.extrasYouDontGet,i=>s`<li class="choose-membership__membership-list-item --cross">${i}</li>`)} 83 </ul> 84 </div> 85 86 <button class="choose-membership__benefits-button" type="button" @click="${()=>this.openDialog(`${t.type}-${e.type}`)}">${this.seeYourBenefitsLabel} <i class="fa fa-light fa-info-circle --default"></i> <i class="fa fa-info-circle --active"></i></button> 87 88 ${c(t.type===h.Student,()=>s` 89 <button class="choose-membership__membership-button btn --arrow --full-width btn-primary" @click="${()=>this.startStudentFlow()}"> 90 ${e.buttonLabel?e.buttonLabel:this.selectMembershipLabel} 91 </button> 92 `,()=>s` 93 <button class="choose-membership__membership-button btn --arrow --full-width btn-primary" @click="${()=>this.selectMembership(e.type)}"> 94 ${e.buttonLabel?e.buttonLabel:this.selectMembershipLabel} 95 </button> 96 `)} 97 </div> 98 99 <dialog class="dialog --gsap --benefits" data-dialog="${t.type}-${e.type}"> 100 <button class="btn --close" @click="${()=>this.closeDialog(`${t.type}-${e.type}`)}"></button> 101 <div class="dialog__content"> 102 <h2 class="choose-membership__membership-title">${this.getMembershipTypeLabel(e.type)}</h2> 103 <p class="choose-membership__membership-list-title">${this.benefitsLabel}</p> 104 <ul class="choose-membership__membership-list"> 105 ${o(e.benefitsHighlighted,i=>s`<li class="choose-membership__membership-list-item --highlighted">${i}</li>`)} 106 ${o(e.benefitsYouGet,i=>s`<li class="choose-membership__membership-list-item --check">${i}</li>`)} 107 ${o(e.benefitsYouDontGet,i=>s`<li class="choose-membership__membership-list-item --cross">${i}</li>`)} 108 </ul> 109 110 <p class="choose-membership__membership-list-title">${this.extrasLabel}</p> 111 <ul class="choose-membership__membership-list"> 112 ${o(e.extrasYouGet,i=>s`<li class="choose-membership__membership-list-item --dash">${i}</li>`)} 113 ${o(e.extrasYouDontGet,i=>s`<li class="choose-membership__membership-list-item --cross">${i}</li>`)} 114 </ul> 115 <button class="btn btn-secondary --full-width" @click="${()=>this.closeDialog(`${t.type}-${e.type}`)}">Luk</button> 116 </div> 117 </dialog> 118 `}renderStudentFlow(){return s` 119 <dialog class="dialog --choose-membership --gsap" data-student-important> 120 <button class="btn --close" type="button" @click="${()=>this.closeDialog("student-important")}"></button> 121 <div class="dialog__content"> 122 <h2 class="--information">${this.studentImportantInfo.title}</h2> 123 <p class="">${this.studentImportantInfo.text}</p> 124 <div class="btn-container --grow"> 125 <button class="btn btn-secondary --no-margin" @click="${()=>this.goToStudentSituation()}">${this.studentImportantInfo.confirm}</button> 126 <button class="btn btn-primary --no-margin" @click="${()=>this.goToStudentExemption()}">${this.studentImportantInfo.deny}</button> 127 </div> 128 </div> 129 </dialog> 130 131 <dialog class="dialog --choose-membership --gsap" data-student-situation> 132 <button class="btn --close" type="button" @click="${()=>this.closeDialog("student-situation")}"></button> 133 <div class="dialog__content"> 134 <h2 class="--information">${this.studentChooseSituation.title}</h2> 135 <p class="">${this.studentChooseSituation.text}</p> 136 <div class="choose-membership__situations"> 137 ${o(this.situations,t=>s` 138 ${c(t.type!==h.Student,()=>s` 139 <button 140 class="choose-membership__situation-button" 141 data-situation-type="${t.type}" 142 @click="${()=>this.goToStudentMembership(t.type)}" 143 > 144 <div class="choose-membership__situation-circle"></div> 145 <img class="choose-membership__situation-icon" src="${t.imageUrl}" alt="Situation icon" width="42"> 146 <p class="choose-membership__situation-text">${t.title}</p> 147 <p class="choose-membership__situation-price"><span class="semibold --blue">${t.priceFromLabel}
147 ${this.getSituationMinimumPrice(t.type)}</span> ${this.monthlyPriceLabel}</p> 148 </button> 149 `)} 150 `)} 151 </div> 152 </div> 153 </dialog> 154 155 <dialog class="dialog --large --choose-membership --fixed --gsap" data-student-membership> 156 <button class="btn --close" type="button" @click="${()=>this.closeDialog("student-membership")}"></button> 157 <div class="dialog__content"> 158 <h2 class="--information">${this.studentChooseMembership.title}</h2> 159 <p class="">${this.studentChooseMembership.text}</p> 160 ${o(this.situations,t=>s` 161 ${c(t.type!==h.Student,()=>s` 162 <div 163 class="choose-membership__membership-group ${u({"--is-active":t.type===this.activeSituation})}" 164 data-situation-type="${t.type}" 165 > 166 ${o(t.memberships,e=>s` 167 <div class="choose-membership__membership --dialog ${u({"--is-popular":e.isPopular})}"> 168 <span class="choose-membership__membership-popular-label">${this.isPopularLabel}</span> 169 <h2 class="choose-membership__membership-title">${this.getMembershipTypeLabel(e.type)}</h2> 170 ${c(e.benefitsHighlighted.length,()=>s` 171 <ul class="choose-membership__membership-list --dialog-only"> 172 ${o(e.benefitsHighlighted,i=>s`<li class="choose-membership__membership-list-item --highlighted">${i}</li>`)} 173 </ul> 174 `)} 175 <div class="choose-membership__membership-cost"> 176 <span class="h1 --display">${this.membershipPrices.get(e.type)}</span> 177 ${this.monthlyPriceLabel} 178 </div> 179 180 <p class="choose-membership__membership-list-title">${this.benefitsLabel}</p> 181 <ul class="choose-membership__membership-list"> 182 ${o(e.benefitsHighlighted,i=>s`<li class="choose-membership__membership-list-item --highlighted">${i}</li>`)} 183 ${o(e.benefitsYouGet,i=>s`<li class="choose-membership__membership-list-item --check">${i}</li>`)} 184 ${o(e.benefitsYouDontGet,i=>s`<li class="choose-membership__membership-list-item --cross">${i}</li>`)} 185 </ul> 186 187 <p class="choose-membership__membership-list-title">${this.extrasLabel}</p> 188 <ul class="choose-membership__membership-list"> 189 ${o(e.extrasYouGet,i=>s`<li class="choose-membership__membership-list-item --dash">${i}</li>`)} 190 ${o(e.extrasYouDontGet,i=>s`<li class="choose-membership__membership-list-item --cross">${i}</li>`)} 191 </ul> 192 193 <button class="choose-membership__benefits-button" type="button" @click="${()=>this.openDialog(`${t.type}-${e.type}`)}">${this.seeYourBenefitsLabel} <i class="fa fa-light fa-info-circle --default"></i> <i class="fa fa-info-circle --active"></i></button> 194 195 <button class="choose-membership__membership-button btn btn-primary --arrow --full-width btn-primary" @click="${()=>this.selectMembership(e.type)}"> 196 ${e.buttonLabel?e.buttonLabel:this.selectMembershipLabel} 197 </button> 198 </div> 199 `)} 200 </div> 201 `)} 202 `)} 203 </div> 204 </dialog> 205 206 <dialog class="dialog --has-image --choose-membership --gsap" data-student-exemption> 207 <button class="btn --close" type="button" @click="${()=>this.closeDialog("student-exemption")}"></button> 208 <img class="dialog__image" src="${this.studentExemptionCheck.imageUrl}?width=720" alt="${this.studentExemptionCheck.imageAltText}" /> 209 <div class="dialog__content"> 210 <h2 class="--information">${this.studentExemptionCheck.title}</h2> 211 <p class="">${this.studentExemptionCheck.text}</p> 212 <div class="btn-container --grow"> 213 <button class="btn btn-primary" @click="${()=>this.selectMembership(n.UnionAndFund)}">${this.studentExemptionCheck.start}</button> 214 </div> 215 </div> 216 </dialog> 217 `}selectSituation(t){if(this.isMobile)if(this.activeSituation===t)this.activeSituation="";else{this.activeSituation=t;const e=this.querySelector(`[data-situation-type="${t}"]`);e&&setTimeout(()=>{e.scrollIntoView({behavior:"instant"})},0)}else this.activeSituation=t}selectMembership(t){let e;switch(this.activeSituation){case h.Student:e=2;break;case h.Employee:e=0;break;
217case h.Selfemployed:e=3;break;default:e=-1}let i;switch(t){case n.UnionOnly:i=2;break;case n.UnemploymentFundOnly:i=1;break;case n.UnionAndFund:i=3;break;case n.UnionAndFundAndInsurance:i=11;break;case n.DanishSelfemployedAssociation:i=5;break;default:i=-1}window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"indmeld_start"}),window.location.href=`${this.signupURL}?s=${e}&p=${i}${this.adTractionId?`&aid=${this.adTractionId}`:""}${this.adTractionUtmSource?`&utm_source=${this.adTractionUtmSource}`:""}`}startStudentFlow(){this.studentImportantDialog.then(t=>b(t,80))}goToStudentSituation(){this.studentImportantDialog.then(t=>d(t,80)),this.studentSituationDialog.then(t=>b(t,80))}goToStudentExemption(){this.studentImportantDialog.then(t=>d(t,80)),this.studentExemptionDialog.then(t=>b(t,80))}goToStudentMembership(t){this.activeSituation=t,this.studentSituationDialog.then(e=>d(e,80)),this.studentMembershipDialog.then(e=>b(e,80))}closeDialog(t){switch(t){case"student-important":this.studentImportantDialog.then(e=>d(e,80));break;case"student-situation":this.studentSituationDialog.then(e=>d(e,80));break;case"student-membership":this.studentMembershipDialog.then(e=>d(e,80));break;case"student-exemption":this.studentExemptionDialog.then(e=>d(e,80));break;default:{const e=document.querySelectorAll(`[data-dialog="${t}"]`);for(const i of e)d(i,80);break}}}getSituationMinimumPrice(t){switch(t){case h.Employee:return this.membershipPrices.get(n.UnionOnly);case h.Student:return 0;case h.Selfemployed:return this.membershipPrices.get(n.DanishSelfemployedAssociation);default:return}}getMembershipTypeLabel(t){switch(t){case n.UnionOnly:return this.dictionary.get("unionOnlyLabel");case n.UnemploymentFundOnly:return this.dictionary.get("unemploymentFundOnlyLabel");case n.UnionAndFund:return this.dictionary.get("unionAndFundLabel");case n.UnionAndFundAndInsurance:return this.dictionary.get("unionAndFundAndInsuranceLabel");case n.DanishSelfemployedAssociation:return this.dictionary.get("danishSelfemployedAssociationLabel");default:return""}}getDiscountInfo(t,e){if(t===h.Student)return;if(!this.wageInsuranceDiscount||!this.basicPricePack){console.error("Choose Membership: discount info data is missing");return}const i=`Pris efter ${e===n.UnionAndFundAndInsurance?this.wageInsuranceDiscount.discount:"6"} måneder fra [price] kr./md.`;switch(e){case n.UnionAndFund:{const a=this.subscriptions.find(m=>m.id===g.UnionOnly),l=this.membershipPrices.get(n.UnionAndFund)+a?.price;return i.replace("[price]",l)}case n.UnionAndFundAndInsurance:{const a=this.subscriptions.find(m=>m.id===g.UnionOnly),l=this.membershipPrices.get(n.UnionAndFund)+a?.price+this.basicPricePack.price;return i.replace("[price]",l)}case n.DanishSelfemployedAssociation:{const a=this.subscriptions.find(m=>m.id===g.DanishSelfemployedAssociation),l=this.membershipPrices.get(n.DanishSelfemployedAssociation)+a?.price;return i.replace("[price]",l)}default:return}}openDialog(t){const e=document.querySelectorAll(`[data-dialog="${t}"]`);for(const i of e)b(i,80)}getData(){const t=setInterval(()=>{if(this.subscriptions.length&&this.wageInsuranceDiscount&&this.basicPricePack){clearInterval(t);const i=this.subscriptions.find(l=>l.id===g.UnionOnly),a=this.subscriptions.find(l=>l.id===g.UnemploymentFundOnly);i&&a&&(this.membershipPrices.set(n.UnionOnly,i.price),this.membershipPrices.set(n.UnemploymentFundOnly,a.price),this.membershipPrices.set(n.UnionAndFund,a.price),this.membershipPrices.set(n.UnionAndFundAndInsurance,a.price+this.basicPricePack.price),this.membershipPrices.set(n.DanishSelfemployedAssociation,a.price)),this.isBusy=!1}},50),e={method:"GET",headers:{"Content-Type":"application/json"}};fetch(this.subscriptionPricesURL,e).then(i=>i.json()).then(i=>{i&&i.length&&(this.subscriptions=i)}),fetch("https://indmeld-api.detfagligehus.dk/GetWageInsuranceDiscount",e).then(i=>i.json()).then(i=>{i&&(this.wageInsuranceDiscount=i)}),fetch("https://indmeld-api.detfagligehus.dk/GetBasicPricePacks",e).then(i=>i.json()).then(i=>{if(i&&i.length){let a=i[0];for(const l of i)l.price<a.price&&(a=l);this.basicPricePack=a}})}};p([S({type:String})],r.prototype,"subscriptionPricesURL",2);p([S({type:String})],r.prototype,"signupURL",2);p([$()],r.prototype,"isBusy",2);p([$()],r.prototype,"activeSituation",2);p([$()],r.prototype,"isMobile",2);p([y("dialog[data-student-important]")],r.prototype,"studentImportantDialog",2);p([y("dialog[data-student-situation]")],r.prototype,"studentSituationDialog",2);p([y("dialog[data-student-membership]")],r.prototype,"studentMembershipDialog",2);p([y("dialog[data-student-exemption]")],r.prototype,"studentExemptionDialog",2);r=p([D("choose-membership")],r);export{r as ChooseMembership};
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.