ublo-lib 1.41.0 → 1.41.1

package/es/common/components/editable-map/color-picker.d.ts

@@ -0,0 +1,6 @@
+export default function ColorPicker({ showMarkerList, color, setColor }: {
+    showMarkerList: any;
+    color: any;
+    setColor: any;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=color-picker.d.ts.map

package/es/common/components/editable-map/color-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.d.ts","sourceRoot":"","sources":["../../../../src/common/components/editable-map/color-picker.js"],"names":[],"mappings":"AAkBA;;;;4CAiCC"}

package/es/common/components/editable-map/color-picker.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import classNames from "classnames";
+import Popover from "dt-design-system/es/popover";
+import Button from "dt-design-system/es/button";
+import * as Icons from "./icons/ui";
+import styles from "./color-picker.module.css";
+const COLORS_SET = [
+    {
+        label: "Marron",
+        value: "#4c3228",
+    },
+    {
+        label: "Prune",
+        value: "#ca7aca",
+    },
+];
+export default function ColorPicker({ showMarkerList, color, setColor }) {
+    const classes = classNames(styles.button, {
+        [styles.alignedToRight]: !showMarkerList,
+    });
+    return (_jsxs(Popover, { className: styles.popover, contentProps: {
+            side: "bottom",
+            align: "end",
+            alignOffset: -10,
+        }, trigger: _jsx(Button, { className: classes, children: _jsx(Icons.ColorPalette, {}) }), children: [_jsx("div", { className: styles.title, children: "Couleur des trac\u00E9s" }), COLORS_SET.map(({ value, label }) => (_jsxs("div", { className: styles.choice, onClick: () => setColor(value), "data-checked": color === value, children: [_jsx("span", { className: styles.tag, "data-color": value }), _jsx("div", { children: label })] }, value)))] }));
+}

package/es/common/components/editable-map/color-picker.module.css

@@ -0,0 +1,66 @@
+.button {
+  --ds-button-background: var(--ds-grey-000, #fff);
+  --ds-button-hover-background: var(--ds-grey-000, #f8f8f8);
+  --ds-button-shadow: var(--ds-shadow-100, 0px 3px 6px rgba(0, 0, 0, 0.12));
+
+  position: absolute;
+  top: 10px;
+  right: 270px;
+  color: var(--ds-grey-800, #000);
+  z-index: 1000;
+}
+
+.alignedToRight {
+  right: 10px;
+}
+
+.popover {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 140px;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 15px;
+}
+
+.choice {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+}
+
+span.tag {
+  position: relative;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+}
+
+span.tag[data-color="#4c3228"] {
+  background: #4c3228;
+}
+span.tag[data-color="#ca7aca"] {
+  background-color: #ca7aca;
+}
+
+.choice[data-checked="true"] span.tag::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform: scale(1.5);
+  border-radius: 50%;
+}
+
+.choice[data-checked="true"] span.tag[data-color="#4c3228"]::after {
+  border: 1px solid #4c3228;
+}
+.choice[data-checked="true"] span.tag[data-color="#ca7aca"]::after {
+  border: 1px solid #ca7aca;
+}

package/es/common/components/editable-map/edit-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"edit-form.d.ts","sourceRoot":"","sources":["../../../../src/common/components/editable-map/edit-form.js"],"names":[],"mappings":"AASA;;;;;4CAoFC"}
+{"version":3,"file":"edit-form.d.ts","sourceRoot":"","sources":["../../../../src/common/components/editable-map/edit-form.js"],"names":[],"mappings":"AAUA;;;;;4CAkHC"}

package/es/common/components/editable-map/edit-form.js

@@ -5,26 +5,31 @@ import Textarea from "dt-design-system/es/textarea";
 import Button from "dt-design-system/es/button";
 import Checkbox from "dt-design-system/es/checkbox";
 import * as Icons from "dt-design-system/es/icons";
+import * as FileManager from "./utils/file-manager";
 import IconPicker from "./icon-picker";
 import css from "./edit-form.module.css";
 export default function EditForm({ popupRef, marker, setMarkers, iconSet }) {
-    const { id, icon, title, description, url, label, tooltipOpened, important } = marker;
-    const removeMarker = (e) => {
-        e.stopPropagation();
-        setMarkers((currents) => currents.filter((marker) => marker.id !== id));
-    };
-    const closeMarker = () => {
-        popupRef.current.close();
-    };
-    const updateMarker = (field) => (value) => {
+    const [editingMarker, setEditingMarker] = React.useState(marker || {});
+    const { id, icon, image, title, description, url, label, tooltipOpened, important, } = editingMarker;
+    const updateMarker = () => {
         setMarkers((currents) => {
             return currents.map((marker) => {
                 if (marker.id === id) {
-                    return { ...marker, [field]: value };
+                    return editingMarker;
                 }
                 return marker;
             });
         });
+        popupRef.current.close();
+    };
+    const updateEditingMarker = (field) => (value) => {
+        setEditingMarker({ ...editingMarker, [field]: value });
+    };
+    const updateImage = (path) => {
+        updateEditingMarker("image")(path);
     };
-    return (_jsxs("div", { className: css.form, children: [_jsxs("div", { className: css.row, children: [_jsx(IconPicker, { callback: updateMarker("icon"), selectedIcon: icon, iconSet: iconSet }), _jsx(Input, { label: "Titre", value: title, className: css.title, onValueChange: updateMarker("title"), compact: true })] }), _jsx(Textarea, { label: "Description", value: description, className: css.description, onValueChange: updateMarker("description"), placeholder: "Description du point d'int\u00E9r\u00EAt", compact: true }), _jsxs("div", { className: css.row, children: [_jsx(Input, { label: "Lien bouton", value: url, onValueChange: updateMarker("url"), compact: true }), _jsx(Input, { label: "Libell\u00E9 bouton", value: label, onValueChange: updateMarker("label"), compact: true })] }), _jsx(Checkbox, { label: "Important", checked: important, onCheckedChange: updateMarker("important") }), _jsx(Checkbox, { label: "Tooltip affich\u00E9 par d\u00E9faut", checked: tooltipOpened, onCheckedChange: updateMarker("tooltipOpened") }), _jsxs("div", { className: css.buttons, children: [_jsxs(Button, { variant: "danger", onClick: removeMarker, compact: true, children: [_jsx(Icons.Bin, {}), "Supprimer ce point"] }), _jsxs(Button, { variant: "success", onClick: closeMarker, compact: true, children: ["Valider", _jsx(Icons.Check, {})] })] })] }));
+    return (_jsxs("div", { className: css.form, children: [_jsxs("div", { className: css.row, children: [_jsx(IconPicker, { callback: updateEditingMarker("icon"), selectedIcon: icon, iconSet: iconSet }), _jsxs("div", { className: css.imageContainer, children: [_jsx(Button, { className: css.image, variant: "transparent", onClick: () => FileManager.load(updateImage, 320, 200), children: image ? _jsx("img", { src: image, alt: "" }) : _jsx(Icons.Image, {}) }), image && (_jsx(Button, { onClick: (e) => {
+                                    e.stopPropagation();
+                                    updateImage(undefined);
+                                }, variant: "danger", className: css.removeImage, compact: true, children: _jsx(Icons.Bin, {}) }))] }), _jsx(Input, { label: "Titre", value: title, className: css.title, onValueChange: updateEditingMarker("title"), compact: true })] }), _jsx(Textarea, { label: "Description", value: description, className: css.description, onValueChange: updateEditingMarker("description"), placeholder: "Description du point d'int\u00E9r\u00EAt", compact: true }), _jsxs("div", { className: css.row, children: [_jsx(Input, { label: "Lien bouton", value: url, onValueChange: updateEditingMarker("url"), compact: true }), _jsx(Input, { label: "Libell\u00E9 bouton", value: label, onValueChange: updateEditingMarker("label"), compact: true })] }), _jsx(Checkbox, { label: "Important", checked: important, onCheckedChange: updateEditingMarker("important") }), _jsx(Checkbox, { label: "Tooltip affich\u00E9 par d\u00E9faut", checked: tooltipOpened, onCheckedChange: updateEditingMarker("tooltipOpened") }), _jsx("div", { className: css.buttons, children: _jsxs(Button, { variant: "success", onClick: updateMarker, compact: true, children: ["Valider", _jsx(Icons.Check, {})] }) })] }));
 }

package/es/common/components/editable-map/edit-form.module.css

@@ -1,11 +1,47 @@
 .form {
   position: relative;
-  width: 280px;
+  width: 340px;
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
 
+.imageContainer {
+  position: relative;
+  z-index: 0;
+}
+
+.image {
+  flex: 0 0 80px;
+  width: 80px;
+  height: 60px;
+  border: 1px solid var(--ds-grey-200, #ededed);
+}
+
+.image:has(img) {
+  padding: 0;
+}
+
+.image > img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+}
+
+.removeImage {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  opacity: 0;
+  transition: opacity 160ms
+    var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
+}
+
+.imageContainer:hover .removeImage {
+  opacity: 1;
+}
+
 .row {
   display: flex;
   align-items: flex-end;
@@ -23,6 +59,6 @@
 
 .buttons {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
   margin-top: 6px;
 }

package/es/common/components/editable-map/editable-map.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editable-map.d.ts","sourceRoot":"","sources":["../../../../src/common/components/editable-map/editable-map.js"],"names":[],"mappings":"AAmBA;;;;4CA4HC"}
+{"version":3,"file":"editable-map.d.ts","sourceRoot":"","sources":["../../../../src/common/components/editable-map/editable-map.js"],"names":[],"mappings":"AA8BA;;;;4CAuRC"}

package/es/common/components/editable-map/editable-map.js

@@ -1,14 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import * as L from "leaflet";
 import { AttributionControl, MapContainer, TileLayer } from "react-leaflet";
 import { useUbloContext } from "ublo/with-ublo";
 import Button from "dt-design-system/es/button";
 import * as Icons from "dt-design-system/es/icons";
-import MapEvents, { DEFAULT_MARKER_DATA } from "./map-events";
+import classNames from "classnames";
+import Geoman from "./geoman";
+import ColorPicker from "./color-picker";
+import MapEvents from "./map-events";
 import Markers from "./markers";
-import Helper from "./helper";
 import Cluster from "./cluster";
-import InputMarker from "./input-marker";
+import InitialMarkerForm from "./initial-marker-form";
 import MarkerList from "./marker-list";
 import FullScreenButton from "./full-screen-button";
 import SlopesToggle from "./slopes-toggle";
@@ -16,11 +19,20 @@ import css from "./editable-map.module.css";
 import "leaflet/dist/leaflet.css";
 const FRANCE_CENTER = [46.807934, 3.645097];
 const DEFAULT_ZOOM = 6;
+const DEFAULT_MARKER_DATA = {
+    icon: "Location",
+    title: "Nouveau point d'intérêt",
+    description: "",
+    url: "",
+    label: "",
+    tooltipOpened: false,
+};
 export default function EditableMap({ format, iconSet, hideSlopes }) {
     const ref = React.useRef();
     const containerRef = React.useRef();
     const { cmsMode } = useUbloContext();
     const [fullScreen, setFullScreen] = React.useState(false);
+    const [markerListOpened, setMarkerListOpened] = React.useState(true);
     const { element, presets, isInDialog } = format;
     const isInZone = element.closest(".cms");
     const isEditing = isInZone && cmsMode === "editing";
@@ -30,6 +42,10 @@ export default function EditableMap({ format, iconSet, hideSlopes }) {
     const [zoom, setZoom] = React.useState(defaultZoom);
     const [markers, setMarkers] = React.useState(presets?.markers || []);
     const [showSlopes, setShowSlopes] = React.useState(presets?.showSlopes || false);
+    const [shapes, setShapes] = React.useState(presets?.shapes || []);
+    const [mapIsReady, setMapIsReady] = React.useState(false);
+    const [color, setColor] = React.useState("#4c3228");
+    const [isMarkerListSorted, setIsMarkerListSorted] = React.useState(presets?.isMarkerListSorted || false);
     const scrollWheelZoom = Boolean(cmsMode) || isInDialog || fullScreen;
     const refreshSize = () => {
         ref.current.invalidateSize();
@@ -39,6 +55,96 @@ export default function EditableMap({ format, iconSet, hideSlopes }) {
         setZoom(defaultZoom);
         ref.current.setView(defaultCenter, defaultZoom, { animate: true });
     };
+    const addInitialMarker = (position) => {
+        const isFocused = Boolean(element.querySelector("cms-section-ui"));
+        if (!isEditing || !isFocused)
+            return;
+        setMarkers([{ id: 1, ...DEFAULT_MARKER_DATA, position }]);
+        ref.current.setView(position, 13);
+    };
+    const handleEdit = (e) => {
+        if (e.layer.options?.id || e.layer.options?.shape === "Text")
+            return;
+        const customId = e.layer._customId;
+        const shapeType = e.shape;
+        const position = e.layer.getLatLngs
+            ? e.layer.getLatLngs()
+            : e.layer.getLatLng();
+        let updatedShape = {
+            latlngs: position,
+        };
+        if (shapeType === "Circle") {
+            updatedShape = {
+                ...updatedShape,
+                radius: e.layer.getRadius(),
+            };
+        }
+        setShapes((prevShapes) => prevShapes.map((shape) => shape.id === customId ? { ...shape, ...updatedShape } : shape));
+    };
+    const handleDrag = (e) => {
+        const customId = e.layer.options?.id || e.layer._customId;
+        const position = e.layer.getLatLngs
+            ? e.layer.getLatLngs()
+            : e.layer.getLatLng();
+        if (e.layer instanceof L.Marker && e.layer.options?.shape !== "Text") {
+            setMarkers((prevMarkers) => prevMarkers.map((marker) => marker.id === customId ? { ...marker, position } : marker));
+        }
+        else {
+            setShapes((prevShapes) => prevShapes.map((shape) => {
+                return shape.id === customId
+                    ? { ...shape, latlngs: position }
+                    : shape;
+            }));
+        }
+    };
+    const drawShapeOnMap = React.useCallback((shape) => {
+        let layer;
+        const { id, shape: shapeType, latlngs, radius, content, color } = shape;
+        const options = {
+            color,
+            fillOpacity: 0.1,
+        };
+        switch (shapeType) {
+            case "Line":
+                layer = L.polyline(latlngs, options).addTo(ref.current);
+                break;
+            case "Rectangle":
+                layer = L.rectangle(latlngs, options).addTo(ref.current);
+                break;
+            case "Polygon":
+                layer = L.polygon(latlngs, options).addTo(ref.current);
+                break;
+            case "Circle":
+                layer = L.circle(latlngs, {
+                    ...options,
+                    radius,
+                }).addTo(ref.current);
+                break;
+            case "Text":
+                layer = L.marker(latlngs, {
+                    icon: L.divIcon({
+                        className: "custom-text-icon",
+                        html: `<div class="em-custom-text">${content}</div>`,
+                    }),
+                    type: "Text",
+                    shape: "Text",
+                }).addTo(ref.current);
+                break;
+            default:
+                break;
+        }
+        layer._customId = id;
+        layer.on("pm:edit", handleEdit);
+        layer.on("pm:dragend", handleDrag);
+        return layer;
+    }, []);
+    React.useEffect(() => {
+        if (presets?.shapes?.length && mapIsReady) {
+            presets?.shapes.forEach((shape) => {
+                drawShapeOnMap(shape);
+            });
+        }
+    }, [drawShapeOnMap, mapIsReady, presets?.shapes]);
     React.useEffect(() => {
         if (isInDialog) {
             window.refreshDialogMapSize = refreshSize;
@@ -46,20 +152,33 @@ export default function EditableMap({ format, iconSet, hideSlopes }) {
     }, [isInDialog]);
     React.useEffect(() => {
         if (isEditing) {
-            const newPresets = { markers, zoom, center, showSlopes };
+            const newPresets = {
+                markers,
+                isMarkerListSorted,
+                shapes,
+                zoom,
+                center,
+                showSlopes,
+            };
             element.setAttribute("data-presets", JSON.stringify(newPresets));
         }
-    }, [center, element, isEditing, markers, showSlopes, zoom]);
-    const addInitialMarker = (position) => {
-        const isFocused = Boolean(element.querySelector("cms-section-ui"));
-        if (!isEditing || !isFocused)
-            return;
-        setMarkers([{ id: 1, ...DEFAULT_MARKER_DATA, position }]);
-        ref.current.setView(position, 13);
-    };
+    }, [
+        center,
+        element,
+        isEditing,
+        markers,
+        isMarkerListSorted,
+        shapes,
+        showSlopes,
+        zoom,
+    ]);
     const attribution = showSlopes
         ? '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> & <a href="https://www.opensnowmap.org/">OpenSnowMap</a> contributors'
         : '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
     const showInputMarker = isEditing && !markers.length;
-    return (_jsxs("div", { ref: containerRef, className: css.container, "data-cms-remove": "", children: [_jsxs(MapContainer, { ref: ref, center: center, zoom: zoom, scrollWheelZoom: scrollWheelZoom, className: css.map, attributionControl: false, children: [_jsx(TileLayer, { attribution: attribution, url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" }), showSlopes && (_jsx(TileLayer, { url: "https://tiles.opensnowmap.org/pistes/{z}/{x}/{y}.png" })), _jsx(MapEvents, { mapRef: ref, markers: markers, setMarkers: setMarkers, setZoom: setZoom, setCenter: setCenter, isEditing: isEditing, element: element }), _jsx(Cluster, { isEditing: isEditing, children: _jsx(Markers, { markers: markers, setMarkers: setMarkers, iconSet: iconSet, isEditing: isEditing }) }), _jsx(AttributionControl, { position: "bottomright", prefix: "" })] }), !isEditing && (_jsx(FullScreenButton, { fullScreen: fullScreen, setFullScreen: setFullScreen, containerRef: containerRef })), showInputMarker && _jsx(InputMarker, { callback: addInitialMarker }), _jsx(Button, { type: "button", variant: "secondary", className: css.resetCenter, onClick: resetCenter, children: _jsx(Icons.MyLocation, {}) }), !hideSlopes && (_jsx(SlopesToggle, { showSlopes: showSlopes, setShowSlopes: setShowSlopes })), !isEditing && markers.length > 2 && (_jsx(MarkerList, { mapRef: ref, markers: markers, iconSet: iconSet, isInDialog: !fullScreen && isInDialog })), isEditing && _jsx(Helper, {})] }));
+    const showMarkerList = markers.length > 2;
+    const resetCenterClasses = classNames(css.resetCenter, {
+        [css.alignedToRight]: !showMarkerList || !markerListOpened,
+    });
+    return (_jsxs("div", { ref: containerRef, className: css.container, "data-cms-remove": "", children: [_jsxs(MapContainer, { ref: ref, center: center, zoom: zoom, scrollWheelZoom: scrollWheelZoom, className: css.map, attributionControl: false, whenReady: () => setMapIsReady(true), children: [_jsx(TileLayer, { attribution: attribution, url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" }), isEditing && (_jsxs(_Fragment, { children: [_jsx(Geoman, { handleDrag: handleDrag, setMarkers: setMarkers, iconSet: iconSet, setShapes: setShapes, color: color }), _jsx(ColorPicker, { showMarkerList: showMarkerList, color: color, setColor: setColor })] })), showSlopes && (_jsx(TileLayer, { url: "https://tiles.opensnowmap.org/pistes/{z}/{x}/{y}.png" })), _jsx(MapEvents, { setZoom: setZoom, setCenter: setCenter }), _jsx(Cluster, { isEditing: isEditing, children: _jsx(Markers, { markers: markers, setMarkers: setMarkers, iconSet: iconSet, isEditing: isEditing }) }), _jsx(AttributionControl, { position: "bottomright", prefix: "" })] }), showInputMarker && _jsx(InitialMarkerForm, { callback: addInitialMarker }), !isEditing && (_jsx(FullScreenButton, { fullScreen: fullScreen, setFullScreen: setFullScreen, containerRef: containerRef, isListOpened: showMarkerList && markerListOpened })), !isEditing && (_jsx(Button, { type: "button", variant: "secondary", className: resetCenterClasses, onClick: resetCenter, children: _jsx(Icons.MyLocation, {}) })), !hideSlopes && (_jsx(SlopesToggle, { showSlopes: showSlopes, setShowSlopes: setShowSlopes })), showMarkerList && (_jsx(MarkerList, { cmsMode: cmsMode, mapRef: ref, markers: markers, setMarkers: setMarkers, iconSet: iconSet, isInDialog: !fullScreen && isInDialog, opened: markerListOpened, setOpened: setMarkerListOpened, isSorted: isMarkerListSorted, setIsSorted: setIsMarkerListSorted }))] }));
 }

package/es/common/components/editable-map/editable-map.module.css

@@ -13,17 +13,26 @@
 
 button.resetCenter {
   position: absolute;
-  top: 86px;
-  left: 10px;
+  top: 46px;
+  right: 270px;
   background-color: var(--ds-grey-000, #fff);
   box-shadow: var(--ds-shadow-100, 0px 3px 6px rgba(0, 0, 0, 0.12));
   user-select: none;
 }
 
+button.alignedToRight {
+  right: 10px;
+}
+
 button.resetCenter:hover {
   background-color: var(--ds-grey-100, #f8f8f8);
 }
 
+button.marker {
+  position: relative;
+  z-index: 1000;
+}
+
 .map {
   flex: 1 1 100%;
   z-index: 0;
@@ -43,6 +52,11 @@ button.resetCenter:hover {
   transform: translateX(-50%);
 }
 
+.map :global(.leaflet-pm-toolbar) {
+  display: flex;
+  flex-direction: column;
+}
+
 :global(:is(.cms--connected, .cms--info)) .container:empty::after {
   content: "Activez le mode édition pour modifier la carte, déconnectez-vous pour la consulter.";
   position: absolute;
@@ -69,21 +83,13 @@ button.resetCenter:hover {
 
 .map :global(.leaflet-popup-content-wrapper) {
   position: relative;
-  background-color: transparent;
-  backdrop-filter: brightness(110%) contrast(90%) blur(var(--ds-blur, 5px));
+  background-color: var(--ds-grey-000, #fff);
+  border: 1px solid var(--ds-grey-200, #ededed);
   box-shadow: var(--ds-shadow-100, 0px 3px 6px rgba(0, 0, 0, 0.12));
 }
 
-.map :global(.leaflet-popup-content-wrapper::before) {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: var(--ds-grey-000, #fff);
-  border-radius: inherit;
-  opacity: 0.8;
+:global(.cms--editing) .map :global(.leaflet-popup-content) {
+  width: auto !important;
 }
 
 .map:global(.leaflet-container) :global(a.leaflet-popup-close-button) {
@@ -140,6 +146,7 @@ button.resetCenter:hover {
 
 .map :global(.leaflet-tooltip) {
   padding: 10px 16px;
+  color: var(--ds-grey-700, #262626);
   font-size: 15px;
   font-weight: 700;
   font-family: inherit;
@@ -170,7 +177,7 @@ button.resetCenter:hover {
 }
 
 .map:global(.leaflet-touch .leaflet-control-layers a),
-.map:global(.leaflet-touch .leaflet-bar a) {
+.map:global(.leaflet-touch .leaflet-bar a:not(.leaflet-pm-action)) {
   width: 33px;
   height: 33px;
   box-shadow: var(--ds-shadow-100, 0px 3px 6px rgba(0, 0, 0, 0.12));
@@ -183,19 +190,22 @@ button.resetCenter:hover {
   cursor: not-allowed;
 }
 
-.map:global(.leaflet-touch .leaflet-control-layers a:hover),
-.map:global(.leaflet-touch .leaflet-bar a:hover) {
+.map:global(
+    .leaflet-touch .leaflet-control-layers a:not(.leaflet-pm-action):hover
+  ),
+.map:global(.leaflet-touch .leaflet-bar a:not(.leaflet-pm-action):hover) {
   background-color: var(--ds-grey-100, #f8f8f8);
 }
 
-.map:global(.leaflet-touch .leaflet-control-layers a:first-child),
-.map:global(.leaflet-touch .leaflet-bar a:first-child) {
+.map:global(.leaflet-touch .leaflet-control-zoom a:first-child),
+.map :global(.button-container:first-child a:first-child) {
   border-top-left-radius: var(--ds-radius-200, 10px);
   border-top-right-radius: var(--ds-radius-200, 10px);
 }
 
 .map:global(.leaflet-touch .leaflet-control-layers a:last-child),
-.map:global(.leaflet-touch .leaflet-bar a:last-child) {
+.map:global(.leaflet-touch .leaflet-bar a:last-child),
+.map :global(.button-container:last-child a:first-child) {
   border-bottom-left-radius: var(--ds-radius-200, 10px);
   border-bottom-right-radius: var(--ds-radius-200, 10px);
 }
@@ -204,3 +214,38 @@ button.resetCenter:hover {
 .map:global(.leaflet-touch .leaflet-bar a span) {
   font-size: 18px;
 }
+
+.map :global(.leaflet-popup-close-button) {
+  display: none;
+}
+
+.map :global(.leaflet-popup-content) {
+  margin: 0;
+}
+
+:global(body.cms--editing) .map :global(.leaflet-popup-content) {
+  margin: 13px 24px 13px 20px;
+}
+
+.map :global(.leaflet-popup-content-wrapper) {
+  padding: 0;
+}
+
+:global(.cms--editing) .map :global(.leaflet-popup-content-wrapper) {
+  padding: 1px;
+}
+
+.map :global(.em-custom-text),
+.map :global(.pm-textarea) {
+  width: max-content;
+  max-width: 200px;
+  padding: 6px;
+  color: var(--ds-grey-700, #262626);
+  font-size: 16px;
+  font-weight: 700;
+  font-family: inherit;
+  text-align: center;
+  text-shadow: -1px 0px 1px white, 0px -1px 1px white, 1px 0px 1px white,
+    0px 1px 1px white;
+  transform: translate(-50%, -50%);
+}

package/es/common/components/editable-map/full-screen-button.d.ts

@@ -1,6 +1,7 @@
-export default function FullScreenButton({ fullScreen, setFullScreen, containerRef, }: {
+export default function FullScreenButton({ fullScreen, setFullScreen, containerRef, isListOpened, }: {
     fullScreen: any;
     setFullScreen: any;
     containerRef: any;
+    isListOpened: any;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=full-screen-button.d.ts.map

package/es/common/components/editable-map/full-screen-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"full-screen-button.d.ts","sourceRoot":"","sources":["../../../../src/common/components/editable-map/full-screen-button.js"],"names":[],"mappings":"AAKA;;;;4CA8CC"}
+{"version":3,"file":"full-screen-button.d.ts","sourceRoot":"","sources":["../../../../src/common/components/editable-map/full-screen-button.js"],"names":[],"mappings":"AAMA;;;;;4CAkDC"}

package/es/common/components/editable-map/full-screen-button.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
+import classNames from "classnames";
 import Button from "dt-design-system/es/button";
 import * as Icons from "dt-design-system/es/icons";
 import css from "./full-screen-button.module.css";
-export default function FullScreenButton({ fullScreen, setFullScreen, containerRef, }) {
+export default function FullScreenButton({ fullScreen, setFullScreen, containerRef, isListOpened, }) {
     const [fullScreenCompatible, setFullScreenCompatible] = React.useState(true);
     const cleanupFullScreen = React.useCallback(() => {
         if (!document.fullscreenElement) {
@@ -19,6 +20,9 @@ export default function FullScreenButton({ fullScreen, setFullScreen, containerR
     if (!fullScreenCompatible)
         return null;
     const Icon = Icons[fullScreen ? "Minimize" : "Maximize"];
+    const classes = classNames(css.button, {
+        [css.opened]: isListOpened,
+    });
     const toggleFullScreen = (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -31,7 +35,7 @@ export default function FullScreenButton({ fullScreen, setFullScreen, containerR
             document.removeEventListener("fullscreenchange", cleanupFullScreen);
         }
     };
-    return (_jsx(Button, { variant: "secondary", type: "button", className: css.button, onClick: toggleFullScreen, children: _jsx(Icon, {}) }));
+    return (_jsx(Button, { variant: "secondary", type: "button", className: classes, onClick: toggleFullScreen, children: _jsx(Icon, {}) }));
 }
 function isFullScreenCompatible() {
     return (document.fullscreenEnabled ||

package/es/common/components/editable-map/full-screen-button.module.css

@@ -1,11 +1,15 @@
 button.button {
   position: absolute;
-  top: 130px;
-  left: 10px;
+  top: 10px;
+  right: 10px;
   background-color: var(--ds-grey-000, #fff);
   box-shadow: var(--ds-shadow-100, 0px 3px 6px rgba(0, 0, 0, 0.12));
 }
 
+button.opened {
+  right: 270px;
+}
+
 button.button:hover {
   background-color: var(--ds-grey-100, #f8f8f8);
 }

package/es/common/components/editable-map/geoman.d.ts

@@ -0,0 +1,8 @@
+export default Geoman;
+declare function Geoman({ setMarkers, iconSet, setShapes, color }: {
+    setMarkers: any;
+    iconSet: any;
+    setShapes: any;
+    color: any;
+}): any;
+//# sourceMappingURL=geoman.d.ts.map

package/es/common/components/editable-map/geoman.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"geoman.d.ts","sourceRoot":"","sources":["../../../../src/common/components/editable-map/geoman.js"],"names":[],"mappings":";AAiBA;;;;;QAmOC"}