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

package/components/VideoTimeLineSelector/store/VideoTimeLineSelectorStore.js

@@ -1,35 +1,25 @@
-import { createStore } from "zustand";
-import { immer } from "zustand/middleware/immer";
-import { devtools } from "zustand/middleware";
-import { V as VIDEO_TIME_LINE_SELECTOR_KEY_COMPONENT } from "../constants.js";
-import { c as calculateQuadrantData } from "../helpers/calculateQuadrantData/calculateQuadrantData.js";
-import { c as calculateTimeLineData } from "../helpers/calculateTimeLineData/calculateTimeLineData.js";
-const createDevtools = (immerMiddlewere, config) => {
-  const { enabled = false } = config;
-  if (enabled && process.env.NODE_ENV === "development") {
-    return devtools(immerMiddlewere, config);
-  }
-  return immerMiddlewere;
-};
-const createVideoTimeLineSelectorStore = (initProps, storeDevtoolsEnabled = false) => {
-  const { storeId } = initProps;
-  return createStore(
-    createDevtools(
-      immer((set, get) => ({
-        ...initProps,
+import { createStore as s } from "zustand";
+import { immer as f } from "zustand/middleware/immer";
+import { devtools as y } from "zustand/middleware";
+import { VIDEO_TIME_LINE_SELECTOR_KEY_COMPONENT as h } from "../constants.js";
+import { calculateQuadrantData as C } from "../helpers/calculateQuadrantData/calculateQuadrantData.js";
+import { calculateTimeLineData as l } from "../helpers/calculateTimeLineData/calculateTimeLineData.js";
+const T = (t, c) => {
+  const { enabled: o = !1 } = c;
+  return o && process.env.NODE_ENV === "development" ? y(t, c) : t;
+}, N = (t, c = !1) => {
+  const { storeId: o } = t;
+  return s(
+    T(
+      f((a, Q) => ({
+        ...t,
         actions: {
           /**
            * init: Inicializa el store, se debe llamar al iniciar el componente
            */
           init: () => {
-            set((state) => {
-              state.timeVisible = initProps.timeVisible;
-              state.zoomQty = initProps.zoomQty;
-              state.quadrantsQty = initProps.quadrantsQty;
-              state.pointsQty = initProps.pointsQty;
-              state.currentQuadrant = initProps.currentQuadrant;
-              state.activeChannels = initProps.activeChannels;
-              state.currentTime = initProps.currentTime;
+            a((n) => {
+              n.timeVisible = t.timeVisible, n.zoomQty = t.zoomQty, n.quadrantsQty = t.quadrantsQty, n.pointsQty = t.pointsQty, n.currentQuadrant = t.currentQuadrant, n.activeChannels = t.activeChannels, n.currentTime = t.currentTime;
             });
           },
           /**
@@ -37,188 +27,139 @@ const createVideoTimeLineSelectorStore = (initProps, storeDevtoolsEnabled = fals
            * Establece currentTime = 0, timeVisible = '24h' y recalcula todos los valores
            */
           recalculateTimelineValues: () => {
-            set((state) => {
-              state.currentTime = 0;
-              state.timeVisible = "24h";
-              const calculatedData = calculateTimeLineData("24h", 0);
-              state.zoomQty = calculatedData.zoomQty;
-              state.quadrantsQty = calculatedData.quadrantsQty;
-              state.pointsQty = calculatedData.pointsQty;
-              state.currentQuadrant = calculatedData.currentQuadrant;
+            a((n) => {
+              n.currentTime = 0, n.timeVisible = "24h";
+              const e = l("24h", 0);
+              n.zoomQty = e.zoomQty, n.quadrantsQty = e.quadrantsQty, n.pointsQty = e.pointsQty, n.currentQuadrant = e.currentQuadrant;
             });
           },
           /**
            * Actualiza el tiempo por defecto y recalcula los valores relacionados
            */
-          setDefaultTime: (defaultTime) => {
-            set((state) => {
-              state.defaultTime = defaultTime;
-            });
-            get().actions.recalculateTimelineValues();
+          setDefaultTime: (n) => {
+            a((e) => {
+              e.defaultTime = n;
+            }), Q().actions.recalculateTimelineValues();
           },
           /**
            * Actualiza el estado de carga
            */
-          setLoading: (loading) => {
-            set((state) => {
-              state.loading = loading;
+          setLoading: (n) => {
+            a((e) => {
+              e.loading = n;
             });
           },
           /**
            *  Actualiza el tiempo visible
            */
-          setTimeVisible: (timeVisible) => {
-            set((state) => {
-              if (state.timeVisible !== timeVisible) {
-                state.timeVisible = timeVisible;
-                const calculatedData = calculateTimeLineData(timeVisible, state.currentTime);
-                if (state.zoomQty !== calculatedData.zoomQty) {
-                  state.zoomQty = calculatedData.zoomQty;
-                }
-                if (state.quadrantsQty !== calculatedData.quadrantsQty) {
-                  state.quadrantsQty = calculatedData.quadrantsQty;
-                }
-                if (state.pointsQty !== calculatedData.pointsQty) {
-                  state.pointsQty = calculatedData.pointsQty;
-                }
-                if (state.currentQuadrant !== calculatedData.currentQuadrant) {
-                  state.currentQuadrant = calculatedData.currentQuadrant;
-                }
+          setTimeVisible: (n) => {
+            a((e) => {
+              if (e.timeVisible !== n) {
+                e.timeVisible = n;
+                const r = l(n, e.currentTime);
+                e.zoomQty !== r.zoomQty && (e.zoomQty = r.zoomQty), e.quadrantsQty !== r.quadrantsQty && (e.quadrantsQty = r.quadrantsQty), e.pointsQty !== r.pointsQty && (e.pointsQty = r.pointsQty), e.currentQuadrant !== r.currentQuadrant && (e.currentQuadrant = r.currentQuadrant);
               }
             });
           },
           /**
            * Actualiza el zoom
            */
-          setZoom: (zoom) => {
-            set((state) => {
-              if (state.zoomQty !== zoom) {
-                state.zoomQty = zoom;
-              }
+          setZoom: (n) => {
+            a((e) => {
+              e.zoomQty !== n && (e.zoomQty = n);
             });
           },
           /**
            * Actualiza los cuadrantes
            */
-          setQuadrants: (quadrants) => {
-            set((state) => {
-              if (state.quadrantsQty !== quadrants) {
-                state.quadrantsQty = quadrants;
-              }
+          setQuadrants: (n) => {
+            a((e) => {
+              e.quadrantsQty !== n && (e.quadrantsQty = n);
             });
           },
           /**
            * Actualiza los puntos
            */
-          setPoints: (points) => {
-            set((state) => {
-              if (state.pointsQty !== points) {
-                state.pointsQty = points;
-              }
+          setPoints: (n) => {
+            a((e) => {
+              e.pointsQty !== n && (e.pointsQty = n);
             });
           },
           /**
            * Actualiza el cuadrante actual
            */
-          setCurrentQuadrant: (newQuadrant) => {
-            set((state) => {
-              const calculatedQuadrant = calculateQuadrantData(newQuadrant, state.currentQuadrant, state.quadrantsQty)?.currentQuadrant ?? state.currentQuadrant;
-              if (state.currentQuadrant !== calculatedQuadrant) {
-                state.currentQuadrant = calculatedQuadrant;
-              }
+          setCurrentQuadrant: (n) => {
+            a((e) => {
+              const r = C(n, e.currentQuadrant, e.quadrantsQty)?.currentQuadrant ?? e.currentQuadrant;
+              e.currentQuadrant !== r && (e.currentQuadrant = r);
             });
           },
           /**
            * Actualiza un canal activo específico
            */
-          setActiveChannel: (activeChannelKey, active) => {
-            set((state) => {
-              const currentChannels = [...state.activeChannels];
-              const isChannelActive = currentChannels.includes(activeChannelKey);
-              let newActiveChannels = [];
-              if (isChannelActive === active) {
+          setActiveChannel: (n, e) => {
+            a((r) => {
+              const i = [...r.activeChannels], d = i.includes(n);
+              let u = [];
+              if (d === e)
                 return;
-              }
-              if (state.maxChannelsSelected === 1) {
-                newActiveChannels = active ? [activeChannelKey] : [];
-              } else {
-                if (active) {
-                  if (currentChannels.length < state.maxChannelsSelected) {
-                    newActiveChannels = [...currentChannels, activeChannelKey];
-                  } else {
-                    newActiveChannels = [...currentChannels.slice(0, -1), activeChannelKey];
-                  }
-                } else {
-                  newActiveChannels = currentChannels.filter((channel) => channel !== activeChannelKey);
-                }
-              }
-              const hasChanged = JSON.stringify(currentChannels) !== JSON.stringify(newActiveChannels);
-              if (hasChanged) {
-                state.activeChannels = newActiveChannels;
-              }
+              r.maxChannelsSelected === 1 ? u = e ? [n] : [] : e ? i.length < r.maxChannelsSelected ? u = [...i, n] : u = [...i.slice(0, -1), n] : u = i.filter((m) => m !== n), JSON.stringify(i) !== JSON.stringify(u) && (r.activeChannels = u);
             });
           },
           /**
            * Actualiza el tiempo actual
            */
-          setCurrentTime: (currentTime) => {
-            set((state) => {
-              if (state.currentTime !== currentTime) {
-                state.currentTime = currentTime;
-              }
+          setCurrentTime: (n) => {
+            a((e) => {
+              e.currentTime !== n && (e.currentTime = n);
             });
           },
           /**
            * Actualiza la máxima cantidad de canales seleccionables
            */
-          setMaxChannelsSelected: (maxChannelsSelected) => {
-            set((state) => {
-              if (state.maxChannelsSelected !== maxChannelsSelected) {
-                state.maxChannelsSelected = maxChannelsSelected;
-              }
+          setMaxChannelsSelected: (n) => {
+            a((e) => {
+              e.maxChannelsSelected !== n && (e.maxChannelsSelected = n);
             });
           },
           /**
            * Actualiza todos los canales activos, en caso de cambien los id de cámaras activas.
            */
-          setActiveChannels: (activeChannels) => {
-            set((state) => {
-              const channelsChanged = JSON.stringify(state.activeChannels) !== JSON.stringify(activeChannels);
-              if (channelsChanged) {
-                state.activeChannels = activeChannels;
-              }
+          setActiveChannels: (n) => {
+            a((e) => {
+              JSON.stringify(e.activeChannels) !== JSON.stringify(n) && (e.activeChannels = n);
             });
           },
           /**
            * Actualiza los canales
            */
-          setChannels: (channels) => {
-            set((state) => {
-              state.channels = channels;
+          setChannels: (n) => {
+            a((e) => {
+              e.channels = n;
             });
           },
           /**
            * Actualiza los segmentos
            */
-          setSegments: (segments) => {
-            set((state) => {
-              state.segments = segments;
+          setSegments: (n) => {
+            a((e) => {
+              e.segments = n;
             });
           },
           /**
            * Actualiza los eventos
            */
-          setEvents: (events) => {
-            set((state) => {
-              state.events = events;
+          setEvents: (n) => {
+            a((e) => {
+              e.events = n;
             });
           }
         }
       })),
-      { name: `${VIDEO_TIME_LINE_SELECTOR_KEY_COMPONENT}: ${storeId}`, enabled: storeDevtoolsEnabled }
+      { name: `${h}: ${o}`, enabled: c }
     )
   );
 };
 export {
-  createVideoTimeLineSelectorStore as c
+  N as createVideoTimeLineSelectorStore
 };

package/components/VideoTimeLineSelector/store/index.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=index.d.ts.map

package/components/VideoTimeLineSelector/store/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../packages/gclick/src/components/VideoTimeLineSelector/store/index.ts"],"names":[],"mappings":""}

package/components/VideoTimeLineSelector/store/types.d.ts

@@ -55,3 +55,4 @@ export interface videoTimeLineSelectorInitialStore {
     loading: boolean;
 }
 export type VideoTimeLineSelectorStore = ReturnType<typeof createVideoTimeLineSelectorStore>;
+//# sourceMappingURL=types.d.ts.map

package/components/VideoTimeLineSelector/store/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../packages/gclick/src/components/VideoTimeLineSelector/store/types.ts"],"names":[],"mappings":"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"}

package/components/VideoTimeLineSelector/store/useVideoTimeLineSelectorStore.d.ts

@@ -3,3 +3,4 @@ import { VideoTimeLineSelectorStoreStateWithActions } from './types';
  * Hook para acceder al store de VideoTimeLineSelector
  */
 export declare function useVideoTimeLineSelectorStore<T>(selector: (state: VideoTimeLineSelectorStoreStateWithActions) => T, equalityFn?: (left: T, right: T) => boolean): T;
+//# sourceMappingURL=useVideoTimeLineSelectorStore.d.ts.map

package/components/VideoTimeLineSelector/store/useVideoTimeLineSelectorStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVideoTimeLineSelectorStore.d.ts","sourceRoot":"","sources":["../../../../../../../packages/gclick/src/components/VideoTimeLineSelector/store/useVideoTimeLineSelectorStore.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,0CAA0C,EAAE,MAAM,SAAS,CAAC;AAErE;;GAEG;AACH,wBAAgB,6BAA6B,CAAC,CAAC,EAC7C,QAAQ,EAAE,CAAC,KAAK,EAAE,0CAA0C,KAAK,CAAC,EAClE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,KAAK,OAAO,GAC1C,CAAC,CAKH"}

package/components/VideoTimeLineSelector/store/useVideoTimeLineSelectorStore.js

@@ -1,14 +1,13 @@
-import { useContext } from "react";
-import { useStore } from "zustand";
-import { shallow } from "zustand/shallow";
-import { a as VideoTimeLineSelectorContext } from "./VideoTimeLineSelectorContext.js";
-function useVideoTimeLineSelectorStore(selector, equalityFn) {
-  const context = useContext(VideoTimeLineSelectorContext);
-  if (!context) {
+import { useContext as r } from "react";
+import { useStore as i } from "zustand";
+import { shallow as n } from "zustand/shallow";
+import { VideoTimeLineSelectorContext as m } from "./VideoTimeLineSelectorContext.js";
+function f(o, t) {
+  const e = r(m);
+  if (!e)
     throw new Error("useVideoTimeLineSelectorStore context must be use inside VideoTimeLineSelectorContext");
-  }
-  return useStore(context, selector, equalityFn ?? shallow);
+  return i(e, o, t ?? n);
 }
 export {
-  useVideoTimeLineSelectorStore as u
+  f as useVideoTimeLineSelectorStore
 };

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

@@ -6,4 +6,5 @@ import { ActiveChannel, IntersectedSegmentType } from '../../types';
  */
 export declare const BaseVideoTimeLineSelector: ({ onChange }: {
     onChange: (newTime: number, channelsActive: ActiveChannel[], intersectedSegments: IntersectedSegmentType[]) => void;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BaseVideoTimeLineSelector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseVideoTimeLineSelector.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/gclick/src/components/VideoTimeLineSelector/subcomponents/BaseVideoTimeLineSelector/BaseVideoTimeLineSelector.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,aAAa,EAAE,sBAAsB,EAAe,MAAM,aAAa,CAAC;AAMjF;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,GAAI,cAAc;IAAE,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,aAAa,EAAE,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,KAAK,IAAI,CAAA;CAAE,qDA4H9K,CAAC"}

package/components/VideoTimeLineSelector/subcomponents/BaseVideoTimeLineSelector/BaseVideoTimeLineSelector.js

@@ -1,119 +1,103 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useComponentSize, Skeleton, Select } from "@m4l/components";
-import { C as ChartTimeLineRootStyled, a as ContainerSelectTimeChannelsStyled, b as ChannelsRadioGroupStyled, c as ChannelsGroupStyled, W as WrapperDialTimeLineArrowsStyled, A as ArrowLeftIconStyled, d as ArrowRightIconStyled } from "../../slots/VideoTimeLineSelectorSlots.js";
-import { a as TIME_VISIBLE_OPTIONS_KEYS, b as VIDEO_TIME_LINE_SELECTOR_CLASSES } from "../../constants.js";
-import { useEffect, useTransition, useMemo } from "react";
-import { V as VIDEO_TIME_LINE_SELECTOR_DICTIONARY_KEYS } from "../../dictionary.js";
-import { i as isValidTimeVisible } from "../../helpers/isValidTimeVisible/isValidTimeVisible.js";
-import { u as useVideoTimeLineSelectorStore } from "../../store/useVideoTimeLineSelectorStore.js";
-import { shallow } from "zustand/shallow";
-import { useModuleDictionary, useEnvironment } from "@m4l/core";
-import { C as ChannelCheckbox } from "../ChannelCheckBox/ChannelCheckbox.js";
-import { C as ChartTimeLine } from "../ChartTimeLine/ChartTimeLine.js";
-import { V as VIDEO_TIME_LINE_SELECTOR_ICONS } from "../../icons.js";
-import { C as ChannelRadioButton } from "../ChannelRadioButton/ChannelRadioButton.js";
-import { g as getIntersectedSegments } from "../../helpers/getIntersectedSegments/getIntersectedSegments.js";
-import { g as getDataWithoutProxy } from "../../helpers/getDataWithoutProxy/getDataWithoutProxy.js";
-const BaseVideoTimeLineSelector = ({ onChange }) => {
-  const { getLabel } = useModuleDictionary();
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { setTimeVisible, setActiveChannel, setCurrentQuadrant } = useVideoTimeLineSelectorStore((state) => state.actions);
-  const { timeVisible, currentQuadrant, quadrants, maxChannelsSelected, channels } = useVideoTimeLineSelectorStore(
-    (state) => ({
-      timeVisible: state.timeVisible,
-      activeChannels: state.activeChannels,
-      currentQuadrant: state.currentQuadrant,
-      quadrants: state.quadrantsQty,
-      maxChannelsSelected: state.maxChannelsSelected,
-      channels: state.channels
+import { jsx as t, jsxs as o } from "@emotion/react/jsx-runtime";
+import { useComponentSize as b, Skeleton as v, Select as A } from "@m4l/components";
+import { ChartTimeLineRootStyled as x, ContainerSelectTimeChannelsStyled as N, ChannelsRadioGroupStyled as w, ChannelsGroupStyled as D, WrapperDialTimeLineArrowsStyled as M, ArrowLeftIconStyled as $, ArrowRightIconStyled as Q } from "../../slots/VideoTimeLineSelectorSlots.js";
+import { TIME_VISIBLE_OPTIONS_KEYS as k, VIDEO_TIME_LINE_SELECTOR_CLASSES as a } from "../../constants.js";
+import { useEffect as B, useTransition as W, useMemo as q } from "react";
+import { VIDEO_TIME_LINE_SELECTOR_DICTIONARY_KEYS as z } from "../../dictionary.js";
+import { isValidTimeVisible as G } from "../../helpers/isValidTimeVisible/isValidTimeVisible.js";
+import { useVideoTimeLineSelectorStore as s } from "../../store/useVideoTimeLineSelectorStore.js";
+import { shallow as P } from "zustand/shallow";
+import { useModuleDictionary as Y, useEnvironment as j } from "@m4l/core";
+import { ChannelCheckbox as K } from "../ChannelCheckBox/ChannelCheckbox.js";
+import { ChartTimeLine as F } from "../ChartTimeLine/ChartTimeLine.js";
+import { VIDEO_TIME_LINE_SELECTOR_ICONS as E } from "../../icons.js";
+import { ChannelRadioButton as H } from "../ChannelRadioButton/ChannelRadioButton.js";
+import { getIntersectedSegments as J } from "../../helpers/getIntersectedSegments/getIntersectedSegments.js";
+import { getDataWithoutProxy as U } from "../../helpers/getDataWithoutProxy/getDataWithoutProxy.js";
+const Se = ({ onChange: l }) => {
+  const { getLabel: m } = Y(), { host_static_assets: c, environment_assets: d } = j(), { setTimeVisible: T, setActiveChannel: u, setCurrentQuadrant: h } = s((e) => e.actions), { timeVisible: I, currentQuadrant: n, quadrants: _, maxChannelsSelected: L, channels: S } = s(
+    (e) => ({
+      timeVisible: e.timeVisible,
+      activeChannels: e.activeChannels,
+      currentQuadrant: e.currentQuadrant,
+      quadrants: e.quadrantsQty,
+      maxChannelsSelected: e.maxChannelsSelected,
+      channels: e.channels
     }),
-    shallow
+    P
+  ), { currentTime: r, activeChannels: i, segments: C, loading: g } = s(
+    (e) => e
   );
-  const { currentTime, activeChannels, segments, loading } = useVideoTimeLineSelectorStore(
-    (state) => state
-  );
-  useEffect(() => {
-    const intersectedSegments = getIntersectedSegments(currentTime, activeChannels, segments);
-    onChange?.(...getDataWithoutProxy(currentTime, activeChannels, intersectedSegments));
-  }, [currentTime, activeChannels, segments, onChange]);
-  const { currentSize } = useComponentSize();
-  const [isPending, startTransition] = useTransition();
-  const VISIBLE_TIMES = useMemo(() => {
-    return TIME_VISIBLE_OPTIONS_KEYS.map((time) => {
-      return {
-        id: time,
-        label: getLabel(VIDEO_TIME_LINE_SELECTOR_DICTIONARY_KEYS[time])
-      };
-    });
-  }, [getLabel]);
-  const handleTimeChange = (option) => {
-    if (option && !Array.isArray(option)) {
-      const selectedValue = option.id;
-      if (isValidTimeVisible(selectedValue)) {
-        startTransition(() => {
-          setTimeVisible(selectedValue);
-        });
-      }
+  B(() => {
+    const e = J(r, i, C);
+    l?.(...U(r, i, e));
+  }, [r, i, C, l]);
+  const { currentSize: R } = b(), [f, V] = W(), y = q(() => k.map((e) => ({
+    id: e,
+    label: m(z[e])
+  })), [m]), O = (e) => {
+    if (e && !Array.isArray(e)) {
+      const p = e.id;
+      G(p) && V(() => {
+        T(p);
+      });
     }
   };
-  if (loading) {
-    return /* @__PURE__ */ jsx(Skeleton, { variant: "rectangular", width: "100%", height: "200px" });
-  }
-  return /* @__PURE__ */ jsxs(ChartTimeLineRootStyled, { className: VIDEO_TIME_LINE_SELECTOR_CLASSES.root, children: [
-    /* @__PURE__ */ jsxs(ContainerSelectTimeChannelsStyled, { children: [
-      /* @__PURE__ */ jsx(
-        Select,
+  return g ? /* @__PURE__ */ t(v, { variant: "rectangular", width: "100%", height: "200px" }) : /* @__PURE__ */ o(x, { className: a.root, children: [
+    /* @__PURE__ */ o(N, { children: [
+      /* @__PURE__ */ t(
+        A,
         {
-          options: VISIBLE_TIMES,
-          value: timeVisible,
-          onChange: handleTimeChange,
-          disabled: isPending,
-          size: currentSize
+          options: y,
+          value: I,
+          onChange: O,
+          disabled: f,
+          size: R
         }
       ),
-      maxChannelsSelected === 1 ? /* @__PURE__ */ jsx(ChannelsRadioGroupStyled, { children: channels.map((channel) => /* @__PURE__ */ jsx(
-        ChannelRadioButton,
+      L === 1 ? /* @__PURE__ */ t(w, { children: S.map((e) => /* @__PURE__ */ t(
+        H,
         {
-          channel,
-          onChange: setActiveChannel
+          channel: e,
+          onChange: u
         },
-        channel.id
-      )) }) : /* @__PURE__ */ jsx(ChannelsGroupStyled, { children: channels.map((channel) => /* @__PURE__ */ jsx(
-        ChannelCheckbox,
+        e.id
+      )) }) : /* @__PURE__ */ t(D, { children: S.map((e) => /* @__PURE__ */ t(
+        K,
         {
-          channel,
-          onChange: setActiveChannel
+          channel: e,
+          onChange: u
         },
-        channel.id
+        e.id
       )) })
     ] }),
-    /* @__PURE__ */ jsxs(WrapperDialTimeLineArrowsStyled, { children: [
-      /* @__PURE__ */ jsx(
-        ArrowLeftIconStyled,
+    /* @__PURE__ */ o(M, { children: [
+      /* @__PURE__ */ t(
+        $,
         {
-          className: VIDEO_TIME_LINE_SELECTOR_CLASSES.arrowLeft,
-          src: `${host_static_assets}/${environment_assets}/${VIDEO_TIME_LINE_SELECTOR_ICONS.ARROW_LEFT}`,
-          onClick: () => setCurrentQuadrant(currentQuadrant - 1),
+          className: a.arrowLeft,
+          src: `${c}/${d}/${E.ARROW_LEFT}`,
+          onClick: () => h(n - 1),
           color: "default",
           variant: "contained",
-          disabled: currentQuadrant === 1
+          disabled: n === 1
         }
       ),
-      /* @__PURE__ */ jsx(ChartTimeLine, { isTransitioning: isPending }),
-      /* @__PURE__ */ jsx(
-        ArrowRightIconStyled,
+      /* @__PURE__ */ t(F, { isTransitioning: f }),
+      /* @__PURE__ */ t(
+        Q,
         {
-          className: VIDEO_TIME_LINE_SELECTOR_CLASSES.arrowRight,
-          src: `${host_static_assets}/${environment_assets}/${VIDEO_TIME_LINE_SELECTOR_ICONS.ARROW_RIGHT}`,
-          onClick: () => setCurrentQuadrant(currentQuadrant + 1),
+          className: a.arrowRight,
+          src: `${c}/${d}/${E.ARROW_RIGHT}`,
+          onClick: () => h(n + 1),
           color: "default",
           variant: "contained",
-          disabled: currentQuadrant === quadrants
+          disabled: n === _
         }
       )
     ] })
   ] });
 };
 export {
-  BaseVideoTimeLineSelector as B
+  Se as BaseVideoTimeLineSelector
 };

package/components/VideoTimeLineSelector/subcomponents/ChannelCheckBox/ChannelCheckbox.d.ts

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

package/components/VideoTimeLineSelector/subcomponents/ChannelCheckBox/ChannelCheckbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelCheckbox.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/gclick/src/components/VideoTimeLineSelector/subcomponents/ChannelCheckBox/ChannelCheckbox.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAM/C;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,4DAqB1D,CAAC"}

package/components/VideoTimeLineSelector/subcomponents/ChannelCheckBox/ChannelCheckbox.js

@@ -1,25 +1,19 @@
-import { jsx } from "react/jsx-runtime";
-import { useComponentSize, CheckBox } from "@m4l/components";
-import { e as ContainerChannelCheckboxStyled } from "../../slots/VideoTimeLineSelectorSlots.js";
-import { u as useVideoTimeLineSelectorStore } from "../../store/useVideoTimeLineSelectorStore.js";
-const ChannelCheckbox = (props) => {
-  const { channel, onChange } = props;
-  const { activeChannels } = useVideoTimeLineSelectorStore((state) => state);
-  const isActive = activeChannels.some((keyActiveChannel) => keyActiveChannel === channel.id);
-  const { currentSize } = useComponentSize();
-  if (!channel || !channel.id || !channel.label || channel.label.trim() === "") {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(ContainerChannelCheckboxStyled, { children: /* @__PURE__ */ jsx(
-    CheckBox,
+import { jsx as o } from "@emotion/react/jsx-runtime";
+import { useComponentSize as s, CheckBox as a } from "@m4l/components";
+import { ContainerChannelCheckboxStyled as h } from "../../slots/VideoTimeLineSelectorSlots.js";
+import { useVideoTimeLineSelectorStore as C } from "../../store/useVideoTimeLineSelectorStore.js";
+const b = (t) => {
+  const { channel: e, onChange: i } = t, { activeChannels: r } = C((n) => n), c = r.some((n) => n === e.id), { currentSize: l } = s();
+  return !e || !e.id || !e.label || e.label.trim() === "" ? null : /* @__PURE__ */ o(h, { children: /* @__PURE__ */ o(
+    a,
     {
-      checked: isActive,
-      onChange: (_event, checked) => onChange(channel.id, checked),
-      inlineText: channel.label,
-      size: currentSize
+      checked: c,
+      onChange: (n, m) => i(e.id, m),
+      inlineText: e.label,
+      size: l
     }
   ) });
 };
 export {
-  ChannelCheckbox as C
+  b as ChannelCheckbox
 };

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

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

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

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