var OrMapMarker_1,__decorate=this&&this.__decorate||function(e,t,r,a){var i,o=arguments.length,s=o<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,r,a);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(o<3?i(s):o>3?i(t,r,s):i(t,r))||s);return o>3&&s&&Object.defineProperty(t,r,s),s};import{css as e,html as t,LitElement as r,unsafeCSS as a}from"lit";import{customElement as i,property as o,query as s}from"lit/decorators.js";import{markerActiveColorVar as n,markerColorVar as l}from"../style";import{DefaultBoxShadow as c}from"@openremote/core";import{OrMap as p}from"..";export class OrMapMarkerChangedEvent extends CustomEvent{constructor(e,t){super(OrMapMarkerChangedEvent.NAME,{detail:{marker:e,property:t},bubbles:!0,composed:!0})}}OrMapMarkerChangedEvent.NAME="or-map-marker-changed";export class OrMapMarkerClickedEvent extends CustomEvent{constructor(e){super(OrMapMarkerClickedEvent.NAME,{detail:{marker:e},bubbles:!0,composed:!0})}}OrMapMarkerClickedEvent.NAME="or-map-marker-clicked";let OrMapMarker=OrMapMarker_1=class extends r{constructor(){super(...arguments),this.visible=!0,this.interactive=!0,this.active=!1}static get styles(){return e`
          .label {
            background-color: white;
            width: auto;
            height: 20px;
            position: absolute;
            top: -14px;
            left: 50%;
            padding: 0 3px;
            transform: translate(-50%, -50%);
            text-align: center;
            border-radius: 3px;
            -webkit-box-shadow: ${a(c)};
            -moz-box-shadow: ${a(c)};
            box-shadow: ${a(c)};
          }
          .label > span {
            white-space: nowrap;
          }
          
          .direction-icon-wrapper {
            position: absolute;
            top: 11px;
            left: 16px;
          }
          .direction-circle {
            position: absolute;
            margin-top: -15px;
            margin-left: -15px;
            width: 30px;
            height: 30px;
          }
          .direction-circle circle {
            cx: 15px;
            cy: 15px;
            r: 12px;
            stroke: white;
            stroke-width: 3px;
            fill: transparent;
          }
          .direction-icon {
            position: absolute;
            top: -25px;
            left: -16px;
            transform: scale(0.75) rotate(-90deg);
          }
          
          .active .direction-icon-wrapper {
            top: 17px;
            left: 24px;
          }
          .active .direction-circle {
            margin-top: -20px;
            margin-left: -20px;
            width: 40px;
            height: 40px;
          }
          .active .direction-icon {
            top: -36px;
            left: -23px;
          }
          .active .direction-circle circle {
            cx: 20px;
            cy: 20px;
            r: 18px;
            stroke-width: 4px;
          }
        `}get markerContainer(){if(this._actualMarkerElement)return this._actualMarkerElement.firstElementChild}_onClick(e){this.dispatchEvent(new OrMapMarkerClickedEvent(this))}_createMarkerElement(){let e=document.createElement("div"),t=document.createElement("div");e.appendChild(t),this._addMarkerClassNames(e),this._addMarkerContainerClassNames(t);let r=this.createMarkerContent();return r||(e.classList.add("or-map-marker-default"),r=this._createDefaultMarkerContent()),t.appendChild(r),this._updateInteractive(e),this._updateVisibility(e),this._updateColor(t),this._updateActive(e),e}createMarkerContent(){let e=!1,t=document.createElement("div");if(this._slot&&this._slot.assignedNodes({flatten:!0}).forEach(r=>{r instanceof HTMLElement&&(t.appendChild(r.cloneNode(!0)),e=!0)}),e)return t}shouldUpdate(e){return(e.has("icon")||e.has("displayValue")||e.has("direction"))&&this._refreshMarkerContent(),(e.has("color")||e.has("activeColor"))&&this._updateColor(this.markerContainer),e.has("visible")&&this._updateVisibility(this._actualMarkerElement),e.has("interactive")&&this._updateInteractive(this._actualMarkerElement),e.has("active")&&(this._updateActive(this._actualMarkerElement),this._updateColor(this.markerContainer)),e.forEach((e,t)=>this._raisePropertyChange(t)),!1}_updateVisibility(e){e&&(this.visible?e.removeAttribute("hidden"):e.setAttribute("hidden","true"))}_getColor(){return this.color&&"unset"!==this.color?this.color:void 0}_getActiveColor(){return this.activeColor&&"unset"!==this.activeColor?this.activeColor:void 0}_updateColor(e){if(e){e.style.removeProperty(l),e.style.removeProperty(n);let t=this._getColor(),r=this._getActiveColor();t&&e.style.setProperty(l,t),r&&e.style.setProperty(n,r)}}_updateActive(e){e&&(this.active?e.classList.add("active"):e.classList.remove("active"))}_updateInteractive(e){e&&(this.interactive?e.classList.add("interactive"):e.classList.remove("interactive"))}_refreshMarkerContent(){if(this.markerContainer){let e=this.createMarkerContent();e?this._actualMarkerElement.classList.remove("or-map-marker-default"):(this._actualMarkerElement.classList.add("or-map-marker-default"),e=this._createDefaultMarkerContent()),this.markerContainer.children.length>0&&this.markerContainer.removeChild(this.markerContainer.children[0]),this.markerContainer.appendChild(e)}}render(){return t`
          <slot></slot>
        `}_raisePropertyChange(e){this.dispatchEvent(new OrMapMarkerChangedEvent(this,e))}_addMarkerClassNames(e){e.classList.add("or-map-marker")}_addMarkerContainerClassNames(e){e.classList.add("marker-container")}_createDefaultMarkerContent(){let e=document.createElement("div");return e.innerHTML=OrMapMarker_1._defaultTemplate(this.icon,{displayValue:this.displayValue,direction:this.direction}),e}_applyMapMarkerStyles(){var e;if(this.parentElement instanceof p){let t=null==(e=this.parentElement.shadowRoot)?void 0:e.querySelector("#map"),r=this.constructor.styles,a=[];t&&r&&(Array.isArray(r)?a=r:a.push(r),a.forEach(e=>{let r=document.createElement("style");r.textContent=String(e),t.children.length>0?t.insertBefore(r,t.children[0]):t.appendChild(r)}))}}hasPosition(){return"number"==typeof this.lat&&"number"==typeof this.lng&&this.lat>=-90&&this.lat<90&&this.lng>=-180&&this.lng<180}connectedCallback(){super.connectedCallback(),this._applyMapMarkerStyles()}disconnectedCallback(){var e,t;super.disconnectedCallback(),null==(t=null==(e=this._actualMarkerElement)?void 0:e.parentElement)||t.removeChild(this._actualMarkerElement)}};OrMapMarker._defaultTemplate=(e,t)=>`
        ${t&&void 0!==t.displayValue?`<div class="label"><span>${t.displayValue}</span></div>`:""}
        ${t&&t.direction?`<div class="direction-icon-wrapper" style="transform: rotate(${t.direction}deg);">
                <svg class="direction-circle">
                 <circle/> 
                </svg>
                <or-icon class="direction-icon" icon="play"></or-icon>
               </div>`:""}
        <or-icon icon="or:marker"></or-icon>
        <or-icon class="marker-icon" icon="${e||""}"></or-icon>
    `,__decorate([o({type:Number,reflect:!0,attribute:!0})],OrMapMarker.prototype,"lat",void 0),__decorate([o({type:Number,reflect:!0})],OrMapMarker.prototype,"lng",void 0),__decorate([o({type:Number,reflect:!0})],OrMapMarker.prototype,"radius",void 0),__decorate([o({reflect:!0})],OrMapMarker.prototype,"displayValue",void 0),__decorate([o({reflect:!0})],OrMapMarker.prototype,"direction",void 0),__decorate([o({type:Boolean})],OrMapMarker.prototype,"visible",void 0),__decorate([o({type:String})],OrMapMarker.prototype,"icon",void 0),__decorate([o({type:String})],OrMapMarker.prototype,"color",void 0),__decorate([o({type:String})],OrMapMarker.prototype,"activeColor",void 0),__decorate([o({type:Boolean})],OrMapMarker.prototype,"interactive",void 0),__decorate([o({type:Boolean})],OrMapMarker.prototype,"active",void 0),__decorate([s("slot")],OrMapMarker.prototype,"_slot",void 0),OrMapMarker=OrMapMarker_1=__decorate([i("or-map-marker")],OrMapMarker);export{OrMapMarker};