ublo-lib 1.41.1 → 1.42.0

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

@@ -1,64 +0,0 @@
-.form {
-  position: relative;
-  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;
-  gap: 8px;
-}
-
-.title {
-  flex: 1 1 100%;
-}
-
-.description textarea {
-  height: 80px;
-  resize: none !important;
-}
-
-.buttons {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 6px;
-}

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

@@ -1,6 +0,0 @@
-export default function EditableMap({ format, iconSet, hideSlopes }: {
-    format: any;
-    iconSet: any;
-    hideSlopes: any;
-}): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=editable-map.d.ts.map

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

@@ -1 +0,0 @@
-{"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,184 +0,0 @@
-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 classNames from "classnames";
-import Geoman from "./geoman";
-import ColorPicker from "./color-picker";
-import MapEvents from "./map-events";
-import Markers from "./markers";
-import Cluster from "./cluster";
-import InitialMarkerForm from "./initial-marker-form";
-import MarkerList from "./marker-list";
-import FullScreenButton from "./full-screen-button";
-import SlopesToggle from "./slopes-toggle";
-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";
-    const defaultCenter = presets?.center || FRANCE_CENTER;
-    const defaultZoom = presets?.zoom || DEFAULT_ZOOM;
-    const [center, setCenter] = React.useState(defaultCenter);
-    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();
-    };
-    const resetCenter = () => {
-        setCenter(defaultCenter);
-        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;
-        }
-    }, [isInDialog]);
-    React.useEffect(() => {
-        if (isEditing) {
-            const newPresets = {
-                markers,
-                isMarkerListSorted,
-                shapes,
-                zoom,
-                center,
-                showSlopes,
-            };
-            element.setAttribute("data-presets", JSON.stringify(newPresets));
-        }
-    }, [
-        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;
-    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

@@ -1,251 +0,0 @@
-.container,
-.map {
-  width: 100%;
-  height: 100%;
-  font-family: inherit !important;
-  border-radius: var(--ds-radius-100, 6px);
-}
-
-.container {
-  position: relative;
-  display: flex;
-}
-
-button.resetCenter {
-  position: absolute;
-  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;
-}
-
-.map :global(.leaflet-top),
-.map :global(.leaflet-bottom) {
-  position: static;
-}
-
-.map :global(.leaflet-control-attribution) {
-  position: absolute;
-  left: 50%;
-  bottom: 4px;
-  white-space: nowrap;
-  border-radius: var(--ds-radius-100, 6px);
-  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;
-  top: 50%;
-  left: 50%;
-  width: 400px;
-  max-width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: hsl(var(--grey-600));
-  font-size: 17px;
-  letter-spacing: 1px;
-  text-align: center;
-  transform: translate(-50%, -50%);
-}
-
-.map :global(.leaflet-popup-tip-container),
-.map :global(.leaflet-tooltip::before) {
-  content: none;
-  display: none;
-}
-
-.map :global(.leaflet-popup-content-wrapper) {
-  position: relative;
-  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));
-}
-
-:global(.cms--editing) .map :global(.leaflet-popup-content) {
-  width: auto !important;
-}
-
-.map:global(.leaflet-container) :global(a.leaflet-popup-close-button) {
-  top: 5px;
-  right: 5px;
-  color: var(--ds-grey-700, #232324);
-  font-size: 22px;
-}
-
-.map :global(.leaflet-tile-pane > :first-child) {
-  filter: var(
-    --editable-map-filter,
-    saturate(0.05) hue-rotate(100deg) contrast(1.2)
-  );
-}
-
-.map :global(.marker-cluster) {
-  color: var(--ds-grey-000, #fff);
-  background-color: transparent;
-}
-
-.map :global(.marker-cluster::before) {
-  content: "";
-  position: absolute;
-  top: 1px;
-  left: 1px;
-  width: calc(100% - 2px);
-  height: calc(100% - 2px);
-  background-color: var(--ds-grey-000, #fff);
-  border-radius: 50%;
-  opacity: 0.85;
-  pointer-events: none;
-  filter: drop-shadow(var(--ds-shadow-100, 0px 3px 6px rgba(0, 0, 0, 0.12)));
-  transition: transform 160ms
-    var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
-}
-
-.map :global(.marker-cluster:hover::before) {
-  transform: scale(1.08);
-}
-
-.map :global(.marker-cluster > div) {
-  position: relative;
-  font-weight: 700;
-  font-size: 16px;
-  background-color: var(--ds-secondary, var(--ds-blue-400, #4177f6));
-  transition: transform 160ms
-    var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
-}
-
-.map :global(.marker-cluster:hover > div) {
-  transform: scale(1.1);
-}
-
-.map :global(.leaflet-tooltip) {
-  padding: 10px 16px;
-  color: var(--ds-grey-700, #262626);
-  font-size: 15px;
-  font-weight: 700;
-  font-family: inherit;
-  text-shadow: -1px 0px 1px white, 0px -1px 1px white, 1px 0px 1px white,
-    0px 1px 1px white;
-  background-color: transparent;
-  box-shadow: none;
-  border: 0;
-  animation: leaflet-tooltip-appearance 320ms
-    var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
-}
-
-@keyframes leaflet-tooltip-appearance {
-  0% {
-    opacity: 0;
-  }
-}
-
-@media (max-width: 992px) {
-  .map :global(.leaflet-tooltip) {
-    display: none !important;
-  }
-}
-
-.map:global(.leaflet-touch .leaflet-control-layers),
-.map:global(.leaflet-touch .leaflet-bar) {
-  border: 0;
-}
-
-.map:global(.leaflet-touch .leaflet-control-layers 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));
-  transition: background-color 160ms
-    var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
-}
-
-.map:global(.leaflet-touch .leaflet-control-layers a[aria-disabled="true"]),
-.map:global(.leaflet-touch .leaflet-bar a[aria-disabled="true"]) {
-  cursor: not-allowed;
-}
-
-.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-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(.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);
-}
-
-.map:global(.leaflet-touch .leaflet-control-layers a span),
-.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,7 +0,0 @@
-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 +0,0 @@
-{"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,75 +0,0 @@
-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, isListOpened, }) {
-    const [fullScreenCompatible, setFullScreenCompatible] = React.useState(true);
-    const cleanupFullScreen = React.useCallback(() => {
-        if (!document.fullscreenElement) {
-            setFullScreen(false);
-        }
-    }, [setFullScreen]);
-    React.useEffect(() => {
-        setFullScreenCompatible(isFullScreenCompatible());
-        return () => {
-            document.removeEventListener("fullscreenchange", cleanupFullScreen);
-        };
-    }, [cleanupFullScreen]);
-    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();
-        if (!fullScreen) {
-            enterFullScreen(containerRef.current, setFullScreen);
-            document.addEventListener("fullscreenchange", cleanupFullScreen);
-        }
-        else {
-            exitFullScreen(setFullScreen);
-            document.removeEventListener("fullscreenchange", cleanupFullScreen);
-        }
-    };
-    return (_jsx(Button, { variant: "secondary", type: "button", className: classes, onClick: toggleFullScreen, children: _jsx(Icon, {}) }));
-}
-function isFullScreenCompatible() {
-    return (document.fullscreenEnabled ||
-        document.webkitFullscreenEnabled ||
-        document.mozFullscreenEnabled ||
-        document.msFullscreenEnabled);
-}
-function enterFullScreen(el, setFullScreen) {
-    if (el.requestFullscreen) {
-        el.requestFullscreen();
-    }
-    else if (el.mozRequestFullScreen) {
-        el.mozRequestFullScreen();
-    }
-    else if (el.webkitRequestFullscreen) {
-        el.webkitRequestFullscreen();
-    }
-    else if (el.msRequestFullscreen) {
-        el.msRequestFullscreen();
-    }
-    setFullScreen(true);
-}
-function exitFullScreen(setFullScreen) {
-    if (document.exitFullscreen) {
-        document.exitFullscreen();
-    }
-    else if (document.webkitExitFullscreen) {
-        document.webkitExitFullscreen();
-    }
-    else if (document.mozCancelFullScreen) {
-        document.mozCancelFullScreen();
-    }
-    else if (document.msExitFullscreen) {
-        document.msExitFullscreen();
-    }
-    setFullScreen(false);
-}

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

@@ -1,15 +0,0 @@
-button.button {
-  position: absolute;
-  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

@@ -1,8 +0,0 @@
-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

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