energy-components 2.2.0 → 2.3.1

package/dist/components/index.es.js

@@ -1,103 +1,107 @@
-import { R as a } from "./icon-svg-CW3eQRcp.js";
-import i from "./button.es.js";
+import { R as i } from "./icon-svg-CW3eQRcp.js";
+import a from "./button.es.js";
 import e from "./floatingActionButton.es.js";
 import m from "./actionButton.es.js";
 import S from "./checkbox.es.js";
 import D from "./textField.es.js";
+import R from "./searchField.es.js";
 import p from "./textArea.es.js";
-import R from "./switch.es.js";
-import n from "./radioButton.es.js";
-import { _ as s } from "./radio-group.vue_vue_type_script_setup_true_lang-CwgSZYeD.js";
-import c from "./dropdown.es.js";
-import f from "./datepicker.es.js";
-import d from "./quantitySelector.es.js";
-import l from "./toggle.es.js";
-import u from "./selectionChip.es.js";
-import g from "./filterChip.es.js";
-import b from "./dragAndDrop.es.js";
-import B from "./fileUploadItem.es.js";
-import A from "./filterTag.es.js";
-import v from "./tag.es.js";
-import T from "./accordionGroup.es.js";
-import _ from "./accordion.es.js";
-import h from "./divider.es.js";
-import x from "./card.es.js";
-import C from "./table.es.js";
-import I from "./avatar.es.js";
+import n from "./switch.es.js";
+import s from "./radioButton.es.js";
+import { _ as c } from "./radio-group.vue_vue_type_script_setup_true_lang-CwgSZYeD.js";
+import f from "./dropdown.es.js";
+import d from "./datepicker.es.js";
+import l from "./quantitySelector.es.js";
+import u from "./toggle.es.js";
+import g from "./selectionChip.es.js";
+import b from "./filterChip.es.js";
+import B from "./dragAndDrop.es.js";
+import A from "./fileUploadItem.es.js";
+import v from "./filterTag.es.js";
+import T from "./tag.es.js";
+import h from "./accordionGroup.es.js";
+import F from "./accordion.es.js";
+import I from "./divider.es.js";
+import _ from "./card.es.js";
+import x from "./table.es.js";
+import C from "./avatar.es.js";
 import { _ as P } from "./collapsable.scss_vue_type_style_index_0_src_true_lang-BfTKaP_f.js";
 import y from "./link.es.js";
-import F from "./breadcrumbs.es.js";
-import k from "./tabBar.es.js";
-import w from "./pagination.es.js";
-import M from "./directAccess.es.js";
-import G from "./indicator.es.js";
-import O from "./badge.es.js";
+import k from "./breadcrumbs.es.js";
+import w from "./tabBar.es.js";
+import M from "./pagination.es.js";
+import G from "./directAccess.es.js";
+import O from "./indicator.es.js";
+import U from "./indicatorDots.es.js";
+import j from "./badge.es.js";
 import L from "./persistentToast.es.js";
-import U from "./snackBar.es.js";
-import j from "./infoBox.es.js";
-import Q from "./progressBar.es.js";
-import V from "./loader.es.js";
-import q from "./modal.es.js";
-import z from "./overlay.es.js";
-import K from "./tooltip.es.js";
-import $ from "./popover.es.js";
-import E from "./popoverMenu.es.js";
-import H from "./sidebar.es.js";
-import J from "./sidedrawer.es.js";
+import Q from "./snackBar.es.js";
+import V from "./infoBox.es.js";
+import q from "./progressBar.es.js";
+import z from "./loader.es.js";
+import K from "./modal.es.js";
+import $ from "./overlay.es.js";
+import E from "./tooltip.es.js";
+import H from "./popover.es.js";
+import J from "./popoverMenu.es.js";
+import N from "./sidebar.es.js";
+import W from "./sidedrawer.es.js";
 const t = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  RDSAccordion: _,
-  RDSAccordionGroup: T,
+  RDSAccordion: F,
+  RDSAccordionGroup: h,
   RDSActionButton: m,
-  RDSAvatar: I,
-  RDSBadge: O,
-  RDSBreadcrumbs: F,
-  RDSButton: i,
-  RDSCard: x,
+  RDSAvatar: C,
+  RDSBadge: j,
+  RDSBreadcrumbs: k,
+  RDSButton: a,
+  RDSCard: _,
   RDSCheckbox: S,
   RDSCollapsable: P,
