ublo-lib 1.21.9 → 1.21.10

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,21 +26,37 @@
 }
 
 .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;
+}
 
-  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;
+}
+
+.tableOuter::after {
+  right: 0;
+  transform: rotate(0.5turn);
 }
 
 @media (min-width: 580px) {
@@ -49,6 +65,11 @@
   }
 }
 
+.tableInner {
+  padding: 20px 30px;
+  overflow: auto;
+}
+
 .table {
   color: hsl(var(--primary));
 }
@@ -59,39 +80,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.js

@@ -133,7 +133,7 @@ const Pois = React.forwardRef(({ pois }, ref) => {
                         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 }), " | ", _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?.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.10",
   "peerDependencies": {
     "dt-design-system": "^3.1.5",
     "leaflet": "^1.9.1",