import{LitElement as e,html as t,css as o}from"lit";import{classMap as r}from"lit/directives/class-map.js";import{iconRemixAlertFill as a}from"./assets/cc-remix.icons.js";import{WORLD_GEOJSON as i}from"./assets/world-110m.geo.js";import{ResizeController as n}from"./controllers/resize-controller.js";import"leaflet/src/control/index.js";import"leaflet/src/layer/Tooltip.js";import"leaflet/src/layer/vector/Renderer.getRenderer.js";import{divIcon as s,marker as c,map as l,geoJSON as d,layerGroup as m}from"leaflet/src/Leaflet.js";import{HeatLayer as p}from"./lib/leaflet/leaflet-heat.js";import{leafletStyles as h}from"./styles/leaflet.js";import{i18n as f}from"./translation.js";import"./cc-icon.js";import"./cc-loader.js";import{CcMapMarkerClickEvent as g,CcMapMarkerEnterEvent as u,CcMapMarkerLeaveEvent as y}from"./components/cc-map/cc-map.events.js";class b extends e{static get properties(){return{centerLat:{type:Number,attribute:"center-lat"},centerLon:{type:Number,attribute:"center-lon"},error:{type:Boolean,reflect:!0},heatmapPoints:{type:Array,attribute:"heatmap-points"},loading:{type:Boolean,reflect:!0},mode:{type:String},points:{type:Array},viewZoom:{type:Number,attribute:"view-zoom",reflect:!0}}}constructor(){super(),this.centerLat=48.9,this.centerLon=2.4,this.error=!1,this.heatmapPoints=null,this.loading=!1,this.mode="points",this.points=[],this.viewZoom=2,this._pointsCache={},new n(this,{callback:()=>this.updateComplete.then((()=>this._map.invalidateSize()))})}_resetCurrentLayer(){const[e,t]="heatmap"===this.mode?[this._heatLayer,this._pointsLayer]:[this._pointsLayer,this._heatLayer];this._map.removeLayer(t),this._map.addLayer(e)}_updateHeatmap(e){if(!Array.isArray(e))return;const t=e.map((({count:e})=>e)),o=e.length>0?Math.max(...t):1,r=e.map((({lat:e,lon:t,count:o})=>[e,t,o])),a={blur:7,max:o,minOpacity:.3,radius:8};this._heatLayer.clearLayers().addLayer(new p(r,a))}_updatePoints(e){if(!Array.isArray(e))return;const t=new Set(Object.keys(this._pointsCache));for(const o of e){const e=[o.lat,o.lon,o.marker.tag].join(",");null==this._pointsCache[e]&&this._createMarker(e,o),this._updateMarker(e,o),t.delete(e)}for(const e of t.values())this._deleteMarker(e)}_createMarker(e,t){const o=document.createElement(t.marker.tag),r=s({html:o,iconSize:o.size,iconAnchor:o.anchor,tooltipAnchor:o.tooltip,className:"cc-map-marker"}),a=c([t.lat,t.lon],{icon:r,zIndexOffset:t.zIndexOffset,keyboard:!1}).addTo(this._pointsLayer);a.on("click",(()=>this.dispatchEvent(new g(t)))).on("mouseover",(()=>this.dispatchEvent(new u(t)))).on("mouseout",(()=>this.dispatchEvent(new y(t)))),this._pointsCache[e]={point:t,marker:a,iconElement:o}}_updateMarker(e,t){this._pointsCache[e].point=t;const{point:o,marker:r,iconElement:a}=this._pointsCache[e];for(const e in o.marker)"tag"!==e&&(a[e]=o.marker[e]);if(r.setZIndexOffset(o.zIndexOffset),null==o.tooltip)r.unbindTooltip();else if(null==r.getTooltip()&&r.bindTooltip("",{direction:"top",opacity:1}),"string"==typeof o.tooltip)r.setTooltipContent(o.tooltip);else{const e=r.getTooltip().getContent(),t=e?.tagName?.toLowerCase(),a=t!==o.tooltip.tag?document.createElement(o.tooltip.tag):e;for(const e in o.tooltip)"tag"!==e&&(a[e]=o.tooltip[e]);this.appendChild(a),this.removeChild(a),r.setTooltipContent(a)}}_deleteMarker(e){const{marker:t}=this._pointsCache[e];this._pointsLayer.removeLayer(t),delete this._pointsCache[e]}panInside(e,t){this._map.panInside([e,t],{padding:[50,50]})}firstUpdated(){this._map=l(this.shadowRoot.getElementById("cc-map-container"),{attributionControl:!1,doubleClickZoom:!0,dragging:!0,keyboard:!0,maxBounds:[[-84,-180],[90,180]],maxBoundsViscosity:1,maxZoom:6,minZoom:1,zoomControl:!0}).setView([this.centerLat,this.centerLon],this.viewZoom),this._map.on("zoomanim",(e=>{this.viewZoom=e.zoom})),this._map.zoomControl.setPosition("bottomright"),d(i,{style:{className:"map-country"},pane:"tilePane"}).addTo(this._map),this._pointsLayer=m(),this._heatLayer=m(),this._resetCurrentLayer()}updated(e){(e.has("centerLat")||e.has("centerLon"))&&this._map.setView([this.centerLat,this.centerLon]),e.has("viewZoom")&&this._map.setZoom(this.viewZoom),e.has("mode")&&this._resetCurrentLayer(),e.has("heatmapPoints")&&this._updateHeatmap(this.heatmapPoints),e.has("points")&&this._updatePoints(this.points)}render(){const e=!this.error&&"heatmap"===this.mode&&0===this.heatmapPoints?.length,o=this.loading?"loading":"info";return t`
      <div id="cc-map-container" class=${r({"no-data":e})}></div>
      <div class="legend ${r({"no-data":e})}"><slot></slot></div>
      ${this.loading&&!this.error?t` <cc-loader class="loader"></cc-loader> `:""}
      ${this.error||e?t`
            <div class="msg-container">
              ${this.error?t`
                    <div class="error-message ${r({"error-loading":"loading"===o})}">
                      ${"loading"===o?t`<cc-loader class="loader-error"></cc-loader>`:""}
                      <cc-icon
                        .icon="${a}"
                        a11y-name="${f("cc-map.error.icon-a11y-name")}"
                        class="icon-warning"
                      ></cc-icon>
                      <p>${f("cc-map.error")}</p>
                    </div>
                  `:""}
              ${e?t` <div class="msg">${f("cc-map.no-points")}</div> `:""}
            </div>
          `:""}
    `}static get styles(){return[h,o`
        :host {
          background-color: var(--cc-color-bg-default, #fff);
          display: flex;
          flex-direction: column;
          height: 15em;
          position: relative;
          width: 20em;
        }

        #cc-map-container {
          flex: 1 1 0;
          width: 100%;
        }

        :host([loading]) .leaflet-control-container,
        :host([error]) .leaflet-control-container {
          display: none;
        }

        :host([loading]) #cc-map-container,
        :host([error]) #cc-map-container,
        #cc-map-container.no-data,
        :host([loading]) .legend,
        :host([error]) .legend,
        .legend.no-data {
          filter: blur(0.1em);
        }

        .leaflet-container {
          background-color: #aadaff;
          z-index: 1;
        }

        .map-country {
          fill: #f5f5f5;
          fill-opacity: 1;
          stroke: #ddd;
          stroke-width: 1;
        }

        :host(:not(:empty)) .legend {
          background-color: var(--cc-color-bg-neutral);
          box-shadow: inset 0 6px 6px -6px rgb(0 0 0 / 40%);
          box-sizing: border-box;
          font-size: 0.9em;
          font-style: italic;
          padding: 0.45em 1.1em;
        }

        .loader {
          height: 100%;
          left: 0;
          position: absolute;
          top: 0;
          width: 100%;
          /* Over Leaflet */
          z-index: 2000;
        }

        .loader-error {
          height: 1.5em;
        }

        .msg-container {
          align-items: center;
          display: flex;
          height: 100%;
          justify-content: center;
          left: 0;
          position: absolute;
          top: 0;
          width: 100%;
          /* Over Leaflet */
          z-index: 2000;
        }

        .msg {
          align-items: center;
          background-color: var(--cc-color-bg-default, #fff);
          border: 1px solid var(--cc-color-border-neutral, #aaa);
          border-radius: var(--cc-border-radius-default, 0.25em);
          box-shadow: 0 0 1em rgb(0 0 0 / 40%);
          display: flex;
          justify-content: center;
          padding: 1em;
        }

        .cc-map-marker {
          align-items: center;
          display: flex;
          justify-content: center;
        }

        .error-message {
          align-items: center;
          background-color: var(--cc-color-bg-default, #fff);
          border: 1px solid #bcc2d1;
          border-radius: var(--cc-border-radius-default, 0.25em);
          box-shadow: 0 0 1em rgb(0 0 0 / 40%);
          display: grid;
          gap: 0.5em;
          grid-template-columns: min-content 1fr;
          padding: 1em;
          text-align: center;
        }

        .error-message.error-loading {
          grid-template-columns: auto 1fr;
        }

        .error-message.error-loading .icon-warning {
          display: none;
        }

        .error-message p {
          margin: 0;
        }

        .icon-warning {
          align-self: center;
          color: var(--cc-color-text-warning);

          --cc-icon-size: 1.25em;
        }
      `]}}window.customElements.define("cc-map",b);export{b as CcMap};
//# sourceMappingURL=cc-map.js.map
