@eclass/ui-kit 1.59.6 → 1.60.0

package/dist/atoms/Icons/Remote.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { BaseProps } from './Base';
+export declare function Remote(props: BaseProps): JSX.Element;
+export declare namespace Remote {
+    var displayName: string;
+}
+//# sourceMappingURL=Remote.d.ts.map

package/dist/atoms/Icons/Remote.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Remote.d.ts","sourceRoot":"","sources":["../../../src/atoms/Icons/Remote.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAQ,SAAS,EAAE,MAAM,QAAQ,CAAA;AAExC,wBAAgB,MAAM,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CASpD;yBATe,MAAM"}

package/dist/atoms/Icons/Time.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { BaseProps } from './Base';
+export declare function Time(props: BaseProps): JSX.Element;
+export declare namespace Time {
+    var displayName: string;
+}
+//# sourceMappingURL=Time.d.ts.map

package/dist/atoms/Icons/Time.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Time.d.ts","sourceRoot":"","sources":["../../../src/atoms/Icons/Time.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAQ,SAAS,EAAE,MAAM,QAAQ,CAAA;AAExC,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CASlD;yBATe,IAAI"}

package/dist/atoms/Icons/index.d.ts

@@ -11,7 +11,9 @@ export * from './GoBack';
 export * from './Multimedia';
 export * from './Loader';
 export * from './Profile';
+export * from './Remote';
 export * from './Schedule';
+export * from './Time';
 export * from './TinyAlertInfo';
 export * from './TinyAlertError';
 export * from './TinyAlertWarning';

package/dist/atoms/Icons/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/Icons/index.tsx"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,uBAAuB,CAAA;AACrC,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,OAAO,CAAA;AACrB,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/Icons/index.tsx"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,uBAAuB,CAAA;AACrC,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,OAAO,CAAA;AACrB,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA"}

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

@@ -799,6 +799,20 @@ function Profile(props) {
   });
 }
 Profile.displayName = "Profile";
