https://www.eu-gleichbehandlungsstelle.de/_assets/9da1c2a6d746389c…/public/chunks/image-slider-CLSd-9Kr.js

1const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../swiper.css"])))=>i.map(i=>d[i]);
2import{B as t,d as i,g as e,_ as s,m as a,s as n,e as r,b as l,l as o}from"./pp-accordion-CA6w9In6.js";import{S as h}from"./pp-highcharts-D5Crk9o0.js";import"./pp-facet-dropdown-FY1eeaHH.js";class d extends t{static get properties(){return{a11yPrev:{type:String,attribute:"a11y-prev"},a11yNext:{type:String,attribute:"a11y-next"},showThumbnails:{type:Boolean,attribute:"show-thumbnails"},a11ySectionLabel:{type:String,attribute:"a11y-section-label"},pagination:{type:Boolean},background:{type:Boolean},a11ySlideLabel:{type:String,attribute:"a11y-slide-label"},utilityId:{type:String,attribute:!1}}}mySwiper;slidesCount=0;constructor(){super(),this.background=!1,this.pagination=!1,this.showThumbnails=!1,this.a11yNavLabel="Blättern",this.a11yPrev="Vorherige Slide",this.a11yNext="Nächste Slide",this.a11ySectionLabel="Bildergalerie",this.a11ySlideLabel="von",this.utilityId=i(),this._children=e(this,["html-collection","html-collection-thumbnail","pp-modal"]),this.slidesCount=this._children?.["html-collection"].children.length}async firstUpdated(){await s(()=>Promise.resolve({}),__vite__mapDeps([0]),import.meta.url);const{default:t}=await s(async()=>{const{default:t}=await import("./swiper-CnRdoJB7.js");return{default:t}},[],import.meta.url),{A11y:i}=await s(async()=>{const{A11y:t}=await import("./index-fkDSIl1D.js");return{A11y:t}},[],import.meta.url),{FreeMode:e}=await s(async()=>{const{FreeMode:t}=await import("./index-fkDSIl1D.js");return{FreeMode:t}},[],import.meta.url),{Keyboard:r}=await s(async()=>{const{Keyboard:t}=await import("./index-fkDSIl1D.js");return{Keyboard:t}},[],import.meta.url),{Navigation:l}=await s(async()=>{const{Navigation:t}=await import("./index-fkDSIl1D.js");return{Navigation:t}},[],import.meta.url),{Pagination:o}=await s(async()=>{const{Pagination:t}=await import("./index-fkDSIl1D.js");return{Pagination:t}},[],import.meta.url),{Thumbs:h}=await s(async()=>{const{Thumbs:t}=await import("./index-fkDSIl1D.js");return{Thumbs:t}},[],import.meta.url);this.showThumbnails&&(this.myThumbs=new t(this.renderRoot.querySelector(".js-gallery-thumbs"),{...this.constructThumbsConfig(),modules:[e]}),this.myThumbs.init()),this.mySwiper=new t(this.renderRoot.querySelector(`.js-gallery-top-${this.utilityId}`),{...this.swiperConfig,modules:[i,r,l,o,h]}),this.mySwiper.on("slideChangeTransitionEnd",()=>{a(this.mySwiper)}),this.mySwiper.on("slideChange",()=>{n(this.mySwiper)}),this.mySwiper.on("afterInit",()=>{a(this.mySwiper)}),this.mySwiper.init(),await this.updateComplete,a(this.mySwiper),this._observeLayout()}_observeLayout(){this._resizeObserver=new ResizeObserver(t=>{for(const i of t)i.contentRect.width>0&&(this.mySwiper.update(),a(this.mySwiper),this._resizeObserver.disconnect())}),this._resizeObserver.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver?.disconnect()}get swiperConfig(){const{a11ySlideLabel:t}=this;return{...h,init:!1,centeredSlides:!0,pagination:{el:`.swiper-pagination-${this.utilityId}`,type:"fraction",renderFraction:(i,e)=>`<span class="${i}"></span> <span class="sr-only">${t}</span><span aria-hidden="true">/</span> <span class="${e}"></span>`},navigation:{nextEl:`.js-gallery-button-next-${this.utilityId}`,prevEl:`.js-gallery-button-prev-${this.utilityId}`},a11y:{enabled:!0,prevSlideMessage:this.a11yPrev,nextSlideMessage:this.a11yNext,containerMessage:this.a11ySectionLabel,containerRoleDescriptionMessage:"Galerie",itemRoleDescriptionMessage:"Galerieeintrag",slideLabelMessage:`{{index}} ${this.a11ySlideLabel} {{slidesLength}}`},thumbs:{swiper:this.myThumbs}}}constructThumbsConfig(){return{spaceBetween:16,init:!1,slidesPerView:this.slidesCount<6?this.slidesCount:6,freeMode:!0,grabCursor:!0,threshold:15,watchOverflow:!0,updateOnWindowResize:!0,watchSlidesVisibility:!0,watchSlidesProgress:!0,breakpoints:{320:{slidesPerView:this.slidesCount<2?this.slidesCount:2},768:{slidesPerView:this.slidesCount<4?this.slidesCount:4},992:{slidesPerView:this.slidesCount<5?this.slidesCount:5},1200:{slidesPerView:this.slidesCount<6?this.slidesCount:6}}}}get containerClasses(){return{"bg-static-15":this.background}}get paginationClasses(){return{"text-static-2":!this.background,"text-static-22":this.background,[`swiper-pagination-${this.utilityId}`]:!0}}get navigationTmpl(){if(!this.pagination)return"";const t="mt-0 p-12 rounded-full transition-all delay-0 duration-200 ease-in fill-current text-center text-icon-1 border-2 border-icon-1 border-solid outline-icon-1 outline-2 outline-offset-2 focus:bg-button-interactive-bg-1 focus:outline focus:text-static-22 hover:bg-button-interactive-bg-1 hover:outline hover:text-static-22";return l`
3            <ul class="mb-40 flex justify-center items-center text-center">
4                <li>
5                    <button
6                        class="js-gallery-button-prev-${this.utilityId} ${t}"
7                        @click="${this._handleClickLeft}"
8                    >

9                        <span class="sr-only">${this.a11yPrev}</span>
10                        <pp-icon name="chevron-up" class="rotate-[270deg]"></pp-icon>
11                    </button>
12                </li>
13                <li class="relative bottom-0 left-0 w-auto inline-block mx-80 text-20 ${r(this.paginationClasses)}"></li>
14                <li>
15                    <button
16                        class="js-gallery-button-next-${this.utilityId} ${t}"
17                        @click="${this._handleClickRight}"
18                    >
19                        <span class="sr-only">${this.a11yNext}</span>
20                        <pp-icon name="chevron-up" class="rotate-90"></pp-icon>
21                    </button>
22                </li>
23            </ul>
24        `}get modalTmpl(){return this._children?.["pp-modal"]?l`
25            <div>
26                ${this._children?.["pp-modal"]}
27            </div>
28        `:null}get slideContainerTmpl(){return l`
29            <section class="swiper js-gallery-top-${this.utilityId} col-12 lg:col-10 mx-auto">
30                <ul class="swiper-wrapper justify-around">
31                    ${[...this._children?.["html-collection"].children].map(t=>l`
32                        <li class="swiper-slide h-auto">
33                            ${t}
34                        </li>
35                    `)}
36                </ul>
37            </section>
38            ${this.modalTmpl}
39        `}get slideThumbContainerTmpl(){return this.showThumbnails?l`
40            <div class="qs-thumbnail-slider s-cover relative mx-breakout w-screen" aria-hidden="true">
41                <div class="container">
42                    <div class="row">
43                        <div class="swiper js-gallery-thumbs gallery-thumbs col-12">
44                            <ul class="swiper-wrapper">
45                            ${[...this._children?.["html-collection-thumbnail"].children].map(t=>l`
46                                <li class="swiper-slide flex image-rendering-contrast">
47                                    <div class="min-w-140 mx-auto">${o(t)}</div>
48                                </li>
49                            `)}
50                            </ul>
51                        </div>
52                    </div>
53                </div>
54            </div>
55        `:""}render(){return l`
56            <div class="qs-image-slider s-cover relative mx-breakout w-screen mt-20 mb-64 px-0 ${r(this.containerClasses)}">
57                ${this.slideContainerTmpl}
58                ${this.navigationTmpl}
59                ${this.slideThumbContainerTmpl}
60            </div>
61        `}_handleClickRight(){this.showThumbnails&&(this.myThumbs.clickedIndex=this.myThumbs.activeIndex+1,this.myThumbs.slideToClickedSlide())}_handleClickLeft(){this.showThumbnails&&(this.myThumbs.clickedIndex=this.myThumbs.activeIndex-1,this.myThumbs.slideToClickedSlide())}}customElements.define("pp-image-slider",d);export{d as default};