var n={d:(e,t)=>{for(var i in t)n.o(t,i)&&!n.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},o:(n,e)=>Object.prototype.hasOwnProperty.call(n,e)},e={};n.d(e,{t:()=>r,A:()=>c});function t(n){const e=parseInt(n,10);return n===e+""?e:n}var i,o;!function(n){n.DataIncluded="data_included",n.SelectContract="select_contract"}(i||(i={})),function(n){n.CurrentProvider="current_provider",n.DataIncluded="data_included",n.DataSpeed="data_speed",n.MinutesIncluded="minutes_included",n.SelectContract="select_contract",n.CurrentNetwork="current_network"}(o||(o={}));class s{constructor(n){this.host=n,this.filterSelection={[i.DataIncluded]:"2000",[i.SelectContract]:"-24"},this.filters$=this.loadFilters()}destroy(){}async loadFilterData(){var n;const e=await(null!==(n=this.filters$)&&void 0!==n?n:this.loadFilters()),t=this.buildInitialSelection(e);return this.filterSelection=t,{filterSelection:t,filters:e}}patchFilterSelection(n,e){return this.filterSelection=Object.assign(Object.assign({},this.filterSelection),{[n]:e}),this.filterSelection}async loadFilters(){const n=(this.host?`https://${this.host}`:"https://handytarife.check24.de")+"/api/v1/desktop/result/filter/lp/sim?includePrices=0";try{const e=await fetch(n,{credentials:"include",headers:{Accept:"application/json"}});if(!e.ok)throw new Error(`Failed to load filters: ${e.status}`);const t=(await e.json()).definitions;return null!=t?t:[]}catch(n){return console.error("[teaser] failed to fetch filters",n),[]}}buildInitialSelection(n){const e=Object.assign({},this.filterSelection);return n.forEach((n=>{var t,i,s,a;n.definition.filterKey===o.DataIncluded&&(e[o.DataIncluded]=null!==(i=null!==(t=n.definition.selectFilterData.selectedValue)&&void 0!==t?t:n.definition.selectFilterData.defaultValue)&&void 0!==i?i:e[o.DataIncluded]),n.definition.filterKey===o.SelectContract&&(e[o.SelectContract]=null!==(a=null!==(s=n.definition.selectFilterData.selectedValue)&&void 0!==s?s:n.definition.selectFilterData.defaultValue)&&void 0!==a?a:e[o.SelectContract])})),e}}class a{constructor(n,e){this.shadowRoot=n,this.host=e,this.sliderService=new s(this.host),this.filterListenersBound=!1}destroy(){}init(){this.initShortFilterTab(),this.loadAndRenderFilters()}getElementById(n){return this.shadowRoot.getElementById(n)}patchFilterSelection(n,e){const t=this.sliderService.patchFilterSelection(n,e);this.filterData&&(this.filterData.filterSelection=t)}isSelected(n,e,i){var o;const s=null===(o=null==n?void 0:n.filterSelection)||void 0===o?void 0:o[e];return!!s&&t(s)===t(String(i))}getFilterDefinitionElementOptions(n,e){return n.filter((n=>n.definition.filterKey===e)).flatMap((n=>n.definition.selectFilterData.elements))}renderFilterOptions(n){var e,t;const o=null!==(e=this.getFilterDefinitionElementOptions(n.filters,i.DataIncluded))&&void 0!==e?e:[],s=null!==(t=this.getFilterDefinitionElementOptions(n.filters,i.SelectContract))&&void 0!==t?t:[],a=o.map((e=>`<option value="${e.value}" ${this.isSelected(n,i.DataIncluded,e.value)?"selected":""}>${e.prefixedLabel}</option>`)).join(""),l=s.map((e=>`<option value="${e.value}" ${this.isSelected(n,i.SelectContract,e.value)?"selected":""}>${e.prefixedLabel}</option>`)).join(""),r=this.getElementById("c24mfso-data-volume-select"),c=this.getElementById("c24mfso-contract-duration-select");r&&c&&(r.innerHTML=a,c.innerHTML=l,this.updateFilterValueDisplay(r,"c24mfso-data-volume-value"),this.updateFilterValueDisplay(c,"c24mfso-contract-duration-value"))}updateFilterValueDisplay(n,e){var t,i;const o=this.getElementById(e);o&&n&&(o.textContent=null!==(i=null===(t=n.options[n.selectedIndex])||void 0===t?void 0:t.text)&&void 0!==i?i:"")}getSubmitLink(n){return`${this.host?`https://${this.host}`:"https://handytarife.check24.de"}/${function(n,e){const t=Object.entries(e).map((([n,e])=>`${n}=${encodeURIComponent(e)}`)).join("&");return n+(t?`?${t}`:"")}("vergleich",{data_included:n[i.DataIncluded],select_contract:n[i.SelectContract],user_journey:"comparison"})}`}initSubmitLinkHandler(){const n=this.getElementById("c24mfso-submit-link"),e=this.getElementById("c24mfso-teaser-link");n&&(n.addEventListener("click",(()=>{window.dataLayer||(window.dataLayer=[]),window.dataLayer.push({event:"teaser_click",product:"mobilfunk:simonly"})})),e&&e.addEventListener("click",(()=>{window.dataLayer||(window.dataLayer=[]),window.dataLayer.push({event:"teaser_click",product:"mobilfunk:simonly"})})),this.updateSubmitLink())}initFilterSelectListeners(){if(this.filterListenersBound)return;const n=this.getElementById("c24mfso-data-volume-select"),e=this.getElementById("c24mfso-contract-duration-select");n&&e&&(n.addEventListener("change",(n=>{const e=n.target;this.patchFilterSelection(i.DataIncluded,e.value),this.updateFilterValueDisplay(e,"c24mfso-data-volume-value"),this.updateSubmitLink()})),e.addEventListener("change",(n=>{const e=n.target;this.patchFilterSelection(i.SelectContract,e.value),this.updateFilterValueDisplay(e,"c24mfso-contract-duration-value"),this.updateSubmitLink()})),this.filterListenersBound=!0)}initShortFilterTab(){const n=this.getElementById("c24mfso-short-filter-tab-inactive");n&&(n.href="https://handyvertrag.check24.de")}async loadAndRenderFilters(){this.filterData=await this.sliderService.loadFilterData(),this.renderFilterOptions(this.filterData),this.initFilterSelectListeners(),this.initSubmitLinkHandler()}updateSubmitLink(){const n=this.getElementById("c24mfso-submit-link"),e=this.getElementById("c24mfso-teaser-link");if(!n||!this.filterData)return;const t=this.getSubmitLink(this.filterData.filterSelection);n.href=t,e&&(e.href=t)}}const l='<html>\n    <head>\n        <style>__TEASER_CSS__</style>\n    </head>\n<body>\n        <div class="mfso-teaser" id="mfso-teaser-root">\n            <a id="c24mfso-teaser-link" class="mfso-click-overlay" href="#"></a>\n            <div class="mfso-container">\n                <div class="mfso-headline mfso-headline-large"><strong>Handytarife</strong><br>zu <strong>Top-Preisen</strong> vergleichen</div>\n                <div class="mfso-headline mfso-headline-small"><strong>Handytarife</strong> zu <strong>Top-Preisen</strong> vergleichen</div>\n\n                <div class="mfso-slider">\n                    <div class="c24-mf-so-short-filter-tabs">\n                        <div class="c24-mf-so-short-filter-tab c24-mf-so-short-filter-tab-active"><b>Handytarife</b>&nbsp;(SIM-Karte)</div>\n                        <a class="c24-mf-so-short-filter-tab c24-mf-so-short-filter-tab-inactive" id="c24mfso-short-filter-tab-inactive">Handy mit Vertrag</a>\n                    </div>\n\n                    <div class="c24-mf-so-short-filter">\n                        <div class="c24-mf-so-filter">\n                            <select class="c24-mf-so-filter-select" id="c24mfso-data-volume-select"></select>\n                            <div class="c24-mf-so-filter-title">\n                                Datenvolumen\n                                <span class="c24-mf-so-filter-value" id="c24mfso-data-volume-value">&nbsp;</span>\n                            </div>\n\n                            <div class="icon">\n                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="9" viewBox="0 0 16 9" fill="none">\n                                    <path d="M8.59212 8.59218L15.7561 1.42822C15.9134 1.27084 16 1.0606 16 0.836165C16 0.611731 15.9134 0.401553 15.7558 0.24392C15.5984 0.086723 15.3882 6.21954e-05 15.1639 6.21856e-05C14.9396 6.21758e-05 14.7293 0.0867234 14.5718 0.244045L8 6.81576L1.42816 0.24392C1.27078 0.0866601 1.06054 -6.53025e-07 0.836164 -6.62832e-07C0.611793 -6.7264e-07 0.401678 0.0865982 0.24392 0.244107C0.0866604 0.401491 -2.67396e-08 0.61173 -3.65472e-08 0.836102C-4.63548e-08 1.06047 0.0866613 1.27071 0.244045 1.42822L7.40807 8.59224C7.56545 8.74944 7.77569 8.83604 7.99994 8.83604C8.22419 8.83604 8.43442 8.74944 8.59206 8.59206L8.59212 8.59218Z" fill="#949494"/>\n                                </svg>\n                            </div>\n                        </div>\n\n                        <div class="c24-mf-so-filter-separator"></div>\n                        <div class="c24-mf-so-filter">\n                            <select class="c24-mf-so-filter-select" id="c24mfso-contract-duration-select"></select>\n                            <div class="c24-mf-so-filter-title">\n                                Vertragslaufzeit\n                                <span class="c24-mf-so-filter-value" id="c24mfso-contract-duration-value">&nbsp;</span>\n                            </div>\n\n                            <div class="icon">\n                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="9" viewBox="0 0 16 9" fill="none">\n                                    <path d="M8.59212 8.59218L15.7561 1.42822C15.9134 1.27084 16 1.0606 16 0.836165C16 0.611731 15.9134 0.401553 15.7558 0.24392C15.5984 0.086723 15.3882 6.21954e-05 15.1639 6.21856e-05C14.9396 6.21758e-05 14.7293 0.0867234 14.5718 0.244045L8 6.81576L1.42816 0.24392C1.27078 0.0866601 1.06054 -6.53025e-07 0.836164 -6.62832e-07C0.611793 -6.7264e-07 0.401678 0.0865982 0.24392 0.244107C0.0866604 0.401491 -2.67396e-08 0.61173 -3.65472e-08 0.836102C-4.63548e-08 1.06047 0.0866613 1.27071 0.244045 1.42822L7.40807 8.59224C7.56545 8.74944 7.77569 8.83604 7.99994 8.83604C8.22419 8.83604 8.43442 8.74944 8.59206 8.59206L8.59212 8.59218Z" fill="#949494"/>\n                                </svg>\n                            </div>\n                        </div>\n\n                        <a id="c24mfso-submit-link" class="c24-mf-so-cta" href="#">vergleichen</a>\n                    </div>\n                </div>\n\n\n            </div>\n        </div>\n    </body>\n</html>\n'.replace("__TEASER_CSS__",":host {\n    display: block;\n    height: 360px;\n}\n\n@media (min-width: 961px) {\n    .mfso-teaser {\n        pointer-events: auto;\n        cursor: default;\n    }\n\n    .mfso-click-overlay {\n        display: none;\n    }\n\n    .mfso-headline-large {\n        display: block;\n    }\n\n    .mfso-headline-small {\n        display: none;\n    }\n\n    .mfso-headline {\n        font-size: 30px;\n        line-height: 40px;\n        text-align: center;\n        top: 40px;\n        left: 50%;\n        margin: 0;\n        transform: translate(-50%, 0%);\n    }\n\n    .mfso-image {\n        height: 80%;\n        transform: translate(20%, 0);\n    }\n\n    .mfso-slider {\n        display: block;\n    }\n}\n\n@media (max-width: 960px) {\n    .mfso-teaser {\n        cursor: pointer;\n    }\n\n    .mfso-click-overlay {\n        display: block;\n    }\n\n    .mfso-headline-large {\n        display: none;\n    }\n\n    .mfso-headline-small {\n        display: block;\n    }\n\n    .mfso-headline {\n        font-size: 30px;\n        line-height: 40px;\n        text-align: left;\n        top: 40px;\n        left: 80px;\n        margin: 0;\n        max-width: 300px;\n    }\n\n    .mfso-image {\n        height: 80%;\n        transform: translate(10%, 0);\n    }\n\n    .mfso-slider {\n        display: none;\n    }\n}\n\n@media (max-width: 768px) {\n    :host {\n        height: 230px;\n    }\n\n    .mfso-click-overlay {\n        display: block;\n    }\n\n    .mfso-headline-large {\n        display: none;\n    }\n\n    .mfso-headline-small {\n        display: block;\n    }\n\n    .mfso-headline {\n        font-size: 20px;\n        line-height: 25px;\n        text-align: left;\n        top: 35px;\n        left: 30px;\n        margin: 0;\n        max-width: 170px;\n    }\n\n    .mfso-image {\n        height: 62%;\n        transform: translate(27%, 0);\n        margin-left: auto;\n        margin-right: auto;\n    }\n\n    .mfso-slider {\n        display: none;\n    }\n}\n\n.mfso-teaser {\n    position: relative;\n    display: block;\n    color: inherit;\n    text-decoration: none;\n    height: 100%;\n    user-select: none;\n    -webkit-user-select: none;\n}\n\n.mfso-click-overlay {\n    cursor: pointer;\n    position: absolute;\n    inset: 0;\n    z-index: 2;\n    text-decoration: none;\n}\n\n.mfso-container {\n    max-width: 1280px;\n    height: 100%;\n    margin-left: auto;\n    margin-right: auto;\n    display: flex;\n    justify-content: flex-end;\n    align-items: flex-end;\n}\n\n.mfso-headline {\n    color: #fff;\n    position: absolute;\n}\n\n.mfso-slider {\n    position: absolute;\n    bottom: 60px;\n    left: 50%;\n    width: 793px;\n    transform: translate(-50%, 0%);\n}\n\n/* old styling from the slider */\n\n.c24-mf-so-filter,\n.c24-mf-so-cta {\n    flex-shrink: 0;\n    height: 100%;\n}\n\n.c24-mf-so-filter {\n    border-radius: 32px;\n    flex-grow: 1;\n    width: 240px;\n    max-width: 240px;\n}\n\n.c24-mf-so-cta {\n    width: 200px;\n}\n\n.c24-mf-so-short-filter-tabs {\n    display: flex;\n    height: 25px;\n    margin-bottom: 10px;\n    margin-left: 20px;\n}\n\n.c24-mf-so-short-filter-tab {\n    cursor: default;\n    box-sizing: border-box;\n    position: relative;\n    width: 200px;\n    min-width: 200px;\n    height: 25px;\n    padding: 3px 8px;\n    border: 1px solid white;\n    border-radius: 14px;\n    background-color: rgba(255, 255, 255, 0.15);\n    background-size: cover;\n    font-family: Verdana;\n    font-size: 14px;\n    white-space: nowrap;\n    color: white;\n    text-decoration: none;\n    text-decoration-line: none;\n}\n\n.c24-mf-so-short-filter-tab.c24-mf-so-short-filter-tab-inactive {\n    margin-left: 8px;\n    border-color: rgba(255, 255, 255, 0.2);\n    cursor: pointer;\n    width: 148px;\n    min-width: 148px;\n}\n\n.c24-mf-so-short-filter-tab.c24-mf-so-short-filter-tab-inactive:hover {\n    border: 1px solid white;\n}\n\n.c24-mf-so-short-filter {\n    height: 64px;\n    position: relative;\n    display: flex;\n    align-items: center;\n    flex: 0 0 auto;\n    width: 100%;\n    box-sizing: border-box;\n    justify-content: space-between;\n    flex-shrink: 0;\n    background-color: #ffffff;\n    border: 3px solid #ffbb1c;\n    padding: 8px 5px 8px 30px;\n    border-radius: 32px;\n}\n\n.c24-mf-so-slider {\n    line-height: 1.2;\n    font-family: Verdana, Arial, Helvetica, sans-serif;\n    font-weight: 400;\n    position: relative;\n    box-sizing: border-box;\n    max-width: 793px;\n    min-width: 793px;\n    height: 115px;\n    margin: 0 auto;\n}\n\n.c24-mf-so-filter {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    position: relative;\n    justify-content: space-between;\n    cursor: pointer;\n}\n\n.c24-mf-so-filter-title {\n    display: flex;\n    flex-direction: column;\n    gap: 7px;\n    font-size: 14px;\n    font-weight: normal;\n    color: #666666;\n    pointer-events: none;\n    box-sizing: border-box;\n    height: 100%;\n    width: 100%;\n}\n\n.icon {\n    display: flex;\n    align-items: center;\n    pointer-events: none;\n    width: 16px;\n    height: 16px;\n}\n\n.c24-mf-so-filter-select {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    cursor: pointer;\n    outline: none;\n    border: none;\n    -webkit-tap-highlight-color: transparent;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    background: none;\n    box-sizing: border-box;\n    padding: 0;\n    margin: 0;\n    font-size: 16px;\n    font-weight: normal;\n    color: transparent;\n    opacity: 0;\n    z-index: 1;\n}\n\n.c24-mf-so-filter-select::-ms-expand {\n    display: none;\n}\n\n.c24-mf-so-filter-select > option {\n    color: #181818;\n}\n\n.c24-mf-so-filter-value {\n    font-size: 15px;\n    color: #181818;\n    margin: 0;\n}\n\n.c24-mf-so-cta {\n    border: 0;\n    margin: 0;\n    text-decoration: none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 10px;\n    box-sizing: border-box;\n    font-weight: 400;\n    font-size: 16px;\n    border-radius: 90px;\n    font-family: verdana, arial, helvetica, sans-serif;\n    background-color: #0563c1;\n    color: white;\n    height: 48px;\n    cursor: pointer;\n}\n\n.c24-mf-so-cta:hover {\n    background-color: #064e9c;\n    text-decoration: none;\n    color: white;\n}\n\n.c24-mf-so-filter-separator {\n    background-color: #949494;\n    height: 40px;\n    width: 1px;\n}\n");class r extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){if(!this.shadowRoot)return;var n=null;"true"===this.getAttribute("data-is-preview")&&window&&(n=window.location.host),this.shadowRoot.innerHTML=l,this.controller=new a(this.shadowRoot,n),this.controller.init(),this.setupResponsiveBackground()}updateBackground(n){var e;const t=null!==(e=this.getAttribute("product-slug"))&&void 0!==e?e:"mobileservice_simonly";this.dispatchEvent(new CustomEvent("c24-background-update",{bubbles:!0,detail:{productSlug:t,styles:{mobile:{backgroundPosition:"center top",backgroundSize:"auto 480px"},"desktop-small":{backgroundPosition:"calc(50% - 300px) top",backgroundSize:"cover"},desktop:{backgroundPosition:"calc(50% - 130px) top",backgroundSize:"cover"},"desktop-too-large":{backgroundPosition:"calc(50% - 130px) center",backgroundSize:"130%"}}[n]}}))}setupResponsiveBackground(){if(!window)return;const n=window.matchMedia("(max-width: 768px)"),e=window.matchMedia("(max-width: 960px)"),t=window.matchMedia("(min-width: 1921px)"),i=()=>n.matches?"mobile":e.matches?"desktop-small":t.matches?"desktop-too-large":"desktop";let o=i();this.updateBackground(o);const s=()=>{const n=i();o=n,this.updateBackground(o)};n.addEventListener("change",s),e.addEventListener("change",s),n.addEventListener("change",s),t.addEventListener("change",s),s(),setTimeout((()=>{requestAnimationFrame((()=>{s()}))}),20)}disconnectedCallback(){var n;null===(n=this.controller)||void 0===n||n.destroy()}}const c=r;var d=e.t,f=e.A;export{d as MobilfunkSimOnlyTeaser,f as default};
//# sourceMappingURL=teaser_mobileservice_simonly.client.mjs.map