1import{RespondToViewport,WithProfiler}from"@dna/mixins";import styles from"@dna/styles";import{LitElement,createRef,css,html,ref}from"@lit";if(!customElements.get("dna-store-map")){class DNAStoreMap extends WithProfiler(RespondToViewport(LitElement)){static properties={context:{type:String,attribute:"context"},current_location:{type:Object},locations:{type:Array},map:{type:Object},markers:{type:Array}};get mapId(){return this.context==="mobile"?"storeSearchMapMobile":"storeSearchMapDesktop"}constructor(){super(),this._setMobileBreakpoints(["mobile","tablet"]),this.mapRequested=!1,this.$map=createRef(),this.storePinIcon=this._createMapPin("store"),this.retailerPinIcon=this._createMapPin("retailer"),this.infoWindow=null,(async()=>{const{Map:GoogleMap,InfoWindow}=await google.maps.importLibrary("maps"),{AdvancedMarkerElement}=await google.maps.importLibrary("marker");this.googleAdvancedMarkerElement=AdvancedMarkerElement,this.googleMap=GoogleMap,this.googleInfoWindow=InfoWindow,this.dispatchEvent(new CustomEvent("dna:store-locator:map-library-ready",{bubbles:!0}))})()}connectedCallback(){super.connectedCallback(),this.currentLocation=!1,this.locations=[],this.markers=[],document.addEventListener("dna:store-locator:list-update",this._setLocations),this.isMobile&&document.addEventListener("dna:store-locator:list-view-toggled",this._showMapView)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("dna:store-locator:list-update",this._setLocations),document.removeEventListener("dna:store-locator:list-view-toggled",this._showMapView)}_setLocations=event=>{this.currentLocation=event.detail.current_location||!1,this.locations=event.detail.stores||[],this.locations.length?(this._renderMap(),this.isMobile||this.classList.add("active")):this.classList.remove("active")};_showMapView=event=>{event.detail.view_type==="map"?(this.classList.add("active"),setTimeout(()=>{this.map.fitBounds(this.mapBounds)},250)):this.classList.remove("active")};_createMapPin(type){const parser=new DOMParser;let pinSvgString="";return type==="store"&&(pinSvgString=` 2 <svg width="35" height="49" viewBox="0 0 35 49" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.8 0.574844C8.41456 0.574844 0.799973 7.65866 0.799973 16.3833C0.799973 31.4395 17.8 48.5748 17.8 48.5748C17.8 48.5748 34.8 31.4395 34.8 16.3833C34.8 7.65866 27.1854 0.574844 17.8 0.574844Z" fill="#092DC5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M27.2711 16.8905V10.0034L26.0616 10.0952C24.1349 10.226 22.2369 10.6342 20.4258 11.3074C19.5018 11.6547 18.6186 12.1027 17.792 12.6434C16.9679 12.1039 16.0878 11.656 15.1673 11.3074C13.358 10.638 11.4624 10.2329 9.53839 10.1044L8.32893 10.0126V16.8997C8.22148 22.8317 11.436 27.4231 17.3805 29.829L17.8057 30.0034L18.2287 29.829C24.1639 27.4139 27.3786 22.8225 27.2711 16.8905ZM17.7989 15.6738C18.4985 16.4566 18.942 17.1522 18.942 18.3368C18.942 19.3974 18.3476 19.8818 17.7989 19.884C17.2501 19.8863 16.6557 19.3974 16.6557 18.3368C16.6465 17.1545 17.0969 16.4658 17.7989 15.6738ZM17.7977 27.5466L17.7989 27.5471H17.7966L17.7977 27.5466ZM10.5718 16.9318C10.4826 21.7202 13.0475 25.4803 17.7977 27.5466C22.5456 25.4757 25.1059 21.7202 25.0191 16.9318V16.7665V12.5149C23.6587 12.7353 21.4044 13.2335 19.5753 14.2803C20.643 15.5131 21.194 16.6976 21.194 18.3368C21.194 20.8046 19.4473 22.1453 17.8011 22.1453H17.7897C16.1436 22.1384 14.3968 20.8046 14.3968 18.3368C14.3968 16.6953 14.9501 15.5085 16.0201 14.2757C14.191 13.2288 11.9322 12.7422 10.5718 12.5126V16.7665V16.9318Z" fill="white"/></svg> 3 `),type==="retailer"&&(pinSvgString=` 4 <svg width="28" height="40" viewBox="0 0 28 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 0.00341797C6.27083 0.00341797 0 5.9066 0 13.1771C0 25.7239 14 40.0034 14 40.0034C14 40.0034 28 25.7239 28 13.1771C28 5.9066 21.7292 0.00341797 14 0.00341797Z" fill="#03143B"/><path d="M14 0.00341797C6.27083 0.00341797 0 5.9066 0 13.1771C0 25.7239 14 40.0034 14 40.0034C14 40.0034 28 25.7239 28 13.1771C28 5.9066 21.7292 0.00341797 14 0.00341797Z" fill="black" fill-opacity="0.2"/><ellipse cx="14" cy="15.1385" rx="4.30769" ry="4.32432" fill="white"/></svg> 5 `),parser.parseFromString(pinSvgString,"image/svg+xml").documentElement}_createMap(){if(!this.map){const map=new this.googleMap(this.$map.value,{minZoom:8,maxZoom:13,mapId:this.mapId,mapTypeId:"roadmap",disableDefaultUI:!0});this.map=map}for(const marker of this.markers)marker.setMap(null),marker.removeEventListener("click",marker._handleMarkerClick);this.markers=[];const storeInfoWindow=document.createElement("div"),storeInfoComponent=document.createElement("dna-store-list");storeInfoComponent.hasLocation=!1,storeInfoComponent.isInfoWindow=!0,storeInfoWindow.appendChild(storeInfoComponent);const closeButton=document.createElement("div");closeButton.classList.add("store__info-window-close"),closeButton.textContent="\u2715",storeInfoWindow.appendChild(closeButton);const infoWindow=new google.maps.InfoWindow({content:storeInfoWindow,headerDisabled:!0,maxWidth:343,minWidth:343});closeButton.addEventListener("click",()=>{infoWindow.close()});for(const location of this.locations){const position=new google.maps.LatLng(location.fields.store_latitude,location.fields.store_longitude),pinIcon=location.type==="wholesale_stores"?this.retailerPinIcon.cloneNode(!0):this.storePinIcon.cloneNode(!0),markerOptions={map:this.map,position,content:pinIcon,title:location.fields.name},marker=new this.googleAdvancedMarkerElement(markerOptions);this.markers.push(marker),marker._handleMarkerClick=event=>{event.stopPropagation(),storeInfoComponent.locations=[location],infoWindow.setContent(storeInfoWindow),infoWindow.open({anchor:marker,map:this.map,shouldFocus:!1}),this.map.setCenter(position)},marker.addEventListener("click",marker._handleMarkerClick)}if(this.map.addListener("click",event=>{infoWindow.close()}),this.markers.length>0){const bounds=new google.maps.LatLngBounds;for(const marker of this.markers)bounds.extend(marker.position);this.mapBounds=bounds,setTimeout(()=>{this.map.fitBounds(this.mapBounds)},250)}else this.currentLocation&&this.map.setCenter({lat:this.currentLocation.latitude,lng:this.currentLocation.longitude})}_renderMap=()=>{this.googleMap?this._createMap():this.addEventListener("dna:store-locator:map-library-ready",()=>{this._createMap()})};render(){return html` 6 <div 7 id=${this.mapId} 8 class="stores-search__map-element" 9 ${ref(this.$map)} 10 ?active=${this.locations.length} 11 ></div> 12 `}static styles=[styles.a11y,css` 13 :host(.stores-search__map[context="mobile"]) { 14 height: 480px; 15 } 16 .stores-search__map-element { 17 height: 100%; 18 width: 100%; 19 opacity: 0; 20 transition: opacity .2s ease; 21 } 22 .stores-search__map-element[active] { 23 background-color: var(--dna-color-sandstone); 24 opacity: 1; 25 } 26 @media screen and (min-width: 540px) { 27 :host(.stores-search__map[context="mobile"]) { 28 aspect-ratio: 1.2 / 1; 29 height: unset; 30 } 31 } 32 @media screen and (min-width: 1440px) { 33 :host(.stores-search__map[context="desktop"]) { 34 aspect-ratio: 1; 35 height: unset; 36 } 37 } 38 .gm-style .gm-style-iw-c { 39 border-radius: 0px; 40 padding-top: 8px !important; 41 padding-left: 16px !important; 42 padding-right: 16px !important; 43 } 44 @media screen and (min-width: 1024px) { 45 .gm-style .gm-style-iw-c { 46 max-width: 375px !important; 47 } 48 } 49 .gm-style-iw-chr { 50 position: absolute; 51 right: 0; 52 } 53 .gm-style-iw-d { 54 overflow: auto !important; 55 } 56 .store__info-window-close { 57 position: absolute; 58 top: 8px; 59 right: 8px; 60 cursor: pointer; 61 font-size: 16px; 62 } 63 `]}customElements.define("dna-store-map",DNAStoreMap)} 64//# sourceMappingURL=/cdn/shop/t/1342/assets/component-store-map.js.map?v=141870449501040225481790179745
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.