@eclass/ui-kit 1.52.4 → 1.52.7

package/dist/eclass-ui-kit.es.js

@@ -6059,15 +6059,11 @@ const EventsGroup = ({
   title,
   events,
   text,
-  colors: colors2,
-  clickEvent
+  colors: colors2
 }) => {
   var _a;
   if (!events || events && events.length === 0)
     return /* @__PURE__ */ jsx(Fragment, {});
-  const handleClick = (event) => {
-    clickEvent == null ? void 0 : clickEvent(event);
-  };
   return /* @__PURE__ */ jsx(Box, {
     className: "calendar-events-group",
     _focus: {
@@ -6100,13 +6096,14 @@ const EventsGroup = ({
           children: /* @__PURE__ */ jsx(EventsList, {
             name: event.associated_resource.name || "",
             courseName: event.course.name,
-            date: event.formatedDate.start,
-            hours: event.formatedDate.hours,
+            day: event.formatedDate.day,
+            date: event.formatedDate.date,
+            time: event.formatedDate.time,
             color: event.course_id && (colors2 == null ? void 0 : colors2[event.course_id]) ? colors2[event.course_id] : "#82504A",
             text,
+            type: event.type,
             hasNotification: event.isNew,
-            isDropdown: true,
-            clickEvent: () => handleClick(event)
+            showsCourseName: true
           }, event.id)
         }, event.id);
       })
@@ -6118,8 +6115,7 @@ const Events = ({
   text,
   redirecToCalendar,
   isMobile,
-  colors: colors2,
-  clickEvent
+  colors: colors2
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
   const {
@@ -6158,20 +6154,17 @@ const Events = ({
       colors: colors2,
       text: (_c = text == null ? void 0 : text.course) != null ? _c : "",
       title: (_e = (_d = text == null ? void 0 : text.events) == null ? void 0 : _d.today) != null ? _e : "Hoy",
-      events: today,
-      clickEvent
+      events: today
     }), /* @__PURE__ */ jsx(EventsGroup, {
       colors: colors2,
       text: (_f = text == null ? void 0 : text.course) != null ? _f : "",
       title: (_h = (_g = text == null ? void 0 : text.events) == null ? void 0 : _g.tomorrow) != null ? _h : "Ma\xF1ana",
-      events: tomorrow,
-      clickEvent
+      events: tomorrow
     }), /* @__PURE__ */ jsx(EventsGroup, {
       colors: colors2,
       text: (_i = text == null ? void 0 : text.course) != null ? _i : "",
       title: (_k = (_j = text == null ? void 0 : text.events) == null ? void 0 : _j.next) != null ? _k : "Pr\xF3ximos",
-      events: next,
-      clickEvent
+      events: next
     })]
   });
 };
@@ -6183,8 +6176,7 @@ const CalendarDropdownContainer = ({
   redirectToCalendar,
   courseColors,
   onlyToCalendar,
-  m: m2,
-  clickEvent
+  m: m2
 }) => {
   var _a, _b, _c, _d, _e, _f, _g;
   const [isMobile] = useMediaQuery("(max-width: 577px)");
@@ -6322,8 +6314,7 @@ const CalendarDropdownContainer = ({
               events: all,
               text,
               redirecToCalendar: redirectToCalendar,
-              isMobile,
-              clickEvent
+              isMobile
             })
           })]
         })]
