1import{d as b}from"./GlobalStylesStore-CHYE5Nly.js";import{T as h,h as l}from"./TemplateElement-CdZ7OCoX.js";import{c,w as t,u as g}from"./directives-CgZXbjBP.js";import"./button.js-G88ZjxN3.js";import"./chip.js-Cds4co6g.js";import"./icon.js-CyOdugBa.js";import"./slider.js-BViohuQq.js";import{r as d}from"./images-xEniX0qD.js";import{M as u}from"./match-media-store-BsJ75F0v.js";import"./StyledElement-7gi18rn4.js";import"./swiper-element-bundle.min.js-CK8uiWEj.js";const x="mb-hero-slider{display:block;container-type:inline-size}mb-hero-slider mb-slider{overflow:clip}mb-hero-slider .label{position:absolute;box-shadow:0 0 8px #00000026}mb-hero-slider .label.left-label{left:16px;top:var(--distance)}mb-hero-slider .label.right-label{right:16px;top:var(--distance)}mb-hero-slider .label.top-label{top:16px;left:clamp(16px,var(--distance),calc(100% - 176px))}mb-hero-slider .label.bottom-label{bottom:16px;left:clamp(16px,var(--distance),calc(100% - 176px))}@container (min-width: 768px){mb-hero-slider .label.left-label{left:0;transform:translate(clamp(-75%,var(--shift),100%))}mb-hero-slider .label.right-label{right:0;transform:translate(clamp(-100%,var(--shift),var(--container-padding)))}mb-hero-slider .label.top-label{top:0;left:var(--distance);transform:translateY(clamp(-75%,var(--shift),75%))}mb-hero-slider .label.bottom-label{bottom:0;left:var(--distance);transform:translateY(clamp(-75%,var(--shift),75%))}}";function v(o){const e=[...o];for(let s=e.length-1;s>0;s--){const a=Math.floor(Math.random()*(s+1));[e[s],e[a]]=[e[a],e[s]]}return e}class f extends h{constructor(){super({styles:[x]})}properties(){return{backgroundColor:"",backgroundImage:void 0,autoplay:!1,autoplayDelay:5e3,randomize:!1,slides:[{chipText:"",chipVariant:"",kicker:"",headline:"",text:"",link:void 0,image:void 0,imageBadge:"",notification:void 0,salesElements:[]}],mdMediaQuery:new u("(min-width: 768px)")}}connected(){this.randomize&&Array.isArray(this.slides)&&this.slides.length>1&&(this.slides=v(this.slides))}template(){var a;const e={"bg-green-medium":this.backgroundColor==="green-medium","bg-green-dark":this.backgroundColor==="green-dark","bg-violet-medium":this.backgroundColor==="violet-medium","bg-violet-dark":this.backgroundColor==="violet-dark"},s={"bottom-112 md:bottom-0":this.slides.length>1,"bottom-56 md:bottom-0":this.slides.length<=1};return l` 2 <div class="container mt-fix-xl"> 3 <div class="text-white relative" data-surface="dark"> 4 <div 5 class="absolute inset-x-0 top-0 z-10 rounded-md md:rounded-lg overflow-hidden ${c(s)}" 6 > 7 <div class="absolute inset-0 ${c(e)}"></div> 8 ${t((a=this.backgroundImage)==null?void 0:a.srcset,d(this.backgroundImage,"absolute inset-0 w-full h-full object-cover object-left-top",!1,"high","(min-width: 1440px) 1360px, 100vw","eager"))} 9 </div> 10 <div class="relative py-24 md:py-64 md:pb-24 z-20"> 11 <mb-slider 12 class="block navigation-on-default ${t(this.mdMediaQuery.matches,"pagination-on-default")}" 13 pagination="true" 14 navigation="false" 15 slides-per-view="1" 16 space-between="64" 17 breakpoints="" 18 swiper-options="${JSON.stringify({autoplay:this.autoplay?{delay:this.autoplayDelay,pauseOnMouseEnter:!0}:!1})}" 19 > 20 ${this.slides.map((i,r)=>this._renderSlide(i,r))} 21 </mb-slider> 22 </div> 23 </div> 24 </div> 25 `}_renderSlide(e,s){var m,n,p;const a=e.imageBadge==="salesElements"&&((m=e.salesElements)==null?void 0:m.length)>0,i=!a&&(e.imageBadge==="notification"||!e.imageBadge&&!!((n=e.notification)!=null&&n.text)),r=e.link||{};return l` 26 <div slot="slide-${s}" class="h-full flex overflow-x-clip px-16 md:px-80"> 27 <div class="grid grid-cols-1 md:grid-cols-10 gap-24 md:gap-16 items-center"> 28 <div class="col-span-full md:col-span-6"> 29 ${t(e.chipText,l` 30 <mb-chip 31 variant="${e.chipVariant||"accent"}" 32 text="${e.chipText}" 33 class="mb-8" 34 ></mb-chip> 35 `)} 36 ${t(!e.chipText&&e.kicker,l`<div class="mb-8">${e.kicker}</div>`)} 37 <h1 class="mb-24 text-balance text-[32px] lg:text-[60px]">${e.headline}</h1> 38 ${t(e.text,l`<p class="mb-24">${e.text}</p>`)} 39 ${t(r.url,l` 40 <mb-button 41 href="${r.url}" 42 element="hero slider" 43 tracking-label="${r.trackingLabel||""}" 44 variant="primary" 45 > 46 ${r.text} 47 <mb-icon slot="suffix" name="navigation--chevron-right" class="size-12"></mb-icon> 48 </mb-button> 49 `)} 50 </div> 51 <div class="col-span-full md:col-span-4 relative pb-24 md:pb-0"> 52 ${t((p=e.image)==null?void 0:p.srcset,d(e.image,"rounded-sm w-full aspect-video md:aspect-[5/4] object-cover ml-auto",!1,s===0?"high":"auto","(min-width: 1440px) 480px, (min-width: 768px) 35vw, 100vw","eager"))} 53 ${t(i,this._renderNotification(e.notification))} 54 ${t(a,this._renderSalesElements(e.salesElements||[]))} 55 </div> 56 </div> 57 </div> 58 `}_renderNotification(e){var s,a,i,r;return l` 59 <div 60 class="absolute left-16 bottom-0 right-16 md:left-0 md:right-0 md:bottom-24 md:w-5/6 lg:w-2/3 bg-green-light25 text-green-medium p-fix-s flex gap-fix-s rounded-sm" 61 > 62 ${t(e==null?void 0:e.icon,l`<mb-icon name="${e==null?void 0:e.icon}" class="size-24 text-green-medium"></mb-icon>`)} 63 <div class="text-sm"> 64 <p class="mb-0">${e==null?void 0:e.text}</p> 65 ${t((s=e==null?void 0:e.link)==null?void 0:s.url,l` 66 <a 67 href="${(a=e==null?void 0:e.link)==null?void 0:a.url}" 68 class="underline" 69 element="hero slider" 70 tracking-label="${((i=e==null?void 0:e.link)==null?void 0:i.trackingLabel)||""}" 71 >${(r=e==null?void 0:e.link)==null?void 0:r.text}</a 72 > 73 `)} 74 </div> 75 </div> 76 `}
76_renderSalesElements(e){return l`${e.map((s,a)=>{var m;const i=!!((m=s.image)!=null&&m.srcset),r=!!s.icon;return l` 77 <div 78 class="label ${s.position}-label ${t(a>0,"hidden")} md:block bg-primary-subtle1 lg:px-fix-s px-fix-xs rounded-[var(--mdx-sys-border-radius-default)] max-w-[160px] ${t(i,"py-fix-2xs","py-fix-s")}" 79 style="--distance: ${s.distance}%; --shift: ${s.shift}%;" 80 > 81 ${t(i,d(s.image,"-mt-fix-m pb-fix-xs mx-auto",!1,"auto","130px","eager"))} 82 ${t(!i&&r,l` 83 <mb-icon 84 size="inherit" 85 name="${s.icon}" 86 class="h-32 size-32 object-cover mx-auto text-green-medium lg:py-fix-2xs py-fix-3xs lg:mb-fix-2xs mb-fix-3xs" 87 ></mb-icon> 88 `)} 89 <div 90 class="richtext md:text-center text-green-medium ${t(!i&&!r,"has-no-image")}" 91 > 92 ${g(s.title||"")} 93 </div> 94 </div> 95 `})}`}}b("mb-hero-slider",f);export{f as default}; 96//# sourceMappingURL=hero-slider.js-DQFIr2Qu.js.map
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.