@openremote/or-map 1.8.0-snapshot.20250725070921 → 1.8.0-snapshot.20250725120000

package/lib/markers/or-map-marker-asset.js

@@ -1 +1,178 @@
-var __decorate=this&&this.__decorate||function(t,e,r,i){var s,o=arguments.length,a=o<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,r,i);else for(var n=t.length-1;n>=0;n--)(s=t[n])&&(a=(o<3?s(a):o>3?s(e,r,a):s(e,r))||a);return o>3&&a&&Object.defineProperty(e,r,a),a},__awaiter=this&&this.__awaiter||function(t,e,r,i){return new(r||(r=Promise))(function(s,o){function a(t){try{c(i.next(t))}catch(t){o(t)}}function n(t){try{c(i.throw(t))}catch(t){o(t)}}function c(t){var e;t.done?s(t.value):((e=t.value)instanceof r?e:new r(function(t){t(e)})).then(a,n)}c((i=i.apply(t,e||[])).next())})};import{customElement as t,property as e}from"lit/decorators.js";import{OrMapMarker as r}from"./or-map-marker";import{AssetModelUtil as i}from"@openremote/model";import s,{subscribe as o,Util as a}from"@openremote/core";import{getMarkerIconAndColorFromAssetType as n}from"../util";export function getMarkerConfigForAssetType(t,e){if(t&&e&&t[e])return t[e]}export function getMarkerConfigAttributeName(t,e){let r=getMarkerConfigForAssetType(t,e);if(r)return r.attributeName}let OrMapMarkerAsset=class extends o(s)(r){constructor(){super(),this.assetTypeAsIcon=!0,this.visible=!1}set type(t){let e,r=getMarkerConfigForAssetType(this.config,t);if(r&&r.attributeName&&this.asset&&this.asset.attributes&&this.asset.attributes[r.attributeName]&&r.colours){let t=this.asset.attributes[r.attributeName].value;e={markerConfig:r.colours,currentValue:t}}let i=n(t,e);if(!i){this.visible=!1;return}this.assetTypeAsIcon&&(this.icon=i.icon),this.markerColor=Array.isArray(i.color)?i.color[0].colour:i.color||void 0,this.updateColor(this.markerContainer),this.visible=!0}shouldUpdate(t){if(t.has("assetId")&&(this.lat=void 0,this.lng=void 0,this.type=void 0,this.direction=void 0,this.displayValue=void 0,this.assetIds=this.assetId&&this.assetId.length>0?[this.assetId]:void 0,1===Object.keys(t).length))return!1;if(t.has("asset"))try{this.onAssetChanged(this.asset)}catch(t){console.error(t)}return super.shouldUpdate(t)}_onEvent(t){if("attribute"===t.eventType)return"location"===t.ref.name?void this._updateLocation(t.value):void(this.asset&&(this.asset=a.updateAsset(this.asset,t),this.requestUpdate()));if("asset"===t.eventType)switch(t.cause){case"READ":case"CREATE":case"UPDATE":this.onAssetChanged(t.asset);break;case"DELETE":this.onAssetChanged(void 0)}}onAssetChanged(t){return __awaiter(this,void 0,void 0,function*(){if(t){this.direction=void 0,this.displayValue=void 0;let e=t.attributes?t.attributes.location:void 0;this._updateLocation(e?e.value:null);let r=getMarkerConfigForAssetType(this.config,t.type),s=!r||!r.hideDirection,o=r&&!0===r.showLabel&&!!r.attributeName,n=!!(r&&!1!==r.showUnits);if(o&&t.attributes&&t.attributes[null==r?void 0:r.attributeName]){let e=t.attributes[r.attributeName],s=i.getAttributeAndValueDescriptors(t.type,e.name,e);this.displayValue=a.getAttributeValueAsString(e,s[0],t.type,n,"-")}if(s&&t.attributes&&t.attributes.direction){let e=t.attributes.direction.value;null!=e&&(this.direction=e.toString())}this.type=t.type}else this.lat=void 0,this.lng=void 0})}_updateLocation(t){this.lat=t&&t.coordinates?t.coordinates[1]:void 0,this.lng=t&&t.coordinates?t.coordinates[0]:void 0}getColor(){return this.markerColor&&!this.color?"#"+this.markerColor:super.getColor()}getActiveColor(){return this.markerColor&&!this.activeColor?"#"+this.markerColor:super.getActiveColor()}};__decorate([e({type:String,reflect:!0,attribute:!0})],OrMapMarkerAsset.prototype,"assetId",void 0),__decorate([e({type:Object,attribute:!0})],OrMapMarkerAsset.prototype,"asset",void 0),__decorate([e()],OrMapMarkerAsset.prototype,"config",void 0),OrMapMarkerAsset=__decorate([t("or-map-marker-asset")],OrMapMarkerAsset);export{OrMapMarkerAsset};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { customElement, property } from "lit/decorators.js";
+import { OrMapMarker } from "./or-map-marker";
+import { AssetModelUtil } from "@openremote/model";
+import manager, { subscribe, Util } from "@openremote/core";
+import { getMarkerIconAndColorFromAssetType } from "../util";
+export function getMarkerConfigForAssetType(config, assetType) {
+    if (!config || !assetType || !config[assetType]) {
+        return;
+    }
+    return config[assetType];
+}
+export function getMarkerConfigAttributeName(config, assetType) {
+    const assetTypeConfig = getMarkerConfigForAssetType(config, assetType);
+    if (!assetTypeConfig) {
+        return;
+    }
+    return assetTypeConfig.attributeName;
+}
+let OrMapMarkerAsset = class OrMapMarkerAsset extends subscribe(manager)(OrMapMarker) {
+    constructor() {
+        super();
+        this.assetTypeAsIcon = true;
+        this.visible = false;
+    }
+    set type(type) {
+        let overrideOpts;
+        const assetTypeConfig = getMarkerConfigForAssetType(this.config, type);
+        if (assetTypeConfig && assetTypeConfig.attributeName && this.asset && this.asset.attributes && this.asset.attributes[assetTypeConfig.attributeName] && assetTypeConfig.colours) {
+            const currentValue = this.asset.attributes[assetTypeConfig.attributeName].value;
+            overrideOpts = {
+                markerConfig: assetTypeConfig.colours,
+                currentValue: currentValue
+            };
+        }
+        const iconAndColour = getMarkerIconAndColorFromAssetType(type, overrideOpts);
+        if (!iconAndColour) {
+            this.visible = false;
+            return;
+        }
+        if (this.assetTypeAsIcon) {
+            this.icon = iconAndColour.icon;
+        }
+        this.markerColor = (Array.isArray(iconAndColour.color)) ? iconAndColour.color[0].colour : iconAndColour.color || undefined;
+        this.updateColor(this.markerContainer);
+        this.visible = true;
+    }
+    shouldUpdate(_changedProperties) {
+        if (_changedProperties.has("assetId")) {
+            this.lat = undefined;
+            this.lng = undefined;
+            this.type = undefined;
+            this.direction = undefined;
+            this.displayValue = undefined;
+            this.assetIds = this.assetId && this.assetId.length > 0 ? [this.assetId] : undefined;
+            if (Object.keys(_changedProperties).length === 1) {
+                return false;
+            }
+        }
+        if (_changedProperties.has("asset")) {
+            try {
+                this.onAssetChanged(this.asset);
+            }
+            catch (e) {
+                console.error(e);
+            }
+        }
+        return super.shouldUpdate(_changedProperties);
+    }
+    /**
+     * This will only get called when assetId is set; if asset is set then it is expected that attribute changes are
+     * handled outside this component and the asset should be replaced when attributes change that require the marker
+     * to re-render
+     */
+    _onEvent(event) {
+        if (event.eventType === "attribute") {
+            const attributeEvent = event;
+            if (attributeEvent.ref.name === "location" /* WellknownAttributes.LOCATION */) {
+                this._updateLocation(attributeEvent.value);
+                return;
+            }
+            if (this.asset) {
+                this.asset = Util.updateAsset(this.asset, event);
+                this.requestUpdate();
+            }
+            return;
+        }
+        if (event.eventType === "asset") {
+            const assetEvent = event;
+            switch (assetEvent.cause) {
+                case "READ" /* AssetEventCause.READ */:
+                case "CREATE" /* AssetEventCause.CREATE */:
+                case "UPDATE" /* AssetEventCause.UPDATE */:
+                    this.onAssetChanged(assetEvent.asset);
+                    break;
+                case "DELETE" /* AssetEventCause.DELETE */:
+                    this.onAssetChanged(undefined);
+                    break;
+            }
+        }
+    }
+    onAssetChanged(asset) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (asset) {
+                this.direction = undefined;
+                this.displayValue = undefined;
+                const locAttr = asset.attributes ? asset.attributes["location" /* WellknownAttributes.LOCATION */] : undefined;
+                this._updateLocation(locAttr ? locAttr.value : null);
+                const assetTypeConfig = getMarkerConfigForAssetType(this.config, asset.type);
+                const showDirection = !assetTypeConfig || !assetTypeConfig.hideDirection;
+                const showLabel = assetTypeConfig && assetTypeConfig.showLabel === true && !!assetTypeConfig.attributeName;
+                const showUnits = !!(assetTypeConfig && assetTypeConfig.showUnits !== false);
+                if (showLabel && asset.attributes && asset.attributes[assetTypeConfig === null || assetTypeConfig === void 0 ? void 0 : assetTypeConfig.attributeName]) {
+                    const attr = asset.attributes[assetTypeConfig.attributeName];
+                    const descriptors = AssetModelUtil.getAttributeAndValueDescriptors(asset.type, attr.name, attr);
+                    this.displayValue = Util.getAttributeValueAsString(attr, descriptors[0], asset.type, showUnits, "-");
+                }
+                if (showDirection) {
+                    if (asset.attributes && asset.attributes["direction" /* WellknownAttributes.DIRECTION */]) {
+                        const directionVal = asset.attributes["direction" /* WellknownAttributes.DIRECTION */].value;
+                        if (directionVal !== undefined && directionVal !== null) {
+                            this.direction = directionVal.toString();
+                        }
+                    }
+                }
+                this.type = asset.type;
+            }
+            else {
+                this.lat = undefined;
+                this.lng = undefined;
+            }
+        });
+    }
+    _updateLocation(location) {
+        this.lat = location && location.coordinates ? location.coordinates[1] : undefined;
+        this.lng = location && location.coordinates ? location.coordinates[0] : undefined;
+    }
+    getColor() {
+        if (this.markerColor && !this.color) {
+            return "#" + this.markerColor;
+        }
+        return super.getColor();
+    }
+    getActiveColor() {
+        if (this.markerColor && !this.activeColor) {
+            return "#" + this.markerColor;
+        }
+        return super.getActiveColor();
+    }
+};
+__decorate([
+    property({ type: String, reflect: true, attribute: true })
+], OrMapMarkerAsset.prototype, "assetId", void 0);
+__decorate([
+    property({ type: Object, attribute: true })
+], OrMapMarkerAsset.prototype, "asset", void 0);
+__decorate([
+    property()
+], OrMapMarkerAsset.prototype, "config", void 0);
+OrMapMarkerAsset = __decorate([
+    customElement("or-map-marker-asset")
+], OrMapMarkerAsset);
+export { OrMapMarkerAsset };
+//# sourceMappingURL=or-map-marker-asset.js.map

