ublo-lib 1.21.9 → 1.21.11

package/es/lbm/components/lumiplan/i18n/fr.json

@@ -205,12 +205,11 @@
       "TRAIL_RUNNING": "Trail",
       "VIDEO_ZONE": "Zone vidéo"
     },
-    "trailLevels": {
+    "trail-levels": {
       "GREEN": "Verte",
       "BLUE": "Bleue",
       "RED": "Rouge",
-      "BLACK": "Noire",
-      "YELLOW": "Jaune"
+      "BLACK": "Noire"
     },
     "lifts": {
       "TRAIN": "Train",

package/es/lbm/components/lumiplan/opening.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"opening.d.ts","sourceRoot":"","sources":["../../../../src/lbm/components/lumiplan/opening.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,aAAa,EAAO,MAAM,SAAS,CAAC;AAGlD,KAAK,KAAK,GAAG;IACX,aAAa,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;CACxB,CAAC;AAEF,QAAA,MAAM,OAAO,8EAsEZ,CAAC;AAqCF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"opening.d.ts","sourceRoot":"","sources":["../../../../src/lbm/components/lumiplan/opening.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,aAAa,EAAO,MAAM,SAAS,CAAC;AAGlD,KAAK,KAAK,GAAG;IACX,aAAa,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;CACxB,CAAC;AAEF,QAAA,MAAM,OAAO,8EAwEZ,CAAC;AAqCF,eAAe,OAAO,CAAC"}

package/es/lbm/components/lumiplan/opening.js

@@ -21,15 +21,15 @@ const Opening = React.forwardRef(({ resortOpening, showOpening }, ref) => {
     const dayIndex = new Date().getDay() - 1;
     const orderedDays = reorganizeDays(dawnSkiingDays, dayIndex);
     const orderedNights = reorganizeDays(nightSkiingDays, dayIndex);
-    return (_jsx("div", { ref: ref, className: css.opening, "data-tags": t(lang, "opening.navigation-title"), children: _jsx("div", { className: css.tableOuter, children: _jsxs("table", { className: css.table, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", {}), orderedDays.map((day, i) => {
-                                    const dayNumber = new Date();
-                                    dayNumber.setDate(dayNumber.getDate() + i);
-                                    return (_jsx("th", { className: css.heading, children: _jsxs("div", { className: css.headingInner, children: [_jsx(T, { id: `opening.days.${day.dayType}` }), " ", dayNumber.getDate()] }) }, day.dayType));
-                                })] }) }), _jsxs("tbody", { children: [showOpening?.includes("dawn") && (_jsx("tr", { children: _jsx(Rows, { kind: "dawn", rows: orderedDays }) })), showOpening?.includes("night") && (_jsx("tr", { children: _jsx(Rows, { kind: "night", rows: orderedNights }) }))] })] }) }) }));
+    return (_jsx("div", { ref: ref, className: css.opening, "data-tags": t(lang, "opening.navigation-title"), children: _jsx("div", { className: css.tableOuter, children: _jsx("div", { className: css.tableInner, children: _jsxs("table", { className: css.table, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", {}), orderedDays.map((day, i) => {
+                                        const dayNumber = new Date();
+                                        dayNumber.setDate(dayNumber.getDate() + i);
+                                        return (_jsx("th", { className: css.heading, children: _jsxs("div", { className: css.headingInner, children: [_jsx(T, { id: `opening.days.${day.dayType}` }), " ", dayNumber.getDate()] }) }, day.dayType));
+                                    })] }) }), _jsxs("tbody", { children: [showOpening?.includes("dawn") && (_jsx("tr", { children: _jsx(Rows, { kind: "dawn", rows: orderedDays }) })), showOpening?.includes("night") && (_jsx("tr", { children: _jsx(Rows, { kind: "night", rows: orderedNights }) }))] })] }) }) }) }));
 });
 function Rows({ kind, rows }) {
     const Icon = kind === "dawn" ? DawnIcon : NightIcon;
-    return (_jsxs(_Fragment, { children: [_jsx("td", { className: css.heading, children: _jsxs("span", { className: css.headingInner, children: [_jsx(Icon, {}), _jsx(T, { id: `opening.${kind}` })] }) }), rows.map(({ dayType, open }) => {
+    return (_jsxs(_Fragment, { children: [_jsx("td", { className: css.heading, children: _jsxs("span", { className: css.rowHeadingInner, children: [_jsx(Icon, {}), _jsx(T, { id: `opening.${kind}` })] }) }), rows.map(({ dayType, open }) => {
                 const code = open ? "opening.available" : "opening.unavailable";
                 const classes = classNames(css.cell, {
                     [css.cellAvailable]: open,

package/es/lbm/components/lumiplan/opening.module.css

@@ -26,27 +26,44 @@
 }
 
 .tableOuter {
-  padding: 20px;
+  position: relative;
   border: 2px solid hsl(var(--primary));
   border-radius: calc(var(--radius-400) * 2);
-  background-image: linear-gradient(to right, white, white),
-    linear-gradient(to right, white, white),
-    linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)),
-    linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));
-  background-position: left center, right center, left center, right center;
-  background-repeat: no-repeat;
-  background-color: white;
-  background-size: 40px 100%, 40px 100%, 20px 100%, 20px 100%;
+  overflow: hidden;
+  transform: translateZ(0);
+  isolation: isolate;
+}
 
-  background-attachment: local, local, scroll, scroll;
+.tableOuter::before,
+.tableOuter::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  width: 50px;
+  height: 100%;
+  background: linear-gradient(
+    to right,
+    #fff,
+    rgba(255, 255, 255, 0.8),
+    transparent
+  );
+  z-index: 1;
+  transition: opacity 320ms var(--transition-easing);
+  pointer-events: none;
+}
 
-  overflow: auto;
+.tableOuter::before {
+  left: 0;
 }
 
-@media (min-width: 580px) {
-  .tableOuter {
-    padding: 40px;
-  }
+.tableOuter::after {
+  right: 0;
+  transform: rotate(0.5turn);
+}
+
+.tableInner {
+  padding: 20px 30px;
+  overflow: auto;
 }
 
 .table {
@@ -59,39 +76,47 @@
 }
 
 .heading {
-  width: fit-content;
-  min-width: 120px;
   text-align: center;
   margin-top: 40px;
   padding-right: 10px;
 }
 
-.headingMini {
+.headingInner {
+  width: fit-content;
+  min-width: 120px;
   display: flex;
-  justify-content: center;
-  line-height: 1;
+  flex-direction: column;
+  text-align: center;
+  gap: 10px;
+  margin: 20px 0;
+  background-color: hsla(var(--secondary), 10%);
   white-space: nowrap;
-  min-width: 60px;
 }
 
-@media (min-width: 580px) {
-  .headingMini {
-    min-width: 120px;
-  }
-}
-
-.headingInner {
-  height: 18px;
+.rowHeadingInner {
+  width: fit-content;
+  min-width: 90px;
   display: flex;
-  align-items: flex-end;
-  justify-content: center;
+  flex-direction: column;
   text-align: center;
   gap: 10px;
+  padding: 0 10px;
   margin: 20px 0;
+  text-align: left;
   background-color: hsla(var(--secondary), 10%);
   white-space: nowrap;
 }
 
+@media (min-width: 700px) {
+  .rowHeadingInner {
+    min-width: 120px;
+    height: 18px;
+    align-items: flex-end;
+    flex-direction: row;
+    justify-content: center;
+  }
+}
+
 .headingInner > svg {
   min-width: 30px;
   width: 30px;

package/es/lbm/components/lumiplan/pois.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pois.d.ts","sourceRoot":"","sources":["../../../../src/lbm/components/lumiplan/pois.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,KAAK,EAAO,QAAQ,EAAQ,MAAM,SAAS,CAAC;AAwDnD,KAAK,KAAK,GAAG;IACX,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CACxB,CAAC;AASF,QAAA,MAAM,IAAI,8EA0LR,CAAC;AAIH,eAAe,IAAI,CAAC"}
+{"version":3,"file":"pois.d.ts","sourceRoot":"","sources":["../../../../src/lbm/components/lumiplan/pois.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,KAAK,EAAO,QAAQ,EAAQ,MAAM,SAAS,CAAC;AAwDnD,KAAK,KAAK,GAAG;IACX,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CACxB,CAAC;AASF,QAAA,MAAM,IAAI,8EAiMR,CAAC;AAIH,eAAe,IAAI,CAAC"}

package/es/lbm/components/lumiplan/pois.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 getConfig from "next/config";
 import Image from "next/image";
@@ -48,7 +48,7 @@ const TRAIL_ICONS = {
     PATH: TrailIcons.Pieton,
     PEDESTRIAN: TrailIcons.Pieton,
     ROUTE_OF_CROSS_COUNTRY: TrailIcons.Freeride,
-    SKI_TOURING: TrailIcons.Luge,
+    SKI_TOURING: TrailIcons.SkiFond,
     SLEDDING_HILL: TrailIcons.Luge,
     SNOWPARK: TrailIcons.Snowpark,
     SNOWPARK_LINE: TrailIcons.Snowpark,
@@ -102,11 +102,13 @@ const Pois = React.forwardRef(({ pois }, ref) => {
                         const translationCode = isLift
                             ? `pois.lifts.${liftType}`
                             : `pois.trails.${trailType}`;
-                        const hasTrailLevel = trailLevel !== undefined && trailLevel !== "UNDEF";
+                        const hasTrailLevel = trailLevel !== undefined &&
+                            trailLevel !== "UNDEF" &&
+                            trailLevel !== "YELLOW";
                         const trailLevelLabel = hasTrailLevel
-                            ? `(${t(lang, `pois.trailLevels.${trailLevel}`)})`
+                            ? `(${t(lang, `pois.trail-levels.${trailLevel}`)})`
                             : null;
-                        const specialTrail = Object.keys(SPECIAL_TRAILS).find((key) => name?.includes(key));
+                        const specialTrail = Object.keys(SPECIAL_TRAILS).find((key) => name?.toLowerCase()?.includes(key.toLowerCase()));
                         const message = messagePoi?.data?.find(({ language }) => {
                             const _lang = lang === "fr" ? "fr_FR" : "en_US";
                             return language === _lang;
@@ -116,7 +118,7 @@ const Pois = React.forwardRef(({ pois }, ref) => {
                         const classes = classNames(css.poi, {
                             [css[trailLevel]]: hasTrailLevel,
                         });
-                        let status = "OPEN";
+                        let status = "CLOSED";
                         if (openingStatus?.includes("DELAYED")) {
                             status = "DELAYED";
                         }
@@ -126,14 +128,15 @@ const Pois = React.forwardRef(({ pois }, ref) => {
                         else if (openingStatus?.includes("FORECAST")) {
                             status = "FORECAST";
                         }
-                        else {
-                            status = "CLOSED";
+                        else if (openingStatus?.includes("OPEN")) {
+                            status = "OPEN";
                         }
                         const statusCode = `pois.opening-statuses.${status}`;
                         const Icon = isLift
                             ? LIFT_ICONS[liftType] || LIFT_ICONS.DEFAULT
                             : TRAIL_ICONS[trailType] || TRAIL_ICONS.DEFAULT;
-                        return (_jsxs("div", { className: classes, children: [_jsx("div", { className: css.poiIcon, children: specialTrail ? (_jsx(Image, { src: SPECIAL_TRAILS[specialTrail], width: 50, height: 50, alt: specialTrail })) : (_jsx(Icon, {})) }), _jsxs("div", { className: css.poiInfo, children: [_jsxs("div", { className: css.poiHeader, children: [_jsx("span", { className: css.poiName, children: name }), _jsx("span", { className: css.poiStatus, children: _jsx(T, { id: statusCode }) })] }), _jsxs("div", { className: css.poiDetail, children: [_jsxs("div", { className: css.poiDetailHeader, children: [_jsx("b", { children: sectorName }), " | ", _jsx(T, { id: translationCode }), " ", trailLevelLabel] }), !isLift && (_jsxs("div", { className: css.poiTrailDetail, children: [hasGroomingStatus && (_jsx("div", { className: css.poiTrailDetailItem, children: _jsx(T, { id: `snow.grooming.states.${groomingStatus}` }) })), hasSnowQuality && (_jsxs("div", { className: css.poiTrailDetailItem, children: [_jsx(T, { id: "snow.snow-quality.title" }), " :", " ", _jsx(T, { id: `snow.snow-quality.states.${snowQuality}` })] }))] })), openingTimesReal && (_jsxs("div", { className: css.poiOpeningTimes, children: [openingTimesReal.beginTime, " -", " ", openingTimesReal.endTime] }))] })] }), _jsx("div", { className: css.poiMessage, children: message && (_jsx(Tooltip, { content: message.data, children: _jsx(Button, { variant: "transparent", children: _jsx(Icons.Info, {}) }) })) })] }, id));
+                        return (_jsxs("div", { className: classes, children: [_jsx("div", { className: css.poiIcon, children: specialTrail ? (_jsx(Image, { src: SPECIAL_TRAILS[specialTrail], width: 50, height: 50, alt: specialTrail })) : (_jsx(Icon, {})) }), _jsxs("div", { className: css.poiInfo, children: [_jsxs("div", { className: css.poiHeader, children: [_jsx("span", { className: css.poiName, children: name }), _jsx("span", { className: css.poiStatus, children: _jsx(T, { id: statusCode }) })] }), _jsxs("div", { className: css.poiDetail, children: [_jsxs("div", { className: css.poiDetailHeader, children: [_jsx("b", { children: sectorName }), " ", trailType !== "FUN_ZONE" && (_jsxs(_Fragment, { children: ["| ", _jsx(T, { id: translationCode }), " ", trailLevelLabel] }))] }), !isLift && (_jsxs("div", { className: css.poiTrailDetail, children: [hasGroomingStatus && (_jsx("div", { className: css.poiTrailDetailItem, children: _jsx(T, { id: `snow.grooming.states.${groomingStatus}` }) })), hasSnowQuality && (_jsxs("div", { className: css.poiTrailDetailItem, children: [_jsx(T, { id: "snow.snow-quality.title" }), " :", " ", _jsx(T, { id: `snow.snow-quality.states.${snowQuality}` })] }))] })), openingTimesReal?.beginTime &&
+                                                    openingTimesReal?.endTime && (_jsxs("div", { className: css.poiOpeningTimes, children: [openingTimesReal.beginTime, " -", " ", openingTimesReal.endTime] }))] })] }), _jsx("div", { className: css.poiMessage, children: message?.data && (_jsx(Tooltip, { content: message.data, children: _jsx(Button, { variant: "transparent", children: _jsx(Icons.Info, {}) }) })) })] }, id));
                     }) }), _jsx(Tooltip, { content: t(lang, expanded ? "see-less" : "see-more"), children: _jsx(Button, { className: css.expandButton, variant: "transparent", onClick: toggleExpanded, children: _jsx(ExpandIcon, {}) }) })] }) }));
 });
 Pois.displayName = "Pois";

package/es/lbm/components/lumiplan/resort-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resort-selector.d.ts","sourceRoot":"","sources":["../../../../src/lbm/components/lumiplan/resort-selector.tsx"],"names":[],"mappings":"AAKA,KAAK,MAAM,GAAG;IACZ,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IAExB,kBAAkB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,OAAO,EACP,eAAe,EACf,kBAAkB,GACnB,EAAE,KAAK,kDAwBP"}
+{"version":3,"file":"resort-selector.d.ts","sourceRoot":"","sources":["../../../../src/lbm/components/lumiplan/resort-selector.tsx"],"names":[],"mappings":"AAOA,KAAK,MAAM,GAAG;IACZ,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IAExB,kBAAkB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,OAAO,EACP,eAAe,EACf,kBAAkB,GACnB,EAAE,KAAK,kDAqDP"}

package/es/lbm/components/lumiplan/resort-selector.js

@@ -1,18 +1,42 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
 import classNames from "classnames";
+// import useWindowSizes from "ublo-lib/es/common/hooks/use-window-sizes";
+import useWindowSizes from "../../../common/hooks/use-window-sizes";
 import Button from "dt-design-system/es/button";
 import css from "./resort-selector.module.css";
 export default function ResortSelector({ resorts, currentResortId, setCurrentResortId, }) {
+    const [showLeftShadow, setShowLeftShadow] = React.useState(false);
+    const [showRightShadow, setShowRightShadow] = React.useState(false);
+    const containerRef = React.useRef(null);
+    const scrollerRef = React.useRef(null);
+    const { width, height } = useWindowSizes();
+    const refreshShadows = React.useCallback(() => {
+        const container = containerRef.current;
+        const scroller = scrollerRef.current;
+        if (container && scroller) {
+            setShowLeftShadow(scroller.scrollLeft > 50);
+            const maxScroll = Math.round(scroller.scrollWidth) - Math.round(scroller.clientWidth);
+            setShowRightShadow(scroller.scrollLeft < maxScroll - 50);
+        }
+    }, []);
+    React.useEffect(() => {
+        refreshShadows();
+    }, [refreshShadows, width, height]);
     if (!resorts || resorts.length < 2) {
         return null;
     }
-    return (_jsx("div", { className: css.selector, children: resorts.map(({ id, label }) => {
-            const classes = classNames(css.button, {
-                [css.selected]: id === currentResortId,
-            });
-            const updateCurrentResort = () => {
-                setCurrentResortId(id);
-            };
-            return (_jsx(Button, { className: classes, onClick: updateCurrentResort, children: label }, id));
-        }) }));
+    const classes = classNames(css.selector, {
+        [css.leftShadow]: showLeftShadow,
+        [css.rightShadow]: showRightShadow,
+    });
+    return (_jsx("div", { ref: containerRef, className: classes, children: _jsx("div", { ref: scrollerRef, onScroll: refreshShadows, className: css.content, children: resorts.map(({ id, label }) => {
+                const classes = classNames(css.button, {
+                    [css.selected]: id === currentResortId,
+                });
+                const updateCurrentResort = () => {
+                    setCurrentResortId(id);
+                };
+                return (_jsx(Button, { className: classes, onClick: updateCurrentResort, children: label }, id));
+            }) }) }));
 }

package/es/lbm/components/lumiplan/resort-selector.module.css

@@ -1,11 +1,51 @@
 .selector {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 20px;
+  position: relative;
+  padding: 0 10px;
   margin-bottom: 10px;
 }
 
+.selector::before,
+.selector::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  width: 40px;
+  height: 100%;
+  background: linear-gradient(
+    to right,
+    #fff,
+    rgba(255, 255, 255, 0.6),
+    transparent
+  );
+  z-index: 1;
+  opacity: 0;
+  transition: opacity 320ms var(--transition-easing);
+  pointer-events: none;
+}
+
+.selector::before {
+  left: 0;
+}
+
+.selector::after {
+  right: 0;
+  transform: rotate(0.5turn);
+}
+
+.leftShadow::before,
+.rightShadow::after {
+  opacity: 1;
+}
+
+.content {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  overflow: auto;
+  scroll-snap-type: x proximity;
+}
+
 button.button {
   --ds-button-padding: 14px;
   --ds-button-font-size: 19px;
@@ -17,7 +57,18 @@ button.button {
   --ds-button-text-transform: uppercase;
   --ds-button-font-weight: 700;
 
+  width: fit-content;
   display: block;
+  white-space: nowrap;
+  scroll-snap-align: start;
+}
+
+button.button:first-child {
+  margin-left: auto;
+}
+
+button.button:last-child {
+  margin-right: auto;
 }
 
 button.selected {

package/es/lbm/components/lumiplan/road-condition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"road-condition.d.ts","sourceRoot":"","sources":["../../../../src/lbm/components/lumiplan/road-condition.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAG5C,KAAK,KAAK,GAAG;IACX,YAAY,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;CACpC,CAAC;AAEF,QAAA,MAAM,aAAa,8EAuFlB,CAAC;AAIF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"road-condition.d.ts","sourceRoot":"","sources":["../../../../src/lbm/components/lumiplan/road-condition.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAG5C,KAAK,KAAK,GAAG;IACX,YAAY,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;CACpC,CAAC;AAEF,QAAA,MAAM,aAAa,8EA6FlB,CAAC;AAIF,eAAe,aAAa,CAAC"}

package/es/lbm/components/lumiplan/road-condition.js

@@ -20,7 +20,7 @@ const RoadCondition = React.forwardRef(({ resortAccess }, ref) => {
                     return language === _lang;
                 });
                 const hasValidNumber = !isNaN(parseInt(number, 10)) && number !== "0";
-                return (_jsxs("div", { className: css.condition, children: [_jsx(RoadConditionIcon, { className: css.icon }), _jsxs("div", { className: css.right, children: [_jsxs("div", { className: css.status, children: [_jsx(T, { id: "road-conditions.road" }), " ", _jsx(T, { id: `road-conditions.status.${status ? "OPENED" : "CLOSED"}` })] }), _jsxs("div", { className: css.top, children: [name?.trim() && (_jsxs("div", { className: css.name, children: [name, " ", hasValidNumber && _jsxs(_Fragment, { children: ["n\u00B0", number] })] })), _jsxs("div", { className: css.surface, children: [_jsx("b", { children: _jsx(T, { id: "road-conditions.surface.title" }) }), _jsx(T, { id: `road-conditions.surface.states.${surface}` }), "."] }), _jsxs("div", { className: css.equipment, children: [_jsx("b", { children: _jsx(T, { id: "road-conditions.equipment.title" }) }), _jsx(T, { id: `road-conditions.equipment.states.${equipment}` })] })] }), roadInfoData && (_jsx("div", { className: css.bottom, dangerouslySetInnerHTML: { __html: roadInfoData.data } }))] })] }, id));
+                return (_jsxs("div", { className: css.condition, children: [_jsx(RoadConditionIcon, { className: css.icon }), _jsxs("div", { className: css.right, children: [_jsxs("div", { className: css.status, children: [_jsx(T, { id: "road-conditions.road" }), " ", _jsx(T, { id: `road-conditions.status.${status ? "OPENED" : "CLOSED"}` })] }), _jsxs("div", { className: css.top, children: [name?.trim() && (_jsxs("div", { className: css.name, children: [name, " ", hasValidNumber && _jsxs(_Fragment, { children: ["n\u00B0", number] })] })), surface && surface !== "UNDEF" && (_jsxs("div", { className: css.surface, children: [_jsx("b", { children: _jsx(T, { id: "road-conditions.surface.title" }) }), _jsx(T, { id: `road-conditions.surface.states.${surface}` }), "."] })), equipment && equipment !== "UNDEF" && (_jsxs("div", { className: css.equipment, children: [_jsx("b", { children: _jsx(T, { id: "road-conditions.equipment.title" }) }), _jsx(T, { id: `road-conditions.equipment.states.${equipment}` })] }))] }), roadInfoData && (_jsx("div", { className: css.bottom, dangerouslySetInnerHTML: { __html: roadInfoData.data } }))] })] }, id));
             })] }));
 });
 RoadCondition.displayName = "RoadCondition";

package/es/lbm/components/lumiplan/weather/snow-data.module.css

@@ -1,5 +1,7 @@
 .snow {
   flex: 1 1 100%;
+  width: 300px;
+  max-width: 100%;
   display: flex;
   gap: 34px;
 }

package/es/lbm/components/lumiplan/weather/weather-data.module.css

@@ -1,5 +1,7 @@
 .weatherData {
   flex: 1 1 100%;
+  width: 300px;
+  max-width: 100%;
   display: flex;
   gap: 34px;
 }

package/es/lbm/components/lumiplan/weather/weather-days.module.css

@@ -17,7 +17,7 @@
   );
   z-index: 1;
   opacity: 0;
-  transition: opacity 320ms ease;
+  transition: opacity 320ms var(--transition-easing);
   pointer-events: none;
 }
 

package/es/lbm/components/lumiplan/weather/weather-zones.module.css

@@ -18,7 +18,7 @@
   );
   z-index: 1;
   opacity: 0;
-  transition: opacity 320ms ease;
+  transition: opacity 320ms var(--transition-easing);
   pointer-events: none;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ublo-lib",
-  "version": "1.21.9",
+  "version": "1.21.11",
   "peerDependencies": {
     "dt-design-system": "^3.1.5",
     "leaflet": "^1.9.1",