-  RDSDatePicker: f,
-  RDSDirectAccess: M,
-  RDSDivider: h,
-  RDSDragAndDrop: b,
-  RDSDropdown: c,
-  RDSFileUploadItem: B,
-  RDSFilterChip: g,
-  RDSFilterTag: A,
+  RDSDatePicker: d,
+  RDSDirectAccess: G,
+  RDSDivider: I,
+  RDSDragAndDrop: B,
+  RDSDropdown: f,
+  RDSFileUploadItem: A,
+  RDSFilterChip: b,
+  RDSFilterTag: v,
   RDSFloatinActionButton: e,
-  RDSIconSvg: a,
-  RDSIndicator: G,
-  RDSInfoBox: j,
+  RDSIconSvg: i,
+  RDSIndicator: O,
+  RDSIndicatorDots: U,
+  RDSInfoBox: V,
   RDSLink: y,
-  RDSLoader: V,
-  RDSModal: q,
-  RDSOverlay: z,
-  RDSPagination: w,
+  RDSLoader: z,
+  RDSModal: K,
+  RDSOverlay: $,
+  RDSPagination: M,
   RDSPersistentToast: L,
-  RDSPopover: $,
-  RDSPopoverMenu: E,
-  RDSProgressBar: Q,
-  RDSQuantitySelector: d,
-  RDSRadioButton: n,
-  RDSRadioGroup: s,
-  RDSSelectionChip: u,
-  RDSSidebar: H,
-  RDSSidedrawer: J,
-  RDSSnackBar: U,
-  RDSSwitch: R,
-  RDSTabBar: k,
-  RDSTable: C,
-  RDSTag: v,
+  RDSPopover: H,
+  RDSPopoverMenu: J,
+  RDSProgressBar: q,
+  RDSQuantitySelector: l,
+  RDSRadioButton: s,
+  RDSRadioGroup: c,
+  RDSSearchField: R,
+  RDSSelectionChip: g,
+  RDSSidebar: N,
+  RDSSidedrawer: W,
+  RDSSnackBar: Q,
+  RDSSwitch: n,
+  RDSTabBar: w,
+  RDSTable: x,
+  RDSTag: T,
   RDSTextArea: p,
   RDSTextField: D,
-  RDSToggle: l,
-  RDSTooltip: K
+  RDSToggle: u,
+  RDSTooltip: E
 }, Symbol.toStringTag, { value: "Module" }));
