@sanity/google-maps-input 2.30.2-shopify.2 → 3.0.0-studio-v3.0

package/lib/esm/index.js

@@ -0,0 +1,889 @@
+import {jsx as $5lYf0$jsx, jsxs as $5lYf0$jsxs, Fragment as $5lYf0$Fragment} from "react/jsx-runtime";
+import $5lYf0$react, {createRef as $5lYf0$createRef, PureComponent as $5lYf0$PureComponent, useRef as $5lYf0$useRef} from "react";
+import {createPlugin as $5lYf0$createPlugin} from "sanity";
+import {uniqueId as $5lYf0$uniqueId} from "lodash";
+import {Box as $5lYf0$Box, Grid as $5lYf0$Grid, Button as $5lYf0$Button, Dialog as $5lYf0$Dialog, Card as $5lYf0$Card, Text as $5lYf0$Text, Code as $5lYf0$Code, TextInput as $5lYf0$TextInput} from "@sanity/ui";
+import {EditIcon as $5lYf0$EditIcon, TrashIcon as $5lYf0$TrashIcon} from "@sanity/icons";
+import {ChangeIndicatorCompareValueProvider as $5lYf0$ChangeIndicatorCompareValueProvider, ChangeIndicator as $5lYf0$ChangeIndicator, useUserColor as $5lYf0$useUserColor, getAnnotationAtPath as $5lYf0$getAnnotationAtPath, DiffTooltip as $5lYf0$DiffTooltip} from "sanity/_unstable";
+import {setIfMissing as $5lYf0$setIfMissing, set as $5lYf0$set, unset as $5lYf0$unset} from "sanity/form";
+import {BehaviorSubject as $5lYf0$BehaviorSubject} from "rxjs";
+import $5lYf0$styledcomponents from "styled-components";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const $7de14c1cb94a5306$var$callbackName = "___sanity_googleMapsApiCallback";
+const $7de14c1cb94a5306$var$authFailureCallbackName = "gm_authFailure";
+const $7de14c1cb94a5306$var$locale = typeof window !== "undefined" && window.navigator.language || "en";
+let $7de14c1cb94a5306$var$subject;
+function $7de14c1cb94a5306$export$616f2ff2d07a5991(config) {
+    const selectedLocale = config.defaultLocale || $7de14c1cb94a5306$var$locale || "en-US";
+    if ($7de14c1cb94a5306$var$subject) return $7de14c1cb94a5306$var$subject;
+    $7de14c1cb94a5306$var$subject = new (0, $5lYf0$BehaviorSubject)({
+        loadState: "loading"
+    });
+    window[$7de14c1cb94a5306$var$authFailureCallbackName] = ()=>{
+        delete window[$7de14c1cb94a5306$var$authFailureCallbackName];
+        $7de14c1cb94a5306$var$subject.next({
+            loadState: "authError"
+        });
+    };
+    window[$7de14c1cb94a5306$var$callbackName] = ()=>{
+        delete window[$7de14c1cb94a5306$var$callbackName];
+        $7de14c1cb94a5306$var$subject.next({
+            loadState: "loaded",
+            api: window.google.maps
+        });
+    };
+    const script = document.createElement("script");
+    script.onerror = (event, source, lineno, colno, error)=>$7de14c1cb94a5306$var$subject.next({
+            loadState: "loadError",
+            error: $7de14c1cb94a5306$var$coeerceError(event, error)
+        });
+    script.src = `https://maps.googleapis.com/maps/api/js?key=${config.apiKey}&libraries=places&callback=${$7de14c1cb94a5306$var$callbackName}&language=${selectedLocale}`;
+    document.getElementsByTagName("head")[0].appendChild(script);
+    return $7de14c1cb94a5306$var$subject;
+}
+function $7de14c1cb94a5306$var$coeerceError(event, error) {
+    if (error) return error;
+    if (typeof event === "string") return new Error(event);
+    return new Error($7de14c1cb94a5306$var$isErrorEvent(event) ? event.message : "Failed to load Google Maps API");
+}
+function $7de14c1cb94a5306$var$isErrorEvent(event) {
+    if (typeof event !== "object" || event === null) return false;
+    if (!("message" in event)) return false;
+    return typeof event.message === "string";
+}
+
+
+
+
+
+function $efb01f3a0d3b9892$export$58a097931cd8d64d(props) {
+    return /*#__PURE__*/ (0, $5lYf0$jsxs)((0, $5lYf0$Card), {
+        tone: "critical",
+        radius: 1,
+        children: [
+            /*#__PURE__*/ (0, $5lYf0$jsx)((0, $5lYf0$Box), {
+                as: "header",
+                paddingX: 4,
+                paddingTop: 4,
+                paddingBottom: 1,
+                children: /*#__PURE__*/ (0, $5lYf0$jsx)((0, $5lYf0$Text), {
+                    as: "h2",
+                    weight: "bold",
+                    children: "Google Maps failed to load"
+                })
+            }),
+            /*#__PURE__*/ (0, $5lYf0$jsx)((0, $5lYf0$Box), {
+                paddingX: 4,
+                paddingTop: 4,
+                paddingBottom: 1,
+                children: props.isAuthError ? /*#__PURE__*/ (0, $5lYf0$jsx)($efb01f3a0d3b9892$var$AuthError, {}) : /*#__PURE__*/ (0, $5lYf0$jsxs)((0, $5lYf0$Fragment), {
+                    children: [
+                        /*#__PURE__*/ (0, $5lYf0$jsx)((0, $5lYf0$Text), {
+                            as: "h3",
+                            children: "Error details:"
+                        }),
+                        /*#__PURE__*/ (0, $5lYf0$jsx)("pre", {
+                            children: /*#__PURE__*/ (0, $5lYf0$jsx)((0, $5lYf0$Code), {
+                                size: 1,
+                                children: "error" in props && props.error?.message
+                            })
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+function $efb01f3a0d3b9892$var$AuthError() {
+    return /*#__PURE__*/ (0, $5lYf0$jsxs)((0, $5lYf0$Text), {
+        children: [
+            /*#__PURE__*/ (0, $5lYf0$jsx)("p", {
+                children: "The error appears to be related to authentication"
+            }),
+            /*#__PURE__*/ (0, $5lYf0$jsx)("p", {
+                children: "Common causes include:"
+            }),
+            /*#__PURE__*/ (0, $5lYf0$jsxs)("ul", {
+                children: [
+                    /*#__PURE__*/ (0, $5lYf0$jsx)("li", {
+                        children: "Incorrect API key"
+                    }),
+                    /*#__PURE__*/ (0, $5lYf0$jsx)("li", {
+                        children: "Referer not allowed"
+                    }),
+                    /*#__PURE__*/ (0, $5lYf0$jsx)("li", {
+                        children: "Missing authentication scope"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, $5lYf0$jsx)("p", {
+                children: "Check the browser developer tools for more information."
+            })
+        ]
+    });
+}
+
+
+class $862a9c6e30a57b1f$export$a628545bcf173896 extends (0, $5lYf0$react).Component {
+    constructor(props){
+        super(props);
+        this.state = {
+            loadState: "loading"
+        };
+        let sync = true;
+        this.loadSubscription = (0, $7de14c1cb94a5306$export$616f2ff2d07a5991)(props.config).subscribe((loadState)=>{
+            if (sync) this.state = loadState;
+            else this.setState(loadState);
+        });
+        sync = false;
+    }
+    componentWillUnmount() {
+        if (this.loadSubscription) this.loadSubscription.unsubscribe();
+    }
+    render() {
+        switch(this.state.loadState){
+            case "loadError":
+                return /*#__PURE__*/ (0, $5lYf0$jsx)((0, $efb01f3a0d3b9892$export$58a097931cd8d64d), {
+                    error: this.state.error,
+                    isAuthError: false
+                });
+            case "authError":
+                return /*#__PURE__*/ (0, $5lYf0$jsx)((0, $efb01f3a0d3b9892$export$58a097931cd8d64d), {
+                    isAuthError: true
+                });
+            case "loading":
+                return /*#__PURE__*/ (0, $5lYf0$jsx)("div", {
+                    children: "Loading Google Maps API"
+                });
+            case "loaded":
+                return this.props.children(this.state.api) || null;
+            default:
+                return null;
+        }
+    }
+}
+
+
+
+
+
+
+
+
+const $5c991a2fcf24c629$export$be3daefb18c346ac = (0, $5lYf0$styledcomponents).div`
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  width: 220px;
+`;
+
+
+class $354d993ba05f8e01$export$55d7609a8f1eccd2 extends $5lYf0$PureComponent {
+    searchInputRef = /*#__PURE__*/ $5lYf0$createRef();
+    handleChange = ()=>{
+        if (!this.autoComplete) return;
+        this.props.onChange(this.autoComplete.getPlace());
+        if (this.searchInputRef.current) this.searchInputRef.current.value = "";
+    };
+    componentDidMount() {
+        const input = this.searchInputRef.current;
+        if (!input) return;
+        const { api: api , map: map  } = this.props;
+        const { Circle: Circle , places: places , event: event  } = api;
+        const searchBounds = new Circle({
+            center: map.getCenter(),
+            radius: 100
+        }).getBounds();
+        this.autoComplete = new places.Autocomplete(input, {
+            bounds: searchBounds,
+            types: []
+        });
+        event.addListener(this.autoComplete, "place_changed", this.handleChange);
+    }
+    render() {
+        return /*#__PURE__*/ (0, $5lYf0$jsx)((0, $5c991a2fcf24c629$export$be3daefb18c346ac), {
+            children: /*#__PURE__*/ (0, $5lYf0$jsx)((0, $5lYf0$TextInput), {
+                name: "place",
+                ref: this.searchInputRef,
+                placeholder: "Search for place or address",
+                padding: 4
+            })
+        });
+    }
+}
+
+
+
+
+function $f571c8b2d59e5edf$export$ad553d4d3a617f20(latLng1, latLng2) {
+    const lat1 = typeof latLng1.lat === "function" ? latLng1.lat() : latLng1.lat;
+    const lng1 = typeof latLng1.lng === "function" ? latLng1.lng() : latLng1.lng;
+    const lat2 = typeof latLng2.lat === "function" ? latLng2.lat() : latLng2.lat;
+    const lng2 = typeof latLng2.lng === "function" ? latLng2.lng() : latLng2.lng;
+    return lat1 === lat2 && lng1 === lng2;
+}
+
+
+
+const $618c2b5ee41e00b5$export$23f3dfd47374502b = (0, $5lYf0$styledcomponents).div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+`;
+
+
+class $5d3c0bf5e83fb1b4$export$4ad1bae46276c5ce extends (0, $5lYf0$react).PureComponent {
+    static defaultProps = {
+        defaultZoom: 8,
+        scrollWheel: true
+    };
+    state = {
+        map: undefined
+    };
+    mapRef = /*#__PURE__*/ (0, $5lYf0$react).createRef();
+    mapEl = null;
+    componentDidMount() {
+        this.attachClickHandler();
+    }
+    attachClickHandler = ()=>{
+        const map = this.state.map;
+        if (!map) return;
+        const { api: api , onClick: onClick  } = this.props;
+        const { event: event  } = api;
+        if (this.clickHandler) this.clickHandler.remove();
+        if (onClick) this.clickHandler = event.addListener(map, "click", onClick);
+    };
+    componentDidUpdate(prevProps) {
+        const map = this.state.map;
+        if (!map) return;
+        const { onClick: onClick , location: location , bounds: bounds  } = this.props;
+        if (prevProps.onClick !== onClick) this.attachClickHandler();
+        if (!(0, $f571c8b2d59e5edf$export$ad553d4d3a617f20)(prevProps.location, location)) map.panTo(this.getCenter());
+        if (bounds && (!prevProps.bounds || !bounds.equals(prevProps.bounds))) map.fitBounds(bounds);
+    }
+    componentWillUnmount() {
+        if (this.clickHandler) this.clickHandler.remove();
+    }
+    getCenter() {
+        const { location: location , api: api  } = this.props;
+        return new api.LatLng(location.lat, location.lng);
+    }
+    constructMap(el) {
+        const { defaultZoom: defaultZoom , api: api , mapTypeControl: mapTypeControl , controlSize: controlSize , bounds: bounds , scrollWheel: scrollWheel  } = this.props;
+        const map = new api.Map(el, {
+            zoom: defaultZoom,
+            center: this.getCenter(),
+            scrollwheel: scrollWheel,
+            streetViewControl: false,
+            mapTypeControl: mapTypeControl,
+            controlSize: controlSize
+        });
+        if (bounds) map.fitBounds(bounds);
+        return map;
+    }
+    setMapElement = (element)=>{
+        if (element && element !== this.mapEl) {
+            const map = this.constructMap(element);
+            this.setState({
+                map: map
+            }, this.attachClickHandler);
+        }
+        this.mapEl = element;
+    };
+    render() {
+        const { children: children  } = this.props;
+        const { map: map  } = this.state;
+        return /*#__PURE__*/ (0, $5lYf0$jsxs)((0, $5lYf0$Fragment), {
+            children: [
+                /*#__PURE__*/ (0, $5lYf0$jsx)((0, $618c2b5ee41e00b5$export$23f3dfd47374502b), {
+                    ref: this.setMapElement
+                }),
+                children && map ? children(map) : null
+            ]
+        });
+    }
+}
+
+
+
+
+const $6193422e35c36794$var$markerPath = "M 3.052 3.7 C 1.56 5.293 0.626 7.612 0.663 9.793 C 0.738 14.352 2.793 16.077 6.078 22.351 C 7.263 25.111 8.497 28.032 9.672 32.871 C 9.835 33.584 9.994 34.246 10.069 34.305 C 10.143 34.362 10.301 33.697 10.465 32.983 C 11.639 28.145 12.875 25.226 14.059 22.466 C 17.344 16.192 19.398 14.466 19.474 9.908 C 19.511 7.727 18.574 5.405 17.083 3.814 C 15.379 1.994 12.809 0.649 10.069 0.593 C 7.328 0.536 4.756 1.882 3.052 3.7 Z";
+class $6193422e35c36794$export$e98856a975cab58e extends $5lYf0$PureComponent {
+    eventHandlers = {};
+    componentDidMount() {
+        const { position: position , api: api , map: map , onMove: onMove , zIndex: zIndex , opacity: opacity , label: label , markerRef: markerRef , color: color  } = this.props;
+        const { Marker: GMarker  } = api;
+        let icon;
+        if (color) icon = {
+            path: $6193422e35c36794$var$markerPath,
+            fillOpacity: 1,
+            fillColor: color.background,
+            strokeColor: color.border,
+            strokeWeight: 2,
+            anchor: new api.Point(10, 35),
+            labelOrigin: new api.Point(10, 11)
+        };
+        this.marker = new GMarker({
+            draggable: Boolean(onMove),
+            position: position,
+            map: map,
+            zIndex: zIndex,
+            opacity: opacity,
+            label: label,
+            icon: icon
+        });
+        if (markerRef) markerRef.current = this.marker;
+        this.attachMoveHandler();
+        this.attachClickHandler();
+    }
+    componentDidUpdate(prevProps) {
+        if (!this.marker) return;
+        const { position: position , onMove: onMove , label: label , zIndex: zIndex , opacity: opacity , map: map  } = this.props;
+        if (prevProps.onMove !== onMove) this.attachMoveHandler();
+        if (!(0, $f571c8b2d59e5edf$export$ad553d4d3a617f20)(prevProps.position, position)) this.marker.setPosition(position);
+        if (prevProps.label !== label) this.marker.setLabel(label || null);
+        if (prevProps.zIndex !== zIndex) this.marker.setZIndex(zIndex || null);
+        if (prevProps.opacity !== opacity) this.marker.setOpacity(opacity || null);
+        if (prevProps.map !== map) this.marker.setMap(map);
+    }
+    componentWillUnmount() {
+        if (this.eventHandlers.move) this.eventHandlers.move.remove();
+        if (this.marker) this.marker.setMap(null);
+    }
+    attachMoveHandler() {
+        const { api: api , onMove: onMove  } = this.props;
+        if (this.eventHandlers.move) this.eventHandlers.move.remove();
+        if (this.marker && onMove) this.eventHandlers.move = api.event.addListener(this.marker, "dragend", onMove);
+    }
+    attachClickHandler() {
+        const { api: api , onClick: onClick  } = this.props;
+        if (this.eventHandlers.click) this.eventHandlers.click.remove();
+        if (this.marker && onClick) this.eventHandlers.click = api.event.addListener(this.marker, "click", onClick);
+    }
+    // eslint-disable-next-line class-methods-use-this
+    render() {
+        return null;
+    }
+}
+
+
+const $7b11e9c5cc854a7a$var$fallbackLatLng = {
+    lat: 40.7058254,
+    lng: -74.1180863
+};
+class $7b11e9c5cc854a7a$export$9a2476e65b6b92a7 extends (0, $5lYf0$react).PureComponent {
+    static defaultProps = {
+        defaultZoom: 8,
+        defaultLocation: {
+            lng: 10.74609,
+            lat: 59.91273
+        }
+    };
+    mapRef = /*#__PURE__*/ (0, $5lYf0$react).createRef();
+    getCenter() {
+        const { value: value = {} , defaultLocation: defaultLocation = {}  } = this.props;
+        const point = {
+            ...$7b11e9c5cc854a7a$var$fallbackLatLng,
+            ...defaultLocation,
+            ...value
+        };
+        return point;
+    }
+    handlePlaceChanged = (place)=>{
+        if (!place.geometry?.location) return;
+        this.setValue(place.geometry.location);
+    };
+    handleMarkerDragEnd = (event)=>{
+        if (event.latLng) this.setValue(event.latLng);
+    };
+    handleMapClick = (event)=>{
+        if (event.latLng) this.setValue(event.latLng);
+    };
+    setValue(geoPoint) {
+        if (this.props.onChange) this.props.onChange(geoPoint);
+    }
+    render() {
+        const { api: api , defaultZoom: defaultZoom , value: value , onChange: onChange  } = this.props;
+        return /*#__PURE__*/ (0, $5lYf0$jsx)((0, $5d3c0bf5e83fb1b4$export$4ad1bae46276c5ce), {
+            api: api,
+            location: this.getCenter(),
+            onClick: this.handleMapClick,
+            defaultZoom: defaultZoom,
+            children: (map)=>/*#__PURE__*/ (0, $5lYf0$jsxs)((0, $5lYf0$Fragment), {
+                    children: [
+                        /*#__PURE__*/ (0, $5lYf0$jsx)((0, $354d993ba05f8e01$export$55d7609a8f1eccd2), {
+                            api: api,
+                            map: map,
+                            onChange: this.handlePlaceChanged
+                        }),
+                        value && /*#__PURE__*/ (0, $5lYf0$jsx)((0, $6193422e35c36794$export$e98856a975cab58e), {
+                            api: api,
+                            map: map,
+                            position: value,
+                            onMove: onChange ? this.handleMarkerDragEnd : undefined
+                        })
+                    ]
+                })
+        });
+    }
+}
+
+
+
+const $2a4062a4b0f8539f$export$1c4ad7c095d42d37 = (0, $5lYf0$styledcomponents).img`
+  width: 100%;
+  height: auto;
+  vertical-align: top;
+`;
+const $2a4062a4b0f8539f$export$ffa61c425f593078 = (0, $5lYf0$styledcomponents).div`
+  height: 40rem;
+  width: 50rem;
+`;
+
+
+let $d00b7d7e262fbc6d$var$config;
+function $d00b7d7e262fbc6d$export$ee3fba7cd2f8c355() {
+    return $d00b7d7e262fbc6d$var$config;
+}
+function $d00b7d7e262fbc6d$export$a9c6c3563e9053d(newConfig) {
+    $d00b7d7e262fbc6d$var$config = newConfig;
+}
+
+
+const $652a613399ec067e$var$getStaticImageUrl = (value, apiKey)=>{
+    const loc = `${value.lat},${value.lng}`;
+    const params = {
+        key: apiKey,
+        center: loc,
+        markers: loc,
+        zoom: 13,
+        scale: 2,
+        size: "640x300"
+    };
+    const qs = Object.keys(params).reduce((res, param)=>{
+        return res.concat(`${param}=${encodeURIComponent(params[param])}`);
+    }, []);
+    return `https://maps.googleapis.com/maps/api/staticmap?${qs.join("&")}`;
+};
+class $652a613399ec067e$var$GeopointInput extends (0, $5lYf0$react).PureComponent {
+    _geopointInputId = (0, $5lYf0$uniqueId)("GeopointInput");
+    constructor(props){
+        super(props);
+        this.state = {
+            modalOpen: false
+        };
+    }
+    setEditButton = (el)=>{
+        this.editButton = el;
+    };
+    focus() {
+        if (this.editButton) this.editButton.focus();
+    }
+    handleToggleModal = ()=>{
+        this.setState((prevState)=>({
+                modalOpen: !prevState.modalOpen
+            }));
+    };
+    handleCloseModal = ()=>{
+        this.setState({
+            modalOpen: false
+        });
+    };
+    handleChange = (latLng)=>{
+        const { schemaType: schemaType , onChange: onChange  } = this.props;
+        onChange([
+            (0, $5lYf0$setIfMissing)({
+                _type: schemaType.name
+            }),
+            (0, $5lYf0$set)(latLng.lat(), [
+                "lat"
+            ]),
+            (0, $5lYf0$set)(latLng.lng(), [
+                "lng"
+            ]), 
+        ]);
+    };
+    handleClear = ()=>{
+        const { onChange: onChange  } = this.props;
+        onChange((0, $5lYf0$unset)());
+    };
+    render() {
+        const { value: value , readOnly: readOnly , compareValue: compareValue , geoConfig: config  } = this.props;
+        const { modalOpen: modalOpen  } = this.state;
+        if (!config || !config.apiKey) return /*#__PURE__*/ (0, $5lYf0$jsxs)("div", {
+            children: [
+                /*#__PURE__*/ (0, $5lYf0$jsxs)("p", {
+                    children: [
+                        "The ",
+                        /*#__PURE__*/ (0, $5lYf0$jsx)("a", {
+                            href: "https://sanity.io/docs/schema-types/geopoint-type",
+                            children: "Geopoint type"
+                        }),
+                        " needs a Google Maps API key with access to:"
+                    ]
+                }),
+                /*#__PURE__*/ (0, $5lYf0$jsxs)("ul", {
+                    children: [
+                        /*#__PURE__*/ (0, $5lYf0$jsx)("li", {
+                            children: "Google Maps JavaScript API"
+                        }),
+                        /*#__PURE__*/ (0, $5lYf0$jsx)("li", {
+                            children: "Google Places API Web Service"
+                        }),
+                        /*#__PURE__*/ (0, $5lYf0$jsx)("li", {
+                            children: "Google Static Maps API"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, $5lYf0$jsx)("p", {
+                    children: "Please enter the API key with access to these services in your googleMapsInput plugin config."
+                })
+            ]
+        });
+        return /*#__PURE__*/ (0, $5lYf0$jsxs)((0, $5lYf0$Fragment), {
+            children: [
+                value && /*#__PURE__*/ (0, $5lYf0$jsx)((0, $5lYf0$ChangeIndicatorCompareValueProvider), {
+                    value: value,
+                    compareValue: compareValue,
+                    children: /*#__PURE__*/ (0, $5lYf0$jsx)((0, $5lYf0$ChangeIndicator), {
+                        compareDeep: true,
+                        children: /*#__PURE__*/ (0, $5lYf0$jsx)((0, $2a4062a4b0f8539f$export$1c4ad7c095d42d37), {
+                            src: $652a613399ec067e$var$getStaticImageUrl(value, config.apiKey),
+                            alt: "Map location"
+                        })
+                    })
+                }),
+                !readOnly && /*#__PURE__*/ (0, $5lYf0$jsx)((0, $5lYf0$Box), {
+                    marginTop: 4,
+                    children: /*#__PURE__*/ (0, $5lYf0$jsxs)((0, $5lYf0$Grid), {
+                        columns: 2,
+                        gap: 2,
+                        children: [
+                            /*#__PURE__*/ (0, $5lYf0$jsx)((0, $5lYf0$Button), {
+                                mode: "ghost",
+                                icon: value && (0, $5lYf0$EditIcon),
+                                padding: 3,
+                                ref: this.setEditButton,
+                                text: value ? "Edit" : "Set location",
+                                onClick: this.handleToggleModal
+                            }),
+                            value && /*#__PURE__*/ (0, $5lYf0$jsx)((0, $5lYf0$Button), {
+                                tone: "critical",
+                                icon: (0, $5lYf0$TrashIcon),
+                                padding: 3,
+                                mode: "ghost",
+                                text: "Remove",
+                                onClick: this.handleClear
+                            })
+                        ]
+                    })
+                }),
+                modalOpen && /*#__PURE__*/ (0, $5lYf0$jsx)((0, $5lYf0$Dialog), {
+                    id: `${this._geopointInputId}_dialog`,
+                    onClose: this.handleCloseModal,
+                    header: "Place the marker on the map",
+                    width: 1,
+                    children: /*#__PURE__*/ (0, $5lYf0$jsx)((0, $2a4062a4b0f8539f$export$ffa61c425f593078), {
+                        children: /*#__PURE__*/ (0, $5lYf0$jsx)((0, $862a9c6e30a57b1f$export$a628545bcf173896), {
+                            config: (0, $d00b7d7e262fbc6d$export$ee3fba7cd2f8c355)(),
+                            children: (api)=>/*#__PURE__*/ (0, $5lYf0$jsx)((0, $7b11e9c5cc854a7a$export$9a2476e65b6b92a7), {
+                                    api: api,
+                                    value: value || undefined,
+                                    onChange: readOnly ? undefined : this.handleChange,
+                                    defaultLocation: config.defaultLocation,
+                                    defaultZoom: config.defaultZoom
+                                })
+                        })
+                    })
+                })
+            ]
+        });
+    }
+}
+var $652a613399ec067e$export$2e2bcd8739ae039 = $652a613399ec067e$var$GeopointInput;
+
+
+
+
+
+
+
+
+
+
+
+
+
+class $7299ee8be2a4461e$export$21b07c8f274aebd5 extends $5lYf0$PureComponent {
+    eventHandlers = {};
+    componentDidMount() {
+        const { from: from , to: to , api: api , map: map , zIndex: zIndex , onClick: onClick , color: color , arrowRef: arrowRef  } = this.props;
+        const lineSymbol = {
+            path: api.SymbolPath.FORWARD_OPEN_ARROW
+        };
+        this.line = new api.Polyline({
+            map: map,
+            zIndex: zIndex,
+            path: [
+                from,
+                to
+            ],
+            icons: [
+                {
+                    icon: lineSymbol,
+                    offset: "50%"
+                }
+            ],
+            strokeOpacity: 0.55,
+            strokeColor: color ? color.text : "black"
+        });
+        if (onClick) this.eventHandlers.click = api.event.addListener(this.line, "click", onClick);
+        if (arrowRef) arrowRef.current = this.line;
+    }
+    componentDidUpdate(prevProps) {
+        if (!this.line) return;
+        const { from: from , to: to , map: map  } = this.props;
+        if (!(0, $f571c8b2d59e5edf$export$ad553d4d3a617f20)(prevProps.from, from) || !(0, $f571c8b2d59e5edf$export$ad553d4d3a617f20)(prevProps.to, to)) this.line.setPath([
+            from,
+            to
+        ]);
+        if (prevProps.map !== map) this.line.setMap(map);
+    }
+    componentWillUnmount() {
+        if (this.line) this.line.setMap(null);
+        if (this.eventHandlers.click) this.eventHandlers.click.remove();
+    }
+    // eslint-disable-next-line class-methods-use-this
+    render() {
+        return null;
+    }
+}
+
+
+function $aaaaeff5a19a40dd$export$f432217b31ec4a77({ diff: diff , api: api , map: map , label: label  }) {
+    const { fromValue: from , toValue: to  } = diff;
+    const annotation = diff.isChanged ? diff.annotation : undefined;
+    const userColor = (0, $5lYf0$useUserColor)(annotation ? annotation.author : null) || undefined;
+    const fromRef = $5lYf0$useRef();
+    const toRef = $5lYf0$useRef();
+    return /*#__PURE__*/ (0, $5lYf0$jsxs)((0, $5lYf0$Fragment), {
+        children: [
+            from && /*#__PURE__*/ (0, $5lYf0$jsx)((0, $6193422e35c36794$export$e98856a975cab58e), {
+                api: api,
+                map: map,
+                position: from,
+                zIndex: 0,
+                opacity: 0.55,
+                markerRef: fromRef,
+                color: userColor
+            }),
+            from && to && /*#__PURE__*/ (0, $5lYf0$jsx)((0, $7299ee8be2a4461e$export$21b07c8f274aebd5), {
+                api: api,
+                map: map,
+                from: from,
+                to: to,
+                zIndex: 1,
+                color: userColor
+            }),
+            to && /*#__PURE__*/ (0, $5lYf0$jsx)((0, $6193422e35c36794$export$e98856a975cab58e), {
+                api: api,
+                map: map,
+                position: to,
+                zIndex: 2,
+                markerRef: toRef,
+                label: label,
+                color: userColor
+            })
+        ]
+    });
+}
+
+
+
+const $6220cfb9852f1596$export$35b4f62b8f8d707c = (0, $5lYf0$styledcomponents).div`
+  position: relative;
+  min-height: 200px;
+
+  &:empty {
+    background-color: var(--card-skeleton-color-from);
+    display: table;
+    width: 100%;
+  }
+
+  &:empty:after {
+    content: 'Missing/invalid data';
+    display: table-cell;
+    vertical-align: middle;
+    text-align: center;
+    position: relative;
+  }
+`;
+
+
+
+const $6796f43a0745449a$export$2d0695678527b4cc = ({ diff: diff , schemaType: schemaType  })=>{
+    return /*#__PURE__*/ (0, $5lYf0$jsx)((0, $6220cfb9852f1596$export$35b4f62b8f8d707c), {
+        children: /*#__PURE__*/ (0, $5lYf0$jsx)((0, $862a9c6e30a57b1f$export$a628545bcf173896), {
+            config: (0, $d00b7d7e262fbc6d$export$ee3fba7cd2f8c355)(),
+            children: (api)=>/*#__PURE__*/ (0, $5lYf0$jsx)($6796f43a0745449a$var$GeopointDiff, {
+                    api: api,
+                    diff: diff,
+                    schemaType: schemaType
+                })
+        })
+    });
+};
+function $6796f43a0745449a$var$GeopointDiff({ api: api , diff: diff  }) {
+    const fromValue = (diff.fromValue || []).filter($6796f43a0745449a$var$hasCoordinates);
+    const toValue = (diff.toValue || []).filter($6796f43a0745449a$var$hasCoordinates);
+    if (fromValue.length === 0 && toValue.length === 0) return null;
+    const bounds = $6796f43a0745449a$var$getBounds(fromValue, toValue, api);
+    return /*#__PURE__*/ (0, $5lYf0$jsx)((0, $5d3c0bf5e83fb1b4$export$4ad1bae46276c5ce), {
+        api: api,
+        location: bounds.getCenter().toJSON(),
+        mapTypeControl: false,
+        controlSize: 20,
+        bounds: bounds,
+        children: (map)=>/*#__PURE__*/ (0, $5lYf0$jsx)((0, $5lYf0$Fragment), {
+                children: diff.items.map(({ toIndex: toIndex , diff: pointDiff  })=>{
+                    if (!$6796f43a0745449a$var$isChangeDiff(pointDiff)) return null;
+                    return /*#__PURE__*/ (0, $5lYf0$jsx)((0, $aaaaeff5a19a40dd$export$f432217b31ec4a77), {
+                        api: api,
+                        map: map,
+                        diff: pointDiff,
+                        label: `${toIndex}`
+                    }, toIndex);
+                })
+            })
+    });
+}
+function $6796f43a0745449a$var$isChangeDiff(diff) {
+    return diff.action !== "unchanged" && diff.type === "object";
+}
+function $6796f43a0745449a$var$hasCoordinates(point) {
+    return typeof point.lat === "number" && typeof point.lng === "number";
+}
+function $6796f43a0745449a$var$getBounds(fromValue, toValue, api) {
+    const bounds = new api.LatLngBounds();
+    const points = [
+        ...fromValue || [],
+        ...toValue || []
+    ];
+    points.forEach((point)=>bounds.extend(point));
+    return bounds;
+}
+
+
+
+
+
+
+
+
+
+
+const $85511eaf6ea660d5$export$6b7bf6aeccd8ac3f = ({ diff: diff , schemaType: schemaType  })=>{
+    return /*#__PURE__*/ (0, $5lYf0$jsx)((0, $6220cfb9852f1596$export$35b4f62b8f8d707c), {
+        children: /*#__PURE__*/ (0, $5lYf0$jsx)((0, $862a9c6e30a57b1f$export$a628545bcf173896), {
+            config: (0, $d00b7d7e262fbc6d$export$ee3fba7cd2f8c355)(),
+            children: (api)=>/*#__PURE__*/ (0, $5lYf0$jsx)($85511eaf6ea660d5$var$GeopointDiff, {
+                    api: api,
+                    diff: diff,
+                    schemaType: schemaType
+                })
+        })
+    });
+};
+function $85511eaf6ea660d5$var$GeopointDiff({ api: api , diff: diff  }) {
+    const { fromValue: fromValue , toValue: toValue  } = diff;
+    const annotation = (0, $5lYf0$getAnnotationAtPath)(diff, [
+        "lat"
+    ]) || (0, $5lYf0$getAnnotationAtPath)(diff, [
+        "lng"
+    ]) || (0, $5lYf0$getAnnotationAtPath)(diff, []);
+    const center = $85511eaf6ea660d5$var$getCenter(diff, api);
+    const bounds = fromValue && toValue ? $85511eaf6ea660d5$var$getBounds(fromValue, toValue, api) : undefined;
+    return /*#__PURE__*/ (0, $5lYf0$jsx)((0, $5lYf0$DiffTooltip), {
+        annotations: annotation ? [
+            annotation
+        ] : [],
+        description: $85511eaf6ea660d5$var$getAction(diff),
+        children: /*#__PURE__*/ (0, $5lYf0$jsx)("div", {
+            children: /*#__PURE__*/ (0, $5lYf0$jsx)((0, $5d3c0bf5e83fb1b4$export$4ad1bae46276c5ce), {
+                api: api,
+                location: center,
+                mapTypeControl: false,
+                controlSize: 20,
+                bounds: bounds,
+                scrollWheel: false,
+                children: (map)=>/*#__PURE__*/ (0, $5lYf0$jsx)((0, $aaaaeff5a19a40dd$export$f432217b31ec4a77), {
+                        api: api,
+                        map: map,
+                        diff: diff
+                    })
+            })
+        })
+    });
+}
+function $85511eaf6ea660d5$var$getBounds(fromValue, toValue, api) {
+    return new api.LatLngBounds().extend(fromValue).extend(toValue);
+}
+function $85511eaf6ea660d5$var$getCenter(diff, api) {
+    const { fromValue: fromValue , toValue: toValue  } = diff;
+    if (fromValue && toValue) return $85511eaf6ea660d5$var$getBounds(fromValue, toValue, api).getCenter().toJSON();
+    if (fromValue) return fromValue;
+    if (toValue) return toValue;
+    throw new Error("Neither a from or a to value present");
+}
+function $85511eaf6ea660d5$var$getAction(diff) {
+    const { fromValue: fromValue , toValue: toValue  } = diff;
+    if (fromValue && toValue) return "Moved";
+    else if (fromValue) return "Removed";
+    else if (toValue) return "Added";
+    return "Unchanged";
+}
+
+
+const $090815f5086f7f29$export$626ae7d0cf8f9143 = (0, $5lYf0$createPlugin)((config)=>{
+    const ConfiguredGeopintInput = (props)=>/*#__PURE__*/ (0, $5lYf0$jsx)((0, $652a613399ec067e$export$2e2bcd8739ae039), {
+            ...props,
+            geoConfig: config
+        });
+    (0, $d00b7d7e262fbc6d$export$a9c6c3563e9053d)(config);
+    return {
+        name: "google-maps-input",
+        formBuilder: {
+            resolve: {
+                input: (prev, { schemaType: schemaType  })=>{
+                    if ($090815f5086f7f29$var$isType("geopoint", schemaType)) return ConfiguredGeopintInput;
+                    return prev;
+                }
+            }
+        }
+    };
+});
+function $090815f5086f7f29$var$isType(name, schema) {
+    if (schema?.name === name) return true;
+    else if (!schema?.name) return false;
+    return $090815f5086f7f29$var$isType(name, schema?.type);
+}
+
+
+export {$090815f5086f7f29$export$626ae7d0cf8f9143 as googleMapsInput, $6796f43a0745449a$export$2d0695678527b4cc as GeopointArrayDiff, $85511eaf6ea660d5$export$6b7bf6aeccd8ac3f as GeopointFieldDiff, $652a613399ec067e$export$2e2bcd8739ae039 as GeopointInput};
+//# sourceMappingURL=index.js.map