@@ -6346,8 +6337,7 @@ const CalendarDropdown = ({
   events,
   loading,
   onlyToCalendar = false,
-  m: m2,
-  clickEvent
+  m: m2
 }) => {
   const date = new Date(now);
   const isoDate = date.toISOString();
@@ -6359,8 +6349,7 @@ const CalendarDropdown = ({
     courseColors,
     redirectToCalendar,
     text,
-    onlyToCalendar,
-    clickEvent
+    onlyToCalendar
   });
 };
 function Calendar(props) {
@@ -6404,93 +6393,113 @@ const NotificationIcon = () => /* @__PURE__ */ jsx("svg", {
   })
 });
 const EventsList = ({
-  hasNotification,
-  isDropdown,
-  name,
   courseName,
   color,
-  text,
+  day,
   date,
-  hours,
-  clickEvent
+  hasNotification,
+  showsCourseName,
+  time,
+  name,
+  text,
+  type
 }) => {
-  var _a, _b, _c, _d;
+  var _a, _b;
+  const [isMobile] = useMediaQuery("(max-width: 580px)");
   const border = `1px solid ${(_a = vars("colors-neutral-platinum")) != null ? _a : "#E8E8E8"}`;
-  const handleClick = () => clickEvent == null ? void 0 : clickEvent();
-  return /* @__PURE__ */ jsx(Ripples, {
-    children: /* @__PURE__ */ jsx(Box, {
-      className: "eventsList",
-      borderTop: border,
-      padding: "16px 24px",
-      onClick: handleClick,
-      cursor: "pointer",
-      bg: (_b = vars("colors-neutral-white")) != null ? _b : "#fff",
-      _hover: {
-        bg: (_c = vars("colors-neutral-cultured2")) != null ? _c : "#F8F8F8"
-      },
-      children: /* @__PURE__ */ jsxs(Box, {
+  const initOrEnd = ["end-course", "init-course", "init-course-flexible", "end-course-flexible"].includes(type);
+  const dateTextStyle = {
+    fontSize: "18px",
+    fontWeight: "700",
+    color: vars("colors-neutral-white"),
+    lineHeight: "100%"
+  };
+  return /* @__PURE__ */ jsxs(Box, {
+    className: "eventsList",
+    borderTop: border,
+    p: "16px 24px",
+    display: "flex",
+    gap: "12px",
+    children: [!isMobile && /* @__PURE__ */ jsxs(Box, {
+      bg: color,
+      minW: "80px",
+      minH: "80px",
+      maxW: "80px",
+      maxH: "80px",
+      borderRadius: "4px",
+      p: "8px",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-around",
+      children: [/* @__PURE__ */ jsx(Box, {
+        as: "span",
+        sx: dateTextStyle,
+        children: day
+      }), /* @__PURE__ */ jsx(Box, {
+        as: "span",
+        sx: dateTextStyle,
+        children: date
+      }), /* @__PURE__ */ jsx(Box, {
+        as: "span",
+        fontSize: "14px",
+        fontWeight: "700",
+        color: vars("colors-neutral-white"),
+        children: time
+      })]
+    }), /* @__PURE__ */ jsxs(Box, {
+      display: "flex",
+      flexDirection: "column",
+      gap: "8px",
+      children: [/* @__PURE__ */ jsxs(Box, {
+        lineHeight: "21px",
         display: "flex",
-        flexDirection: "column",
-        gap: "8px",
-        children: [/* @__PURE__ */ jsxs(Box, {
-          lineHeight: "21px",
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-          fontSize: "16px",
-          children: [name, " ", hasNotification && /* @__PURE__ */ jsx(NotificationIcon, {})]
+        justifyContent: "space-between",
+        alignItems: "center",
+        fontSize: "16px",
+        fontWeight: isMobile ? "400" : "700",
+        children: [name, " ", hasNotification && /* @__PURE__ */ jsx(NotificationIcon, {})]
+      }), isMobile && /* @__PURE__ */ jsxs(Box, {
+        lineHeight: "normal",
+        sx: {
+          ">svg": {
+            marginRight: "4px"
+          }
+        },
+        children: [/* @__PURE__ */ jsx(Calendar, {}), /* @__PURE__ */ jsxs(Box, {
+          as: "span",
+          verticalAlign: "middle",
+          p: "0 8px 0 0",
+          borderRight: `1px solid ${vars("colors-neutral-platinum")}`,
+          mr: "8px",
+          children: [day, " ", date]
+        }), /* @__PURE__ */ jsx(Clock, {}), /* @__PURE__ */ jsx(Box, {
+          as: "span",
+          verticalAlign: "middle",
+          children: time
+        })]
+      }), showsCourseName && !initOrEnd && /* @__PURE__ */ jsxs(Box, {
+        display: "flex",
+        gap: "4px",
+        alignItems: "center",
+        children: [isMobile && /* @__PURE__ */ jsx(Box, {
+          height: "10px",
+          width: "10px",
+          bg: color,
+          borderRadius: "50%"
         }), /* @__PURE__ */ jsxs(Box, {
-          display: "flex",
-          lineHeight: "19px",
+          as: "span",
+          color: (_b = vars("colors-neutral-gray")) != null ? _b : "#808080",
           fontSize: "14px",
-          sx: {
-            svg: {
-              marginRight: "4px"
-            },
-            span: {
-              verticalAlign: "middle"
-            }
-          },
-          children: [/* @__PURE__ */ jsxs(Box, {
-            paddingRight: "8px",
-            borderRight: border,
-            children: [/* @__PURE__ */ jsx(Calendar, {}), /* @__PURE__ */ jsx("span", {
-              children: date
-            })]
-          }), /* @__PURE__ */ jsxs(Box, {
-            paddingLeft: "8px",
-            children: [/* @__PURE__ */ jsx(Clock, {}), /* @__PURE__ */ jsx("span", {
-              children: hours
-            })]
-          })]
-        }), isDropdown && /* @__PURE__ */ jsxs(Box, {
           display: "flex",
           alignItems: "center",
           gap: "4px",
-          lineHeight: "19px",
-          children: [/* @__PURE__ */ jsx(Box, {
-            alignSelf: "flex-start",
-            bg: color,
-            borderRadius: "50%",
-            display: "block",
-            h: "10px",
-            mt: "4px",
-            maxH: "10px",
-            maxW: "10px",
-            minH: "10px",
-            minW: "10px",
-            w: "10px"
-          }), /* @__PURE__ */ jsxs(Box, {
-            as: "span",
-            color: (_d = vars("colors-neutral-gray")) != null ? _d : "#808080",
-            fontSize: "14px",
-            children: [/* @__PURE__ */ jsxs("strong", {
-              children: [text != null ? text : "Curso", ":"]
-            }), " ", courseName]
-          })]
+          lineHeight: "normal",
+          children: [/* @__PURE__ */ jsx("strong", {
+            children: text ? `${text}:` : "Curso:"
+          }), " ", courseName]
         })]
-      })
-    })
+      })]
+    })]
   });
 };
 export { Alert, Btn, BtnLink, BtnPrimary, BtnSecondary, BtnTertiary, CalendarDropdown, CourseList, CourseStatus, Eventos, EventsList, FlashNotification, index as Icons, Label, ModalAlert, NewTooltip, Progress, Resources, Ripples, TinyAlert, UserWay, UserWayCookie, dataFake, maxWidthCoursesList, theme, useFlashNotification, vars };