-let N;
-function zo(o) {
-  N = o;
+let X;
+function Ho(o) {
+  X = o;
 }
-const Ko = {
+const Jo = {
   install: (o) => {
     for (const r in t)
       o.component(
@@ -107,53 +111,55 @@ const Ko = {
   }
 };
 export {
-  _ as RDSAccordion,
-  T as RDSAccordionGroup,
+  F as RDSAccordion,
+  h as RDSAccordionGroup,
   m as RDSActionButton,
-  I as RDSAvatar,
-  O as RDSBadge,
-  F as RDSBreadcrumbs,
-  i as RDSButton,
-  x as RDSCard,
+  C as RDSAvatar,
+  j as RDSBadge,
+  k as RDSBreadcrumbs,
+  a as RDSButton,
+  _ as RDSCard,
   S as RDSCheckbox,
   P as RDSCollapsable,
-  f as RDSDatePicker,
-  M as RDSDirectAccess,
-  h as RDSDivider,
-  b as RDSDragAndDrop,
-  c as RDSDropdown,
-  B as RDSFileUploadItem,
-  g as RDSFilterChip,
-  A as RDSFilterTag,
+  d as RDSDatePicker,
+  G as RDSDirectAccess,
+  I as RDSDivider,
+  B as RDSDragAndDrop,
+  f as RDSDropdown,
+  A as RDSFileUploadItem,
+  b as RDSFilterChip,
+  v as RDSFilterTag,
   e as RDSFloatinActionButton,
-  a as RDSIconSvg,
-  G as RDSIndicator,
-  j as RDSInfoBox,
+  i as RDSIconSvg,
+  O as RDSIndicator,
+  U as RDSIndicatorDots,
+  V as RDSInfoBox,
   y as RDSLink,
-  V as RDSLoader,
-  q as RDSModal,
-  z as RDSOverlay,
-  w as RDSPagination,
+  z as RDSLoader,
+  K as RDSModal,
+  $ as RDSOverlay,
+  M as RDSPagination,
   L as RDSPersistentToast,
-  $ as RDSPopover,
-  E as RDSPopoverMenu,
-  Q as RDSProgressBar,
-  d as RDSQuantitySelector,
-  n as RDSRadioButton,
-  s as RDSRadioGroup,
-  u as RDSSelectionChip,
-  H as RDSSidebar,
-  J as RDSSidedrawer,
-  U as RDSSnackBar,
-  R as RDSSwitch,
-  k as RDSTabBar,
-  C as RDSTable,
-  v as RDSTag,
+  H as RDSPopover,
+  J as RDSPopoverMenu,
+  q as RDSProgressBar,
+  l as RDSQuantitySelector,
+  s as RDSRadioButton,
+  c as RDSRadioGroup,
+  R as RDSSearchField,
+  g as RDSSelectionChip,
+  N as RDSSidebar,
+  W as RDSSidedrawer,
+  Q as RDSSnackBar,
+  n as RDSSwitch,
+  w as RDSTabBar,
+  x as RDSTable,
+  T as RDSTag,
   p as RDSTextArea,
   D as RDSTextField,
-  l as RDSToggle,
-  K as RDSTooltip,
-  N as VueInstance,
-  Ko as default,
-  zo as setVueInstance
+  u as RDSToggle,
+  E as RDSTooltip,
+  X as VueInstance,
+  Jo as default,
+  Ho as setVueInstance
 };

package/dist/components/indicatorDots.es.js

@@ -0,0 +1,215 @@
+import { defineComponent as E, toRefs as L, ref as k, watch as T, onBeforeUnmount as G, computed as H, openBlock as l, createElementBlock as u, normalizeClass as O, unref as i, createVNode as I, createCommentVNode as p, createElementVNode as D, Fragment as U, renderList as W, createBlock as Z, resolveDynamicComponent as j, mergeProps as J, withCtx as K, normalizeStyle as B } from "vue";
+import { R as S } from "./icon-svg-CW3eQRcp.js";
+import { _ as Q } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/indicatorDots.css';const X = ["id"], Y = { class: "rds-e-indicator-dots__dots" }, ee = ["aria-label"], $ = 32, te = /* @__PURE__ */ E({
+  __name: "indicator-dots",
+  props: {
+    /**
+     * Número total de elementos a indicar.
+     */
+    items: {
+      type: Number,
+      required: !0,
+      validator(t) {
+        return t < 2 ? (console.warn("RDSIndicatorDots: items debe ser al menos 2."), !1) : t > 9 ? (console.warn("RDSIndicatorDots: items no puede superar 9. Considera usar paginación para más elementos."), !1) : !0;
+      }
+    },
+    /**
+     * Índice del elemento activo actual (base 0).
+     */
+    modelValue: {
+      type: Number,
+      required: !0
+    },
+    /**
+     * Muestra los botones de flecha anterior/siguiente.
+     */
+    showArrows: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Variante de tamaño del componente.
+     */
+    size: {
+      type: String,
+      default: "default"
+    },
+    /**
+     * Usa los tokens de color inverso (superficie oscura).
+     */
+    inverse: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Número máximo de puntos visibles a la vez antes de activar la ventana deslizante.
+     */
+    maxVisible: {
+      type: Number,
+      default: 7
+    },
+    /**
+     * Duración en milisegundos de cada elemento antes de avanzar automáticamente cuando isPlaying es true.
+     */
+    playInterval: {
+      type: Number,
+      default: 3e3
+    },
+    /**
+     * Si es true, habilita la navegación manual: flechas (si showArrows) y clics en los puntos.
+     * Si es false, las flechas se ocultan y los puntos son solo visuales.
+     */
+    interactive: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Muestra el botón de acción play/pause al final del componente.
+     */
+    showPlayPause: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Si es true, el componente avanza automáticamente por los elementos con un temporizador, emitiendo update:modelValue.
+     * El botón play/pause (showPlayPause) refleja y controla este estado.
+     */
+    isPlaying: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Atributo ID opcional para pruebas.
+     */
+    id: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["update:modelValue", "playPauseClick"],
+  setup(t, { emit: N }) {
+    const _ = t, d = N, { items: b, modelValue: r, maxVisible: C, playInterval: P, isPlaying: v } = L(_), g = k(null), w = k(null);
+    let o = null;
+    const c = k(0);
+    let s = null, f = null, m = null;
+    function h() {
+      s !== null && (cancelAnimationFrame(s), s = null), f !== null && (clearInterval(f), f = null), c.value = 0, m = null;
+    }
+    function x(e) {
+      m === null && (m = e);
+      const a = e - m;
+      c.value = Math.min(a / P.value * 100, 100), c.value < 100 && (s = requestAnimationFrame(x));
+    }
+    function R() {
+      h(), s = requestAnimationFrame(x), f = setInterval(() => {
+        const e = r.value + 1 >= b.value ? 0 : r.value + 1;
+        d("update:modelValue", e), c.value = 0, m = null, s = requestAnimationFrame(x);
+      }, P.value);
+    }
+    T(v, (e) => {
+      e ? R() : h();
+    }, { immediate: !0 }), T(
+      () => _.modelValue,
+      (e, a) => {
+        a == null || e == null || e === a || (e > a ? (g.value = a, o !== null && clearTimeout(o), o = setTimeout(() => {
+          g.value = null, o = null;
+        }, 700)) : (w.value = e, requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            w.value = null;
+          });
+        })));
+      }
+    );
+    function V(e) {
+      return w.value === e ? { width: `${$}px`, transition: "none" } : g.value === e ? { width: `${$}px` } : {};
+    }
+    G(() => {
+      h(), o !== null && clearTimeout(o);
+    });
+    const q = H(() => {
+      const e = b.value, a = r.value, n = Math.min(C.value, e);
+      if (e <= C.value)
+        return Array.from({ length: e }, (M, y) => ({
+          index: y,
+          dotSize: y === a ? "active" : "normal"
+        }));
+      const A = a - Math.floor(n / 2), F = Math.max(0, Math.min(A, e - n));
+      return Array.from({ length: n }, (M, y) => {
+        const z = F + y;
+        return { index: z, dotSize: z === a ? "active" : "normal" };
+      });
+    });
+    return (e, a) => (l(), u("div", {
+      id: t.id,
+      class: O(["rds-e-indicator-dots", [
+        { "rds-e-indicator-dots--interactive": t.interactive },
+        { "rds-e-indicator-dots--inverse": t.inverse },
+        { "rds-e-indicator-dots--small": t.size === "small" }
+      ]])
+    }, [
+      t.interactive && t.showArrows && i(r) > 0 ? (l(), u("button", {
+        key: 0,
+        type: "button",
+        class: "rds-e-indicator-dots__arrow rds-e-indicator-dots__arrow--left",
+        "aria-label": "Previous",
+        onClick: a[0] || (a[0] = (n) => d("update:modelValue", i(r) - 1))
+      }, [
+        I(S, {
+          class: "rds-e-indicator-dots__arrow-icon",
+          name: "arrow_left",
+          size: 16
+        })
+      ])) : p("", !0),
+      D("div", Y, [
+        (l(!0), u(U, null, W(q.value, (n) => (l(), Z(j(t.interactive ? "button" : "span"), J({
+          key: n.index,
+          class: ["rds-e-indicator-dots__dot", `rds-e-indicator-dots__dot--${n.dotSize}`]
+        }, { ref_for: !0 }, t.interactive ? { type: "button" } : {}, {
+          "aria-label": t.interactive ? `Go to item ${n.index + 1}` : void 0,
+          onClick: (A) => t.interactive ? d("update:modelValue", n.index) : void 0
+        }), {
+          default: K(() => [
+            D("span", {
+              class: "rds-e-indicator-dots__dot-inner",
+              style: B(V(n.index))
+            }, null, 4),
+            n.dotSize === "active" && i(v) ? (l(), u("span", {
+              key: 0,
+              class: "rds-e-indicator-dots__dot-progress",
+              style: B({ width: `${c.value}%` })
+            }, null, 4)) : p("", !0)
+          ]),
+          _: 2
+        }, 1040, ["class", "aria-label", "onClick"]))), 128))
+      ]),
+      t.interactive && t.showArrows && i(r) < i(b) - 1 ? (l(), u("button", {
+        key: 1,
+        type: "button",
+        class: "rds-e-indicator-dots__arrow rds-e-indicator-dots__arrow--right",
+        "aria-label": "Next",
+        onClick: a[1] || (a[1] = (n) => d("update:modelValue", i(r) + 1))
+      }, [
+        I(S, {
+          name: "arrow_right",
+          size: 16
+        })
+      ])) : p("", !0),
+      t.showPlayPause ? (l(), u("button", {
+        key: 2,
+        type: "button",
+        class: "rds-e-indicator-dots__play-pause",
+        "aria-label": i(v) ? "Pause" : "Play",
+        onClick: a[2] || (a[2] = (n) => d("playPauseClick"))
+      }, [
+        I(S, {
+          name: i(v) ? "pause" : "play",
+          size: 16
+        }, null, 8, ["name"])
+      ], 8, ee)) : p("", !0)
+    ], 10, X));
+  }
+}), re = /* @__PURE__ */ Q(te, [["__scopeId", "data-v-25ccae9a"]]);
+export {
+  re as default
+};

