@m4l/gclick 0.3.1-beta.0 → 0.3.1-beta.1

package/components/VideoTimeLineSelector/subcomponents/ChannelRadioButton/ChannelRadioButton.d.ts

@@ -4,4 +4,5 @@ import { ChannelRadioButtonProps } from './types';
  * @param props - Propiedades del componente
  * @returns Componente para seleccionar un canal
  */
-export declare const ChannelRadioButton: (props: ChannelRadioButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const ChannelRadioButton: (props: ChannelRadioButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ChannelRadioButton.d.ts.map

package/components/VideoTimeLineSelector/subcomponents/ChannelRadioButton/ChannelRadioButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelRadioButton.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/gclick/src/components/VideoTimeLineSelector/subcomponents/ChannelRadioButton/ChannelRadioButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AASlD;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,OAAO,uBAAuB,4DAuBhE,CAAC"}

package/components/VideoTimeLineSelector/subcomponents/ChannelRadioButton/ChannelRadioButton.js

@@ -1,28 +1,23 @@
-import { jsx } from "react/jsx-runtime";
-import { e as ContainerChannelCheckboxStyled } from "../../slots/VideoTimeLineSelectorSlots.js";
-import { FormControlLabel, Radio } from "@mui/material";
-import { u as useVideoTimeLineSelectorStore } from "../../store/useVideoTimeLineSelectorStore.js";
-import { shallow } from "zustand/shallow";
-import { useComponentSize, Typography } from "@m4l/components";
-const ChannelRadioButton = (props) => {
-  const { channel, onChange } = props;
-  const activeChannels = useVideoTimeLineSelectorStore((state) => state.activeChannels, shallow);
-  const { currentSize } = useComponentSize();
-  if (!channel || !channel.id || !channel.label || channel.label.trim() === "") {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(ContainerChannelCheckboxStyled, { children: /* @__PURE__ */ jsx(
-    FormControlLabel,
+import { jsx as n } from "@emotion/react/jsx-runtime";
+import { ContainerChannelCheckboxStyled as m } from "../../slots/VideoTimeLineSelectorSlots.js";
+import { FormControlLabel as c, Radio as s } from "@mui/material";
+import { useVideoTimeLineSelectorStore as h } from "../../store/useVideoTimeLineSelectorStore.js";
+import { shallow as d } from "zustand/shallow";
+import { useComponentSize as p, Typography as C } from "@m4l/components";
+const x = (r) => {
+  const { channel: e, onChange: t } = r, i = h((o) => o.activeChannels, d), { currentSize: l } = p();
+  return !e || !e.id || !e.label || e.label.trim() === "" ? null : /* @__PURE__ */ n(m, { children: /* @__PURE__ */ n(
+    c,
     {
-      control: /* @__PURE__ */ jsx(Radio, { value: channel.id }),
-      label: /* @__PURE__ */ jsx(Typography, { variant: "body", color: "text.primary", ellipsis: true, size: currentSize, children: channel.label }),
-      checked: activeChannels.some((keyActiveChannel) => keyActiveChannel === channel.id),
-      onChange: (_event, checked) => {
-        onChange(channel.id, checked);
+      control: /* @__PURE__ */ n(s, { value: e.id }),
+      label: /* @__PURE__ */ n(C, { variant: "body", color: "text.primary", ellipsis: !0, size: l, children: e.label }),
+      checked: i.some((o) => o === e.id),
+      onChange: (o, a) => {
+        t(e.id, a);
       }
     }
   ) });
 };
 export {
-  ChannelRadioButton as C
+  x as ChannelRadioButton
 };

package/components/VideoTimeLineSelector/subcomponents/ChannelRadioButton/types.d.ts

@@ -3,3 +3,4 @@ export interface ChannelRadioButtonProps {
     channel: ChannelType;
     onChange: (keyActiveChannel: ActiveChannel, active: boolean) => void;
 }
+//# sourceMappingURL=types.d.ts.map

package/components/VideoTimeLineSelector/subcomponents/ChannelRadioButton/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/gclick/src/components/VideoTimeLineSelector/subcomponents/ChannelRadioButton/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAEzD,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,CAAC,gBAAgB,EAAE,aAAa,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACtE"}

package/components/VideoTimeLineSelector/subcomponents/ChartTimeLine/ChartTimeLine.d.ts

@@ -3,4 +3,5 @@ import { ChartTimeLineProps } from './types';
  * Componente ChartTimeLine que renderiza una línea de tiempo circular con puntos interactivos
  * @param props - Propiedades del componente
  */
-export declare const ChartTimeLine: import('react').MemoExoticComponent<(props: ChartTimeLineProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const ChartTimeLine: import('react').MemoExoticComponent<(props: ChartTimeLineProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=ChartTimeLine.d.ts.map

package/components/VideoTimeLineSelector/subcomponents/ChartTimeLine/ChartTimeLine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTimeLine.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/gclick/src/components/VideoTimeLineSelector/subcomponents/ChartTimeLine/ChartTimeLine.tsx"],"names":[],"mappings":"AA0BA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAI7C;;;GAGG;AACH,eAAO,MAAM,aAAa,8CAAgB,kBAAkB,sDAud1D,CAAC"}

package/components/VideoTimeLineSelector/subcomponents/ChartTimeLine/ChartTimeLine.js

@@ -1,284 +1,202 @@
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { memo, useRef, useState, useEffect, useCallback, useMemo } from "react";
-import throttle from "lodash-es/throttle";
-import { T as TimeLineChannelWrapperStyled, P as PointChannelSegmentStyled, f as PointSegmentStyled, g as AxisTickContainerStyled, h as AxisTickNumberStyled, i as AxisTickLineStyled, j as WrapperDialTimeLineStyled, k as ContainerDialTimeLineStyled, D as DashLineContainerStyled, l as DashLineStyled, m as DialPointIndicatorStyled, n as DialPointIndicatorInnerStyled } from "../../slots/VideoTimeLineSelectorSlots.js";
-import { a as TIME_VISIBLE_OPTIONS_KEYS, T as TIME_SCALES, b as VIDEO_TIME_LINE_SELECTOR_CLASSES } from "../../constants.js";
-import { u as useVideoTimeLineSelectorStore } from "../../store/useVideoTimeLineSelectorStore.js";
-import { shallow } from "zustand/shallow";
-import { g as getTimeLinePosition } from "../../helpers/getTimeLinePosition/getTimeLinePosition.js";
-import { c as clusterEvents } from "../../helpers/clusterEvents/clusterEvents.js";
-import { E as EventCluster } from "../EventCluster/EventCluster.js";
-import { g as getTimeFromPointIndex } from "../../helpers/getTimeFromPointIndex/getTimeFromPointIndex.js";
-import { c as convertHoursToTimeString } from "../../helpers/convertHoursToTimeString/convertHoursToTimeString.js";
-import { g as getVisiblePoints } from "../../helpers/getVisiblePoints/getVisiblePoints.js";
-import { useComponentSize, Tooltip } from "@m4l/components";
-import clsx from "clsx";
-const ChartTimeLine = memo((props) => {
-  const { isTransitioning } = props;
-  const containerRef = useRef(null);
-  const { pointsQty, zoomQty, currentTime, quadrantsQty: quadrants, currentQuadrant, timeVisible, channels, segments, events, activeChannels } = useVideoTimeLineSelectorStore(
-    (state) => state,
-    shallow
-  );
-  const { currentSize } = useComponentSize();
-  const { setCurrentTime, setTimeVisible } = useVideoTimeLineSelectorStore((state) => state.actions);
-  const pointerPositionRef = useRef(0);
-  const [isDragging, setIsDragging] = useState(false);
-  const [containerWidth, setContainerWidth] = useState(0);
-  useEffect(() => {
-    const updateWidth = () => {
-      if (containerRef.current) {
-        setContainerWidth(containerRef.current.clientWidth);
-      }
-    };
-    updateWidth();
-    const resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        setContainerWidth(entry.contentRect.width);
-      }
+import { jsx as o, Fragment as I, jsxs as g } from "@emotion/react/jsx-runtime";
+import { memo as le, useRef as L, useState as K, useEffect as N, useCallback as p, useMemo as D } from "react";
+import me from "lodash-es/throttle";
+import { TimeLineChannelWrapperStyled as de, PointChannelSegmentStyled as ue, PointSegmentStyled as he, AxisTickContainerStyled as Y, AxisTickNumberStyled as U, AxisTickLineStyled as G, WrapperDialTimeLineStyled as pe, ContainerDialTimeLineStyled as fe, DashLineContainerStyled as Te, DashLineStyled as ge, DialPointIndicatorStyled as Se, DialPointIndicatorInnerStyled as we } from "../../slots/VideoTimeLineSelectorSlots.js";
+import { TIME_VISIBLE_OPTIONS_KEYS as W, TIME_SCALES as Pe, VIDEO_TIME_LINE_SELECTOR_CLASSES as l } from "../../constants.js";
+import { useVideoTimeLineSelectorStore as J } from "../../store/useVideoTimeLineSelectorStore.js";
+import { shallow as ve } from "zustand/shallow";
+import { getTimeLinePosition as Le } from "../../helpers/getTimeLinePosition/getTimeLinePosition.js";
+import { clusterEvents as Me } from "../../helpers/clusterEvents/clusterEvents.js";
+import { EventCluster as Ce } from "../EventCluster/EventCluster.js";
+import { getTimeFromPointIndex as xe } from "../../helpers/getTimeFromPointIndex/getTimeFromPointIndex.js";
+import { convertHoursToTimeString as M } from "../../helpers/convertHoursToTimeString/convertHoursToTimeString.js";
+import { getVisiblePoints as Ee } from "../../helpers/getVisiblePoints/getVisiblePoints.js";
+import { useComponentSize as ye, Tooltip as ke } from "@m4l/components";
+import R from "clsx";
+const Be = le((Z) => {
+  const { isTransitioning: ee } = Z, c = L(null), { pointsQty: a, zoomQty: te, currentTime: $, quadrantsQty: d, currentQuadrant: m, timeVisible: S, channels: V, segments: _, events: w, activeChannels: z } = J(
+    (e) => e,
+    ve
+  ), { currentSize: C } = ye(), { setCurrentTime: u, setTimeVisible: O } = J((e) => e.actions), x = L(0), [ne, A] = K(!1), [f, Q] = K(0);
+  N(() => {
+    c.current && Q(c.current.clientWidth);
+    const t = new ResizeObserver((i) => {
+      for (const n of i)
+        Q(n.contentRect.width);
     });
-    if (containerRef.current) {
-      resizeObserver.observe(containerRef.current);
-    }
-    return () => {
-      resizeObserver.disconnect();
+    return c.current && t.observe(c.current), () => {
+      t.disconnect();
     };
   }, []);
-  const isChangingRef = useRef(false);
-  const changeTimeVisible = useCallback((direction) => {
-    if (isChangingRef.current) {
+  const E = L(!1), X = p((e) => {
+    if (E.current)
       return;
-    }
-    const currentIndex = TIME_VISIBLE_OPTIONS_KEYS.indexOf(timeVisible);
-    let newIndex;
-    if (direction === "down") {
-      newIndex = Math.max(0, currentIndex - 1);
-    } else {
-      newIndex = Math.min(TIME_VISIBLE_OPTIONS_KEYS.length - 1, currentIndex + 1);
-    }
-    if (newIndex !== currentIndex) {
-      isChangingRef.current = true;
-      const newTimeVisible = TIME_VISIBLE_OPTIONS_KEYS[newIndex];
-      setTimeVisible(newTimeVisible);
-      setTimeout(() => {
-        isChangingRef.current = false;
+    const t = W.indexOf(S);
+    let i;
+    if (e === "down" ? i = Math.max(0, t - 1) : i = Math.min(W.length - 1, t + 1), i !== t) {
+      E.current = !0;
+      const n = W[i];
+      O(n), setTimeout(() => {
+        E.current = !1;
       }, 500);
     }
-  }, [timeVisible, setTimeVisible]);
-  const handleWheelWithCtrl = useCallback((event) => {
-    if (event.ctrlKey) {
-      event.preventDefault();
-      event.stopPropagation();
-      const direction = event.deltaY < 0 ? "up" : "down";
-      changeTimeVisible(direction);
+  }, [S, O]), y = p((e) => {
+    if (e.ctrlKey) {
+      e.preventDefault(), e.stopPropagation();
+      const t = e.deltaY < 0 ? "up" : "down";
+      X(t);
     }
-  }, [changeTimeVisible]);
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) {
-      return;
-    }
-    container.addEventListener("wheel", handleWheelWithCtrl, { passive: false });
-    return () => {
-      container.removeEventListener("wheel", handleWheelWithCtrl);
-    };
-  }, [handleWheelWithCtrl]);
-  const updatePointerPosition = useCallback((position) => {
-    if (pointerPositionRef.current !== position) {
-      pointerPositionRef.current = position;
-    }
-  }, []);
-  const handleTimeLineClick = useCallback((event) => {
-    if (!containerRef.current) {
+  }, [X]);
+  N(() => {
+    const e = c.current;
+    if (e)
+      return e.addEventListener("wheel", y, { passive: !1 }), () => {
+        e.removeEventListener("wheel", y);
+      };
+  }, [y]);
+  const h = p((e) => {
+    x.current !== e && (x.current = e);
+  }, []), ie = p((e) => {
+    if (!c.current)
       return;
-    }
-    const rect = containerRef.current.getBoundingClientRect();
-    const clickX = event.clientX - rect.left;
-    const clientWidth = containerRef.current.clientWidth;
-    const viewportWidth = rect.width;
-    const widthDifference = clientWidth - viewportWidth;
-    const relativePosition = clickX + widthDifference * (clickX / viewportWidth);
-    const clickPercent = relativePosition / clientWidth * 100;
-    const timeInSeconds = Math.floor(clickPercent / 100 * 24 * 60 * 60);
-    const clampedTime = Math.max(0, Math.min(86399, timeInSeconds));
-    const clampedPercent = clampedTime / (24 * 60 * 60) * 100;
-    updatePointerPosition(clampedPercent);
-    setCurrentTime(clampedTime);
-  }, [updatePointerPosition, setCurrentTime]);
-  const currentQuadrantRef = useRef(currentQuadrant);
-  useEffect(() => {
-    currentQuadrantRef.current = currentQuadrant;
-  }, [currentQuadrant]);
-  const visiblePoints = useMemo(() => {
-    if (containerWidth === 0) {
-      return [];
-    }
-    return getVisiblePoints({
-      totalPoints: pointsQty,
-      totalQuadrants: quadrants,
-      currentQuadrant,
-      containerWidth
-    });
-  }, [pointsQty, quadrants, currentQuadrant, containerWidth]);
-  const clusteredEvents = useMemo(() => {
-    if (!events || events.length === 0) {
-      return [];
-    }
-    return clusterEvents(events, TIME_SCALES[timeVisible].clusterThresholdMinutes, containerWidth);
-  }, [events, timeVisible, containerWidth]);
-  const getAbsoluteTimeForPoint = useCallback((pointIndex) => {
-    const timePerPoint = 24 / pointsQty;
-    return pointIndex * timePerPoint;
-  }, [pointsQty]);
-  const handlePointClick = useCallback((pointIndex) => {
-    const { newTime, clampedPercent } = getTimeFromPointIndex(pointIndex, pointsQty, quadrants, currentQuadrantRef.current);
-    setCurrentTime(newTime);
-    updatePointerPosition(clampedPercent);
-  }, [setCurrentTime, pointsQty, quadrants, updatePointerPosition]);
-  const handleEventClick = useCallback((eventTime) => {
-    const hours = eventTime.getHours();
-    const minutes = eventTime.getMinutes();
-    const seconds = eventTime.getSeconds();
-    const milliseconds = eventTime.getMilliseconds();
-    const totalSeconds = hours * 3600 + minutes * 60 + seconds + milliseconds / 1e3;
-    setCurrentTime(totalSeconds);
-    const timeInHours = totalSeconds / 3600;
-    const pointerPosition = timeInHours / 24 * 100;
-    updatePointerPosition(pointerPosition);
-  }, [setCurrentTime, updatePointerPosition]);
-  const handleMouseDown = useCallback((e) => {
-    e.stopPropagation();
-    e.preventDefault();
-    const container = containerRef.current;
-    if (!container) {
+    const t = c.current.getBoundingClientRect(), i = e.clientX - t.left, n = c.current.clientWidth, r = t.width, s = n - r, P = (i + s * (i / r)) / n * 100, k = Math.floor(P / 100 * 24 * 60 * 60), v = Math.max(0, Math.min(86399, k)), b = v / (1440 * 60) * 100;
+    h(b), u(v);
+  }, [h, u]), H = L(m);
+  N(() => {
+    H.current = m;
+  }, [m]);
+  const B = D(() => f === 0 ? [] : Ee({
+    totalPoints: a,
+    totalQuadrants: d,
+    currentQuadrant: m,
+    containerWidth: f
+  }), [a, d, m, f]), re = D(() => !w || w.length === 0 ? [] : Me(w, Pe[S].clusterThresholdMinutes, f), [w, S, f]), F = p((e) => {
+    const t = 24 / a;
+    return e * t;
+  }, [a]), j = p((e) => {
+    const { newTime: t, clampedPercent: i } = xe(e, a, d, H.current);
+    u(t), h(i);
+  }, [u, a, d, h]), oe = p((e) => {
+    const t = e.getHours(), i = e.getMinutes(), n = e.getSeconds(), r = e.getMilliseconds(), s = t * 3600 + i * 60 + n + r / 1e3;
+    u(s);
+    const P = s / 3600 / 24 * 100;
+    h(P);
+  }, [u, h]), se = p((e) => {
+    e.stopPropagation(), e.preventDefault();
+    const t = c.current;
+    if (!t)
       return;
-    }
-    setIsDragging(true);
-    const containerRect = container.getBoundingClientRect();
-    const handleMouseMove = (ev) => {
-      const relativeX = ev.clientX - containerRect.left;
-      const percent = relativeX * 100 / containerRect.width;
-      const clampedPercentMin = 100 / quadrants * (currentQuadrant - 1);
-      const clampedPercentMax = 100 / quadrants * (currentQuadrant - 1e-5);
-      const clampedPercent = Math.max(clampedPercentMin, Math.min(clampedPercentMax, percent));
-      updatePointerPosition(clampedPercent);
-      const newTime = clampedPercent / 100 * 24 * 60 * 60;
-      setCurrentTime(Math.floor(newTime));
+    A(!0);
+    const i = t.getBoundingClientRect(), r = me((T) => {
+      const k = (T.clientX - i.left) * 100 / i.width, v = 100 / d * (m - 1), b = 100 / d * (m - 1e-5), q = Math.max(v, Math.min(b, k));
+      h(q);
+      const ae = q / 100 * 24 * 60 * 60;
+      u(Math.floor(ae));
+    }, 50, {
+      leading: !0,
+      trailing: !0
+    }), s = () => {
+      A(!1), window.removeEventListener("mousemove", r), window.removeEventListener("mouseup", s), r.cancel();
     };
-    const throttledHandleMouseMove = throttle(handleMouseMove, 50, {
-      leading: true,
-      trailing: true
-    });
-    const handleMouseUp = () => {
-      setIsDragging(false);
-      window.removeEventListener("mousemove", throttledHandleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
-      throttledHandleMouseMove.cancel();
-    };
-    window.addEventListener("mousemove", throttledHandleMouseMove);
-    window.addEventListener("mouseup", handleMouseUp);
-  }, [currentQuadrant, quadrants, setCurrentTime, updatePointerPosition]);
-  const RenderPoints = useMemo(() => {
-    return /* @__PURE__ */ jsx(Fragment, { children: channels.map((channel, indexChannels) => {
-      const segment = segments.find((segment2) => segment2.channelId === channel.id);
-      return /* @__PURE__ */ jsxs(
-        TimeLineChannelWrapperStyled,
-        {
-          className: clsx(VIDEO_TIME_LINE_SELECTOR_CLASSES.timeLineChannelWrapper, activeChannels.includes(channel.id) ? " active" : ""),
-          children: [
-            segment && segment?.segmentsList && segment?.segmentsList.length > 0 && segment?.segmentsList.map((segmentItem, segmentIndex) => {
-              const { width, left } = getTimeLinePosition({ startTime: segmentItem.startTime, endTime: segmentItem.endTime });
-              return /* @__PURE__ */ jsx(Fragment, { children: segmentItem.startTime && segmentItem.endTime && segmentItem.startTime !== segmentItem.endTime && /* @__PURE__ */ jsx(
-                PointChannelSegmentStyled,
-                {
-                  className: VIDEO_TIME_LINE_SELECTOR_CLASSES.pointChannelSegment,
-                  style: {
-                    width,
-                    left
-                  }
+    window.addEventListener("mousemove", r), window.addEventListener("mouseup", s);
+  }, [m, d, u, h]), ce = D(() => /* @__PURE__ */ o(I, { children: V.map((e, t) => {
+    const i = _.find((n) => n.channelId === e.id);
+    return /* @__PURE__ */ g(
+      de,
+      {
+        className: R(l.timeLineChannelWrapper, z.includes(e.id) ? " active" : ""),
+        children: [
+          i && i?.segmentsList && i?.segmentsList.length > 0 && i?.segmentsList.map((n, r) => {
+            const { width: s, left: T } = Le({ startTime: n.startTime, endTime: n.endTime });
+            return /* @__PURE__ */ o(I, { children: n.startTime && n.endTime && n.startTime !== n.endTime && /* @__PURE__ */ o(
+              ue,
+              {
+                className: l.pointChannelSegment,
+                style: {
+                  width: s,
+                  left: T
+                }
+              },
+              `point-channel-segment-${t}-${r}`
+            ) });
+          }),
+          B.map((n) => {
+            const r = n.index, s = F(r);
+            return /* @__PURE__ */ o(
+              he,
+              {
+                className: R(l.pointSegment),
+                style: {
+                  position: "absolute",
+                  width: n.widthPixels,
+                  left: n.leftPixels
                 },
-                `point-channel-segment-${indexChannels}-${segmentIndex}`
-              ) });
-            }),
-            visiblePoints.map((visiblePoint) => {
-              const pointIndex = visiblePoint.index;
-              const absoluteTime = getAbsoluteTimeForPoint(pointIndex);
-              return /* @__PURE__ */ jsx(
-                PointSegmentStyled,
-                {
-                  className: clsx(VIDEO_TIME_LINE_SELECTOR_CLASSES.pointSegment),
-                  style: {
-                    position: "absolute",
-                    width: visiblePoint.widthPixels,
-                    left: visiblePoint.leftPixels
-                  },
-                  role: "button",
-                  tabIndex: 0,
-                  "aria-label": `Seleccionar tiempo ${convertHoursToTimeString(absoluteTime)}`,
-                  children: (pointIndex % 2 === 0 || pointIndex === pointsQty - 1) && /* @__PURE__ */ jsxs(Fragment, { children: [
-                    indexChannels === 0 && pointIndex !== pointsQty - 1 && /* @__PURE__ */ jsxs(AxisTickContainerStyled, { className: VIDEO_TIME_LINE_SELECTOR_CLASSES.axisTickContainer, onClick: () => handlePointClick(pointIndex), children: [
-                      /* @__PURE__ */ jsx(
-                        AxisTickNumberStyled,
-                        {
-                          className: VIDEO_TIME_LINE_SELECTOR_CLASSES.axisTickNumber,
-                          ownerState: { size: currentSize },
-                          children: convertHoursToTimeString(absoluteTime)
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(AxisTickLineStyled, { className: VIDEO_TIME_LINE_SELECTOR_CLASSES.axisTickLine })
-                    ] }),
-                    indexChannels === 0 && pointIndex === pointsQty - 1 && /* @__PURE__ */ jsxs(AxisTickContainerStyled, { className: `${VIDEO_TIME_LINE_SELECTOR_CLASSES.axisTickContainer} last-tick`, children: [
-                      /* @__PURE__ */ jsx(AxisTickNumberStyled, { className: VIDEO_TIME_LINE_SELECTOR_CLASSES.axisTickNumber, ownerState: { size: currentSize }, children: convertHoursToTimeString(absoluteTime, true) }),
-                      /* @__PURE__ */ jsx(AxisTickLineStyled, { className: VIDEO_TIME_LINE_SELECTOR_CLASSES.axisTickLine })
-                    ] })
+                role: "button",
+                tabIndex: 0,
+                "aria-label": `Seleccionar tiempo ${M(s)}`,
+                children: (r % 2 === 0 || r === a - 1) && /* @__PURE__ */ g(I, { children: [
+                  t === 0 && r !== a - 1 && /* @__PURE__ */ g(Y, { className: l.axisTickContainer, onClick: () => j(r), children: [
+                    /* @__PURE__ */ o(
+                      U,
+                      {
+                        className: l.axisTickNumber,
+                        ownerState: { size: C },
+                        children: M(s)
+                      }
+                    ),
+                    /* @__PURE__ */ o(G, { className: l.axisTickLine })
+                  ] }),
+                  t === 0 && r === a - 1 && /* @__PURE__ */ g(Y, { className: `${l.axisTickContainer} last-tick`, children: [
+                    /* @__PURE__ */ o(U, { className: l.axisTickNumber, ownerState: { size: C }, children: M(s, !0) }),
+                    /* @__PURE__ */ o(G, { className: l.axisTickLine })
                   ] })
-                },
-                `point-segment-${indexChannels}-${pointIndex}-${channel.id}`
-              );
-            })
-          ]
-        },
-        `time-line-channel-${indexChannels}`
-      );
-    }) });
-  }, [channels, visiblePoints, pointsQty, segments, getAbsoluteTimeForPoint, handlePointClick, activeChannels, currentSize]);
-  return /* @__PURE__ */ jsx(WrapperDialTimeLineStyled, { children: /* @__PURE__ */ jsxs(
-    ContainerDialTimeLineStyled,
+                ] })
+              },
+              `point-segment-${t}-${r}-${e.id}`
+            );
+          })
+        ]
+      },
+      `time-line-channel-${t}`
+    );
+  }) }), [V, B, a, _, F, j, z, C]);
+  return /* @__PURE__ */ o(pe, { children: /* @__PURE__ */ g(
+    fe,
     {
-      ref: containerRef,
+      ref: c,
       style: {
-        width: `${zoomQty}%`,
-        transform: `translateX(-${100 / quadrants * (currentQuadrant - 1)}%)`
+        width: `${te}%`,
+        transform: `translateX(-${100 / d * (m - 1)}%)`
       },
       children: [
-        /* @__PURE__ */ jsx(DashLineContainerStyled, { onClick: handleTimeLineClick, children: /* @__PURE__ */ jsx(DashLineStyled, {}) }),
-        clusteredEvents.map((clusteredEvent) => /* @__PURE__ */ jsx(
-          EventCluster,
+        /* @__PURE__ */ o(Te, { onClick: ie, children: /* @__PURE__ */ o(ge, {}) }),
+        re.map((e) => /* @__PURE__ */ o(
+          Ce,
           {
-            clusteredEvent,
-            onEventClick: handleEventClick
+            clusteredEvent: e,
+            onEventClick: oe
           },
-          clusteredEvent.id
+          e.id
         )),
-        /* @__PURE__ */ jsx(Tooltip, { title: convertHoursToTimeString(currentTime / 3600, false, true), placement: "top", offset: [0, 20], children: /* @__PURE__ */ jsx(
-          DialPointIndicatorStyled,
+        /* @__PURE__ */ o(ke, { title: M($ / 3600, !1, !0), placement: "top", offset: [0, 20], children: /* @__PURE__ */ o(
+          Se,
           {
-            style: { left: `${pointerPositionRef.current}%` },
-            className: clsx(VIDEO_TIME_LINE_SELECTOR_CLASSES.dialPointIndicator, isDragging ? "dragging" : ""),
-            onMouseDown: handleMouseDown,
+            style: { left: `${x.current}%` },
+            className: R(l.dialPointIndicator, ne ? "dragging" : ""),
+            onMouseDown: se,
             role: "slider",
-            "aria-valuenow": currentTime,
+            "aria-valuenow": $,
             "aria-valuemin": 0,
             "aria-valuemax": 24,
             "aria-label": "Selector de tiempo",
-            children: /* @__PURE__ */ jsx(DialPointIndicatorInnerStyled, {})
+            children: /* @__PURE__ */ o(we, {})
           }
         ) }),
-        !isTransitioning && RenderPoints
+        !ee && ce
       ]
     }
   ) });
 });
 export {
-  ChartTimeLine as C
+  Be as ChartTimeLine
 };

package/components/VideoTimeLineSelector/subcomponents/ChartTimeLine/types.d.ts

@@ -1,3 +1,4 @@
 export interface ChartTimeLineProps {
     isTransitioning?: boolean;
 }
+//# sourceMappingURL=types.d.ts.map

package/components/VideoTimeLineSelector/subcomponents/ChartTimeLine/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/gclick/src/components/VideoTimeLineSelector/subcomponents/ChartTimeLine/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,kBAAkB;IACjC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B"}

package/components/VideoTimeLineSelector/subcomponents/EventCluster/EventCluster.d.ts

@@ -7,5 +7,6 @@ interface EventClusterProps {
  * Componente que renderiza un clúster de eventos o un evento individual
  * @param props - Propiedades del componente
  */
-export declare const EventCluster: import('react').MemoExoticComponent<({ clusteredEvent, onEventClick }: EventClusterProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const EventCluster: import('react').MemoExoticComponent<({ clusteredEvent, onEventClick }: EventClusterProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
 export {};
+//# sourceMappingURL=EventCluster.d.ts.map

package/components/VideoTimeLineSelector/subcomponents/EventCluster/EventCluster.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventCluster.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/gclick/src/components/VideoTimeLineSelector/subcomponents/EventCluster/EventCluster.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAQ3E,UAAU,iBAAiB;IACzB,cAAc,EAAE,cAAc,CAAC;IAC/B,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,KAAK,IAAI,CAAC;CAC1C;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,yEAA2C,iBAAiB,sDA8FnF,CAAC"}