const e="teaser-rentalcar-styles",n='\n    .holding-teaser-wrapper {\n        position: relative;\n        height: 360px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 40px 20px;\n        box-sizing: border-box;\n    }\n    \n    .rentalcar-teaser-headline {\n        color: #ffffff;\n        font-size: 20px;\n        line-height: 24px;\n        margin-top: 30px;\n        height: 100%;\n        text-align: center;\n    }\n    .device-desktop .rentalcar-teaser-headline, .device-fluid .rentalcar-teaser-headline {\n        font-size: 30px;\n        line-height: 40px;\n        margin-top: 50px;\n    }\n    \n    .holding-teaser-background {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background: transparent;\n        z-index: 1;\n    }\n    \n    .teaser-form {\n        position: absolute;\n        bottom: 60px;\n        z-index: 2;\n        width: 100%;\n        max-width: 928px;\n        padding: 16px 16px 0px 16px;\n    }\n    \n    .teaser-destinations {\n        display: flex;\n        gap: 24px;\n        margin-bottom: 8px;\n        align-items: center;\n        margin-left: 6px;\n        padding-right: 30px;\n    }\n    \n    .teaser-radio-label {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        cursor: pointer;\n        font-size: 14px;\n        color: #ffffff;\n        font-weight: 400;\n        position: relative;\n        font-family: Verdana, sans-serif;\n        line-height: 1;\n    }\n    \n    .teaser-radio {\n        appearance: none;\n        -webkit-appearance: none;\n        -moz-appearance: none;\n        width: 20px;\n        height: 20px;\n        cursor: pointer;\n        margin: 0;\n        position: relative;\n        background: #ffffff;\n        border: 1px solid #cccccc;\n        border-radius: 50%;\n        outline: none;\n        transition: border-color 0.2s;\n    }\n    \n    .teaser-radio:hover {\n        border-color: #0066cc;\n    }\n    \n    .teaser-radio:checked {\n        border-color: #0066cc;\n        background: #ffffff;\n    }\n    \n    .teaser-radio:checked::after {\n        content: \'\';\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: 10px;\n        height: 10px;\n        background: #0066cc;\n        border-radius: 50%;\n    }\n    \n    .teaser-form-row {\n        border-radius: calc(infinity * 1px);\n        border: 3px solid #ffbb1c;\n        display: flex;\n        align-items: center;\n        gap: 4px;\n        height: 64px;\n        padding: 0 5px;\n        box-sizing: border-box;\n        background-color: #ffffff;\n    }\n    \n    .teaser-field-autocompleter {\n        flex: 1;\n        min-width: 25%;\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        font-family: Verdana, sans-serif;\n        justify-content: center;\n        align-self: center;\n    }\n\n    .teaser-field-autocompleter-skeleton {\n        padding: 0 12px;\n        border-right: 1px solid #e0e0e0;\n    }\n\n    .teaser-field-dropoff {\n        flex-direction: row;\n    }\n    \n    .teaser-form-footer {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding-top: 12px;\n        margin-top: 12px;\n    }\n    \n    .teaser-checkbox-label {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        cursor: pointer;\n        font-size: 14px;\n        color: #333333;\n    }\n    \n    .teaser-checkbox {\n        width: 18px;\n        height: 18px;\n        cursor: pointer;\n    }\n    \n    .teaser-cancellation-info {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        font-size: 14px;\n        color: #10b981;\n        font-weight: 500;\n    }\n    \n    .teaser-form-field {\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        padding: 0 12px;                  \n        border-right: 1px solid #e0e0e0;\n        font-family: Verdana, sans-serif;\n        justify-content: center;\n        align-self: center;\n    }\n    \n    .teaser-field-label {\n        font-size: 14px;\n        color: #666666;\n        margin-bottom: 4px;\n        display: block;\n        line-height: 1;\n    }\n    \n    .teaser-field-input-wrapper {\n        position: relative;\n        width: 100%;\n    }\n    \n    .teaser-field-input,\n    .teaser-field-select {\n        width: fit-content;\n        border: none;\n        outline: none;\n        background: transparent;\n        font-size: 16px;\n        color: #181818;\n        padding: 4px 0;\n        cursor: pointer;\n        line-height: 1.2;\n        font-family: Verdana, sans-serif;\n    }\n\n    .teaser-field-select {\n        max-width: 100%;\n    }\n    \n    .teaser-field-input::placeholder {\n        color: #999999;\n    }\n    \n    .teaser-field-select {\n        appearance: none;\n        background-image: url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 7"><polygon fill="%23333" points="6.95 4.99 1.12 0 0 0.98 6.95 6.86 14 0.98 12.88 0 6.95 4.99"/></svg>\');\n        background-repeat: no-repeat;\n        background-size: 14px 7px;\n        background-position: right center;\n        padding-right: 24px;\n        font-family: Verdana, sans-serif;\n    }\n    \n    .teaser-field-select option {\n        font-family: Verdana, sans-serif;\n    }\n    \n    .teaser-field-select-static {\n        pointer-events: none;\n        cursor: default;\n    }\n    \n    .teaser-field-skeleton {\n        width: 100%;\n        padding: 4px 0;\n    }\n    \n    .teaser-skeleton {\n        height: 16px;\n        border-radius: 4px;\n        background-size: 300% 100%;\n        background-position: 100% 0;\n        background-image: linear-gradient(\n            90deg,\n            rgba(239, 239, 244, 0.7) 0%,\n            rgba(239, 239, 244, 0.7) 40%,\n            rgba(239, 239, 244, 0.4) 50%,\n            rgba(239, 239, 244, 0.7) 60%,\n            rgba(239, 239, 244, 0.7) 100%\n        );\n        animation: dummy-progress 1.5s infinite linear;\n    }\n    \n    @keyframes dummy-progress {\n        0% { background-position: 100% 0; }\n        100% { background-position: 0 0; }\n    }\n    \n    .teaser-daterange-display {\n        font-size: 16px;\n        color: #181818;\n        cursor: pointer;\n        margin: 4px 0;\n        line-height: 1.2;\n    }\n    \n    .teaser-form-section-times {\n        display: flex;\n        gap: 4px;\n    }\n    \n    .teaser-field-daterange {\n        max-width: 155px;\n        min-width: fit-content;\n    }\n    \n    .teaser-field-time {\n        flex: 1;\n        min-width: 80px;\n    }\n    \n    .teaser-field-age {\n        min-width: 80px;\n        border-right: none;\n    }\n    \n    .teaser-submit-button {\n        background: #0066cc;\n        color: #ffffff;\n        border: none;\n        border-radius: 50px;\n        padding: 13px 32px;\n        font-size: 16px;\n        font-family: Verdana, sans-serif;\n        line-height: 1.2;\n        cursor: pointer;\n        transition: background-color 0.2s;\n        white-space: nowrap;\n        height: 48px;\n        flex-shrink: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n    \n    .teaser-submit-button:hover {\n        background: #0052a3;\n    }\n  \n    .teaser-submit-button:disabled {\n        cursor: not-allowed;\n        opacity: 0.8;\n    }\n\n    .teaser-submit-wrapper {\n        display: contents;\n    }\n    \n    .teaser-button-spinner {\n        width: 20px;\n        height: 20px;\n        border: 2px solid rgba(255, 255, 255, 0.3);\n        border-top-color: #ffffff;\n        border-radius: 50%;\n        animation: teaser-spin 0.8s linear infinite;\n        margin-left: 5px;\n    }\n            \n    @keyframes teaser-spin {\n        to {\n            transform: rotate(360deg);\n        }\n    }\n\n    body.device-mobile .holding-teaser-wrapper {\n        height: 230px;\n    }\n';class t extends HTMLElement{constructor(){super(),this.deviceOutput="desktop",this.language="de-DE",this.platform="web",this.hostname="mietwagen.check24.de",this.isReactBundleLoaded=!1,this.isCurrentlyMobile=!1,this.bodyClassObserver=null,this.responsiveDebounceTimer=null}static get observedAttributes(){return["device-output","language","platform","user","data-hostname"]}attributeChangedCallback(e,n,t){if(n!==t){if("data-hostname"===e&&t&&(this.hostname=t),"undefined"!=typeof C24Home&&C24Home.validateAttributes){const e=C24Home.validateAttributes(this.attributes);this.deviceOutput=e.deviceOutput,this.language=e.language,this.platform=e.platform,this.user=e.user}this.render()}}connectedCallback(){const e=this.getAttribute("data-hostname");if(e&&(this.hostname=e),"undefined"!=typeof C24Home&&C24Home.validateAttributes){const e=C24Home.validateAttributes(this.attributes);this.deviceOutput=e.deviceOutput,this.language=e.language,this.platform=e.platform,this.user=e.user}this.applyStyles(),this.render(),this.setupResponsiveListener(),"complete"===document.readyState?this.loadInteractiveComponents():window.addEventListener("load",()=>{this.loadInteractiveComponents()}),"function"==typeof this.onRender&&this.onRender()}disconnectedCallback(){this.bodyClassObserver&&this.bodyClassObserver.disconnect(),this.responsiveDebounceTimer&&clearTimeout(this.responsiveDebounceTimer)}applyStyles(){if(!document.getElementById(e)){const t=document.createElement("style");t.id=e,t.textContent=n,document.head.appendChild(t),"function"==typeof this.onStyleLoaded&&this.onStyleLoaded(n)}}render(){if(this.isFluidOrMobile())return this.innerHTML=this.getWrapperWithBackgroundRedirect(),void(this.isCurrentlyMobile=!0);this.isCurrentlyMobile=!1,this.innerHTML=this.getWrapperWithBackground(),this.isReactBundleLoaded&&this.remountInteractiveComponents()}isFluidOrMobile(){return document.body.classList.contains("device-fluid")||document.body.classList.contains("device-mobile")||"mobile"===this.deviceOutput}getWrapperWithBackgroundRedirect(){return`\n            <div class="holding-teaser-wrapper">\n                <a class="holding-teaser-background" href="https://${this.hostname}"></a>\n                <div class="rentalcar-teaser-headline"><strong>Mietwagen buchen</strong> mit <br>Bestpreis-Garantie</div>\n            </div>\n        `}getWrapperWithBackground(){return`\n            <div class="holding-teaser-wrapper">\n            <div class="holding-teaser-background"></div>\n            <div class="rentalcar-teaser-headline"><strong>Mietwagen buchen</strong> mit <br>Bestpreis-Garantie</div>\n                ${this.getStaticSearchForm()}\n            </div>\n        `}getPickupField(){return'\n            <div class="teaser-field-autocompleter teaser-field-autocompleter-skeleton" id="teaser-portal-autocompleter">\n                <label for="pickup-input" class="teaser-field-label">Abholort</label>\n                <div class="teaser-field-input-wrapper">\n                    <input \n                        type="text" \n                        id="pickup-input"\n                        placeholder="Stadt oder Flughafen" \n                        class="teaser-field-input"\n                        aria-label="Stadt oder Flughafen"\n                        role="combobox"\n                        aria-expanded="false"\n                        aria-autocomplete="list"\n                    />\n                </div>\n            </div>\n        '}getDestinationRadios(){return'\n            <div class="teaser-destinations" id="teaser-portal-destination-radios">\n                <label class="teaser-radio-label">\n                    <input type="radio" name="return-location" value="same" class="teaser-radio" checked />\n                    <span>Rückgabe am selben Ort</span>\n                </label>\n                <label class="teaser-radio-label">\n                    <input type="radio" name="return-location" value="different" class="teaser-radio" />\n                    <span>Rückgabe an anderem Ort</span>\n                </label>\n            </div>\n        '}getTimeField(e,n){return`\n            <div class="teaser-form-field teaser-field-time" id="${e}">\n                <label for="${e}" class="teaser-field-label">${n}</label>\n                <div class="teaser-field-skeleton">\n                    <div class="teaser-skeleton"></div>\n                </div>\n            </div>\n        `}getDateRangeSection(){return`\n            <div class="teaser-form-field teaser-field-daterange" id="teaser-portal-datepicker">\n                <label for="daterange-input" class="teaser-field-label">Anmietzeitraum</label>\n                <div class="teaser-field-input-wrapper teaser-field-skeleton">\n                    <div class="teaser-skeleton"></div>\n                </div>\n            </div>\n            <div class="teaser-form-section-times">\n                ${this.getTimeField("teaser-portal-timepicker-pickup-time","Abholung")}\n                ${this.getTimeField("teaser-portal-timepicker-dropoff-time","Rückgabe")}\n            </div>\n        `}getDriverAgeField(){return'\n            <div class="teaser-form-field teaser-field-age" id="teaser-portal-driverage">\n                <label for="driver-age" class="teaser-field-label">Fahreralter</label>\n                <div class="teaser-field-skeleton">\n                    <div class="teaser-skeleton"></div>\n                </div>\n            </div>\n        '}getSubmitButton(){return'\n            <div class="teaser-submit-wrapper" id="teaser-portal-submit-button">\n                <button type="submit" class="teaser-submit-button teaser-submit-button-skeleton">\n                    <span>Suche</span>\n                </button>\n            </div>\n        '}getStaticSearchForm(){return`\n            <form class="teaser-form">\n                ${this.getDestinationRadios()}\n                <div class="teaser-form-row">\n                    ${this.getPickupField()}\n                    ${this.getDateRangeSection()}\n                    ${this.getDriverAgeField()}\n                    ${this.getSubmitButton()}\n                </div>\n                <div id="teaser-react-root" style="display: none;"></div>\n            </form>\n        `}loadInteractiveComponents(){return e=this,n=null,t=function*(){if(!this.isFluidOrMobile()&&!this.isReactBundleLoaded)try{const e=`https://${this.hostname}/holding-teaser/api/assets`,n=yield fetch(e);if(!n.ok)throw new Error(`Failed to fetch assets: ${n.status}`);const t=yield n.json();if(!t.success||!t.assets)throw new Error("Invalid API response");const{main:i}=t.assets;if(!i)throw new Error("Main bundle URL not found in API response");yield this.loadMainBundle(i)}catch(e){console.error("Holding Teaser: Failed to load interactive components",e)}},new Promise((i,r)=>{var a=e=>{try{o(t.next(e))}catch(n){r(n)}},s=e=>{try{o(t.throw(e))}catch(n){r(n)}},o=e=>e.done?i(e.value):Promise.resolve(e.value).then(a,s);o((t=t.apply(e,n)).next())});var e,n,t}remountInteractiveComponents(){var e;(null==(e=window.HoldingTeaserInteractive)?void 0:e.initializeInteractiveComponents)&&setTimeout(()=>{var e,n;null==(n=null==(e=window.HoldingTeaserInteractive)?void 0:e.initializeInteractiveComponents)||n.call(e)},0)}loadMainBundle(e){return this.loadScript(e).then(()=>{this.isReactBundleLoaded=!0})}loadScript(e){return new Promise((n,t)=>{const i=document.createElement("script");i.src=e,i.async=!0,i.onload=()=>n(),i.onerror=()=>t(new Error(`Failed to load script: ${e}`)),document.head.appendChild(i)})}setupResponsiveListener(){let e=0;const n=()=>{const n=Date.now();n-e<100||(e=n,this.render())};this.bodyClassObserver=new MutationObserver(e=>{e.forEach(e=>{if("class"===e.attributeName){const e=this.isFluidOrMobile();if(e)return void n();e!==this.isCurrentlyMobile&&(this.responsiveDebounceTimer&&clearTimeout(this.responsiveDebounceTimer),this.responsiveDebounceTimer=setTimeout(()=>{this.loadInteractiveComponents().then(()=>{this.render()})},150))}})}),this.bodyClassObserver.observe(document.body,{attributes:!0,attributeFilter:["class"]})}}export{t as default};
//# sourceMappingURL=teaser-rentalcar.client.mjs.map