package/dist/components/loader.es.js

@@ -1,6 +1,6 @@
 import { defineComponent as w, toRefs as b, computed as o, openBlock as f, createElementBlock as h, unref as s, normalizeStyle as S, normalizeClass as C, createElementVNode as a, mergeProps as B } from "vue";
 import { _ as z } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/loader.css';const F = ["id", "aria-label"], N = ["width", "height", "viewBox"], W = ["id"], E = ["stop-color"], M = ["stop-color"], D = ["stop-color"], I = ["stop-color"], L = ["cx", "cy", "r", "stroke-width"], P = ["cx", "cy", "r", "stroke-width", "stroke"], T = /* @__PURE__ */ w({
+import './style/loader.css';const F = ["id", "aria-label"], N = ["width", "height", "viewBox"], W = ["id"], D = ["stop-color"], E = ["stop-color"], L = ["stop-color"], M = ["stop-color"], I = ["cx", "cy", "r", "stroke-width"], P = ["cx", "cy", "r", "stroke-width", "stroke"], R = /* @__PURE__ */ w({
   __name: "loader",
   props: {
     /**
@@ -108,7 +108,7 @@ import './style/loader.css';const F = ["id", "aria-label"], N = ["width", "heigh
         height: `${e.value}px`
       };
     }), k = o(() => n.value === "normal" ? `${l.value * 0.75} ${l.value * 0.25}` : e.value > 70 ? `${l.value * 0.05} ${l.value * 0.95}` : `${l.value * 0.1} ${l.value * 0.9}`), $ = o(() => (n.value === "normal", 0));
-    return (t, j) => (f(), h("div", {
+    return (t, T) => (f(), h("div", {
       id: s(u),
       class: C(y.value),
       style: S(x.value),
@@ -135,19 +135,19 @@ import './style/loader.css';const F = ["id", "aria-label"], N = ["width", "heigh
             a("stop", {
               offset: "0%",
               "stop-color": i.stop000
-            }, null, 8, E),
+            }, null, 8, D),
             a("stop", {
               offset: "24.3%",
               "stop-color": i.stop024
-            }, null, 8, M),
+            }, null, 8, E),
             a("stop", {
               offset: "65.21%",
               "stop-color": i.stop065
-            }, null, 8, D),
+            }, null, 8, L),
             a("stop", {
               offset: "100%",
               "stop-color": i.stop100
-            }, null, 8, I)
+            }, null, 8, M)
           ], 8, W)
         ]),
         a("circle", {
@@ -157,7 +157,7 @@ import './style/loader.css';const F = ["id", "aria-label"], N = ["width", "heigh
           r: p.value,
           "stroke-width": c.value,
           fill: "none"
-        }, null, 8, L),
+        }, null, 8, I),
         a("circle", B({
           class: "rds-e-loader__arc",
           cx: e.value / 2,
@@ -173,7 +173,7 @@ import './style/loader.css';const F = ["id", "aria-label"], N = ["width", "heigh
       ], 8, N))
     ], 14, F));
   }
-}), O = /* @__PURE__ */ z(T, [["__scopeId", "data-v-32444c96"]]);
+}), G = /* @__PURE__ */ z(R, [["__scopeId", "data-v-32444c96"]]);
 export {
-  O as default
+  G as default
 };