ublo-lib 1.41.0 → 1.41.1

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

@@ -0,0 +1,181 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as ReactDOM from "react-dom/server";
+import * as L from "leaflet";
+import { useLeafletContext } from "@react-leaflet/core";
+import * as Icons from "./icons";
+import css from "./markers.module.css";
+import "@geoman-io/leaflet-geoman-free";
+import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css";
+const createCustomDivIcon = (iconSet, icon, id) => {
+    const Icon = Icons[iconSet][icon] || Icons[iconSet].Location;
+    return L.divIcon({
+        className: css.markerIcon,
+        html: ReactDOM.renderToString(_jsx(Icon, { "data-id": id })),
+    });
+};
+const Geoman = ({ setMarkers, iconSet, setShapes, color }) => {
+    const context = useLeafletContext();
+    const leafletContainer = context.layerContainer || context.map;
+    const colorRef = React.useRef(color);
+    const dragShape = React.useCallback((e) => {
+        const customId = e.layer.options?.id || e.layer._customId;
+        const position = e.layer.getLatLngs
+            ? e.layer.getLatLngs()
+            : e.layer.getLatLng();
+        if (e.shape === "Marker" || e.shape === "customMarker") {
+            setMarkers((prevMarkers) => prevMarkers.map((marker) => marker.id === customId ? { ...marker, position } : marker));
+        }
+        else {
+            setShapes((prevShapes) => prevShapes.map((shape) => shape.id === customId ? { ...shape, latlngs: position } : shape));
+        }
+    }, [setMarkers, setShapes]);
+    const editShape = React.useCallback((e) => {
+        if (e.layer.options?.id || e.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));
+    }, [setShapes]);
+    const removeShape = React.useCallback((e) => {
+        const isText = e.layer.options?.shape === "Text" || e.shape === "Text";
+        if (e.layer instanceof L.Marker && !isText) {
+            setMarkers((prevMarkers) => {
+                return prevMarkers.filter((marker) => marker.id !== e.layer.options.id);
+            });
+        }
+        else {
+            setShapes((prevShapes) => prevShapes.filter((shape) => shape.id !== e.layer._customId));
+        }
+    }, [setMarkers, setShapes]);
+    React.useEffect(() => {
+        colorRef.current = color;
+        leafletContainer.pm.setGlobalOptions({
+            templineStyle: { color },
+            hintlineStyle: { color },
+            pathOptions: {
+                color,
+                fillOpacity: 0.1,
+            },
+        });
+    }, [color, leafletContainer.pm]);
+    React.useEffect(() => {
+        leafletContainer.pm.setLang("fr");
+        leafletContainer.pm.addControls({
+            drawMarker: false,
+            drawPolyline: true,
+            drawRectangle: true,
+            drawCircle: true,
+            drawCircleMarker: false,
+            drawPolygon: true,
+            cutPolygon: false,
+            rotateMode: false,
+        });
+        leafletContainer.on("layeradd", (e) => {
+            const layer = e.layer;
+            layer.on("pm:dragend", dragShape);
+        });
+        if (!leafletContainer.pm.Toolbar.getButtons().customMarker) {
+            const previewMarkerIcon = createCustomDivIcon(iconSet, "Location", Date.now());
+            const customMarkerControl = leafletContainer.pm.Toolbar.copyDrawControl("drawMarker", {
+                name: "customMarker",
+                block: "custom",
+            });
+            customMarkerControl.drawInstance.setOptions({
+                markerStyle: {
+                    icon: previewMarkerIcon,
+                },
+            });
+        }
+        leafletContainer.pm.Toolbar.changeControlOrder([
+            "customMarker",
+            "drawPolyline",
+            "drawRectangle",
+            "drawCircle",
+            "drawCircleMarker",
+            "drawPolygon",
+            "drawText",
+        ]);
+        const createShape = (e) => {
+            const currentColor = colorRef.current;
+            const id = e.layer._leaflet_id;
+            e.layer._customId = id;
+            if (e.shape === "customMarker") {
+                const newMarker = {
+                    id,
+                    position: e.layer.getLatLng(),
+                    icon: "Location",
+                    title: "Nouveau point d'intérêt",
+                    description: "",
+                    url: "",
+                    label: "",
+                    tooltipOpened: false,
+                };
+                setMarkers((prevMarkers) => [...prevMarkers, newMarker]);
+                e.layer.remove();
+            }
+            else if (e.shape === "Text") {
+                const textLayer = e.layer;
+                textLayer.on("pm:dragend", dragShape);
+                textLayer.on("pm:textchange", (event) => {
+                    const updatedText = event.text;
+                    setShapes((prevShapes) => prevShapes.map((shape) => shape.id === textLayer._leaflet_id
+                        ? { ...shape, content: updatedText }
+                        : shape));
+                });
+                const newShape = {
+                    id,
+                    shape: e.shape,
+                    latlngs: textLayer.getLatLng(),
+                    content: e.layer.options.text || "",
+                };
+                setShapes((prevShapes) => [...prevShapes, newShape]);
+            }
+            else {
+                e.layer.on("pm:dragend", dragShape);
+                e.layer.on("pm:edit", editShape);
+                const newShape = {
+                    id,
+                    shape: e.shape,
+                    latlngs: e.layer.getLatLngs
+                        ? e.layer.getLatLngs()
+                        : e.layer.getLatLng(),
+                    radius: e.shape === "Circle" ? e.layer.getRadius() : null,
+                    content: e.layer._text ? e.layer._text : null,
+                    color: currentColor,
+                };
+                setShapes((prevShapes) => [...prevShapes, newShape]);
+            }
+        };
+        leafletContainer.on("pm:create", createShape);
+        leafletContainer.on("pm:remove", removeShape);
+        return () => {
+            leafletContainer.pm.removeControls();
+            leafletContainer.pm.setGlobalOptions({ pmIgnore: true });
+            leafletContainer.off("pm:create", createShape);
+            leafletContainer.off("pm:remove", removeShape);
+        };
+    }, [
+        dragShape,
+        editShape,
+        iconSet,
+        leafletContainer,
+        removeShape,
+        setMarkers,
+        setShapes,
+    ]);
+    return null;
+};
+export default Geoman;

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