package/lib/markers/or-map-marker.js

@@ -1,80 +1,335 @@
-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 c}from"../style";import{DefaultBoxShadow as l}from"@openremote/core";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(l)};
-            -moz-box-shadow: ${a(l)};
-            box-shadow: ${a(l)};
-          }
-          .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(c),e.style.removeProperty(n);let t=this.getColor(),r=this.getActiveColor();t&&e.style.setProperty(c,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}hasPosition(){return"number"==typeof this.lat&&"number"==typeof this.lng&&this.lat>=-90&&this.lat<90&&this.lng>=-180&&this.lng<180}};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};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var OrMapMarker_1;
+import { css, html, LitElement, unsafeCSS } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { markerActiveColorVar, markerColorVar } from "../style";
+import { DefaultBoxShadow } from "@openremote/core";
+export class OrMapMarkerChangedEvent extends CustomEvent {
+    constructor(marker, prop) {
+        super(OrMapMarkerChangedEvent.NAME, {
+            detail: {
+                marker: marker,
+                property: prop
+            },
+            bubbles: true,
+            composed: true
+        });
+    }
+}
+OrMapMarkerChangedEvent.NAME = "or-map-marker-changed";
+export class OrMapMarkerClickedEvent extends CustomEvent {
+    constructor(marker) {
+        super(OrMapMarkerClickedEvent.NAME, {
+            detail: {
+                marker: marker
+            },
+            bubbles: true,
+            composed: true
+        });
+    }
+}
+OrMapMarkerClickedEvent.NAME = "or-map-marker-clicked";
+/**
+ * Base class for all map markers.
+ *
+ * This component doesn't directly render anything instead it generates DOM that can be added to the map component
+ */
+let OrMapMarker = OrMapMarker_1 = class OrMapMarker extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.visible = true;
+        this.interactive = true;
+        this.active = false;
+    }
+    static get styles() {
+        return css `
+          .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: ${unsafeCSS(DefaultBoxShadow)};
+            -moz-box-shadow: ${unsafeCSS(DefaultBoxShadow)};
+            box-shadow: ${unsafeCSS(DefaultBoxShadow)};
+          }
+          .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() {
+        const markerElem = document.createElement("div");
+        const markerContainerElem = document.createElement("div");
+        markerElem.appendChild(markerContainerElem);
+        this.addMarkerClassNames(markerElem);
+        this.addMarkerContainerClassNames(markerContainerElem);
+        let content = this.createMarkerContent();
+        if (!content) {
+            // Append default marker
+            markerElem.classList.add("or-map-marker-default");
+            content = this.createDefaultMarkerContent();
+        }
+        markerContainerElem.appendChild(content);
+        this.updateInteractive(markerElem);
+        this.updateVisibility(markerElem);
+        this.updateColor(markerContainerElem);
+        this.updateActive(markerElem);
+        return markerElem;
+    }
+    /**
+     * Override in sub types to customise the look of the marker. If undefined returned then a default marker will
+     * be used instead.
+     */
+    createMarkerContent() {
+        // Append child elements
+        let hasChildren = false;
+        let container = document.createElement("div");
+        if (this._slot) {
+            this._slot.assignedNodes({ flatten: true }).forEach((child) => {
+                if (child instanceof HTMLElement) {
+                    container.appendChild(child.cloneNode(true));
+                    hasChildren = true;
+                }
+            });
+        }
+        if (!hasChildren) {
+            return;
+        }
+        return container;
+    }
+    shouldUpdate(_changedProperties) {
+        if (_changedProperties.has("icon") || _changedProperties.has("displayValue") || _changedProperties.has("direction")) {
+            this.refreshMarkerContent();
+        }
+        if (_changedProperties.has("color") || _changedProperties.has("activeColor")) {
+            this.updateColor(this.markerContainer);
+        }
+        if (_changedProperties.has("visible")) {
+            this.updateVisibility(this._actualMarkerElement);
+        }
+        if (_changedProperties.has("interactive")) {
+            this.updateInteractive(this._actualMarkerElement);
+        }
+        if (_changedProperties.has("active")) {
+            this.updateActive(this._actualMarkerElement);
+            this.updateColor(this.markerContainer);
+        }
+        _changedProperties.forEach((oldValue, prop) => this._raisePropertyChange(prop));
+        return false;
+    }
+    updateVisibility(container) {
+        if (container) {
+            if (this.visible) {
+                container.removeAttribute("hidden");
+            }
+            else {
+                container.setAttribute("hidden", "true");
+            }
+        }
+    }
+    getColor() {
+        return this.color && this.color !== "unset" ? this.color : undefined;
+    }
+    getActiveColor() {
+        return this.activeColor && this.activeColor !== "unset" ? this.activeColor : undefined;
+    }
+    updateColor(container) {
+        if (container) {
+            container.style.removeProperty(markerColorVar);
+            container.style.removeProperty(markerActiveColorVar);
+            const color = this.getColor();
+            const activeColor = this.getActiveColor();
+            if (color) {
+                container.style.setProperty(markerColorVar, color);
+            }
+            if (activeColor) {
+                container.style.setProperty(markerActiveColorVar, activeColor);
+            }
+        }
+    }
+    updateActive(container) {
+        if (container) {
+            if (this.active) {
+                container.classList.add("active");
+            }
+            else {
+                container.classList.remove("active");
+            }
+        }
+    }
+    updateInteractive(container) {
+        if (container) {
+            if (this.interactive) {
+                container.classList.add("interactive");
+            }
+            else {
+                container.classList.remove("interactive");
+            }
+        }
+    }
+    refreshMarkerContent() {
+        if (this.markerContainer) {
+            let content = this.createMarkerContent();
+            if (!content) {
+                // Append default marker
+                this._actualMarkerElement.classList.add("or-map-marker-default");
+                content = this.createDefaultMarkerContent();
+            }
+            else {
+                this._actualMarkerElement.classList.remove("or-map-marker-default");
+            }
+            if (this.markerContainer.children.length > 0) {
+                this.markerContainer.removeChild(this.markerContainer.children[0]);
+            }
+            this.markerContainer.appendChild(content);
+        }
+    }
+    render() {
+        return html `
+          <slot></slot>
+        `;
+    }
+    _raisePropertyChange(prop) {
+        this.dispatchEvent(new OrMapMarkerChangedEvent(this, prop));
+    }
+    addMarkerClassNames(markerElement) {
+        markerElement.classList.add("or-map-marker");
+    }
+    addMarkerContainerClassNames(markerContainer) {
+        markerContainer.classList.add("marker-container");
+    }
+    createDefaultMarkerContent() {
+        const div = document.createElement("div");
+        div.innerHTML = OrMapMarker_1._defaultTemplate(this.icon, { displayValue: this.displayValue, direction: this.direction });
+        return div;
+    }
+    hasPosition() {
+        return typeof this.lat === "number"
+            && typeof this.lng === "number"
+            && this.lat >= -90 && this.lat < 90
+            && this.lng >= -180 && this.lng < 180;
+    }
+};
+OrMapMarker._defaultTemplate = (icon, options) => `
+        ${options && options.displayValue !== undefined
+    ? `<div class="label"><span>${options.displayValue}</span></div>`
+    : ``}
+        ${options && options.direction
+    ? `<div class="direction-icon-wrapper" style="transform: rotate(${options.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="${icon || ""}"></or-icon>
+    `;
+__decorate([
+    property({ type: Number, reflect: true, attribute: true })
+], OrMapMarker.prototype, "lat", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], OrMapMarker.prototype, "lng", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], OrMapMarker.prototype, "radius", void 0);
+__decorate([
+    property({ reflect: true })
+], OrMapMarker.prototype, "displayValue", void 0);
+__decorate([
+    property({ reflect: true })
+], OrMapMarker.prototype, "direction", void 0);
+__decorate([
+    property({ type: Boolean })
+], OrMapMarker.prototype, "visible", void 0);
+__decorate([
+    property({ type: String })
+], OrMapMarker.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], OrMapMarker.prototype, "color", void 0);
+__decorate([
+    property({ type: String })
+], OrMapMarker.prototype, "activeColor", void 0);
+__decorate([
+    property({ type: Boolean })
+], OrMapMarker.prototype, "interactive", void 0);
+__decorate([
+    property({ type: Boolean })
+], OrMapMarker.prototype, "active", void 0);
+__decorate([
+    query("slot")
+], OrMapMarker.prototype, "_slot", void 0);
+OrMapMarker = OrMapMarker_1 = __decorate([
+    customElement("or-map-marker")
+], OrMapMarker);
+export { OrMapMarker };
+//# sourceMappingURL=or-map-marker.js.map