ublo-lib 1.41.0 → 1.42.0

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

@@ -1,35 +0,0 @@
-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 },
-        ]);
-    };
-    useMapEvents({
-        dragend(e) {
-            setCenter(e.target.getCenter());
-        },
-        zoomend(e) {
-            setZoom(e.target.getZoom());
-        },
-        click(e) {
-            addMarker(e);
-        },
-    });
-    return null;
-}

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

@@ -1,7 +0,0 @@
-export default function MarkerList({ isInDialog, markers, mapRef, iconSet }: {
-    isInDialog: any;
-    markers: any;
-    mapRef: any;
-    iconSet: any;
-}): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=marker-list.d.ts.map

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

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

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

@@ -1,64 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import * as L from "leaflet";
-import classNames from "classnames";
-import Button from "dt-design-system/es/button";
-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];
-    const toggleList = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setOpened(!opened);
-    };
-    const { width } = useWindowSizes();
-    const ToggleIcon = opened ? DTIcons.ChevronRight : DTIcons.Menu;
-    React.useEffect(() => {
-        setOpened(width > 992);
-    }, [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 }) => {
-                    const focusMarker = (e) => {
-                        e.stopPropagation();
-                        e.preventDefault();
-                        mapRef.current.setView(position, 17);
-                        setTimeout(() => {
-                            mapRef.current.eachLayer((layer) => {
-                                if (layer instanceof L.Marker) {
-                                    const marker = layer
-                                        .getElement()
-                                        .querySelector(`[data-id="${id}"]`);
-                                    if (marker) {
-                                        layer.openPopup();
-                                    }
-                                }
-                            });
-                        }, 300);
-                        if (width <= 992) {
-                            setOpened(false);
-                        }
-                    };
-                    const Icon = Icons[iconSet][icon] || Icons[iconSet].Location;
-                    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, {}) })] }));
-}
-function alphaNumSortByTitle(a, b) {
-    return a.title.localeCompare(b.title, undefined, {
-        numeric: true,
-        sensitivity: "base",
-    });
-}

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

@@ -1,114 +0,0 @@
-.list {
-  position: absolute;
-  top: 0;
-  right: 0;
-  max-width: 250px;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  border-left: 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;
-  right: 8px;
-  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.toggle:hover {
-  background-color: var(--ds-grey-100, #f8f8f8);
-}
-
-.inner {
-  position: relative;
-  flex: 1 1 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 0 8px;
-  padding-top: 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%,
-      hsla(0, 0%, 100%, 0)
-    ),
-    linear-gradient(hsla(0, 0%, 100%, 0), var(--ds-grey-100, #f8f8f8) 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%;
-  background-repeat: no-repeat;
-  background-size: 100% 30px, 100% 30px, 100% 10px, 100% 10px;
-  background-attachment: local, local, scroll, scroll;
-  border-radius: inherit;
-}
-
-@keyframes marker-list-inner-appearance {
-  0% {
-    opacity: 0;
-  }
-}
-
-.button {
-  display: flex;
-  align-items: center;
-  gap: 1ch;
-  padding: 6px;
-  color: inherit;
-  font-size: 14px;
-  text-align: left;
-  border-radius: var(--ds-radius-200, 10px);
-  cursor: pointer;
-  user-select: none;
-  transition: background-color 160ms
-    var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
-}
-
-.listIsInDialog .button:first-of-type {
-  margin-right: 30px;
-}
-
-.button:is(:hover, :focus) {
-  background-color: var(--ds-grey-100, #f8f8f8);
-}
-
-.buttonImportant {
-  font-weight: 700;
-}
-
-.icon {
-  flex: 0 0 32px;
-  width: 32px;
-  height: 32px;
-  filter: drop-shadow(var(--ds-shadow-100, 0px 3px 6px rgba(0, 0, 0, 0.12)));
-  fill: 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));
-}
-
-.button:is(:hover, :focus) .icon {
-  transform: scale(1.08);
-}

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

@@ -1,7 +0,0 @@
-export default function Markers({ markers, setMarkers, iconSet, isEditing }: {
-    markers: any;
-    setMarkers: any;
-    iconSet: any;
-    isEditing: any;
-}): any;
-//# sourceMappingURL=markers.d.ts.map

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

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

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

@@ -1,44 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-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 * 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));
-    });
-}
-function Marker({ marker, setMarkers, iconSet, isEditing }) {
-    const markerRef = React.useRef();
-    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({
-            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/markers.module.css

@@ -1,26 +0,0 @@
-.markerIcon > svg {
-  position: relative;
-  width: 42px;
-  height: 42px;
-  fill: var(--ds-secondary, var(--ds-blue-400, #4177f6));
-  filter: drop-shadow(var(--ds-shadow-100, 0px 3px 6px rgba(0, 0, 0, 0.12)));
-  transform: translate(-35%, -65%);
-  transition: transform 160ms
-    var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
-}
-
-.markerIcon:hover > svg {
-  transform: translate(-35%, -65%) scale(1.1);
-}
-
-.markerIcon:has([data-pin])::after {
-  content: "";
-  top: calc(100% + 1px);
-  left: calc(50% - 6px);
-  width: 16px;
-  position: absolute;
-  height: 10px;
-  background-color: var(--ds-grey-700, #232324);
-  border-radius: 50%;
-  opacity: 0.3;
-}

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

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

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

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

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

@@ -1,12 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 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" }))] }));
-}

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

@@ -1,26 +0,0 @@
-.data {
-  position: relative;
-  max-width: 280px;
-  max-height: 280px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  overflow: auto;
-}
-
-.title {
-  position: sticky;
-  top: 0;
-  padding: 4px 0;
-  font-size: 16px;
-  font-weight: 700;
-}
-
-.description {
-  font-size: 14px;
-}
-
-.link {
-  margin-top: 6px;
-  color: var(--ds-grey-000, #fff) !important;
-}

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

@@ -1,5 +0,0 @@
-export default function SlopesToggle({ showSlopes, setShowSlopes }: {
-    showSlopes: any;
-    setShowSlopes: any;
-}): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=slopes-toggle.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"slopes-toggle.d.ts","sourceRoot":"","sources":["../../../../src/common/components/editable-map/slopes-toggle.js"],"names":[],"mappings":"AASA;;;4CAaC"}

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

@@ -1,13 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import Checkbox from "dt-design-system/es/checkbox";
-import css from "./slopes-toggle.module.css";
-const labels = {
-    fr: "Afficher les pistes",
-    en: "Show slopes",
-};
-export default function SlopesToggle({ showSlopes, setShowSlopes }) {
-    const lang = document.documentElement.getAttribute("lang");
-    const label = lang === "fr" ? labels.fr : labels.en;
-    return (_jsx("div", { className: css.slopesToggle, children: _jsx(Checkbox, { label: label, checked: showSlopes, onCheckedChange: setShowSlopes }) }));
-}

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

@@ -1,14 +0,0 @@
-.slopesToggle {
-  position: absolute;
-  bottom: 10px;
-  left: 10px;
-  width: fit-content;
-  padding: 10px;
-  background-color: var(--ds-grey-000, #fff);
-  border-radius: var(--ds-radius-200, 10px);
-  box-shadow: var(--ds-shadow-100, 0px 3px 6px rgba(0, 0, 0, 0.12));
-}
-
-.slopesToggle span {
-  width: 24px;
-}