@openremote/or-map 1.8.0-snapshot.20250725120002 → 1.8.0-snapshot.20250728102340

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

@@ -1,178 +1 @@
-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
+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};

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

@@ -1,335 +1,80 @@
-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
+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};