@eclass/ui-kit 1.51.9 → 1.51.11

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

@@ -35221,21 +35221,7 @@ const CalendarButtonIcon = () => /* @__PURE__ */ jsxs("svg", {
     d: "M6 7H4v2h2V7ZM9 7H7v2h2V7ZM6 10H4v2h2v-2ZM9 10H7v2h2v-2ZM12 7h-2v2h2V7ZM12 10h-2v2h2v-2Z"
   })]
 });
-const NotificationIcon = () => /* @__PURE__ */ jsx("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "8px",
-  height: "9px",
-  fill: "none",
-  className: "notification",
-  children: /* @__PURE__ */ jsx("circle", {
-    cx: "4px",
-    cy: "4.5px",
-    r: "4px",
-    fill: "#FF7A14"
-  })
-});
 const GoToCalendar = ({
-  hasNew,
   text,
   tooltipDisabled,
   onlyToCalendar,
@@ -35246,7 +35232,7 @@ const GoToCalendar = ({
     label: text != null ? text : "Calendario",
     m: "2px 0 0 0",
     isDisabled: tooltipDisabled,
-    children: /* @__PURE__ */ jsxs(MenuButton, {
+    children: /* @__PURE__ */ jsx(MenuButton, {
       onClick: () => onlyToCalendar && onClick && onClick(),
       background: (_a = vars("colors-main-blueGrey")) != null ? _a : "#60798E",
       border: "1px solid transparent",
@@ -35254,19 +35240,17 @@ const GoToCalendar = ({
       height: "30px",
       width: "30px",
       position: "relative",
+      _hover: {
+        bg: "rgba(96, 121, 142, 0.8)"
+      },
       sx: {
         ">span": {
           lineHeight: "0",
           justifyItems: "center",
           alignContent: "center"
-        },
-        ".notification": {
-          position: "absolute",
-          top: "-1px",
-          right: "-1px"
         }
       },
-      children: [/* @__PURE__ */ jsx(CalendarButtonIcon, {}), !onlyToCalendar && hasNew && /* @__PURE__ */ jsx(NotificationIcon, {})]
+      children: /* @__PURE__ */ jsx(CalendarButtonIcon, {})
     })
   });
 };
@@ -35293,7 +35277,7 @@ const Header = ({
     }), /* @__PURE__ */ jsx(Box, {
       className: "arrow",
       "aria-hidden": true,
-      borderBottom: (_c = `12px solid ${vars("colors-neutral-davysGrey")}`) != null ? _c : "12px solid #5C5C5C",
+      borderBottom: `12px solid ${(_c = vars("colors-neutral-davysGrey")) != null ? _c : "#5C5C5C"}`,
       borderLeft: "14px solid transparent",
       borderRight: "14px solid transparent",
       display: isMobile ? "none" : "block",
@@ -35459,107 +35443,56 @@ const Empty = ({
     })]
   });
 };
-function Calendar(props) {
-  return /* @__PURE__ */ jsx(Base, {
-    ...props,
-    title: "Calendar",
-    children: /* @__PURE__ */ jsxs("g", {
-      fill: "#B0CFE0",
-      children: [/* @__PURE__ */ jsx("path", {
-        fill: "#B0CFE0",
-        d: "M15 2h-2V0h-2v2H9V0H7v2H5V0H3v2H1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zm-1 12H2V5h12v9z"
-      }), /* @__PURE__ */ jsx("path", {
-        d: "M4 7h2v2H4zM7 7h2v2H7zM4 10h2v2H4zM7 10h2v2H7zM10 7h2v2h-2zM10 10h2v2h-2z"
-      })]
-    })
-  });
-}
-Calendar.displayName = "Calendar";
-function Clock(props) {
-  return /* @__PURE__ */ jsx(Base, {
-    ...props,
-    title: "Clock",
-    children: /* @__PURE__ */ jsx("path", {
-      fill: "#B0CFE0",
-      d: "M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H7V4h2v3h3v2z"
-    })
-  });
-}
-Clock.displayName = "Clock";
-const EventsList = ({
-  hasNotification,
-  isDropdown,
-  name,
-  courseName,
-  color: color2,
+const EventsGroup = ({
+  title,
+  events,
   text,
-  date,
-  hours
+  colors: colors2
 }) => {
-  var _a, _b;
-  const border2 = (_a = `1px solid ${vars("colors-neutral-platinum")}`) != null ? _a : "1px solid #E8E8E8";
-  const bgColor = color2 || "#82504A";
+  var _a;
+  if (!events || events && events.length === 0)
+    return /* @__PURE__ */ jsx(Fragment, {});
   return /* @__PURE__ */ jsx(Box, {
-    className: "eventsList",
-    borderTop: border2,
-    padding: "16px 24px",
-    children: /* @__PURE__ */ jsxs(Box, {
-      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, {})]
-      }), /* @__PURE__ */ jsxs(Box, {
-        display: "flex",
-        lineHeight: "19px",
-        fontSize: "14px",
-        sx: {
-          svg: {
-            marginRight: "4px"
+    className: "calendar-events-group",
+    _focus: {
+      background: "none !important",
+      border: `1px solid ${(_a = vars("colors-icon-deepSkyBlue")) != null ? _a : "#0189FF"}`
+    },
+    sx: {
+      ".chakra-menu__menuitem > div": {
+        w: "100%"
+      }
+    },
+    children: /* @__PURE__ */ jsx(MenuGroup, {
+      title,
+      children: events.map((event) => {
+        var _a2;
+        return /* @__PURE__ */ jsx(Box, {
+          bg: (_a2 = vars("colors-neutral-white")) != null ? _a2 : "#FFFFFF",
+          border: "none",
+          cursor: "default",
+          padding: "0",
+          _hover: {
+            boxShadow: "none !important",
+            cursor: "default !important",
+            bg: "none !important"
           },
-          span: {
-            verticalAlign: "middle"
-          }
-        },
-        children: [/* @__PURE__ */ jsxs(Box, {
-          paddingRight: "8px",
-          borderRight: border2,
-          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, {
-          h: "10px",
-          w: "10px",
-          bg: bgColor,
-          borderRadius: "50%",
-          display: "block",
-          alignSelf: "flex-start",
-          mt: "4px"
-        }), /* @__PURE__ */ jsxs(Box, {
-          as: "span",
-          color: (_b = vars("colors-neutral-gray")) != null ? _b : "#808080",
-          fontSize: "14px",
-          children: [/* @__PURE__ */ jsxs("strong", {
-            children: [text != null ? text : "Curso", ":"]
-          }), " ", courseName]
-        })]
-      })]
+          _focus: {
+            background: "none !important",
+            boxShadow: "none !important"
+          },
+          children: /* @__PURE__ */ jsx(EventsList, {
+            name: event.associated_resource.name || "",
+            courseName: event.course.name,
+            date: event.formatedDate.start,
+            hours: event.formatedDate.hours,
+            color: event.course_id && (colors2 == null ? void 0 : colors2[event.course_id]) ? colors2[event.course_id] : "#82504A",
+            text,
+            hasNotification: event.isNew,
+            isDropdown: true
+          }, event.id)
+        }, event.id);
+      })
     })
   });
 };
@@ -35584,7 +35517,7 @@ const Events = ({
     pb: "32px",
     sx: {
       ".calendar-events-group": {
-        borderBottom: (_a = `1px solid ${vars("colors-neutral-platinum")}`) != null ? _a : "1px solid #E8E8E8"
+        borderBottom: `1px solid ${(_a = vars("colors-neutral-platinum")) != null ? _a : "#E8E8E8"}`
       }
     },
     children: [redirecToCalendar && /* @__PURE__ */ jsx(Box, {
@@ -35621,74 +35554,17 @@ const Events = ({
     })]
   });
 };
-const EventsGroup = ({
-  title,
-  events,
-  text,
-  colors: colors2
-}) => {
-  var _a;
-  if (!events || events && events.length === 0)
-    return /* @__PURE__ */ jsx(Fragment, {});
-  return /* @__PURE__ */ jsx(Box, {
-    className: "calendar-events-group",
-    _focus: {
-      background: "none !important",
-      border: (_a = `1px solid ${vars("colors-icon-deepSkyBlue")}`) != null ? _a : "1px solid #0189FF"
-    },
-    sx: {
-      ".chakra-menu__menuitem > div": {
-        w: "100%"
-      }
-    },
-    children: /* @__PURE__ */ jsx(MenuGroup, {
-      title,
-      children: events.map((event) => {
-        var _a2;
-        return /* @__PURE__ */ jsx(
-          Box,
-          {
-            bg: (_a2 = vars("colors-neutral-white")) != null ? _a2 : "#FFFFFF",
-            border: "none",
-            cursor: "default",
-            padding: "0",
-            _hover: {
-              boxShadow: "none !important",
-              cursor: "default !important",
-              bg: "none !important"
-            },
-            _focus: {
-              background: "none !important",
-              boxShadow: "none !important"
-            },
-            children: /* @__PURE__ */ jsx(EventsList, {
-              name: event.associated_resource.name || "",
-              courseName: event.course.name,
-              date: event.formatedDate.start,
-              hours: event.formatedDate.hours,
-              color: event.course_id && (colors2 == null ? void 0 : colors2[event.course_id]),
-              text,
-              hasNotification: event.isNew,
-              isDropdown: true
-            }, event.id)
-          },
-          event.id
-        );
-      })
-    })
-  });
-};
 const CalendarDropdownContainer = ({
   events,
   loading,
   text,
   now,
   redirectToCalendar,
-  courseColors: colors2,
+  courseColors,
   onlyToCalendar,
   m: m2
 }) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e;
   const [isMobile] = useMediaQuery("(max-width: 577px)");
   const {
     closeAndMarkSeen,
@@ -35707,6 +35583,8 @@ const CalendarDropdownContainer = ({
     }
   }, [isMenuOpen]);
   useEffect(() => {
+    if (!isMobile || onlyToCalendar)
+      return;
     const viewContainer = document.getElementById("ViewContainer");
     if (viewContainer) {
       viewContainer.style.display = isMenuOpen ? "none" : "";
@@ -35725,17 +35603,29 @@ const CalendarDropdownContainer = ({
         return;
       targetElement.style.display = isMenuOpen ? "none" : "";
     }
-  }, [isMenuOpen]);
+  }, [isMobile, isMenuOpen, onlyToCalendar]);
   const onClose = () => {
     closeAndMarkSeen();
     setMenuOpen(false);
   };
   return /* @__PURE__ */ jsx(Box, {
     zIndex: 4,
-    className: "calendarDropdown",
+    className: `calendarDropdown ${hasNew && !onlyToCalendar ? "hasNew" : ""}`,
     m: m2,
     position: "relative",
     sx: {
+      "&.hasNew::before": {
+        background: (_a = vars("colors-secondary-pumpkin")) != null ? _a : "#FF7A14",
+        borderRadius: "50%",
+        content: '""',
+        display: "block",
+        height: "8px",
+        width: "8px",
+        position: "absolute",
+        right: "0",
+        top: "0",
+        zIndex: "1"
+      },
       ">div": {
         position: isMobile ? "fixed !important" : "absolute",
         left: isMobile ? "0 !important" : "auto",
@@ -35773,21 +35663,20 @@ const CalendarDropdownContainer = ({
       onClose,
       children: /* @__PURE__ */ jsxs(Fragment, {
         children: [/* @__PURE__ */ jsx(GoToCalendar, {
-          hasNew: hasNew != null ? hasNew : false,
-          text: (_a = text == null ? void 0 : text.tooltip) != null ? _a : "Ir a Mi Calendario",
+          text: (_b = text == null ? void 0 : text.tooltip) != null ? _b : "Ir a Mi Calendario",
           tooltipDisabled: isTooltipDisabled,
           onlyToCalendar,
           onClick: redirectToCalendar
         }), !onlyToCalendar && /* @__PURE__ */ jsxs(MenuList, {
           children: [/* @__PURE__ */ jsx(Header, {
-            text: (_b = text == null ? void 0 : text.header) != null ? _b : "Pr\xF3ximas fechas importantes de tus cursos",
+            text: (_c = text == null ? void 0 : text.header) != null ? _c : "Pr\xF3ximas fechas importantes de tus cursos",
             isMobile
           }), loading ? /* @__PURE__ */ jsx(Loading, {
-            text: (_c = text == null ? void 0 : text.loading) != null ? _c : "Cargando"
+            text: (_d = text == null ? void 0 : text.loading) != null ? _d : "Cargando"
           }) : events.length === 0 || empty ? /* @__PURE__ */ jsx(Empty, {
-            text: (_d = text == null ? void 0 : text.empty) != null ? _d : "A\xFAn no tienes eventos en tu calendario"
+            text: (_e = text == null ? void 0 : text.empty) != null ? _e : "A\xFAn no tienes eventos en tu calendario"
           }) : /* @__PURE__ */ jsx(Events, {
-            colors: colors2,
+            colors: courseColors,
             events: all,
             text,
             redirecToCalendar: redirectToCalendar,
@@ -35828,5 +35717,121 @@ const CalendarDropdown = ({
     onlyToCalendar
   });
 };
+function Calendar(props) {
+  return /* @__PURE__ */ jsx(Base, {
+    ...props,
+    title: "Calendar",
+    children: /* @__PURE__ */ jsxs("g", {
+      fill: "#B0CFE0",
+      children: [/* @__PURE__ */ jsx("path", {
+        fill: "#B0CFE0",
+        d: "M15 2h-2V0h-2v2H9V0H7v2H5V0H3v2H1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zm-1 12H2V5h12v9z"
+      }), /* @__PURE__ */ jsx("path", {
+        d: "M4 7h2v2H4zM7 7h2v2H7zM4 10h2v2H4zM7 10h2v2H7zM10 7h2v2h-2zM10 10h2v2h-2z"
+      })]
+    })
+  });
+}
+Calendar.displayName = "Calendar";
+function Clock(props) {
+  return /* @__PURE__ */ jsx(Base, {
+    ...props,
+    title: "Clock",
+    children: /* @__PURE__ */ jsx("path", {
+      fill: "#B0CFE0",
+      d: "M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H7V4h2v3h3v2z"
+    })
+  });
+}
+Clock.displayName = "Clock";
+const NotificationIcon = () => /* @__PURE__ */ jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "8px",
+  height: "9px",
+  fill: "none",
+  className: "goToCalendarNotification",
+  children: /* @__PURE__ */ jsx("circle", {
+    cx: "4px",
+    cy: "4.5px",
+    r: "4px",
+    fill: "#FF7A14"
+  })
+});
+const EventsList = ({
+  hasNotification,
+  isDropdown,
+  name,
+  courseName,
+  color: color2,
+  text,
+  date,
+  hours
+}) => {
+  var _a, _b;
+  const border2 = `1px solid ${(_a = vars("colors-neutral-platinum")) != null ? _a : "#E8E8E8"}`;
+  return /* @__PURE__ */ jsx(Box, {
+    className: "eventsList",
+    borderTop: border2,
+    padding: "16px 24px",
+    children: /* @__PURE__ */ jsxs(Box, {
+      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, {})]
+      }), /* @__PURE__ */ jsxs(Box, {
+        display: "flex",
+        lineHeight: "19px",
+        fontSize: "14px",
+        sx: {
+          svg: {
+            marginRight: "4px"
+          },
+          span: {
+            verticalAlign: "middle"
+          }
+        },
+        children: [/* @__PURE__ */ jsxs(Box, {
+          paddingRight: "8px",
+          borderRight: border2,
+          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, {
+          h: "10px",
+          w: "10px",
+          bg: color2,
+          borderRadius: "50%",
+          display: "block",
+          alignSelf: "flex-start",
+          mt: "4px"
+        }), /* @__PURE__ */ jsxs(Box, {
+          as: "span",
+          color: (_b = vars("colors-neutral-gray")) != null ? _b : "#808080",
+          fontSize: "14px",
+          children: [/* @__PURE__ */ jsxs("strong", {
+            children: [text != null ? 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 };
 //# sourceMappingURL=eclass-ui-kit.es.js.map