https://www.eu-gleichbehandlungsstelle.de/_assets/9da1c2a6d746389c…/current/public/chunks/map-D_mYjmq3.js

1import{g as t,_ as e,b as i,A as o,e as n}from"./pp-accordion-CA6w9In6.js";import"./interactive-map-CRz4alwt.js";import{B as a}from"./pp-facet-dropdown-FY1eeaHH.js";import{a as s,H as r}from"./pp-highcharts-D5Crk9o0.js";import"./pp-social-media-newsroom-XnZulFRf.js";import"./bootstrap-collapse-tT-5TXrK.js";import"./pp-slider-BLQQXShl.js";import"./pp-process-CNG5NvVa.js";const l=[50,50],p=[25,50],c="map-tooltip";class u extends a{static get properties(){return{loading:{reflect:!0,attribute:!1},zoom:{type:Number},minZoom:{type:Number},maxZoom:{type:Number},duration:{type:Number},lat:{type:Number},long:{type:Number},namespace:{type:String},mapTileUrl:{type:String,attribute:"map-tile-url"},searchEndpoint:{type:String,attribute:"search-endpoint"},searchData:{type:Object,attribute:"search-data"},tileSize:{type:Number,attribute:"tile-size"},zoomOffset:{type:Number,attribute:"zoom-offset"},gestureHandling:{type:Boolean,attribute:"gesture-handling"},textTouch:{type:String,attribute:"text-touch"},textScroll:{type:String,attribute:"text-scroll"},textScrollMac:{type:String,attribute:"text-scroll-mac"},textClosePopup:{type:String,attribute:"text-close-popup"},textZoomIn:{type:String,attribute:"text-zoom-in"},textZoomOut:{type:String,attribute:"text-zoom-out"},textClusterLabel:{type:String,attribute:"text-cluster-label"},tooltipAjaxBasePath:{type:String,attribute:"tooltip-ajax-base-path"},tooltipSpinnerLabel:{type:String,attribute:"tooltip-spinner-label"},showTooltipSpinner:{attribute:!1}}}get config(){return{center:[this.lat,this.long],maxZoom:this.maxZoom,minZoom:this.minZoom,zoom:this.zoom,zoomControl:!1,gestureHandling:this.gestureHandling,gestureHandlingOptions:{text:{touch:this.textTouch,scroll:this.textScroll,scrollMac:this.textScrollMac},duration:this.duration}}}get mapStyle(){return{color:"var(--pp-map-color)",dashArray:"3",fillColor:"var(--pp-map-fill-color)",fillOpacity:.7,opacity:1,weight:2}}get tooltipConfig(){return{maxWidth:"auto",minWidth:500,maxHeight:600,closeButton:!1,autoPan:!1,keepInView:!0,className:"tooltip-wrapper",pane:"fixed"}}get markerClusterConfig(){return{showCoverageOnHover:!1,animateAddingMarkers:!0,iconCreateFunction:t=>this.createClusterIcon(t.getChildCount())}}createClusterIcon(t){return this.Leaflet.divIcon({className:"pp-map-marker-cluster text-text-2 focus-visible:text-status-bg-1 hover:text-status-bg-1",iconSize:l,iconAnchor:p,html:`\n                <span\n                    class="w-full h-full flex items-center justify-center"\n                    data-cluster-count="${t}"\n                    aria-hidden="true"\n                >\n                    <span class="absolute w-full h-full">\n                        <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="none">\n  <mask id="a" fill="currentColor">\n    <path d="M0 25C0 11.193 11.193 0 25 0s25 11.193 25 25-11.193 25-25 25S0 38.807 0 25"/>\n  </mask>\n  <path fill="currentColor" d="M0 25C0 11.193 11.193 0 25 0s25 11.193 25 25-11.193 25-25 25S0 38.807 0 25"/>\n  <path fill="var(--icon-1)" d="M25 50v-4C13.402 46 4 36.598 4 25h-8c0 16.016 12.984 29 29 29zm25-25h-4c0 11.598-9.402 21-21 21v8c16.016 0 29-12.984 29-29zM25 0v4c11.598 0 21 9.402 21 21h8C54 8.984 41.016-4 25-4zm0 0v-4C8.984-4-4 8.984-4 25h8C4 13.402 13.402 4 25 4z" mask="url(#a)"/>\n</svg>\n                    </span>\n                    <span class="relative font-sans text-text-1 text-22 font-bold z-10">\n                        ${t}\n                    </span>\n                </span>\n            `})}createIcon=(t,e)=>{const i=this.iconConfig.find(e=>t?.filteredBy?.includes(e.filteredBy));return i?this.Leaflet.divIcon({className:e?"custom-image-marker-active":"custom-image-marker",iconSize:l,iconAnchor:p,html:`<img role="button" alt="${t?.label}" src="${e?i.activeUrl:i.defaultUrl}">`}):this.Leaflet.divIcon({className:e?"location-marker-active text-status-bg-1":"location-marker text-text-2 hover:text-status-bg-1 focus-visible:text-status-bg-1",iconSize:l,iconAnchor:p,html:`<span aria-label="${t?.label}" role="button"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="none">

1\n  <path fill="currentColor" fill-rule="evenodd" d="M32.625 23.854c-.917 2.271-2.77 4.146-5.062 5.042-7.771 3.125-15.375-4.5-12.271-12.25a9.15 9.15 0 0 1 5.062-5.063c7.75-3.104 15.375 4.5 12.271 12.271M23.958 4.167C14.188 4.167 6.25 12 6.25 21.646c0 7.604 6.146 13.083 12.646 18.875 1.708 1.52 3.458 3.104 5.125 4.708 1.437-1.354 2.937-2.687 4.396-3.979 6.812-6.042 13.25-11.73 13.25-19.604 0-9.646-7.938-17.48-17.709-17.48" clip-rule="evenodd"/>\n  <path fill="var(--icon-1)" fill-rule="evenodd" d="M28.417 41.25c-1.459 1.292-2.959 2.625-4.396 3.98-1.667-1.605-3.417-3.188-5.125-4.71-6.5-5.79-12.646-11.27-12.646-18.874 0-9.646 7.938-17.48 17.708-17.48 9.771 0 17.709 7.834 17.709 17.48 0 7.875-6.438 13.562-13.25 19.604M2.083 21.646c0 12.27 11.875 19.229 20.021 27.562.521.542 1.209.792 1.896.792.667 0 1.354-.25 1.854-.75 8.146-8.02 19.98-15.354 19.98-27.604C45.833 9.729 36 0 23.957 0 11.896 0 2.083 9.73 2.083 21.646m18.271-10.063c7.75-3.104 15.375 4.5 12.271 12.271-.917 2.271-2.77 4.146-5.062 5.042-7.771 3.125-15.375-4.5-12.271-12.25a9.15 9.15 0 0 1 5.062-5.063" clip-rule="evenodd"/>\n</svg></span>`})};createDefaultIcon=t=>this.createIcon(t,!1);createActiveIcon=t=>this.createIcon(t,!0);get mapContainerId(){return`${this.namespace}_map-container`}Leaflet;map;markerCluster;currentMapFeatures;iconConfig=[];constructor(){super(),this.zoom=6,this.minZoom=4,this.maxZoom=18,this.duration=1500,this.lat=51,this.long=9,this.tileSize=512,this.zoomOffset=0,this.gestureHandling=!0,this.textTouch="Mit zwei Fingern die Karte verschieben",this.textScroll="Mit Strg + Mausrad zoomen",this.textScrollMac="Mit cmd (⌘) + Mausrad zoomen",this.textClosePopup="Popup schliessen",this.textZoomIn="Hineinzoomen",this.textZoomOut="Rauszoomen",this.textClusterLabel="gruppierte Elemente",this._children=t(this,["pp-headline","pp-map-copyright-link","pp-spinner"]),this.loading=!0,this.showTooltipSpinner=!0}async firstUpdated(){await this.initializeMap(),await this.loadMapFeatures(),window.addEventListener(s,t=>{t.detail?.type===c&&(this.showTooltipSpinner=!0)}),window.addEventListener(r,t=>{t.detail?.type===c&&(this.showTooltipSpinner=!1,this.map?._popup?._container?.querySelector("pp-spinner")?.remove())})}async loadMapFeatures(){let t=this.searchData;if(!t&&this.searchEndpoint)try{const e=await fetch(this.searchEndpoint);if(!e.ok)return void(this.loading=!1);t=await e.json()}catch(e){return void(this.loading=!1)}t?(this.currentMapFeatures=Array.isArray(t)?t:t?.results??[],this.addMarkers("search")):this.loading=!1}async initializeMap(){if(window.L&&window.L.version)this.Leaflet=window.L;else{const t=await e(()=>import("./leaflet-src-BS25Lg1B.js").then(t=>t.l),[],import.meta.url);this.Leaflet=t.default??t,window.L=this.Leaflet}window.L?.markerClusterGroup||await e(()=>import("./leaflet.markercluster-src-jQW0ycQC.js").then(t=>t.l),[],import.meta.url),await e(()=>import("./leaflet-gesture-handling.min-DulQ1P_O.js").then(t=>t.l),[],import.meta.url);const t=this.renderRoot.querySelector(`#${this.mapContainerId}`);this.map=this.Leaflet.map(t,this.config),this.map.on("zoomend",()=>{requestAnimationFrame(this.updateClusterAccessibility)}),this.Leaflet.tileLayer(this.mapTileUrl,{tileSize:this.tileSize,zoomOffset:this.zoomOffset,minZoom:1,crossOrigin:!0,attribution:this._children["pp-map-copyright-link"]?.outerHTML||""}).addTo(this.map),this.Leaflet.control.zoom({position:"bottomright",zoomInTitle:this.textZoomIn,zoomOutTitle:this.textZoomOut}).addTo(this.map),this.map.createPane("fixed",document.getElementById(this.mapContainerId))}addMarkers(t){this.markerCluster&&this.map.removeLayer(this.markerCluster),this.markerCluster=this.Leaflet.markerClusterGroup(this.markerClusterConfig);const e=this.currentMapFeatures.filter(t=>t.geometry?.coordinates?.length>0),i=this.Leaflet.geoJSON(e,{style:this.mapStyle,pointToLayer:(t,e)=>this.Leaflet.marker(e,{icon:this.createDefaultIcon(t)}),onEachFeature:this.onEachFeature});i.getLayers()?.length&&(this.markerCluster.addLayer(i),this.markerCluster.on("animationend",()=>{requestAnimationFrame(this.updateClusterAccessibility)}),this.map.addLayer(this.markerCluster),requestAnimationFrame(this.updateClusterA

1ccessibility),"search"===t&&this.map.fitBounds(this.markerCluster.getBounds())),this.loading=!1}onEachFeature=(t,e)=>{e.bindPopup(()=>this.setTooltipContent(t),this.tooltipConfig),e.on("popupopen",this.onPopupOpen),e.on("popupclose",this.onPopupClose)};onPopupClose=t=>{t?.popup?._container?.removeEventListener("focusout",this.onPopupFocusOut);const e=t?.popup?._contentNode;e&&(e.innerHTML=""),t?.popup?._source?._icon?.focus(),t?.popup?._source?._icon&&t.target.setIcon(this.createDefaultIcon(t?.target?.feature))};onPopupOpen=t=>{t.target.setIcon(this.createActiveIcon(t?.target?.feature)),window.dispatchEvent(new CustomEvent(s,{detail:{id:t?.target?.feature?.id,url:this.tooltipAjaxBasePath+t?.target?.feature?.id,type:c}})),t.popup._container.setAttribute("tabindex","-1"),t.popup._container.focus();const e=t.popup._container.querySelector(".js-tooltip-close");e?.addEventListener("click",()=>{this.map.closePopup()}),e?.addEventListener("keydown",t=>{"Tab"!==t.key||t.shiftKey||(t.preventDefault(),this.map.closePopup())}),this.onPopupFocusOut=e=>{!t.popup._container.contains(e.relatedTarget)&&this.map._container.contains(e.relatedTarget)&&this.map.closePopup()},t.popup._container.addEventListener("focusout",this.onPopupFocusOut)};updateClusterAccessibility=()=>{this.renderRoot.querySelectorAll(".pp-map-marker-cluster").forEach(t=>{const e=t.querySelector("[data-cluster-count]"),i=e?.dataset.clusterCount;i&&t.setAttribute("aria-label",`${i} ${this.textClusterLabel}`)})};get tooltipSpinner(){return`\n            <pp-spinner \n                data-slot="pp-spinner" \n                label="${this.tooltipSpinnerLabel}"\n            >\n            </pp-spinner>\n        `}get closeButton(){return`\n            <div class="flex justify-end mb-24 text-text-1">\n                <button role="button" class="js-tooltip-close" aria-label="${this.textClosePopup}">\n                    <pp-icon \n                        name="close" \n                        class="text-24"\n                        aria-hidden="true"\n                    ></pp-icon>\n                </button>\n            </div>\n        `}setTooltipContent({id:t}){return`\n            <div>\n                ${this.closeButton}\n                ${this.showTooltipSpinner?this.tooltipSpinner:""}\n                <div class="bg-module-bg-1">\n                    <pp-html \n                        ajax-url="${this.tooltipAjaxBasePath+t}" \n                        update-type="${c}"\n                    >\n                    </pp-html>\n                </div>\n            </div>\n        `}get headline(){return this._children["pp-headline"]?i`
2                <div class="qs-map__headline sr-only">
3                    ${this._children?.["pp-headline"]}
4                </div>
5            `:o}get spinnerClasses(){return{hidden:!this.loading}}render(){return i`
6            ${this.headline}
7            <div id="${this.mapContainerId}" class="js-map s-map qs-map h-[830px] w-full font-sans">
8                <div class="qs-map__spinner ${n(this.spinnerClasses)} flex items-center justify-center absolute inset-0 z-[500]">
9                    ${this._children?.["pp-spinner"]}
10                </div>
11            </div>
12        `}}customElements.define("pp-map",u);export{u as default};