+function Remote(props) {
+  return /* @__PURE__ */ jsx(Base, {
+    ...props,
+    w: "16px",
+    h: "16px",
+    viewBox: "0 0 16 16",
+    title: "remote",
+    children: /* @__PURE__ */ jsx("path", {
+      d: "M15 11V4C15 2.864 14.136 2 13 2H3C1.864 2 1 2.864 1 4V11H0V12C0 13.105 0.895 14 2 14H14C15.105 14 16 13.105 16 12V11H15ZM3 4H13V11H3V4Z",
+      fill: "currentColor"
+    })
+  });
+}
+Remote.displayName = "Remote";
 function Schedule(props) {
   return /* @__PURE__ */ jsxs(Base, {
     ...props,
@@ -829,6 +843,20 @@ function Schedule(props) {
   });
 }
 Schedule.displayName = "Schedule";
+function Time(props) {
+  return /* @__PURE__ */ jsx(Base, {
+    ...props,
+    w: "16px",
+    h: "16px",
+    viewBox: "0 0 16 16",
+    title: "Time",
+    children: /* @__PURE__ */ jsx("path", {
+      fill: "currentColor",
+      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"
+    })
+  });
+}
+Time.displayName = "Time";
 function TinyAlertInfo(props) {
   return /* @__PURE__ */ jsxs(Base, {
     ...props,
@@ -1349,7 +1377,9 @@ var index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   Multimedia,
   Loader,
   Profile,
+  Remote,
   Schedule,
+  Time,
   TinyAlertInfo,
   TinyAlertError,
   TinyAlertWarning,
@@ -1712,6 +1742,12 @@ function BtnTertiary({
     record: /* @__PURE__ */ jsx(AcademicRecord, {
       color: colorIcon
     }),
+    time: /* @__PURE__ */ jsx(Time, {
+      color: colorIcon
+    }),
+    remote: /* @__PURE__ */ jsx(Remote, {
+      color: colorIcon
+    }),
     noIcon: /* @__PURE__ */ jsx(Fragment, {})
   };
   let icon;
@@ -6759,18 +6795,18 @@ function skipAttributesToProps(node2) {
 var HTMLReactParser = /* @__PURE__ */ getDefaultExportFromCjs(lib$3);
 var ReactParser = HTMLReactParser.default || HTMLReactParser;
 const AVATAR_COLORS = ["#0076ba", "#229f9c", "#2cb26b", "#30baed", "#95569e", "#9bc03a", "#d84315", "#f5a623", "#f6712f", "#ff6363"];
-const getColorByUserId = (userId) => {
-  if (userId >= 0) {
-    const digits = userId.toString().split("");
-    const position = parseInt(digits[digits.length - 1], 10);
-    return AVATAR_COLORS[position];
-  }
-  return AVATAR_COLORS[Math.floor(Math.random() * AVATAR_COLORS.length)];
+const getColorIndex = (fullName) => {
+  var _a;
+  const trimmedNameLength = (_a = fullName == null ? void 0 : fullName.trim().length) != null ? _a : 0;
+  return trimmedNameLength % 10;
+};
+const getAvatarColor = (fullName) => {
+  const position = getColorIndex(fullName);
+  return AVATAR_COLORS[position];
 };
 const getInitials = (fullName) => fullName.split(" ").map((word) => word[0]).slice(0, 2).join("").toUpperCase();
 const Avatar = ({
   fullName,
-  userId,
   picture,
   size = 50,
   fontSize = 14,
@@ -6781,8 +6817,8 @@ const Avatar = ({
   const [bgColor, setBgColor] = useState("");
   const [imageValid, setImageValid] = useState(false);
   useEffect(() => {
-    setBgColor(getColorByUserId(userId));
-  }, [userId]);
+    setBgColor(getAvatarColor(fullName));
+  }, [fullName]);
   const wrapperStyle = {
     alignItems: "center",
     backgroundColor: (fullName == null ? void 0 : fullName.length) === 0 ? "#fff" : bgColor,
@@ -7658,6 +7694,102 @@ const Modal = ({
     })]
   });
 };
+const ModalCard = ({
+  children,
+  isOpen,
+  onClose,
+  closeOnOverlayClick = true,
+  closeOnEsc = true
+}) => {
+  const modalConfig = useModalConfig({
+    closeOnOverlayClick,
+    scrollBehavior: "outside",
+    fixedButtons: false,
+    withoutMargin: false
+  });
+  return /* @__PURE__ */ jsxs(Modal$1, {
+    closeOnOverlayClick,
+    closeOnEsc,
+    isOpen,
+    motionPreset: "scale",
+    onClose,
+    scrollBehavior: "outside",
+    blockScrollOnMount: false,
+    children: [/* @__PURE__ */ jsx(ModalOverlay, {}), /* @__PURE__ */ jsx(ModalContent$1, {
+      ...modalConfig.contentProps,
+      maxW: "355px",
+      minW: "355px",
+      minH: "auto",
+      overflow: "hidden",
+      sx: {
+        ...modalConfig.contentProps.sx,
+        bgColor: vars("colors-neutral-white"),
+        maxWidth: "355px"
+      },
+      children: /* @__PURE__ */ jsx(Box, {
+        children
+      })
+    })]
+  });
+};
+const ModalCardContent = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsx(Box, {
+    p: "32px",
+    children
+  });
+};
+const ModalSimple = ({
+  children,
+  isOpen,
+  onClose,
+  closeOnOverlayClick = true,
+  closeOnEsc,
+  withoutMargin = false
+}) => {
+  const modalConfig = useModalConfig({
+    closeOnOverlayClick,
+    scrollBehavior: "outside",
+    fixedButtons: false,
+    withoutMargin
+  });
+  return /* @__PURE__ */ jsxs(Modal$1, {
+    closeOnOverlayClick: modalConfig.closeOnOverlayClick,
+    closeOnEsc: closeOnEsc != null ? closeOnEsc : modalConfig.closeOnEsc,
+    isOpen,
+    motionPreset: "scale",
+    onClose,
+    scrollBehavior: "outside",
+    blockScrollOnMount: false,
+    children: [/* @__PURE__ */ jsx(ModalOverlay, {}), /* @__PURE__ */ jsxs(ModalContent$1, {
+      ...modalConfig.contentProps,
+      children: [/* @__PURE__ */ jsx(ModalCloseButton, {
+        background: "transparent !important",
+        border: "none",
+        color: vars("colors-neutral-spanishGrey"),
+        h: "12px",
+        p: "22px",
+        position: "absolute",
+        right: 0,
+        top: 0,
+        w: "12px",
+        zIndex: 2,
+        _focus: {
+          boxShadow: "none"
+        },
+        _focusVisible: {
+          boxShadow: `inset 0 0 0 2px ${vars("colors-alert-deepSkyBlue")}, inset 0 0 0 4px ${vars("colors-neutral-white")}`
+        }
+      }), /* @__PURE__ */ jsx(Box, {
+        "data-testid": "modal-simple-content",
+        px: withoutMargin ? 0 : "24px",
+        py: withoutMargin ? 0 : "32px",
+        children
+      })]
+    })]
+  });
+};
 const StyledModalFooter = ModalFooter;
 const StyledModalBody = ModalBody;
 const ModalButtons = ({
@@ -10082,6 +10214,7 @@ const EventsGroup = ({
               courseName: event.course.name,
               day: event.formatedDate.day,
               date: event.formatedDate.date,
+              duration: event.duration_in_minutes,
               time: event.formatedDate.time,
               color: event.course_id && (colors2 == null ? void 0 : colors2[event.course_id]) ? colors2[event.course_id] : "#82504A",
               text: text2,
@@ -10377,6 +10510,7 @@ const EventsList = ({
   color,
   day,
   date,
+  duration,
   name,
   hasNotification,
   onClick,
@@ -10391,6 +10525,7 @@ const EventsList = ({
   const border = `1px solid ${(_a = vars("colors-neutral-platinum")) != null ? _a : "#E8E8E8"}`;
   const hoverBg = (_b = vars("colors-neutral-cultured2")) != null ? _b : "#F8F8F8";
   const isClickable = Boolean(onClick);
+  const showEventDuration = ["online", "in-person"].includes(type) && duration !== void 0 && duration > 0;
   const initOrEnd = ["end-course", "init-course", "init-course-flexible", "end-course-flexible"].includes(type);
   const dateTextStyle = {
     color: vars("colors-neutral-white"),
@@ -10401,10 +10536,18 @@ const EventsList = ({
   const detailTextStyle = {
     color: (_c = vars("colors-neutral-gray")) != null ? _c : "#808080",
     fontSize: "14px",
-    display: "inline",
+    alignItems: "center",
+    display: "flex",
     gap: "4px",
     lineHeight: "normal"
   };
+  const eventIconStyle = {
+    alignItems: "center",
+    display: "inline-flex",
+    height: "24px",
+    justifyContent: "center",
+    minWidth: "16px"
+  };
   return /* @__PURE__ */ jsxs(Box, {
     className: "eventsList",
     borderTop: border,
@@ -10466,9 +10609,37 @@ const EventsList = ({
       }), showCourse && !initOrEnd && /* @__PURE__ */ jsxs(Box, {
         as: "span",
         sx: detailTextStyle,
-        children: [/* @__PURE__ */ jsx("strong", {
+        children: [type === "cv-events" ? /* @__PURE__ */ jsx(Fragment, {}) : /* @__PURE__ */ jsx("strong", {
           children: text2 ? `${text2}:` : "Curso:"
         }), " ", courseName]
+      }), showEventDuration && /* @__PURE__ */ jsxs(Box, {
+        display: "flex",
+        flexDirection: "row",
+        gap: "8px",
+        flexWrap: "wrap",
+        children: [/* @__PURE__ */ jsxs(Box, {
+          as: "span",
+          sx: detailTextStyle,
+          paddingRight: "8px",
+          borderRight: `1px solid ${vars("colors-neutral-platinum")}`,
+          children: [/* @__PURE__ */ jsx(Box, {
+            as: "span",
+            sx: eventIconStyle,
+            children: /* @__PURE__ */ jsx(Remote, {
+              color: vars("colors-main-ziggurat")
+            })
+          }), "Link clase online"]
+        }), /* @__PURE__ */ jsxs(Box, {
+          as: "span",
+          sx: detailTextStyle,
+          children: [/* @__PURE__ */ jsx(Box, {
+            as: "span",
+            sx: eventIconStyle,
+            children: /* @__PURE__ */ jsx(Time, {
+              color: vars("colors-main-ziggurat")
+            })
+          }), duration, " min"]
+        })]
       }), showUnit && !initOrEnd && /* @__PURE__ */ jsx(Box, {
         display: "flex",
         gap: "4px",
@@ -11004,5 +11175,5 @@ const UserDropdown = ({
     })
   });
 };
-export { Alert, Btn, BtnLink, BtnPrimary, BtnSecondary, BtnTertiary, CalendarDropdown, CourseList, CourseStatus, Eventos, EventsList, FlashNotification, index$1 as Icons, Label, Modal, ModalAlert, ModalAlertButtons, ModalAlertNew, ModalButtons, ModalContent, ModalMultiple, NavBarButton, NewTooltip, Progress, Resources, Ripples, TinyAlert, UserDropdown, UserWay, UserWayCookie, dataFake, maxWidthCoursesList, theme, useFlashNotification, vars };
+export { Alert, Btn, BtnLink, BtnPrimary, BtnSecondary, BtnTertiary, CalendarDropdown, CourseList, CourseStatus, Eventos, EventsList, FlashNotification, index$1 as Icons, Label, Modal, ModalAlert, ModalAlertButtons, ModalAlertNew, ModalButtons, ModalCard, ModalCardContent, ModalContent, ModalMultiple, ModalSimple, NavBarButton, NewTooltip, Progress, Resources, Ripples, TinyAlert, UserDropdown, UserWay, UserWayCookie, dataFake, maxWidthCoursesList, theme, useFlashNotification, vars };
 //# sourceMappingURL=eclass-ui-kit.es.js.map