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

package/lib/index.js

@@ -1,521 +1,41 @@
-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;
-};
-import manager from "@openremote/core";
-import { FlattenedNodesObserver } from "@polymer/polymer/lib/utils/flattened-nodes-observer.js";
-import { html, LitElement } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
-import { LngLat, GeolocateControl } from "maplibre-gl";
-import { MapWidget } from "./mapwidget";
-import { style } from "./style";
-import "./markers/or-map-marker";
-import "./markers/or-map-marker-asset";
-import { OrMapMarker, OrMapMarkerChangedEvent } from "./markers/or-map-marker";
-import * as Util from "./util";
-import { InputType, OrMwcInput } from "@openremote/or-mwc-components/or-mwc-input";
-import { OrMwcDialog, showDialog } from "@openremote/or-mwc-components/or-mwc-dialog";
-import { getMarkerIconAndColorFromAssetType } from "./util";
-import { i18next } from "@openremote/or-translate";
-import { debounce } from "lodash";
-// Re-exports
-export { Util };
-export * from "./markers/or-map-marker";
-export * from "./markers/or-map-marker-asset";
-export * from "./or-map-asset-card";
-export class OrMapLoadedEvent extends CustomEvent {
-    constructor() {
-        super(OrMapLoadedEvent.NAME, {
-            bubbles: true,
-            composed: true
-        });
-    }
-}
-OrMapLoadedEvent.NAME = "or-map-loaded";
-export class OrMapClickedEvent extends CustomEvent {
-    constructor(lngLat, doubleClick = false) {
-        super(OrMapClickedEvent.NAME, {
-            detail: {
-                doubleClick: doubleClick,
-                lngLat: lngLat
-            },
-            bubbles: true,
-            composed: true
-        });
-    }
-}
-OrMapClickedEvent.NAME = "or-map-clicked";
-export class OrMapLongPressEvent extends CustomEvent {
-    constructor(lngLat) {
-        super(OrMapLongPressEvent.NAME, {
-            detail: {
-                doubleClick: false,
-                lngLat: lngLat
-            },
-            bubbles: true,
-            composed: true
-        });
-    }
-}
-OrMapLongPressEvent.NAME = "or-map-long-press";
-export class OrMapGeocoderChangeEvent extends CustomEvent {
-    constructor(geocode) {
-        super(OrMapGeocoderChangeEvent.NAME, {
-            detail: {
-                geocode
-            },
-            bubbles: true,
-            composed: true
-        });
-    }
-}
-OrMapGeocoderChangeEvent.NAME = "or-map-geocoder-change";
-export class CenterControl {
-    onAdd(map) {
-        this.map = map;
-        const control = document.createElement("div");
-        control.classList.add("maplibregl-ctrl");
-        control.classList.add("maplibregl-ctrl-group");
-        const button = document.createElement("button");
-        button.className = "maplibregl-ctrl-compass";
-        button.addEventListener("click", (ev) => map.flyTo({
-            center: this.pos,
-            zoom: map.getZoom()
-        }));
-        const buttonIcon = document.createElement("span");
-        buttonIcon.className = "maplibregl-ctrl-icon";
-        button.appendChild(buttonIcon);
-        control.appendChild(button);
-        this.elem = control;
-        return control;
-    }
-    onRemove(map) {
-        this.map = undefined;
-        this.elem = undefined;
-    }
-}
-const CoordinatesRegexPattern = "^[ ]*(?:Lat: )?(-?\\d+\\.?\\d*)[, ]+(?:Lng: )?(-?\\d+\\.?\\d*)[ ]*$";
-function getCoordinatesInputKeyHandler(valueChangedHandler) {
-    return (e) => {
-        if (e.code === "Enter" || e.code === "NumpadEnter") {
-            const valStr = e.target.value;
-            let value = !valStr ? undefined : {};
-            if (valStr) {
-                const lngLatArr = valStr.split(/[ ,]/).filter(v => !!v);
-                if (lngLatArr.length === 2) {
-                    value = new LngLat(Number.parseFloat(lngLatArr[0]), Number.parseFloat(lngLatArr[1]));
-                }
-            }
-            valueChangedHandler(value);
-        }
-    };
-}
-export class CoordinatesControl {
-    constructor(disabled = false, valueChangedHandler) {
-        this._readonly = false;
-        this._readonly = disabled;
-        this._valueChangedHandler = valueChangedHandler;
-    }
-    onAdd(map) {
-        this.map = map;
-        const control = document.createElement("div");
-        control.classList.add("maplibregl-ctrl");
-        control.classList.add("maplibregl-ctrl-group");
-        const input = new OrMwcInput();
-        input.type = InputType.TEXT;
-        input.outlined = true;
-        input.compact = true;
-        input.readonly = this._readonly;
-        input.icon = "crosshairs-gps";
-        input.value = this._value;
-        input.pattern = CoordinatesRegexPattern;
-        input.onkeyup = getCoordinatesInputKeyHandler(this._valueChangedHandler);
-        control.appendChild(input);
-        this.elem = control;
-        this.input = input;
-        return control;
-    }
-    onRemove(map) {
-        this.map = undefined;
-        this.elem = undefined;
-    }
-    set readonly(readonly) {
-        this._readonly = readonly;
-        if (this.input) {
-            this.input.readonly = readonly;
-        }
-    }
-    set value(value) {
-        this._value = value;
-        if (this.input) {
-            this.input.value = value;
-        }
-    }
-}
-export const geoJsonPointInputTemplateProvider = (assetDescriptor, valueHolder, valueHolderDescriptor, valueDescriptor, valueChangeNotifier, options) => {
-    const disabled = !!(options && options.disabled);
-    const readonly = !!(options && options.readonly);
-    const compact = !!(options && options.compact);
-    const comfortable = !!(options && options.comfortable);
-    const centerControl = new CenterControl();
-    const valueChangeHandler = (value) => {
-        if (!valueChangeNotifier) {
-            return;
-        }
-        if (value !== undefined) {
-            valueChangeNotifier({
-                value: value ? Util.getGeoJSONPoint(value) : null
-            });
-        }
-        else {
-            valueChangeNotifier(undefined);
-        }
-    };
-    const coordinatesControl = new CoordinatesControl(disabled, valueChangeHandler);
-    let pos;
-    const templateFunction = (value, focused, loading, sending, error, helperText) => {
-        let center;
-        if (value) {
-            pos = Util.getLngLat(value);
-            center = pos ? Object.values(pos) : undefined;
-        }
-        const centerStr = center ? center.join(", ") : undefined;
-        centerControl.pos = pos || undefined;
-        coordinatesControl.readonly = disabled || readonly || sending || loading;
-        coordinatesControl.value = centerStr;
-        const iconAndColor = getMarkerIconAndColorFromAssetType(assetDescriptor);
-        let dialog;
-        const setPos = (lngLat) => {
-            if (readonly || disabled) {
-                return;
-            }
-            pos = lngLat ? Util.getLngLat(lngLat) : null;
-            if (dialog) {
-                // We're in compact mode modal
-                const marker = dialog.shadowRoot.getElementById("geo-json-point-marker");
-                marker.lng = pos ? pos.lng : undefined;
-                marker.lat = pos ? pos.lat : undefined;
-                center = pos ? Object.values(pos) : undefined;
-                const centerStr = center ? center.join(", ") : undefined;
-                coordinatesControl.value = centerStr;
-            }
-            else {
-                valueChangeHandler(pos);
-            }
-        };
-        const controls = [[centerControl, "bottom-left"], [coordinatesControl, "top-right"]];
-        if (!readonly) {
-            const userLocationControl = new GeolocateControl({
-                positionOptions: {
-                    enableHighAccuracy: true
-                },
-                showAccuracyCircle: false,
-                showUserLocation: false
-            });
-            userLocationControl.on('geolocate', (currentLocation) => {
-                setPos(new LngLat(currentLocation.coords.longitude, currentLocation.coords.latitude));
-            });
-            userLocationControl.on('outofmaxbounds', (currentLocation) => {
-                setPos(new LngLat(currentLocation.coords.longitude, currentLocation.coords.latitude));
-            });
-            controls.push([userLocationControl, "bottom-left"]);
-        }
-        let content = html `
-            <or-map id="geo-json-point-map" class="or-map" @or-map-long-press="${(ev) => { setPos(ev.detail.lngLat); }}" .center="${center}" .controls="${controls}" .showGeoCodingControl=${!readonly}>
-                <or-map-marker id="geo-json-point-marker" active .lng="${pos ? pos.lng : undefined}" .lat="${pos ? pos.lat : undefined}" .icon="${iconAndColor ? iconAndColor.icon : undefined}" .activeColor="${iconAndColor ? "#" + iconAndColor.color : undefined}" .colour="${iconAndColor ? "#" + iconAndColor.color : undefined}"></or-map-marker>
-            </or-map>
-            <span class="long-press-msg">${i18next.t('longPressSetLoc')}</span>
-        `;
-        if (compact) {
-            const mapContent = content;
-            const onClick = () => {
-                dialog = showDialog(new OrMwcDialog()
-                    .setContent(mapContent)
-                    .setStyles(html `
-                            <style>
-                                .dialog-container {
-                                    flex-direction: column !important;
-                                }
-                                .dialog-container .long-press-msg {
-                                    display: block;
-                                    text-align: center;
-                                }
-                                or-map {
-                                    width: 600px !important;
-                                    min-height: 600px !important;
-                                }
-                            </style>
-                        `)
-                    .setActions([
-                    {
-                        actionName: "none",
-                        content: "none",
-                        action: () => {
-                            setPos(null);
-                            valueChangeHandler(pos);
-                        }
-                    },
-                    {
-                        actionName: "ok",
-                        content: "ok",
-                        action: () => {
-                            valueChangeHandler(pos);
-                        }
-                    },
-                    {
-                        default: true,
-                        actionName: "cancel",
-                        content: "cancel"
+var __decorate=this&&this.__decorate||function(e,t,o,r){var a,n=arguments.length,s=n<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var i=e.length-1;i>=0;i--)(a=e[i])&&(s=(n<3?a(s):n>3?a(t,o,s):a(t,o))||s);return n>3&&s&&Object.defineProperty(t,o,s),s};import e from"@openremote/core";import{FlattenedNodesObserver as t}from"@polymer/polymer/lib/utils/flattened-nodes-observer.js";import{html as o,LitElement as r}from"lit";import{customElement as a,property as n,query as s}from"lit/decorators.js";import{LngLat as i,GeolocateControl as l}from"maplibre-gl";import{MapWidget as p}from"./mapwidget";import{style as d}from"./style";import"./markers/or-map-marker";import"./markers/or-map-marker-asset";import{OrMapMarker as m,OrMapMarkerChangedEvent as c}from"./markers/or-map-marker";import*as h from"./util";import{InputType as u,OrMwcInput as v}from"@openremote/or-mwc-components/or-mwc-input";import{OrMwcDialog as g,showDialog as y}from"@openremote/or-mwc-components/or-mwc-dialog";import{getMarkerIconAndColorFromAssetType as f}from"./util";import{i18next as C}from"@openremote/or-translate";import{debounce as _}from"lodash";export*from"./markers/or-map-marker";export*from"./markers/or-map-marker-asset";export*from"./or-map-asset-card";export class OrMapLoadedEvent extends CustomEvent{constructor(){super(OrMapLoadedEvent.NAME,{bubbles:!0,composed:!0})}}OrMapLoadedEvent.NAME="or-map-loaded";export class OrMapClickedEvent extends CustomEvent{constructor(e,t=!1){super(OrMapClickedEvent.NAME,{detail:{doubleClick:t,lngLat:e},bubbles:!0,composed:!0})}}OrMapClickedEvent.NAME="or-map-clicked";export class OrMapLongPressEvent extends CustomEvent{constructor(e){super(OrMapLongPressEvent.NAME,{detail:{doubleClick:!1,lngLat:e},bubbles:!0,composed:!0})}}OrMapLongPressEvent.NAME="or-map-long-press";export class OrMapGeocoderChangeEvent extends CustomEvent{constructor(e){super(OrMapGeocoderChangeEvent.NAME,{detail:{geocode:e},bubbles:!0,composed:!0})}}OrMapGeocoderChangeEvent.NAME="or-map-geocoder-change";export class CenterControl{onAdd(e){this.map=e;let t=document.createElement("div");t.classList.add("maplibregl-ctrl"),t.classList.add("maplibregl-ctrl-group");let o=document.createElement("button");o.className="maplibregl-ctrl-compass",o.addEventListener("click",t=>e.flyTo({center:this.pos,zoom:e.getZoom()}));let r=document.createElement("span");return r.className="maplibregl-ctrl-icon",o.appendChild(r),t.appendChild(o),this.elem=t,t}onRemove(e){this.map=void 0,this.elem=void 0}}let CoordinatesRegexPattern="^[ ]*(?:Lat: )?(-?\\d+\\.?\\d*)[, ]+(?:Lng: )?(-?\\d+\\.?\\d*)[ ]*$";function getCoordinatesInputKeyHandler(e){return t=>{if("Enter"===t.code||"NumpadEnter"===t.code){let o=t.target.value,r=o?{}:void 0;if(o){let e=o.split(/[ ,]/).filter(e=>!!e);2===e.length&&(r=new i(Number.parseFloat(e[0]),Number.parseFloat(e[1])))}e(r)}}}export class CoordinatesControl{constructor(e=!1,t){this._readonly=!1,this._readonly=e,this._valueChangedHandler=t}onAdd(e){this.map=e;let t=document.createElement("div");t.classList.add("maplibregl-ctrl"),t.classList.add("maplibregl-ctrl-group");let o=new v;return o.type=u.TEXT,o.outlined=!0,o.compact=!0,o.readonly=this._readonly,o.icon="crosshairs-gps",o.value=this._value,o.pattern=CoordinatesRegexPattern,o.onkeyup=getCoordinatesInputKeyHandler(this._valueChangedHandler),t.appendChild(o),this.elem=t,this.input=o,t}onRemove(e){this.map=void 0,this.elem=void 0}set readonly(e){this._readonly=e,this.input&&(this.input.readonly=e)}set value(e){this._value=e,this.input&&(this.input.value=e)}}export const geoJsonPointInputTemplateProvider=(e,t,r,a,n,s)=>{let p,d=!!(s&&s.disabled),m=!!(s&&s.readonly),c=!!(s&&s.compact),v=!!(s&&s.comfortable),_=new CenterControl,b=e=>{n&&(void 0!==e?n({value:e?h.getGeoJSONPoint(e):null}):n(void 0))},A=new CoordinatesControl(d,b);return{templateFunction:(t,r,a,n,s,M)=>{let k,w;t&&(k=(p=h.getLngLat(t))?Object.values(p):void 0);let E=k?k.join(", "):void 0;_.pos=p||void 0,A.readonly=d||m||n||a,A.value=E;let O=f(e),x=e=>{if(!m&&!d)if(p=e?h.getLngLat(e):null,w){let e=w.shadowRoot.getElementById("geo-json-point-marker");e.lng=p?p.lng:void 0,e.lat=p?p.lat:void 0,A.value=(k=p?Object.values(p):void 0)?k.join(", "):void 0}else b(p)},z=[[_,"bottom-left"],[A,"top-right"]];if(!m){let e=new l({positionOptions:{enableHighAccuracy:!0},showAccuracyCircle:!1,showUserLocation:!1});e.on("geolocate",e=>{x(new i(e.coords.longitude,e.coords.latitude))}),e.on("outofmaxbounds",e=>{x(new i(e.coords.longitude,e.coords.latitude))}),z.push([e,"bottom-left"])}let N=o`
+            <or-map id="geo-json-point-map" class="or-map" @or-map-long-press="${e=>{x(e.detail.lngLat)}}" .center="${k}" .controls="${z}" .showGeoCodingControl=${!m}>
+                <or-map-marker id="geo-json-point-marker" active .lng="${p?p.lng:void 0}" .lat="${p?p.lat:void 0}" .icon="${O?O.icon:void 0}" .activeColor="${O?"#"+O.color:void 0}" .colour="${O?"#"+O.color:void 0}"></or-map-marker>
+            </or-map>
+            <span class="long-press-msg">${C.t("longPressSetLoc")}</span>
+        `;if(c){let e=N;N=o`
+                <style>
+                    #geo-json-point-input-compact-wrapper {
+                        display: table-cell;
                     }
-                ]));
-            };
-            content = html `
-                <style>
-                    #geo-json-point-input-compact-wrapper {
-                        display: table-cell;
-                    }
-                    #geo-json-point-input-compact-wrapper > * {
-                        vertical-align: middle;
-                    }
-                </style>
-                <div id="geo-json-point-input-compact-wrapper">
-                    <or-mwc-input style="width: auto;" .comfortable="${comfortable}" .type="${InputType.TEXT}" .value="${centerStr}" .pattern="${CoordinatesRegexPattern}" @keyup="${(e) => getCoordinatesInputKeyHandler(valueChangeHandler)(e)}"></or-mwc-input>
-                    <or-mwc-input style="width: auto;" .type="${InputType.BUTTON}" compact icon="crosshairs-gps" @or-mwc-input-changed="${onClick}"></or-mwc-input>
-                </div>
-            `;
-        }
-        return content;
-    };
-    return {
-        templateFunction: templateFunction,
-        supportsHelperText: false,
-        supportsLabel: false,
-        supportsSendButton: false,
-        validator: () => !pos || (pos.lat !== undefined && pos.lat !== null && pos.lng !== undefined && pos.lng !== null)
-    };
-};
-let OrMap = class OrMap extends LitElement {
-    constructor() {
-        super();
-        this.type = manager.mapType;
-        this._markerStyles = [];
-        this.showGeoCodingControl = false;
-        this.showBoundaryBoxControl = false;
-        this.useZoomControl = true;
-        this.showGeoJson = true;
-        this.boundary = [];
-        this._loaded = false;
-        this._markers = [];
-        this.addEventListener(OrMapMarkerChangedEvent.NAME, this._onMarkerChangedEvent);
-    }
-    firstUpdated(_changedProperties) {
-        super.firstUpdated(_changedProperties);
-        if (manager.ready) {
-            this.loadMap();
-        }
-    }
-    get markers() {
-        return this._markers;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-    }
-    disconnectedCallback() {
-        var _a;
-        super.disconnectedCallback();
-        if (this._observer) {
-            this._observer.disconnect();
-        }
-        if (this._resizeObserver) {
-            this._resizeObserver.disconnect();
-        }
-        // Clean up of internal resources associated with the map
-        (_a = this._map) === null || _a === void 0 ? void 0 : _a.unload();
-    }
-    render() {
-        return html `
-            <div id="container">
-                <div id="map"></div>
-                <slot></slot>
-                <a id="openremote" href="https://openremote.io/" target="_blank">
-                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAAYagMeiWXwAAAAJiS0dEAP+Hj8y/AAAESUlEQVRIx5XVbWzdZRnH8c//f07POe36sK7SrYXZjYGzbBokOqd4QtKATdnMDFFSkoFzmWGRQOAFSoYnsBSzxBdmGsN4Y7LEFwZkUdHpDoja/AnJjBvp1sm2upW5PtAV+zBS+7Tz//tiLe0emPF+d9/39fvmunJf9+8K3HBF1drFzurVn5+5XkTwPwBNOt1s0pCjDnnT+Xzy/wOa5jaXnLLfLwzlF0WENwaYckyvUTHS1tnjl+6JFqk+JoMOqqy2JqjPVpXP1k7U1+Ty8paBPk97NX/pYwEdgZUetNkdlirDrHGnyv6y5r3lm4M2WVzwpJfz8XUBHTntnrJO6qqLWE9u/125zBNq0WebN/PXAjqq/cBOVWDasCEsd5MsmEzt/3xP+S6fwNsezPdfBejI6fCEDMa95oAT/t31pVxDQ6p6oy2WYSb18w0D2V3Klez2w3y8CNAR2G6vShxXUCxMkXLvS7Y6E/5+3emaJ92JqezzG+8M2nHW/flTi59xladU4phtfluYgnsDWUt8Nv7+8UfO73UUuenvDLxuCKu0RQt90BFo14wxzzpamD8uExtHSsu5HSP7XMCtZ5uTPyO0SdVCBlXahHjNG4WFrGY9Y4tXzODL7zb7NYJS64eHzWK92xYAa9yBKa8Wphf0xaQ4XOz0qF9JhMnXh//mIm4dnDSMOusWALepwQUnrm2t4pi9hrGyP+ccloxV6kOZFemoWi2mOpclaQycqGlt9R8XHS/GixinnVWvbDpjDEEpNpdnWrtd+HvZWzMQT9xjj1iXzUau6MPS9X9NKOeTmqzPpZWwfMkEKnza2ivimqxCKZjQa9BMmFI2D+gxibql4z7EiobYOSy1o7V6Xt1aYacGvD/7lse1+GZ9t0Zc8kHaGcOa1K6o+FePL1iy7K7wYHy70FZa9+qVWOm7tgslfpecKcy46GS0xXKM6g6d14VU+RfTnRJ8Y223w8j4tkMOOeR1j6nAMT8tzkCUcvlbn3ImbJn0RyWC+1af1Iv6ukcbf+aIRKDR3b5ipVCiy+PenaupWRsSfzCWim0ftUmdiqrJwWLpbmk3196UfXG0X6NKIWKDXva0I0UQZT2nRaDfc/mhgCj0PS9ImZzefbg5fliIvuTA++/0ZaYDTDqqpzhn6lHoW36iSuLHnslfCiBqdMBGDI6/0LUhfkgGiWFbC29c+epRaJMX3YJuD+R75l15wG4DaKh5dsPJsj0GXLaawavkWY/MyUcU/JOPHCkK7fAjNZiIf/PeX/vWx1814muF0Y/EKWs95mFVuKhgX352EYAoY5vnNSDRF/9p/MgHfQ2dldNIqbPeJm2aBBix20vzg26RpUUpLfb43FxZU4YMmEJGoxXKQeIfCg4uzMkrTDVitZ0ecst1B05i0Cv26Vk8H68JjFKabXa/Zkul5w5Lxp120EHdlyu/AQCiQI1P+YxaGcwY1+20kasnM/wXCa5/Ik1hKTEAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTktMDgtMjBUMTU6MTc6NTUrMDA6MDCwJSdSAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE5LTA4LTIwVDE1OjE3OjU1KzAwOjAwwXif7gAAAABJRU5ErkJggg==" />
-                </a>
-            </div>
-        `;
-    }
-    updated(changedProperties) {
-        var _a;
-        super.updated(changedProperties);
-        if (changedProperties.has("center") || changedProperties.has("zoom")) {
-            this.flyTo(this.center, this.zoom);
-        }
-        if (changedProperties.has("boundary") && this.showBoundaryBoxControl) {
-            (_a = this._map) === null || _a === void 0 ? void 0 : _a.createBoundaryBox(this.boundary);
-        }
-    }
-    refresh() {
-        if (this._map) {
-            this._map.loadViewSettings().then(() => {
-                if (!this._map)
-                    return;
-                this._map.setCenter();
-                this._map.flyTo();
-            });
-        }
-    }
-    loadMap() {
-        if (this._loaded) {
-            return;
-        }
-        if (this._mapContainer && this._slotElement) {
-            this._map = new MapWidget(this.type, this.shadowRoot, this._mapContainer, this.showGeoCodingControl, this.showBoundaryBoxControl, this.useZoomControl, this.showGeoJson)
-                .setCenter(this.center)
-                .setZoom(this.zoom)
-                .setControls(this.controls)
-                .setGeoJson(this.geoJson);
-            this._map.load().then(() => {
-                var _a, _b;
-                // Get markers from slot
-                this._observer = new FlattenedNodesObserver(this._slotElement, (info) => {
-                    this._processNewMarkers(info.addedNodes);
-                    this._processRemovedMarkers(info.removedNodes);
-                });
-                (_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-                this._resizeObserver = new ResizeObserver(debounce(() => {
-                    this.resize();
-                }, 200));
-                var container = (_b = this._mapContainer) === null || _b === void 0 ? void 0 : _b.parentElement;
-                if (container) {
-                    this._resizeObserver.observe(container);
-                }
-            });
-        }
-        this._loaded = true;
-    }
-    resize() {
-        if (this._map) {
-            this._map.resize();
-        }
-    }
-    flyTo(coordinates, zoom) {
-        if (this._map) {
-            this._map.flyTo(coordinates, zoom);
-        }
-    }
-    _onMarkerChangedEvent(evt) {
-        if (this._map) {
-            this._map.onMarkerChanged(evt.detail.marker, evt.detail.property);
-        }
-    }
-    _processNewMarkers(nodes) {
-        nodes.forEach((node) => {
-            if (!this._map) {
-                return;
-            }
-            if (node instanceof OrMapMarker) {
-                this._markers.push(node);
-                // Add styles of marker class to the shadow root if not already added
-                const className = node.constructor.name;
-                if (this._markerStyles.indexOf(className) < 0) {
-                    const styles = node.constructor.styles;
-                    let stylesArr = [];
-                    if (styles) {
-                        if (!Array.isArray(styles)) {
-                            stylesArr.push(styles);
-                        }
-                        else {
-                            stylesArr = styles;
-                        }
-                        stylesArr.forEach((styleItem) => {
-                            const styleElem = document.createElement("style");
-                            styleElem.textContent = String(styleItem.toString());
-                            if (this._mapContainer.children.length > 0) {
-                                this._mapContainer.insertBefore(styleElem, this._mapContainer.children[0]);
-                            }
-                            else {
-                                this._mapContainer.appendChild(styleElem);
-                            }
-                        });
+                    #geo-json-point-input-compact-wrapper > * {
+                        vertical-align: middle;
                     }
-                    this._markerStyles.push(className);
-                }
-                this._map.addMarker(node);
-            }
-        });
-    }
-    _processRemovedMarkers(nodes) {
-        nodes.forEach((node) => {
-            if (!this._map) {
-                return;
-            }
-            if (node instanceof OrMapMarker) {
-                const i = this._markers.indexOf(node);
-                if (i >= 0) {
-                    this._markers.splice(i, 1);
-                }
-                this._map.removeMarker(node);
-            }
-        });
-    }
-};
-OrMap.styles = style;
-__decorate([
-    property({ type: String })
-], OrMap.prototype, "type", void 0);
-__decorate([
-    property({ type: String, converter: {
-            fromAttribute(value, type) {
-                if (!value) {
-                    return;
-                }
-                const coords = value.split(",");
-                if (coords.length !== 2) {
-                    return;
-                }
-                const lng = Number(coords[0]);
-                const lat = Number(coords[1]);
-                return new LngLat(lng, lat);
-            },
-            toAttribute(value, type) {
-                const lngLat = Util.getLngLat(value);
-                if (!lngLat) {
-                    return "";
-                }
-                return "" + lngLat.lng + "," + lngLat.lat;
-            }
-        } })
-], OrMap.prototype, "center", void 0);
-__decorate([
-    property({ type: Number })
-], OrMap.prototype, "zoom", void 0);
-__decorate([
-    property({ type: Boolean })
-], OrMap.prototype, "showGeoCodingControl", void 0);
-__decorate([
-    property({ type: Boolean })
-], OrMap.prototype, "showBoundaryBoxControl", void 0);
-__decorate([
-    property({ type: Boolean })
-], OrMap.prototype, "useZoomControl", void 0);
-__decorate([
-    property({ type: Object })
-], OrMap.prototype, "geoJson", void 0);
-__decorate([
-    property({ type: Boolean })
-], OrMap.prototype, "showGeoJson", void 0);
-__decorate([
-    property({ type: Array })
-], OrMap.prototype, "boundary", void 0);
-__decorate([
-    query("#map")
-], OrMap.prototype, "_mapContainer", void 0);
-__decorate([
-    query("slot")
-], OrMap.prototype, "_slotElement", void 0);
-OrMap = __decorate([
-    customElement("or-map")
-], OrMap);
-export { OrMap };
-//# sourceMappingURL=index.js.map
+                </style>
+                <div id="geo-json-point-input-compact-wrapper">
+                    <or-mwc-input style="width: auto;" .comfortable="${v}" .type="${u.TEXT}" .value="${E}" .pattern="${CoordinatesRegexPattern}" @keyup="${e=>getCoordinatesInputKeyHandler(b)(e)}"></or-mwc-input>
+                    <or-mwc-input style="width: auto;" .type="${u.BUTTON}" compact icon="crosshairs-gps" @or-mwc-input-changed="${()=>{w=y(new g().setContent(e).setStyles(o`
+                            <style>
+                                .dialog-container {
+                                    flex-direction: column !important;
+                                }
+                                .dialog-container .long-press-msg {
+                                    display: block;
+                                    text-align: center;
+                                }
+                                or-map {
+                                    width: 600px !important;
+                                    min-height: 600px !important;
+                                }
+                            </style>
+                        `).setActions([{actionName:"none",content:"none",action:()=>{x(null),b(p)}},{actionName:"ok",content:"ok",action:()=>{b(p)}},{default:!0,actionName:"cancel",content:"cancel"}]))}}"></or-mwc-input>
+                </div>
+            `}return N},supportsHelperText:!1,supportsLabel:!1,supportsSendButton:!1,validator:()=>!p||void 0!==p.lat&&null!==p.lat&&void 0!==p.lng&&null!==p.lng}};let OrMap=class extends r{constructor(){super(),this.type=e.mapType,this._markerStyles=[],this.showGeoCodingControl=!1,this.showBoundaryBoxControl=!1,this.useZoomControl=!0,this.showGeoJson=!0,this.boundary=[],this._loaded=!1,this._markers=[],this.addEventListener(c.NAME,this._onMarkerChangedEvent)}firstUpdated(t){super.firstUpdated(t),e.ready&&this.loadMap()}get markers(){return this._markers}connectedCallback(){super.connectedCallback()}disconnectedCallback(){var e;super.disconnectedCallback(),this._observer&&this._observer.disconnect(),this._resizeObserver&&this._resizeObserver.disconnect(),null==(e=this._map)||e.unload()}render(){return o`
+            <div id="container">
+                <div id="map"></div>
+                <slot></slot>
+                <a id="openremote" href="https://openremote.io/" target="_blank">
+                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAAYagMeiWXwAAAAJiS0dEAP+Hj8y/AAAESUlEQVRIx5XVbWzdZRnH8c//f07POe36sK7SrYXZjYGzbBokOqd4QtKATdnMDFFSkoFzmWGRQOAFSoYnsBSzxBdmGsN4Y7LEFwZkUdHpDoja/AnJjBvp1sm2upW5PtAV+zBS+7Tz//tiLe0emPF+d9/39fvmunJf9+8K3HBF1drFzurVn5+5XkTwPwBNOt1s0pCjDnnT+Xzy/wOa5jaXnLLfLwzlF0WENwaYckyvUTHS1tnjl+6JFqk+JoMOqqy2JqjPVpXP1k7U1+Ty8paBPk97NX/pYwEdgZUetNkdlirDrHGnyv6y5r3lm4M2WVzwpJfz8XUBHTntnrJO6qqLWE9u/125zBNq0WebN/PXAjqq/cBOVWDasCEsd5MsmEzt/3xP+S6fwNsezPdfBejI6fCEDMa95oAT/t31pVxDQ6p6oy2WYSb18w0D2V3Klez2w3y8CNAR2G6vShxXUCxMkXLvS7Y6E/5+3emaJ92JqezzG+8M2nHW/flTi59xladU4phtfluYgnsDWUt8Nv7+8UfO73UUuenvDLxuCKu0RQt90BFo14wxzzpamD8uExtHSsu5HSP7XMCtZ5uTPyO0SdVCBlXahHjNG4WFrGY9Y4tXzODL7zb7NYJS64eHzWK92xYAa9yBKa8Wphf0xaQ4XOz0qF9JhMnXh//mIm4dnDSMOusWALepwQUnrm2t4pi9hrGyP+ccloxV6kOZFemoWi2mOpclaQycqGlt9R8XHS/GixinnVWvbDpjDEEpNpdnWrtd+HvZWzMQT9xjj1iXzUau6MPS9X9NKOeTmqzPpZWwfMkEKnza2ivimqxCKZjQa9BMmFI2D+gxibql4z7EiobYOSy1o7V6Xt1aYacGvD/7lse1+GZ9t0Zc8kHaGcOa1K6o+FePL1iy7K7wYHy70FZa9+qVWOm7tgslfpecKcy46GS0xXKM6g6d14VU+RfTnRJ8Y223w8j4tkMOOeR1j6nAMT8tzkCUcvlbn3ImbJn0RyWC+1af1Iv6ukcbf+aIRKDR3b5ipVCiy+PenaupWRsSfzCWim0ftUmdiqrJwWLpbmk3196UfXG0X6NKIWKDXva0I0UQZT2nRaDfc/mhgCj0PS9ImZzefbg5fliIvuTA++/0ZaYDTDqqpzhn6lHoW36iSuLHnslfCiBqdMBGDI6/0LUhfkgGiWFbC29c+epRaJMX3YJuD+R75l15wG4DaKh5dsPJsj0GXLaawavkWY/MyUcU/JOPHCkK7fAjNZiIf/PeX/vWx1814muF0Y/EKWs95mFVuKhgX352EYAoY5vnNSDRF/9p/MgHfQ2dldNIqbPeJm2aBBix20vzg26RpUUpLfb43FxZU4YMmEJGoxXKQeIfCg4uzMkrTDVitZ0ecst1B05i0Cv26Vk8H68JjFKabXa/Zkul5w5Lxp120EHdlyu/AQCiQI1P+YxaGcwY1+20kasnM/wXCa5/Ik1hKTEAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTktMDgtMjBUMTU6MTc6NTUrMDA6MDCwJSdSAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE5LTA4LTIwVDE1OjE3OjU1KzAwOjAwwXif7gAAAABJRU5ErkJggg==" />
+                </a>
+            </div>
+        `}updated(e){var t;super.updated(e),(e.has("center")||e.has("zoom"))&&this.flyTo(this.center,this.zoom),e.has("boundary")&&this.showBoundaryBoxControl&&(null==(t=this._map)||t.createBoundaryBox(this.boundary))}refresh(){this._map&&this._map.loadViewSettings().then(()=>{this._map&&(this._map.setCenter(),this._map.flyTo())})}loadMap(){this._loaded||(this._mapContainer&&this._slotElement&&(this._map=new p(this.type,this.shadowRoot,this._mapContainer,this.showGeoCodingControl,this.showBoundaryBoxControl,this.useZoomControl,this.showGeoJson).setCenter(this.center).setZoom(this.zoom).setControls(this.controls).setGeoJson(this.geoJson),this._map.load().then(()=>{this._observer=new t(this._slotElement,e=>{this._processNewMarkers(e.addedNodes),this._processRemovedMarkers(e.removedNodes)}),null==(e=this._resizeObserver)||e.disconnect(),this._resizeObserver=new ResizeObserver(_(()=>{this.resize()},200));var e,o,r=null==(o=this._mapContainer)?void 0:o.parentElement;r&&this._resizeObserver.observe(r)})),this._loaded=!0)}resize(){this._map&&this._map.resize()}flyTo(e,t){this._map&&this._map.flyTo(e,t)}_onMarkerChangedEvent(e){this._map&&this._map.onMarkerChanged(e.detail.marker,e.detail.property)}_processNewMarkers(e){e.forEach(e=>{if(this._map&&e instanceof m){this._markers.push(e);let t=e.constructor.name;if(0>this._markerStyles.indexOf(t)){let o=e.constructor.styles,r=[];o&&(Array.isArray(o)?r=o:r.push(o),r.forEach(e=>{let t=document.createElement("style");t.textContent=String(e.toString()),this._mapContainer.children.length>0?this._mapContainer.insertBefore(t,this._mapContainer.children[0]):this._mapContainer.appendChild(t)})),this._markerStyles.push(t)}this._map.addMarker(e)}})}_processRemovedMarkers(e){e.forEach(e=>{if(this._map&&e instanceof m){let t=this._markers.indexOf(e);t>=0&&this._markers.splice(t,1),this._map.removeMarker(e)}})}};OrMap.styles=d,__decorate([n({type:String})],OrMap.prototype,"type",void 0),__decorate([n({type:String,converter:{fromAttribute(e,t){if(!e)return;let o=e.split(",");if(2===o.length)return new i(Number(o[0]),Number(o[1]))},toAttribute(e,t){let o=h.getLngLat(e);return o?""+o.lng+","+o.lat:""}}})],OrMap.prototype,"center",void 0),__decorate([n({type:Number})],OrMap.prototype,"zoom",void 0),__decorate([n({type:Boolean})],OrMap.prototype,"showGeoCodingControl",void 0),__decorate([n({type:Boolean})],OrMap.prototype,"showBoundaryBoxControl",void 0),__decorate([n({type:Boolean})],OrMap.prototype,"useZoomControl",void 0),__decorate([n({type:Object})],OrMap.prototype,"geoJson",void 0),__decorate([n({type:Boolean})],OrMap.prototype,"showGeoJson",void 0),__decorate([n({type:Array})],OrMap.prototype,"boundary",void 0),__decorate([s("#map")],OrMap.prototype,"_mapContainer",void 0),__decorate([s("slot")],OrMap.prototype,"_slotElement",void 0),OrMap=__decorate([a("or-map")],OrMap);export{h as Util,OrMap};

package/lib/mapbox-url-utils.js

@@ -1,66 +1 @@
-export function isMapboxURL(url) {
-    return url.indexOf("mapbox:") === 0;
-}
-export function transformMapboxUrl(url, accessToken, resourceType) {
-    if (url.indexOf("/styles/") > -1 && url.indexOf("/sprite") === -1)
-        return { url: normalizeStyleURL(url, accessToken) };
-    if (url.indexOf("/sprites/") > -1)
-        return { url: normalizeSpriteURL(url, accessToken) };
-    if (url.indexOf("/fonts/") > -1)
-        return { url: normalizeGlyphsURL(url, accessToken) };
-    if (url.indexOf("/v4/") > -1)
-        return { url: normalizeSourceURL(url, accessToken) };
-    if (resourceType === "Source" /* ResourceType.Source */)
-        return { url: normalizeSourceURL(url, accessToken) };
-}
-function parseUrl(url) {
-    const urlRe = /^(\w+):\/\/([^/?]*)(\/[^?]+)?\??(.+)?/;
-    const parts = url.match(urlRe);
-    if (!parts) {
-        throw new Error("Unable to parse URL object");
-    }
-    return {
-        protocol: parts[1],
-        authority: parts[2],
-        path: parts[3] || "/",
-        params: parts[4] ? parts[4].split("&") : [],
-    };
-}
-function formatUrl(urlObject, accessToken) {
-    const apiUrlObject = parseUrl("https://api.mapbox.com");
-    urlObject.protocol = apiUrlObject.protocol;
-    urlObject.authority = apiUrlObject.authority;
-    urlObject.params.push(`access_token=${accessToken}`);
-    const params = urlObject.params.length ? `?${urlObject.params.join("&")}` : "";
-    return `${urlObject.protocol}://${urlObject.authority}${urlObject.path}${params}`;
-}
-function normalizeStyleURL(url, accessToken) {
-    const urlObject = parseUrl(url);
-    urlObject.path = `/styles/v1${urlObject.path}`;
-    return formatUrl(urlObject, accessToken);
-}
-function normalizeGlyphsURL(url, accessToken) {
-    const urlObject = parseUrl(url);
-    urlObject.path = `/fonts/v1${urlObject.path}`;
-    return formatUrl(urlObject, accessToken);
-}
-function normalizeSourceURL(url, accessToken) {
-    const urlObject = parseUrl(url);
-    urlObject.path = `/v4/${urlObject.authority}.json`;
-    urlObject.params.push("secure");
-    return formatUrl(urlObject, accessToken);
-}
-function normalizeSpriteURL(url, accessToken) {
-    const urlObject = parseUrl(url);
-    const path = urlObject.path.split(".");
-    let properPath = path[0];
-    const extension = path[1];
-    let format = "";
-    if (properPath.indexOf("@2x")) {
-        properPath = properPath.split("@2x")[0];
-        format = "@2x";
-    }
-    urlObject.path = `/styles/v1${properPath}/sprite${format}.${extension}`;
-    return formatUrl(urlObject, accessToken);
-}
-//# sourceMappingURL=mapbox-url-utils.js.map
+export function isMapboxURL(r){return 0===r.indexOf("mapbox:")}export function transformMapboxUrl(r,t,e){return r.indexOf("/styles/")>-1&&-1===r.indexOf("/sprite")?{url:normalizeStyleURL(r,t)}:r.indexOf("/sprites/")>-1?{url:normalizeSpriteURL(r,t)}:r.indexOf("/fonts/")>-1?{url:normalizeGlyphsURL(r,t)}:r.indexOf("/v4/")>-1||"Source"===e?{url:normalizeSourceURL(r,t)}:void 0}function parseUrl(r){let t=r.match(/^(\w+):\/\/([^/?]*)(\/[^?]+)?\??(.+)?/);if(!t)throw Error("Unable to parse URL object");return{protocol:t[1],authority:t[2],path:t[3]||"/",params:t[4]?t[4].split("&"):[]}}function formatUrl(r,t){let e=parseUrl("https://api.mapbox.com");r.protocol=e.protocol,r.authority=e.authority,r.params.push(`access_token=${t}`);let o=r.params.length?`?${r.params.join("&")}`:"";return`${r.protocol}://${r.authority}${r.path}${o}`}function normalizeStyleURL(r,t){let e=parseUrl(r);return e.path=`/styles/v1${e.path}`,formatUrl(e,t)}function normalizeGlyphsURL(r,t){let e=parseUrl(r);return e.path=`/fonts/v1${e.path}`,formatUrl(e,t)}function normalizeSourceURL(r,t){let e=parseUrl(r);return e.path=`/v4/${e.authority}.json`,e.params.push("secure"),formatUrl(e,t)}function normalizeSpriteURL(r,t){let e=parseUrl(r),o=e.path.split("."),a=o[0],l=o[1],n="";return a.indexOf("@2x")&&(a=a.split("@2x")[0],n="@2x"),e.path=`/styles/v1${a}/sprite${n}.${l}`,formatUrl(e,t)}