energy-components 1.14.2 → 1.15.0

package/dist/components/loader.es.js

@@ -1,6 +1,6 @@
-import { defineComponent as w, toRefs as b, computed as o, createElementBlock as f, openBlock as h, unref as n, normalizeStyle as S, normalizeClass as C, createElementVNode as a, mergeProps as B } from "vue";
+import { defineComponent as w, toRefs as b, computed as o, createElementBlock as f, openBlock 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 = ["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"], 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({
   __name: "loader",
   props: {
     /**
@@ -77,11 +77,11 @@ import './style/loader.css';const F = ["aria-label"], N = ["width", "height", "v
   setup(r) {
     const _ = r, {
       size: m,
-      variant: p,
-      animationType: s,
-      strokeWidth: u,
+      variant: v,
+      animationType: n,
+      strokeWidth: d,
       ariaLabel: g,
-      id: v
+      id: u
     } = b(_), i = {
       stop000: "#FF9C00",
       stop024: "#FF7E45",
@@ -90,12 +90,12 @@ import './style/loader.css';const F = ["aria-label"], N = ["width", "height", "v
     }, e = o(() => {
       const t = Number(m.value);
       return t < 32 ? 32 : t > 120 ? 120 : t;
-    }), d = o(() => u.value !== void 0 && u.value > 0 ? Number(u.value) : Math.max(2, Math.round(e.value / 8))), c = o(() => (e.value - d.value) / 2), l = o(() => 2 * Math.PI * c.value), y = o(() => [
+    }), c = o(() => d.value !== void 0 && d.value > 0 ? Number(d.value) : Math.max(2, Math.round(e.value / 8))), p = o(() => (e.value - c.value) / 2), l = o(() => 2 * Math.PI * p.value), y = o(() => [
       "rds-e-loader",
-      `rds-e-loader--${p.value}`,
-      `rds-e-loader--animation-${s.value}`
+      `rds-e-loader--${v.value}`,
+      `rds-e-loader--animation-${n.value}`
     ]), x = o(() => {
-      if (p.value === "contained") {
+      if (v.value === "contained") {
         const t = e.value + 48;
         return {
           width: `${t}px`,
@@ -107,12 +107,13 @@ import './style/loader.css';const F = ["aria-label"], N = ["width", "height", "v
         width: `${e.value}px`,
         height: `${e.value}px`
       };
-    }), k = o(() => s.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(() => (s.value === "normal", 0));
+    }), 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) => (h(), f("div", {
+      id: s(u),
       class: C(y.value),
       style: S(x.value),
       role: "progressbar",
-      "aria-label": n(g),
+      "aria-label": s(g),
       "aria-busy": "true"
     }, [
       (h(), f("svg", {
@@ -124,7 +125,7 @@ import './style/loader.css';const F = ["aria-label"], N = ["width", "height", "v
       }, [
         a("defs", null, [
           a("linearGradient", {
-            id: `rds-loader-gradient-${n(v)}`,
+            id: `rds-loader-gradient-${s(u)}`,
             x1: "0.1605",
             y1: "0.133",
             x2: "0.8395",
@@ -153,26 +154,26 @@ import './style/loader.css';const F = ["aria-label"], N = ["width", "height", "v
           class: "rds-e-loader__track",
           cx: e.value / 2,
           cy: e.value / 2,
-          r: c.value,
-          "stroke-width": d.value,
+          r: p.value,
+          "stroke-width": c.value,
           fill: "none"
         }, null, 8, L),
         a("circle", B({
           class: "rds-e-loader__arc",
           cx: e.value / 2,
           cy: e.value / 2,
-          r: c.value,
-          "stroke-width": d.value,
-          stroke: `url(#rds-loader-gradient-${n(v)})`,
+          r: p.value,
+          "stroke-width": c.value,
+          stroke: `url(#rds-loader-gradient-${s(u)})`,
           fill: "none",
           "stroke-linecap": "round"
-        }, n(s) === "normal" ? { "stroke-dasharray": k.value, "stroke-dashoffset": $.value } : {}, {
-          style: n(s) === "infinite" ? { "--circumference": `${l.value}px` } : {}
+        }, s(n) === "normal" ? { "stroke-dasharray": k.value, "stroke-dashoffset": $.value } : {}, {
+          style: s(n) === "infinite" ? { "--circumference": `${l.value}px` } : {}
         }), null, 16, P)
       ], 8, N))
     ], 14, F));
   }
-}), O = /* @__PURE__ */ z(T, [["__scopeId", "data-v-30cf8a40"]]);
+}), O = /* @__PURE__ */ z(T, [["__scopeId", "data-v-9f7a590b"]]);
 export {
   O as default
 };

package/dist/components/modal.es.js

@@ -1,7 +1,7 @@
-import { defineComponent as C, ref as v, computed as R, createBlock as u, createCommentVNode as l, openBlock as a, unref as n, withCtx as c, createVNode as k, withModifiers as g, normalizeStyle as w, createElementVNode as d, createElementBlock as p, renderSlot as i } from "vue";
-import x from "./overlay.es.js";
-import S from "./card.es.js";
-import { R as b } from "./icon-svg-DuzOdbk1.js";
+import { defineComponent as v, ref as C, computed as R, createBlock as u, createCommentVNode as l, openBlock as a, unref as n, withCtx as c, createVNode as k, withModifiers as g, normalizeStyle as S, createElementVNode as r, createElementBlock as p, renderSlot as i } from "vue";
+import w from "./overlay.es.js";
+import x from "./card.es.js";
+import { R as b } from "./icon-svg-BU0OQFKH.js";
 import { _ as q } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 import './style/modal.css';const $ = { class: "rds-e-modal__container" }, B = { class: "rds-e-modal__header" }, O = { class: "rds-e-modal__header-text" }, M = {
   key: 0,
@@ -9,7 +9,7 @@ import './style/modal.css';const $ = { class: "rds-e-modal__container" }, B = {
 }, N = { class: "rds-e-modal__body" }, W = {
   key: 1,
   class: "rds-e-modal__section-spacer"
-}, D = { class: "rds-e-modal__footer" }, V = /* @__PURE__ */ C({
+}, D = { class: "rds-e-modal__footer" }, V = /* @__PURE__ */ v({
   __name: "modal",
   props: {
     /**
@@ -48,7 +48,7 @@ import './style/modal.css';const $ = { class: "rds-e-modal__container" }, B = {
     maxWidth: {
       type: [String, Number],
       default: 820,
-      validator: (t) => typeof t == "number" ? !0 : /^\d+(?:px|em|rem|%)$/.test(t)
+      validator: (e) => typeof e == "number" ? !0 : /^\d+(?:px|em|rem|%)$/.test(e)
     },
     /**
      * Ancho del modal en dispositivos de escritorio.
@@ -56,21 +56,28 @@ import './style/modal.css';const $ = { class: "rds-e-modal__container" }, B = {
     width: {
       type: [String, Number],
       default: 600,
-      validator: (t) => typeof t == "number" ? !0 : /^\d+(?:px|em|rem|%)$/.test(t)
+      validator: (e) => typeof e == "number" ? !0 : /^\d+(?:px|em|rem|%)$/.test(e)
+    },
+    /**
+     * ID del modal para testing
+     */
+    id: {
+      type: String,
+      default: void 0
     }
   },
   emits: ["onCloseRequest", "onOpenRequest", "onToggleRequest"],
-  setup(t, { expose: _, emit: f }) {
-    const e = t, s = f, y = v(null), h = R(() => {
-      const o = typeof e.maxWidth == "number" ? `${e.maxWidth}px` : e.maxWidth, r = typeof e.width == "number" ? `${e.width}px` : e.width;
+  setup(e, { expose: f, emit: _ }) {
+    const t = e, s = _, y = C(null), h = R(() => {
+      const o = typeof t.maxWidth == "number" ? `${t.maxWidth}px` : t.maxWidth, d = typeof t.width == "number" ? `${t.width}px` : t.width;
       return {
         "--rds-modal-max-width": o,
-        "--rds-modal-width": r
+        "--rds-modal-width": d
       };
     }), m = () => {
-      e.preventClose || s("onCloseRequest");
+      t.preventClose || s("onCloseRequest");
     };
-    return _({
+    return f({
       /**
        * { () => void } Gestiona el clic fuera del modal.
        */
@@ -100,52 +107,54 @@ import './style/modal.css';const $ = { class: "rds-e-modal__container" }, B = {
       toggleModal: () => {
         s("onToggleRequest");
       }
-    }), (o, r) => t.open ? (a(), u(n(x), {
+    }), (o, d) => e.open ? (a(), u(n(w), {
       key: 0,
+      id: e.id,
       ref_key: "overlay",
       ref: y,
       class: "rds-e-modal__overlay",
-      teleport: e.teleport,
+      teleport: t.teleport,
       onClick: m
     }, {
       default: c(() => [
-        k(n(S), {
+        k(n(x), {
+          id: e.id ? `${e.id}-card` : void 0,
           class: "rds-e-modal__card",
-          style: w(h.value),
-          onClick: r[1] || (r[1] = g(() => {
+          style: S(h.value),
+          onClick: d[1] || (d[1] = g(() => {
           }, ["stop"]))
         }, {
           default: c(() => [
-            d("div", $, [
-              d("div", B, [
-                d("div", O, [
+            r("div", $, [
+              r("div", B, [
+                r("div", O, [
                   i(o.$slots, "header", {}, void 0, !0)
                 ]),
-                e.showClose ? (a(), u(n(b), {
+                t.showClose ? (a(), u(n(b), {
                   key: 0,
                   class: "rds-e-modal__header-close",
                   name: "close",
                   small: "",
-                  onClick: r[0] || (r[0] = () => s("onCloseRequest"))
+                  onClick: d[0] || (d[0] = () => s("onCloseRequest"))
                 })) : l("", !0)
               ]),
               o.$slots.body ? (a(), p("span", M)) : l("", !0),
-              d("div", N, [
+              r("div", N, [
                 i(o.$slots, "body", {}, void 0, !0)
               ]),
               o.$slots.footer ? (a(), p("span", W)) : l("", !0),
-              d("div", D, [
+              r("div", D, [
                 i(o.$slots, "footer", {}, void 0, !0)
               ])
             ])
           ]),
           _: 3
-        }, 8, ["style"])
+        }, 8, ["id", "style"])
       ]),
       _: 3
-    }, 8, ["teleport"])) : l("", !0);
+    }, 8, ["id", "teleport"])) : l("", !0);
   }
-}), A = /* @__PURE__ */ q(V, [["__scopeId", "data-v-53dfc378"]]);
+}), A = /* @__PURE__ */ q(V, [["__scopeId", "data-v-c9a881de"]]);
 export {
   A as default
 };

package/dist/components/overlay.es.js

@@ -1,6 +1,6 @@
-import { defineComponent as s, createBlock as a, openBlock as d, Teleport as l, createElementVNode as t, mergeProps as n, renderSlot as p } from "vue";
+import { defineComponent as d, createBlock as s, openBlock as a, Teleport as n, createElementVNode as o, mergeProps as l, renderSlot as i } from "vue";
 import { _ as c } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/overlay.css';const _ = { class: "rds-e-overlay__content" }, i = /* @__PURE__ */ s({
+import './style/overlay.css';const p = ["id"], _ = { class: "rds-e-overlay__content" }, f = /* @__PURE__ */ d({
   __name: "overlay",
   props: {
     /**
@@ -11,21 +11,31 @@ import './style/overlay.css';const _ = { class: "rds-e-overlay__content" }, i =
       type: String,
       default: "body",
       required: !0
+    },
+    /**
+     * ID para testing
+     */
+    id: {
+      type: String,
+      default: void 0
     }
   },
-  setup(o) {
-    const r = o;
-    return (e, m) => (d(), a(l, {
+  setup(e) {
+    const r = e;
+    return (t, u) => (a(), s(n, {
       to: r.teleport
     }, [
-      t("div", n({ class: "rds-e-overlay" }, e.$attrs), [
-        t("div", _, [
-          p(e.$slots, "default", {}, void 0, !0)
+      o("div", l({
+        id: e.id,
+        class: "rds-e-overlay"
+      }, t.$attrs), [
+        o("div", _, [
+          i(t.$slots, "default", {}, void 0, !0)
         ])
-      ], 16)
+      ], 16, p)
     ], 8, ["to"]));
   }
-}), v = /* @__PURE__ */ c(i, [["__scopeId", "data-v-969ad8b6"]]);
+}), y = /* @__PURE__ */ c(f, [["__scopeId", "data-v-f5f6d56b"]]);
 export {
-  v as default
+  y as default
 };

package/dist/components/pagination.es.js

@@ -1,13 +1,17 @@
-import { defineComponent as H, toRefs as O, ref as U, computed as u, watch as z, onBeforeMount as G, createElementBlock as g, openBlock as o, createElementVNode as m, createCommentVNode as _, createBlock as k, createVNode as P, Fragment as J, renderList as K, toDisplayString as C, unref as Q } from "vue";
-import f from "./actionButton.es.js";
-import { _ as W } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/pagination.css';const X = { class: "rds-e-pagination-container rds-flex" }, Y = { class: "rds-e-pagination" }, Z = {
+import { defineComponent as J, toRefs as K, ref as Q, computed as o, watch as W, onBeforeMount as X, createElementBlock as c, openBlock as r, createElementVNode as b, createCommentVNode as k, createBlock as x, createVNode as P, Fragment as Y, renderList as Z, unref as C, toDisplayString as B } from "vue";
+import p from "./actionButton.es.js";
+import T from "./dropdown.es.js";
+import { _ as I } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/pagination.css';const ee = ["id"], ae = { class: "rds-e-pagination" }, le = {
   key: 0,
   class: "rds-e-pagination__item rds-e-pagination__item-elipsis"
-}, T = {
+}, ie = {
+  key: 0,
+  class: "rds-e-pagination__dropdown"
+}, te = {
   key: 0,
   class: "rds-e-pagination-leyend"
-}, I = /* @__PURE__ */ H({
+}, ne = /* @__PURE__ */ J({
   __name: "pagination",
   props: {
     /**
@@ -81,172 +85,223 @@ import './style/pagination.css';const X = { class: "rds-e-pagination-container r
     enableEllipsis: {
       type: Boolean,
       default: !1
+    },
+    /**
+     * Habilita la funcionalidad de selector de paginación.
+     * Añade un dropdown para seleccionar la página. Cómo máximo se muestran 3 páginas en la paginación
+     */
+    enablePageDropdown: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Label para el dropdown de selección de página.
+     */
+    pageDropdownLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * ID de la paginación para testing
+     */
+    id: {
+      type: String,
+      default: void 0
     }
   },
   emits: ["pageChanged", "ellipsisClicked"],
-  setup(y, { expose: M, emit: E }) {
-    const b = y, B = E, {
-      itemsPerPage: p,
-      totalItems: t,
-      totalPages: r,
-      hideLeyend: L,
-      disableFirstLoad: $,
-      enableEllipsis: S
-    } = O(b), i = U(b.currentPage), c = u(() => typeof (t == null ? void 0 : t.value) == "number" && t.value >= 0), d = u(() => c.value && typeof (t == null ? void 0 : t.value) == "number" ? t.value <= 0 || p.value <= 0 ? 1 : Math.ceil(t.value / p.value) : typeof (r == null ? void 0 : r.value) == "number" && r.value > 0 ? r.value : (typeof (r == null ? void 0 : r.value) > "u" && typeof (t == null ? void 0 : t.value) > "u" && console.warn("[RDSPagination] Props `totalItems` o `totalPages` son requeridas."), 1)), w = u(() => c.value && !L.value && typeof (t == null ? void 0 : t.value) == "number" && t.value > 0), F = u(() => !c.value || typeof (t == null ? void 0 : t.value) != "number" || t.value === 0 ? 0 : (i.value - 1) * p.value + 1), q = u(() => {
-      if (!c.value || typeof (t == null ? void 0 : t.value) != "number") return 0;
-      const e = i.value * p.value;
-      return Math.min(e, t.value);
-    }), x = u(() => i.value === 1), N = u(() => i.value === d.value), D = u(() => {
-      const e = [], a = d.value, l = i.value;
-      if (!S.value) {
-        if (a <= 3)
-          for (let n = 1; n <= a; n++)
-            e.push(n);
-        else l === 1 ? e.push(1, 2, Math.min(3, a)) : l === a ? e.push(Math.max(1, a - 2), a - 1, a) : e.push(l - 1, l, l + 1);
-        return [...new Set(e)].filter((n) => typeof n == "number" && n >= 1 && n <= a);
+  setup(s, { expose: L, emit: M }) {
+    const h = s, $ = M, {
+      itemsPerPage: g,
+      totalItems: i,
+      totalPages: d,
+      hideLeyend: E,
+      disableFirstLoad: V,
+      enableEllipsis: _,
+      enablePageDropdown: w,
+      pageDropdownLabel: S
+    } = K(h), t = Q(h.currentPage), m = o(() => typeof (i == null ? void 0 : i.value) == "number" && i.value >= 0), v = o(() => m.value && typeof (i == null ? void 0 : i.value) == "number" ? i.value <= 0 || g.value <= 0 ? 1 : Math.ceil(i.value / g.value) : typeof (d == null ? void 0 : d.value) == "number" && d.value > 0 ? d.value : (typeof (d == null ? void 0 : d.value) > "u" && typeof (i == null ? void 0 : i.value) > "u" && console.warn("[RDSPagination] Props `totalItems` o `totalPages` son requeridas."), 1)), F = o(() => m.value && !E.value && typeof (i == null ? void 0 : i.value) == "number" && i.value > 0), R = o(() => !m.value || typeof (i == null ? void 0 : i.value) != "number" || i.value === 0 ? 0 : (t.value - 1) * g.value + 1), q = o(() => {
+      if (!m.value || typeof (i == null ? void 0 : i.value) != "number") return 0;
+      const a = t.value * g.value;
+      return Math.min(a, i.value);
+    }), D = o(() => t.value === 1), N = o(() => t.value === v.value), j = o(() => {
+      const a = [], e = v.value, l = t.value;
+      if (!_.value || w.value) {
+        if (e <= 3)
+          for (let n = 1; n <= e; n++)
+            a.push(n);
+        else l === 1 ? a.push(1, 2, Math.min(3, e)) : l === e ? a.push(Math.max(1, e - 2), e - 1, e) : a.push(l - 1, l, l + 1);
+        return [...new Set(a)].filter((n) => typeof n == "number" && n >= 1 && n <= e);
       }
-      if (a <= 5) {
-        for (let n = 1; n <= a; n++)
-          e.push(n);
-        return e;
+      if (e <= 5) {
+        for (let n = 1; n <= e; n++)
+          a.push(n);
+        return a;
       }
-      return e.push(1), l <= 3 ? (e.push(2, 3), a > 4 && e.push("ellipsis_end"), e.push(a)) : l >= a - 2 ? (a > 4 && e.push("ellipsis_start"), e.push(a - 2, a - 1, a)) : (e.push("ellipsis_start"), e.push(l - 1, l, l + 1), e.push("ellipsis_end"), e.push(a)), e.filter((n, s, h) => h.indexOf(n) === s);
-    }), R = (e) => {
-      const a = d.value, l = i.value, n = [];
-      if (e === "ellipsis_start")
-        for (let s = 2; s < l - 1; s++)
-          n.push(s);
-      else if (e === "ellipsis_end")
-        for (let s = l + 2; s < a; s++)
-          n.push(s);
+      return a.push(1), l <= 3 ? (a.push(2, 3), e > 4 && a.push("ellipsis_end"), a.push(e)) : l >= e - 2 ? (e > 4 && a.push("ellipsis_start"), a.push(e - 2, e - 1, e)) : (a.push("ellipsis_start"), a.push(l - 1, l, l + 1), a.push("ellipsis_end"), a.push(e)), a.filter((n, u, y) => y.indexOf(n) === u);
+    }), A = o(() => {
+      const a = v.value;
+      return Array.from({ length: a }, (e, l) => String(l + 1));
+    }), O = (a) => {
+      const e = v.value, l = t.value, n = [];
+      if (a === "ellipsis_start")
+        for (let u = 2; u < l - 1; u++)
+          n.push(u);
+      else if (a === "ellipsis_end")
+        for (let u = l + 2; u < e; u++)
+          n.push(u);
       return n;
-    }, j = (e) => {
-      const a = R(e);
-      B("ellipsisClicked", {
-        hiddenPages: a,
-        ellipsisType: e,
-        currentPage: i.value,
-        totalPages: d.value
+    }, U = (a) => {
+      const e = O(a);
+      $("ellipsisClicked", {
+        hiddenPages: e,
+        ellipsisType: a,
+        currentPage: t.value,
+        totalPages: v.value
       });
-    }, V = (e) => {
-      let a = i.value;
-      const l = d.value;
-      if ("navigator" in e)
-        switch (e.navigator) {
+    }, H = (a) => {
+      let e = t.value;
+      const l = v.value;
+      if ("navigator" in a)
+        switch (a.navigator) {
           case "next":
-            i.value < l && (a = i.value + 1);
+            t.value < l && (e = t.value + 1);
             break;
           case "prev":
-            i.value > 1 && (a = i.value - 1);
+            t.value > 1 && (e = t.value - 1);
             break;
           case "first":
-            i.value !== 1 && (a = 1);
+            t.value !== 1 && (e = 1);
             break;
           case "last":
-            i.value !== l && (a = l);
+            t.value !== l && (e = l);
             break;
         }
-      else "page" in e && typeof e.page == "number" && e.page >= 1 && e.page <= l && e.page !== i.value && (a = e.page);
-      return a !== i.value ? (i.value = a, !0) : !1;
-    }, v = (e, a = !1) => {
-      if (V(e) || a) {
-        const n = p.value, s = (i.value - 1) * n;
-        let h = s + n;
-        c.value && typeof (t == null ? void 0 : t.value) == "number" && (h = Math.min(s + n, t.value));
-        const A = {
-          ...e,
-          page: i.value,
-          offset: s,
+      else "page" in a && typeof a.page == "number" && a.page >= 1 && a.page <= l && a.page !== t.value && (e = a.page);
+      return e !== t.value ? (t.value = e, !0) : !1;
+    }, f = (a, e = !1) => {
+      if (H(a) || e) {
+        const n = g.value, u = (t.value - 1) * n;
+        let y = u + n;
+        m.value && typeof (i == null ? void 0 : i.value) == "number" && (y = Math.min(u + n, i.value));
+        const G = {
+          ...a,
+          page: t.value,
+          offset: u,
           limit: n,
-          end: h,
-          reset: a || void 0
+          end: y,
+          reset: e || void 0
         };
-        B("pageChanged", A);
+        $("pageChanged", G);
       }
+    }, z = (a) => {
+      const e = Number(a);
+      e !== t.value && e >= 1 && e <= v.value && f({ page: e });
     };
-    return z(() => b.currentPage, (e) => {
-      e !== i.value && e >= 1 && e <= d.value && (i.value = e);
-    }), G(() => {
-      $.value || v({ navigator: "first", page: 1 });
-    }), M({
+    return W(() => h.currentPage, (a) => {
+      a !== t.value && a >= 1 && a <= v.value && (t.value = a);
+    }), X(() => {
+      V.value || f({ navigator: "first", page: 1 });
+    }), L({
       /** Resetea la paginación a la primera página y emite el evento pageChanged. */
       resetPagination: () => {
-        i.value !== 1 && v({ page: 1 }, !0);
+        t.value !== 1 && f({ page: 1 }, !0);
       }
-    }), (e, a) => (o(), g("div", X, [
-      m("ul", Y, [
-        m("li", null, [
-          y.jumpTo ? (o(), k(f, {
+    }), (a, e) => (r(), c("div", {
+      id: s.id,
+      class: "rds-e-pagination-container rds-flex"
+    }, [
+      b("ul", ae, [
+        b("li", null, [
+          s.jumpTo ? (r(), x(p, {
             key: 0,
+            id: s.id ? `${s.id}-first` : void 0,
             class: "rds-e-pagination__actionBtn",
             variant: "ghost",
             small: "",
             icon: "back",
             "aria-label": "First Page",
-            disabled: x.value,
-            onClick: a[0] || (a[0] = (l) => v({ navigator: "first" }))
-          }, null, 8, ["disabled"])) : _("", !0)
+            disabled: D.value,
+            onClick: e[0] || (e[0] = (l) => f({ navigator: "first" }))
+          }, null, 8, ["id", "disabled"])) : k("", !0)
         ]),
-        m("li", null, [
-          P(f, {
+        b("li", null, [
+          P(p, {
+            id: s.id ? `${s.id}-prev` : void 0,
             class: "rds-e-pagination__actionBtn",
             variant: "ghost",
             small: "",
             icon: "arrow_left",
             "aria-label": "Prev page",
-            disabled: x.value,
-            onClick: a[1] || (a[1] = (l) => v({ navigator: "prev" }))
-          }, null, 8, ["disabled"])
+            disabled: D.value,
+            onClick: e[1] || (e[1] = (l) => f({ navigator: "prev" }))
+          }, null, 8, ["id", "disabled"])
         ]),
-        (o(!0), g(J, null, K(D.value, (l) => (o(), g("li", { key: l }, [
-          typeof l == "string" && l.includes("ellipsis") ? (o(), g("div", Z, [
-            P(f, {
+        (r(!0), c(Y, null, Z(j.value, (l) => (r(), c("li", { key: l }, [
+          typeof l == "string" && l.includes("ellipsis") ? (r(), c("div", le, [
+            P(p, {
+              id: s.id ? `${s.id}-ellipsis-${l}` : void 0,
               variant: "ghost",
               small: "",
               text: "...",
               icon: "",
               "aria-label": "Más páginas",
-              onClick: (n) => j(l)
-            }, null, 8, ["onClick"])
-          ])) : (o(), k(f, {
+              onClick: (n) => U(l)
+            }, null, 8, ["id", "onClick"])
+          ])) : (r(), x(p, {
             key: 1,
+            id: s.id ? `${s.id}-page-${l}` : void 0,
             class: "rds-e-pagination__item",
-            variant: l === i.value && b.selected ? "primary" : "ghost",
+            variant: l === t.value && h.selected ? "primary" : "ghost",
             small: "",
             text: String(l),
             icon: "",
             "aria-label": `page number ${l}`,
-            onClick: (n) => v({ page: l })
-          }, null, 8, ["variant", "text", "aria-label", "onClick"]))
+            onClick: (n) => f({ page: l })
+          }, null, 8, ["id", "variant", "text", "aria-label", "onClick"]))
         ]))), 128)),
-        m("li", null, [
-          P(f, {
+        b("li", null, [
+          P(p, {
+            id: s.id ? `${s.id}-next` : void 0,
             class: "rds-e-pagination__actionBtn",
             variant: "ghost",
             icon: "arrow_right",
             small: "",
             "aria-label": "next page",
             disabled: N.value,
-            onClick: a[2] || (a[2] = (l) => v({ navigator: "next" }))
-          }, null, 8, ["disabled"])
+            onClick: e[2] || (e[2] = (l) => f({ navigator: "next" }))
+          }, null, 8, ["id", "disabled"])
         ]),
-        m("li", null, [
-          y.jumpTo ? (o(), k(f, {
+        b("li", null, [
+          s.jumpTo ? (r(), x(p, {
             key: 0,
+            id: s.id ? `${s.id}-last` : void 0,
             class: "rds-e-pagination__actionBtn",
             variant: "ghost",
             small: "",
             icon: "last",
             "aria-label": "last page",
             disabled: N.value,
-            onClick: a[3] || (a[3] = (l) => v({ navigator: "last" }))
-          }, null, 8, ["disabled"])) : _("", !0)
-        ])
+            onClick: e[3] || (e[3] = (l) => f({ navigator: "last" }))
+          }, null, 8, ["id", "disabled"])) : k("", !0)
+        ]),
+        C(w) ? (r(), c("li", ie, [
+          P(T, {
+            id: "rds-dropdown-pagination",
+            modelValue: t.value,
+            "onUpdate:modelValue": e[4] || (e[4] = (l) => t.value = l),
+            label: C(S) ? C(S) : t.value.toString(),
+            options: A.value,
+            small: "",
+            "text-only": "",
+            onSelect: z
+          }, null, 8, ["modelValue", "label", "options"])
+        ])) : k("", !0)
       ]),
-      w.value ? (o(), g("p", T, " Mostrando resultados " + C(F.value) + "-" + C(q.value) + " de " + C(Q(t)), 1)) : _("", !0)
-    ]));
+      F.value ? (r(), c("p", te, " Mostrando resultados " + B(R.value) + "-" + B(q.value) + " de " + B(C(i)), 1)) : k("", !0)
+    ], 8, ee));
   }
-}), te = /* @__PURE__ */ W(I, [["__scopeId", "data-v-7bb8233b"]]);
+}), de = /* @__PURE__ */ I(ne, [["__scopeId", "data-v-755635ef"]]);
 export {
-  te as default
+  de as default
 };