@@ -1 +1 @@
-{"version":3,"file":"icon-picker.d.ts","sourceRoot":"","sources":["../../../../src/common/components/editable-map/icon-picker.js"],"names":[],"mappings":"AAMA;;;;4CA2DC"}
+{"version":3,"file":"icon-picker.d.ts","sourceRoot":"","sources":["../../../../src/common/components/editable-map/icon-picker.js"],"names":[],"mappings":"AAMA;;;;4CA6DC"}

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import Button from "dt-design-system/es/button";
 import * as DSIcons from "dt-design-system/es/icons";
@@ -19,7 +19,7 @@ export default function IconPicker({ selectedIcon, callback, iconSet }) {
         e.stopPropagation();
         setOpened(false);
     };
-    return (_jsxs("div", { className: css.picker, children: [_jsx(Button, { variant: "secondary", onClick: togglePicker, children: _jsx(Icon, { className: css.selectedIcon }) }), opened && (_jsxs("div", { className: css.list, children: [_jsxs(Button, { variant: "link", className: css.back, onClick: closePicker, compact: true, children: [_jsx(DSIcons.ArrowLeft, {}), "Retour"] }), keys.map((key) => {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: css.picker, children: _jsx(Button, { variant: "secondary", onClick: togglePicker, children: _jsx(Icon, { className: css.selectedIcon }) }) }), opened && (_jsxs("div", { className: css.list, children: [_jsxs(Button, { variant: "link", className: css.back, onClick: closePicker, compact: true, children: [_jsx(DSIcons.ArrowLeft, {}), "Retour"] }), keys.map((key) => {
                         const updateSelected = (e) => {
                             e.stopPropagation();
                             callback(key);

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

@@ -1,3 +1,7 @@
+.picker {
+  flex: 0 0 auto;
+}
+
 svg.selectedIcon {
   flex: 0 0 44px;
   width: 44px;
@@ -21,7 +25,8 @@ svg.selectedIcon {
   border-radius: var(--ds-radius-100, 6px);
   overflow: auto;
   overscroll-behavior: contain;
-  z-index: 1;
+  scrollbar-width: thin;
+  z-index: 2;
 }
 
 .back {

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

@@ -0,0 +1,2 @@
+export function ColorPalette(props: any): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ui.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../../../../src/common/components/editable-map/icons/ui.js"],"names":[],"mappings":"AAAA,kFAMC"}

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ColorPalette(props) {
+    return (_jsx(Icon, { ...props, children: _jsx("path", { d: "M12 24A12.2 12.2 0 0 1 0 12 12.2 12.2 0 0 1 12.2 0a12.4 12.4 0 0 1 8.3 3.1c1 1 2 2.1 2.6 3.5a10 10 0 0 1 .9 4.3c0 2.3-.7 4-2.1 5.3a7.5 7.5 0 0 1-5.1 1.8h-2.2l-.4.1-.1.4.5 1c.3.5.4 1 .4 1.6 0 1-.3 1.7-.8 2.2-.6.5-1.3.7-2.2.7ZM5.4 13.2a1.7 1.7 0 0 0 1.8-1.8 1.7 1.7 0 0 0-1.8-1.8 1.7 1.7 0 0 0-1.8 1.8 1.7 1.7 0 0 0 1.8 1.8ZM9 8.4a1.7 1.7 0 0 0 1.8-1.8A1.7 1.7 0 0 0 9 4.8a1.7 1.7 0 0 0-1.8 1.8A1.7 1.7 0 0 0 9 8.4Zm6 0a1.7 1.7 0 0 0 1.8-1.8A1.7 1.7 0 0 0 15 4.8a1.7 1.7 0 0 0-1.8 1.8A1.7 1.7 0 0 0 15 8.4Zm3.6 4.8a1.7 1.7 0 0 0 1.8-1.8 1.7 1.7 0 0 0-1.8-1.8 1.7 1.7 0 0 0-1.8 1.8 1.7 1.7 0 0 0 1.8 1.8ZM12 21.6c.2 0 .3 0 .4-.2l.2-.3c0-.3-.2-.7-.4-1-.3-.4-.5-1-.5-1.7 0-.9.3-1.5.9-2 .6-.5 1.3-.8 2.1-.8h2.1c1.3 0 2.4-.4 3.4-1.2 1-.7 1.4-2 1.4-3.5 0-2.5-1-4.5-2.8-6a9.7 9.7 0 0 0-6.6-2.5c-2.7 0-5 1-7 2.8A9.1 9.1 0 0 0 2.5 12c0 2.7 1 5 2.8 6.8a9.3 9.3 0 0 0 6.8 2.8Z" }) }, "39"));
+}
+function Icon({ width = 24, height = 24, ...props }) {
+    return (_jsx("svg", { viewBox: `0 0 ${width} ${height}`, width: width, height: height, ...props, children: props.children }));
+}

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

@@ -0,0 +1,4 @@
+export default function InitialMarkerForm({ callback }: {
+    callback: any;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=initial-marker-form.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"initial-marker-form.d.ts","sourceRoot":"","sources":["../../../../src/common/components/editable-map/initial-marker-form.js"],"names":[],"mappings":"AAIA;;4CAuCC"}

package/es/common/components/editable-map/initial-marker-form.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Input from "dt-design-system/es/input";
+import Button from "dt-design-system/es/button";
+import styles from "./initial-marker-form.module.css";
+export default function InitialMarkerForm({ callback }) {
+    const addMarker = (event) => {
+        event.preventDefault();
+        const form = event.target;
+        const formData = new FormData(form);
+        const lat = formData.get("latitude");
+        const lng = formData.get("longitude");
+        if (lat && lng) {
+            callback({ lat, lng });
+        }
+    };
+    return (_jsxs("form", { className: styles.form, onSubmit: addMarker, children: [_jsx("div", { className: styles.title, children: "Ajouter un point d'int\u00E9r\u00EAt" }), _jsx(Input, { label: "Latitude", name: "latitude", placeholder: "48.132", type: "number", step: "any", compact: true, required: true }), _jsx(Input, { label: "Longitude", name: "longitude", placeholder: "3.524", type: "number", step: "any", compact: true, required: true }), _jsx(Button, { variant: "success", className: styles.button, type: "submit", children: "Confirmer" })] }));
+}

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

@@ -0,0 +1,25 @@
+.form {
+  position: absolute;
+  top: 10px;
+  left: 54px;
+  width: 220px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  padding: 10px;
+  background-color: var(--ds-grey-000, #fff);
+  border: 1px solid var(--ds-grey-200, #ededed);
+  border-radius: var(--ds-radius-200, 8px);
+  box-shadow: var(--ds-shadow-100, 0px 3px 6px rgba(0, 0, 0, 0.12));
+}
+
+.title {
+  margin-left: 3px;
+  font-weight: 700;
+  font-size: 15px;
+}
+
+.button {
+  margin-top: 5px;
+  margin-left: auto;
+}

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

@@ -1,18 +1,5 @@
-export default function MapEvents({ mapRef, markers, setMarkers, setCenter, setZoom, isEditing, element, }: {
-    mapRef: any;
-    markers: any;
-    setMarkers: any;
+export default function MapEvents({ setCenter, setZoom }: {
     setCenter: any;
     setZoom: any;
-    isEditing: any;
-    element: any;
 }): any;
-export namespace DEFAULT_MARKER_DATA {
-    let icon: string;
-    let title: string;
-    let description: string;
-    let url: string;
-    let label: string;
-    let tooltipOpened: boolean;
-}
 //# sourceMappingURL=map-events.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"map-events.d.ts","sourceRoot":"","sources":["../../../../src/common/components/editable-map/map-events.js"],"names":[],"mappings":"AAWA;;;;;;;;QAqCC"}
+{"version":3,"file":"map-events.d.ts","sourceRoot":"","sources":["../../../../src/common/components/editable-map/map-events.js"],"names":[],"mappings":"AAEA;;;QAWC"}

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

@@ -1,25 +1,5 @@
 import { useMapEvents } from "react-leaflet";
-export const DEFAULT_MARKER_DATA = {
-    icon: "Location",
-    title: "Nouveau point d'intérêt",
-    description: "",
-    url: "",
-    label: "",
-    tooltipOpened: false,
-};
-export default function MapEvents({ mapRef, markers, setMarkers, setCenter, setZoom, isEditing, element, }) {
-    const ids = markers.map((m) => m.id);
-    const newId = ids.length ? Math.max(...ids) + 1 : 1;
-    const addMarker = (e) => {
-        const hasAnOpenedPopup = Boolean(mapRef.current?.getContainer().querySelector(".leaflet-popup"));
-        const isFocused = Boolean(element.querySelector("cms-section-ui"));
-        if (!isEditing || !isFocused || hasAnOpenedPopup)
-            return;
-        setMarkers([
-            ...markers,
-            { id: newId, ...DEFAULT_MARKER_DATA, position: e.latlng },
-        ]);
-    };
+export default function MapEvents({ setCenter, setZoom }) {
     useMapEvents({
         dragend(e) {
             setCenter(e.target.getCenter());
@@ -27,9 +7,6 @@ export default function MapEvents({ mapRef, markers, setMarkers, setCenter, setZ
         zoomend(e) {
             setZoom(e.target.getZoom());
         },
-        click(e) {
-            addMarker(e);
-        },
     });
     return null;
 }

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

@@ -1,6 +1,12 @@
-export default function MarkerList({ isInDialog, markers, mapRef, iconSet }: {
+export default function MarkerList({ cmsMode, opened, setOpened, isInDialog, markers, setMarkers, isSorted, setIsSorted, mapRef, iconSet, }: {
+    cmsMode: any;
+    opened: any;
+    setOpened: any;
     isInDialog: any;
     markers: any;
+    setMarkers: any;
+    isSorted: any;
+    setIsSorted: any;
     mapRef: any;
     iconSet: any;
 }): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -7,13 +7,35 @@ import * as DTIcons from "dt-design-system/es/icons";
 import useWindowSizes from "../../hooks/use-window-sizes";
 import * as Icons from "./icons";
 import css from "./marker-list.module.css";
-export default function MarkerList({ isInDialog, markers, mapRef, iconSet }) {
-    const [opened, setOpened] = React.useState(true);
-    const importantMarkers = markers.filter((marker) => marker.important);
-    const otherMarkers = markers.filter((marker) => !marker.important);
-    const sortedImportantMarkers = importantMarkers.sort(alphaNumSortByTitle);
-    const sortedOtherMarkers = otherMarkers.sort(alphaNumSortByTitle);
-    const allMarkers = [...sortedImportantMarkers, ...sortedOtherMarkers];
+export default function MarkerList({ cmsMode, opened, setOpened, isInDialog, markers, setMarkers, isSorted, setIsSorted, mapRef, iconSet, }) {
+    const sortedMarkers = isSorted ? markers : markers.sort(alphaNumSortByTitle);
+    const moveMarker = (e, id, direction) => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (!isSorted)
+            setIsSorted(true);
+        setMarkers((prevMarkers) => {
+            const index = prevMarkers.findIndex((marker) => marker.id === id);
+            const newMarkers = [...prevMarkers];
+            const condition = direction === "up" ? index > 0 : index !== markers.length - 1;
+            if (condition) {
+                if (direction === "up") {
+                    [newMarkers[index - 1], newMarkers[index]] = [
+                        newMarkers[index],
+                        newMarkers[index - 1],
+                    ];
+                }
+                else {
+                    [newMarkers[index + 1], newMarkers[index]] = [
+                        newMarkers[index],
+                        newMarkers[index + 1],
+                    ];
+                }
+                return newMarkers;
+            }
+            return prevMarkers;
+        });
+    };
     const toggleList = (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -23,12 +45,12 @@ export default function MarkerList({ isInDialog, markers, mapRef, iconSet }) {
     const ToggleIcon = opened ? DTIcons.ChevronRight : DTIcons.Menu;
     React.useEffect(() => {
         setOpened(width > 992);
-    }, [width]);
+    }, [setOpened, width]);
     const classes = classNames(css.list, {
         [css.listOpened]: opened,
         [css.listIsInDialog]: isInDialog,
     });
-    return (_jsxs("div", { className: classes, children: [opened && (_jsx("div", { className: css.inner, children: allMarkers.map(({ id, icon, title, position, important }) => {
+    return (_jsxs("div", { className: classes, children: [opened && (_jsx("div", { className: css.inner, children: sortedMarkers.map(({ id, icon, title, position, important }) => {
                     const focusMarker = (e) => {
                         e.stopPropagation();
                         e.preventDefault();
@@ -53,8 +75,8 @@ export default function MarkerList({ isInDialog, markers, mapRef, iconSet }) {
                     const classes = classNames(css.button, {
                         [css.buttonImportant]: important,
                     });
-                    return (_jsxs("a", { href: "", className: classes, onClick: focusMarker, children: [_jsx(Icon, { className: css.icon }), _jsx("span", { children: title })] }, id));
-                }) })), _jsx(Button, { type: "button", variant: "secondary", className: css.toggle, onClick: toggleList, children: _jsx(ToggleIcon, {}) })] }));
+                    return (_jsxs("a", { href: "", className: classes, onClick: focusMarker, children: [_jsx(Icon, { className: css.icon }), _jsx("span", { children: title }), _jsxs("div", { className: css.movements, children: [_jsx(Button, { variant: "transparent", className: css.move, onClick: (e) => moveMarker(e, id, "up"), children: _jsx(DTIcons.ChevronUp, { className: css.moveIcon }) }), _jsx(Button, { variant: "transparent", className: css.move, onClick: (e) => moveMarker(e, id, "down"), children: _jsx(DTIcons.ChevronDown, { className: css.moveIcon }) })] })] }, id));
+                }) })), !cmsMode && (_jsx(Button, { type: "button", variant: "secondary", className: css.toggle, onClick: toggleList, children: _jsx(ToggleIcon, {}) }))] }));
 }
 function alphaNumSortByTitle(a, b) {
     return a.title.localeCompare(b.title, undefined, {

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

@@ -7,26 +7,14 @@
   display: flex;
   flex-direction: column;
   gap: 4px;
+  background-color: var(--ds-grey-000, #fff);
   border-left: 1px solid var(--ds-grey-200, #ededed);
+  border: 1px solid var(--ds-grey-200, #ededed);
   border-radius: 0 var(--ds-radius-100, 6px) var(--ds-radius-100, 6px) 0;
-  backdrop-filter: brightness(110%) contrast(90%)
-    blur(calc(var(--ds-blur, 5px) * 3));
   transition: background-color 160ms
     var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
 }
 
-.list::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: var(--ds-grey-100, #f8f8f8);
-  border-radius: inherit;
-  opacity: 0.75;
-}
-
 button.toggle {
   position: absolute;
   bottom: 8px;
@@ -45,18 +33,16 @@ button.toggle:hover {
   flex: 1 1 100%;
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  padding: 0 8px;
-  padding-top: 8px;
+  gap: 2px;
+  padding: 8px;
   overflow: auto;
   animation: marker-list-inner-appearance 160ms
     var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
   background: linear-gradient(
-      var(--ds-grey-100, #f8f8f8) 30%,
+      var(--ds-grey-000, #fff) 30%,
       hsla(0, 0%, 100%, 0)
     ),
-    linear-gradient(hsla(0, 0%, 100%, 0), var(--ds-grey-100, #f8f8f8) 70%) 0
-      100%,
+    linear-gradient(hsla(0, 0%, 100%, 0), var(--ds-grey-000, #fff) 70%) 0 100%,
     radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.25), transparent),
     radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.25), transparent)
       0 100%;
@@ -76,7 +62,7 @@ button.toggle:hover {
   display: flex;
   align-items: center;
   gap: 1ch;
-  padding: 6px;
+  padding: 4px 6px;
   color: inherit;
   font-size: 14px;
   text-align: left;
@@ -109,6 +95,28 @@ button.toggle:hover {
     var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
 }
 
+.movements {
+  display: flex;
+  flex-direction: column;
+  opacity: 0;
+  touch-action: none;
+  margin-left: auto;
+}
+
+.move {
+  --ds-button-hover-background: var(--ds-grey-000, #fff);
+}
+
+svg.moveIcon {
+  --size: 12px;
+  fill: var(--ds-grey-800, #000);
+}
+
 .button:is(:hover, :focus) .icon {
   transform: scale(1.08);
 }
+
+:global(.cms--editing) .button:is(:hover, :focus) .movements {
+  opacity: 1;
+  touch-action: auto;
+}

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

@@ -4,9 +4,9 @@ import * as ReactDOM from "react-dom/server";
 import * as L from "leaflet";
 import { Marker as LeafletMarker, Popup, Tooltip } from "react-leaflet";
 import EditForm from "./edit-form";
+import PopupData from "./popup-data";
 import * as Icons from "./icons";
 import css from "./markers.module.css";
-import PopupData from "./popup-data";
 export default function Markers({ markers, setMarkers, iconSet, isEditing }) {
     return markers.map((marker, i) => {
         return (_jsx(Marker, { marker: marker, setMarkers: setMarkers, iconSet: iconSet, isEditing: isEditing }, i));
@@ -17,27 +17,10 @@ function Marker({ marker, setMarkers, iconSet, isEditing }) {
     const popupRef = React.useRef();
     const { id, icon, title, position, tooltipOpened } = marker;
     const Icon = Icons[iconSet][icon] || Icons[iconSet].Location;
-    const updatePosition = (e) => {
-        setMarkers((currents) => {
-            return currents.map((marker) => {
-                if (marker.id === id) {
-                    return { ...marker, position: e.target.getLatLng() };
-                }
-                return marker;
-            });
-        });
-    };
     const tooltipProps = tooltipOpened
         ? { direction: "right", permanent: true, offset: [6, -12] }
         : { direction: "right", offset: [6, -12] };
-    return (_jsxs(LeafletMarker, { ref: markerRef, draggable: isEditing, eventHandlers: {
-            dragend(e) {
-                updatePosition(e);
-            },
-            click(e) {
-                e.originalEvent.stopPropagation();
-            },
-        }, position: position, icon: L.divIcon({
+    return (_jsxs(LeafletMarker, { id: id, ref: markerRef, draggable: false, position: position, icon: L.divIcon({
             className: css.markerIcon,
             html: ReactDOM.renderToString(_jsx(Icon, { "data-id": id })),
         }), children: [!isEditing && _jsx(Tooltip, { ...tooltipProps, children: title }), _jsx(Popup, { ref: popupRef, offset: [0, -24], children: isEditing ? (_jsx(EditForm, { popupRef: popupRef, marker: marker, setMarkers: setMarkers, iconSet: iconSet })) : (_jsx(PopupData, { marker: marker })) })] }, id));

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

@@ -1 +1 @@
-{"version":3,"file":"popup-data.d.ts","sourceRoot":"","sources":["../../../../src/common/components/editable-map/popup-data.js"],"names":[],"mappings":"AAIA;;4CA8BC"}
+{"version":3,"file":"popup-data.d.ts","sourceRoot":"","sources":["../../../../src/common/components/editable-map/popup-data.js"],"names":[],"mappings":"AAIA;;4CAiCC"}

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

@@ -3,10 +3,10 @@ import * as React from "react";
 import Button from "dt-design-system/es/button";
 import css from "./popup-data.module.css";
 export default function PopupData({ marker }) {
-    const { title, description, url, label } = marker;
+    const { title, image, description, url, label } = marker;
     const isExternalUrl = /^((http|https):\/\/)/.test(url);
     const target = isExternalUrl ? "_blank" : undefined;
     const rel = isExternalUrl ? "noopener" : undefined;
     const formattedDescription = description.replace(/\n/g, "<br />");
-    return (_jsxs("div", { className: css.data, children: [_jsx("div", { className: css.title, children: title }), formattedDescription && (_jsx("div", { className: css.description, dangerouslySetInnerHTML: { __html: formattedDescription } })), url?.trim() && (_jsx(Button, { tag: "a", href: url.trim(), className: css.link, target: target, rel: rel, children: label || "En savoir plus" }))] }));
+    return (_jsxs("div", { className: css.data, children: [image && _jsx("img", { className: css.image, src: image, alt: "" }), _jsxs("div", { className: css.inner, children: [_jsx("div", { className: css.title, children: title }), formattedDescription && (_jsx("div", { className: css.description, dangerouslySetInnerHTML: { __html: formattedDescription } })), url?.trim() && (_jsx(Button, { tag: "a", href: url.trim(), className: css.link, target: target, rel: rel, children: label || "En savoir plus" }))] })] }));
 }

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

@@ -6,6 +6,21 @@
   flex-direction: column;
   gap: 6px;
   overflow: auto;
+  border-radius: 12px;
+}
+
+.image {
+  /* position: absolute;
+  top: 0;
+  left: 0; */
+  height: 150px;
+  width: 100%;
+}
+
+.inner {
+  display: flex;
+  flex-direction: column;
+  padding: 13px 24px 13px 20px;
 }
 
 .title {

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

@@ -5,6 +5,7 @@
   width: fit-content;
   padding: 10px;
   background-color: var(--ds-grey-000, #fff);
+  border: 1px solid var(--ds-grey-200, #ededed);
   border-radius: var(--ds-radius-200, 10px);
   box-shadow: var(--ds-shadow-100, 0px 3px 6px rgba(0, 0, 0, 0.12));
 }

package/es/common/components/editable-map/utils/file-manager.d.ts

@@ -0,0 +1,2 @@
+export declare function load(changed: (path: string) => void, width: number, height: number): Promise<void>;
+//# sourceMappingURL=file-manager.d.ts.map

package/es/common/components/editable-map/utils/file-manager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-manager.d.ts","sourceRoot":"","sources":["../../../../../src/common/components/editable-map/utils/file-manager.ts"],"names":[],"mappings":"AAGA,wBAAsB,IAAI,CACxB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,EAC/B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,iBAaf"}