energy-components 1.8.1 → 1.10.0-beta.0

package/dist/components/iconList.es.js

@@ -1,5 +1,5 @@
 import { defineComponent as p, ref as a, computed as v, createElementBlock as s, openBlock as i, Fragment as u, withDirectives as f, createElementVNode as r, vModelText as C, renderList as L, normalizeClass as x, createVNode as g, toDisplayString as h } from "vue";
-import { i as m, R as k } from "./icon-svg-_WCkLP8-.js";
+import { i as m, R as k } from "./icon-svg-YXBqzlJN.js";
 import { _ as w } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 import './style/iconList.css';const y = { class: "rds-e-icon-list" }, D = ["onClick"], N = /* @__PURE__ */ p({
   __name: "icon-list",

package/dist/components/iconSvg.es.js

@@ -1,4 +1,4 @@
-import { R as a } from "./icon-svg-_WCkLP8-.js";
+import { R as a } from "./icon-svg-YXBqzlJN.js";
 import "./_plugin-vue_export-helper-CHgC5LLL.js";
 export {
   a as default

package/dist/components/index.es.js

@@ -1,83 +1,91 @@
-import { R as i } from "./icon-svg-_WCkLP8-.js";
+import { R as i } from "./icon-svg-YXBqzlJN.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 n from "./textArea.es.js";
-import p from "./switch.es.js";
-import R from "./radioButton.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-DpguLlRK.js";
 import c from "./dropdown.es.js";
 import d from "./datepicker.es.js";
 import f from "./quantitySelector.es.js";
 import l from "./toggle.es.js";
 import u from "./selectionChip.es.js";
-import g from "./filterChip.es.js";
+import A from "./filterChip.es.js";
 import b from "./dragAndDrop.es.js";
-import B from "./tag.es.js";
-import T from "./accordionGroup.es.js";
-import A from "./accordion.es.js";
-import h from "./divider.es.js";
-import x from "./card.es.js";
-import w from "./tablepaginatedcomponent.es.js";
+import g from "./fileUploadItem.es.js";
+import T from "./tag.es.js";
+import B from "./accordionGroup.es.js";
+import h from "./accordion.es.js";
+import x from "./divider.es.js";
+import I from "./card.es.js";
+import v from "./tablepaginatedcomponent.es.js";
+import w from "./avatar.es.js";
 import C from "./link.es.js";
 import P from "./breadcrumbs.es.js";
 import _ from "./tabBar.es.js";
 import y from "./pagination.es.js";
-import I from "./indicator.es.js";
-import v from "./persistentToast.es.js";
-import k from "./infoBox.es.js";
-import F from "./progressBar.es.js";
-import G from "./modal.es.js";
-import M from "./overlay.es.js";
-import O from "./tooltip.es.js";
-import j from "./sidebar.es.js";
-import Q from "./sidedrawer.es.js";
+import F from "./directAccess.es.js";
+import k from "./indicator.es.js";
+import G from "./persistentToast.es.js";
+import L from "./infoBox.es.js";
+import M from "./progressBar.es.js";
+import O from "./loader.es.js";
+import U from "./modal.es.js";
+import j from "./overlay.es.js";
+import Q from "./tooltip.es.js";
+import V from "./sidebar.es.js";
+import q from "./sidedrawer.es.js";
 const t = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  RDSAccordion: A,
-  RDSAccordionGroup: T,
+  RDSAccordion: h,
+  RDSAccordionGroup: B,
   RDSActionButton: m,
+  RDSAvatar: w,
   RDSBreadcrumbs: P,
   RDSButton: a,
-  RDSCard: x,
+  RDSCard: I,
   RDSCheckbox: S,
   RDSDatePicker: d,
-  RDSDivider: h,
+  RDSDirectAccess: F,
+  RDSDivider: x,
   RDSDragAndDrop: b,
   RDSDropdown: c,
-  RDSFilterChip: g,
+  RDSFileUploadItem: g,
+  RDSFilterChip: A,
   RDSFloatinActionButton: e,
   RDSIconSvg: i,
-  RDSIndicator: I,
-  RDSInfoBox: k,
+  RDSIndicator: k,
+  RDSInfoBox: L,
   RDSLink: C,
-  RDSModal: G,
-  RDSOverlay: M,
+  RDSLoader: O,
+  RDSModal: U,
+  RDSOverlay: j,
   RDSPagination: y,
-  RDSPersistentToast: v,
-  RDSProgressBar: F,
+  RDSPersistentToast: G,
+  RDSProgressBar: M,
   RDSQuantitySelector: f,
-  RDSRadioButton: R,
+  RDSRadioButton: n,
   RDSRadioGroup: s,
   RDSSelectionChip: u,
-  RDSSidebar: j,
-  RDSSidedrawer: Q,
-  RDSSwitch: p,
+  RDSSidebar: V,
+  RDSSidedrawer: q,
+  RDSSwitch: R,
   RDSTabBar: _,
-  RDSTable: w,
-  RDSTag: B,
-  RDSTextArea: n,
+  RDSTable: v,
+  RDSTag: T,
+  RDSTextArea: p,
   RDSTextField: D,
   RDSToggle: l,
-  RDSTooltip: O
+  RDSTooltip: Q
 }, Symbol.toStringTag, { value: "Module" }));
-let V;
-function ho(o) {
-  V = o;
+let z;
+function yo(o) {
+  z = o;
 }
-const xo = {
+const Fo = {
   install: (o) => {
     for (const r in t)
       o.component(
@@ -87,43 +95,47 @@ const xo = {
   }
 };
 export {
-  A as RDSAccordion,
-  T as RDSAccordionGroup,
+  h as RDSAccordion,
+  B as RDSAccordionGroup,
   m as RDSActionButton,
+  w as RDSAvatar,
   P as RDSBreadcrumbs,
   a as RDSButton,
-  x as RDSCard,
+  I as RDSCard,
   S as RDSCheckbox,
   d as RDSDatePicker,
-  h as RDSDivider,
+  F as RDSDirectAccess,
+  x as RDSDivider,
   b as RDSDragAndDrop,
   c as RDSDropdown,
-  g as RDSFilterChip,
+  g as RDSFileUploadItem,
+  A as RDSFilterChip,
   e as RDSFloatinActionButton,
   i as RDSIconSvg,
-  I as RDSIndicator,
-  k as RDSInfoBox,
+  k as RDSIndicator,
+  L as RDSInfoBox,
   C as RDSLink,
-  G as RDSModal,
-  M as RDSOverlay,
+  O as RDSLoader,
+  U as RDSModal,
+  j as RDSOverlay,
   y as RDSPagination,
-  v as RDSPersistentToast,
-  F as RDSProgressBar,
+  G as RDSPersistentToast,
+  M as RDSProgressBar,
   f as RDSQuantitySelector,
-  R as RDSRadioButton,
+  n as RDSRadioButton,
   s as RDSRadioGroup,
   u as RDSSelectionChip,
-  j as RDSSidebar,
-  Q as RDSSidedrawer,
-  p as RDSSwitch,
+  V as RDSSidebar,
+  q as RDSSidedrawer,
+  R as RDSSwitch,
   _ as RDSTabBar,
-  w as RDSTable,
-  B as RDSTag,
-  n as RDSTextArea,
+  v as RDSTable,
+  T as RDSTag,
+  p as RDSTextArea,
   D as RDSTextField,
   l as RDSToggle,
-  O as RDSTooltip,
-  V as VueInstance,
-  xo as default,
-  ho as setVueInstance
+  Q as RDSTooltip,
+  z as VueInstance,
+  Fo as default,
+  yo as setVueInstance
 };

package/dist/components/infoBox.es.js

@@ -1,5 +1,5 @@
 import { defineComponent as k, ref as u, toRefs as h, computed as $, watch as w, nextTick as S, createElementBlock as t, openBlock as s, normalizeClass as m, createElementVNode as a, createCommentVNode as o, createVNode as b, toDisplayString as r, renderSlot as v } from "vue";
-import { R as _ } from "./icon-svg-_WCkLP8-.js";
+import { R as _ } from "./icon-svg-YXBqzlJN.js";
 import { _ as C } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 import './style/infoBox.css';const q = { class: "alert" }, B = {
   key: 0,

package/dist/components/link.es.js

@@ -1,7 +1,7 @@
-import { defineComponent as j, toRefs as E, computed as f, createBlock as d, openBlock as r, resolveDynamicComponent as L, unref as e, normalizeClass as m, withCtx as N, createCommentVNode as i, createElementBlock as S, mergeProps as _, renderSlot as b, createTextVNode as B, toDisplayString as I } from "vue";
-import { R as k } from "./icon-svg-_WCkLP8-.js";
-import { _ as V } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/link.css';const $ = /* @__PURE__ */ j({
+import { defineComponent as E, toRefs as L, computed as c, createBlock as p, openBlock as o, resolveDynamicComponent as N, unref as e, normalizeStyle as V, normalizeClass as _, withCtx as $, createCommentVNode as i, createElementBlock as b, mergeProps as k, renderSlot as B, createTextVNode as I, toDisplayString as D } from "vue";
+import { R as v } from "./icon-svg-YXBqzlJN.js";
+import { _ as M } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/link.css';const O = /* @__PURE__ */ E({
   __name: "link",
   props: {
     /**
@@ -73,86 +73,98 @@ import './style/link.css';const $ = /* @__PURE__ */ j({
     customClass: {
       type: String,
       default: ""
+    },
+    /**
+     * <span>Color personalizado para el link. Si se define, sobrescribe el color por defecto. Puede ser cualquier valor CSS válido: #333, rgb(), var(--color), etc.</span>
+     */
+    color: {
+      type: String,
+      default: ""
     }
   },
   setup(s) {
-    const v = s, {
-      text: y,
-      to: g,
-      icon: n,
-      tag: o,
-      disabled: c,
-      inverse: p,
-      arrow: u,
+    const y = s, {
+      text: g,
+      to: w,
+      icon: r,
+      tag: u,
+      disabled: f,
+      inverse: m,
+      arrow: d,
       right: t,
       underline: h,
-      customClass: D
-    } = E(v), R = f(() => {
-      var l, C;
+      customClass: R,
+      color: l
+    } = L(y), j = c(() => l.value ? { color: l.value } : void 0), z = c(() => {
+      var n, C;
       const a = ["rds-e-link"];
-      return p.value && a.push("rds-e-link--inverse"), h.value && a.push("rds-e-link--underline"), c.value && a.push("rds-e-style-state-disabled"), ((l = n == null ? void 0 : n.value) == null ? void 0 : l.name) !== "arrow" && a.push("link"), ((C = n == null ? void 0 : n.value) == null ? void 0 : C.name) !== "arrow" && p.value && a.push("link__icon--inverse"), a.join(" ");
-    }), w = f(() => {
-      var l;
-      const a = ["link__icon--arrow"];
-      return n != null && n.value && (a.push("link__icon"), c.value && a.push("link__icon--disabled")), ((l = n == null ? void 0 : n.value) == null ? void 0 : l.name) !== "arrow" && p.value && a.push("link__icon--inverse"), a.push(
-        t.value ? "link__icon--animation-right" : "link__icon--animation-left"
+      return m.value && a.push("rds-e-link--inverse"), h.value && a.push("rds-e-link--underline"), f.value && a.push("rds-e-style-state-disabled"), ((n = r == null ? void 0 : r.value) == null ? void 0 : n.name) !== "arrow" && a.push("rds-e-arrow-link"), ((C = r == null ? void 0 : r.value) == null ? void 0 : C.name) !== "arrow" && m.value && a.push("rds-e-arrow-link__icon--inverse"), a.join(" ");
+    }), S = c(() => {
+      var n;
+      const a = ["rds-e-arrow-link__icon--arrow"];
+      return r != null && r.value && (a.push("rds-e-arrow-link__icon"), f.value && a.push("rds-e-arrow-link__icon--disabled")), ((n = r == null ? void 0 : r.value) == null ? void 0 : n.name) !== "arrow" && m.value && a.push("rds-e-arrow-link__icon--inverse"), a.push(
+        t.value ? "rds-e-arrow-link__icon--animation-right" : "rds-e-arrow-link__icon--animation-left"
       ), a.join(" ");
-    }), x = f(() => {
+    }), x = c(() => {
       var a;
-      return u.value || ((a = n == null ? void 0 : n.value) == null ? void 0 : a.name);
+      return d.value || ((a = r == null ? void 0 : r.value) == null ? void 0 : a.name);
     });
-    return (a, l) => (r(), d(L(e(o) === "a" ? e(o) : "router-link"), {
-      class: m(R.value),
-      to: e(o) === "router-link" ? e(g) : null,
-      href: e(o) === "a" ? e(g) : null,
-      disable: e(c)
+    return (a, n) => (o(), p(N(e(u) === "a" ? e(u) : "router-link"), {
+      class: _(z.value),
+      to: e(u) === "router-link" ? e(w) : null,
+      href: e(u) === "a" ? e(w) : null,
+      disable: e(f),
+      style: V(j.value)
     }, {
-      default: N(() => [
-        e(n).name && !e(t) && !e(u) ? (r(), d(k, _({
+      default: $(() => [
+        e(r).name && !e(t) && !e(d) ? (o(), p(v, k({
           key: 0,
-          name: e(n).name
+          name: e(r).name
         }, {
-          ...e(n)
+          ...e(r)
         }, {
-          class: ["rds-e-link__icon-left", w.value]
-        }), null, 16, ["name", "class"])) : i("", !0),
-        e(t) ? (r(), S("span", {
+          class: ["rds-e-link__icon-left", S.value],
+          style: e(l) ? { color: e(l) } : void 0
+        }), null, 16, ["name", "class", "style"])) : i("", !0),
+        e(t) ? (o(), b("span", {
           key: 1,
-          class: m(["rds-e-link__text", [e(D), {
+          class: _(["rds-e-link__text", [e(R), {
             "rds-e-mr-xs": x.value,
             "rds-e-link__text--underline": e(h)
           }]])
         }, [
-          b(a.$slots, "default", {}, () => [
-            B(I(e(y)), 1)
+          B(a.$slots, "default", {}, () => [
+            I(D(e(g)), 1)
           ], !0)
         ], 2)) : i("", !0),
-        e(u) ? (r(), d(k, _({ key: 2 }, {
+        e(d) ? (o(), p(v, k({ key: 2 }, {
           name: e(t) ? "arrow_right" : "arrow_left"
         }, {
-          class: ["link__icon--arrow", [
-            e(t) ? "link__icon--animation-right" : "link__icon--animation-left"
-          ]]
-        }), null, 16, ["class"])) : i("", !0),
-        e(t) ? i("", !0) : (r(), S("span", {
+          class: ["rds-e-arrow-link__icon--arrow", [
+            e(t) ? "rds-e-arrow-link__icon--animation-right" : "rds-e-arrow-link__icon--animation-left"
+          ]],
+          style: e(l) ? { color: e(l) } : void 0
+        }), null, 16, ["class", "style"])) : i("", !0),
+        e(t) ? i("", !0) : (o(), b("span", {
           key: 3,
-          class: m(["rds-e-link__text", { "rds-e-ml-xs": x.value }])
+          class: _(["rds-e-link__text", { "rds-e-ml-xs": x.value }])
         }, [
-          b(a.$slots, "default", {}, () => [
-            B(I(e(y)), 1)
+          B(a.$slots, "default", {}, () => [
+            I(D(e(g)), 1)
           ], !0)
         ], 2)),
-        e(n).name && e(t) && !e(u) ? (r(), d(k, _({
+        e(r).name && e(t) && !e(d) ? (o(), p(v, k({
           key: 4,
-          name: e(n).name
-        }, e(n), {
-          class: ["rds-e-link__icon-right", w.value]
-        }), null, 16, ["name", "class"])) : i("", !0)
+          name: e(r).name
+        }, e(r), {
+          class: ["rds-e-link__icon-right", S.value],
+          style: e(l) ? { color: e(l) } : void 0
+        }), null, 16, ["name", "class", "style"])) : i("", !0)
       ]),
       _: 3
-    }, 8, ["class", "to", "href", "disable"]));
+    }, 8, ["class", "to", "href", "disable", "style"]));
   }
-}), P = /* @__PURE__ */ V($, [["__scopeId", "data-v-d51e1628"]]);
+}), A = /* @__PURE__ */ M(O, [["__scopeId", "data-v-49b40e60"]]);
 export {
-  P as default
+  A as default
 };

package/dist/components/loader.es.js

@@ -0,0 +1,178 @@
+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 { _ 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({
+  __name: "loader",
+  props: {
+    /**
+     * Define el diámetro del loader en píxeles.
+     * El valor se ajustará para estar entre 32px (mínimo) y 120px (máximo).
+     *
+     * @type {number}
+     * @optional
+     */
+    size: {
+      type: Number,
+      default: 64
+    },
+    /**
+     * Especifica la variante del loader.
+     * 'default': Muestra solo el spinner.
+     * 'contained': Envuelve el spinner en un contenedor con estilo de tarjeta (104x104px con padding de 24px).
+     * El prop `size` afectará al spinner dentro de este contenedor.
+     *
+     * @type {string}
+     * @optional
+     */
+    variant: {
+      type: String,
+      default: "default",
+      validator: (r) => typeof r == "string" && ["default", "contained"].includes(r)
+    },
+    /**
+     * Controla el tipo de animación del loader.
+     * 'normal': Una rotación continua de un arco del círculo.
+     * 'infinite': Una animación donde un segmento del círculo parece crecer, encogerse y rotar.
+     *
+     * @type {string}
+     * @optional
+     */
+    animationType: {
+      type: String,
+      default: "normal",
+      validator: (r) => typeof r == "string" && ["normal", "infinite"].includes(r)
+    },
+    /**
+     * Define el grosor del trazo del spinner en píxeles.
+     * Si no se especifica, se calcula automáticamente como `size / 8` (con un mínimo de 2px).
+     *
+     * @type {number}
+     * @optional
+     */
+    strokeWidth: {
+      type: Number,
+      default: 4
+    },
+    /**
+     * Etiqueta ARIA para accesibilidad. Describe la acción que se está realizando.
+     *
+     * @type {string}
+     * @optional
+     */
+    ariaLabel: {
+      type: String,
+      default: "Cargando"
+    },
+    /**
+     * Identificador único para el componente y sus elementos internos (como el gradiente SVG).
+     * Si no se proporciona, se usará un valor por defecto.
+     *
+     * @type {string}
+     * @optional
+     */
+    id: {
+      type: String,
+      default: "rds-loader-default-id"
+    }
+  },
+  setup(r) {
+    const _ = r, {
+      size: m,
+      variant: p,
+      animationType: s,
+      strokeWidth: u,
+      ariaLabel: g,
+      id: v
+    } = b(_), i = {
+      stop000: "#FF9C00",
+      stop024: "#FF7E45",
+      stop065: "#FF3740",
+      stop100: "#C02030"
+    }, 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(() => [
+      "rds-e-loader",
+      `rds-e-loader--${p.value}`,
+      `rds-e-loader--animation-${s.value}`
+    ]), x = o(() => {
+      if (p.value === "contained") {
+        const t = e.value + 48;
+        return {
+          width: `${t}px`,
+          height: `${t}px`,
+          padding: "24px"
+        };
+      }
+      return {
+        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));
+    return (t, j) => (h(), f("div", {
+      class: C(y.value),
+      style: S(x.value),
+      role: "progressbar",
+      "aria-label": n(g),
+      "aria-busy": "true"
+    }, [
+      (h(), f("svg", {
+        width: e.value,
+        height: e.value,
+        viewBox: `0 0 ${e.value} ${e.value}`,
+        class: "rds-e-loader__svg",
+        xmlns: "http://www.w3.org/2000/svg"
+      }, [
+        a("defs", null, [
+          a("linearGradient", {
+            id: `rds-loader-gradient-${n(v)}`,
+            x1: "0.1605",
+            y1: "0.133",
+            x2: "0.8395",
+            y2: "0.867",
+            gradientUnits: "objectBoundingBox"
+          }, [
+            a("stop", {
+              offset: "0%",
+              "stop-color": i.stop000
+            }, null, 8, E),
+            a("stop", {
+              offset: "24.3%",
+              "stop-color": i.stop024
+            }, null, 8, M),
+            a("stop", {
+              offset: "65.21%",
+              "stop-color": i.stop065
+            }, null, 8, D),
+            a("stop", {
+              offset: "100%",
+              "stop-color": i.stop100
+            }, null, 8, I)
+          ], 8, W)
+        ]),
+        a("circle", {
+          class: "rds-e-loader__track",
+          cx: e.value / 2,
+          cy: e.value / 2,
+          r: c.value,
+          "stroke-width": d.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)})`,
+          fill: "none",
+          "stroke-linecap": "round"
+        }, n(s) === "normal" ? { "stroke-dasharray": k.value, "stroke-dashoffset": $.value } : {}, {
+          style: n(s) === "infinite" ? { "--circumference": `${l.value}px` } : {}
+        }), null, 16, P)
+      ], 8, N))
+    ], 14, F));
+  }
+}), O = /* @__PURE__ */ z(T, [["__scopeId", "data-v-30cf8a40"]]);
+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 d, openBlock as l, unref as n, withCtx as p, createVNode as k, withModifiers as b, normalizeStyle as g, createElementVNode as a, createElementBlock as c, renderSlot as i } from "vue";
 import w from "./overlay.es.js";
 import S from "./card.es.js";
-import { R as q } from "./icon-svg-_WCkLP8-.js";
+import { R as q } from "./icon-svg-YXBqzlJN.js";
 import { _ as x } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 import './style/modal.css';const $ = { class: "rds-e-modal__container" }, B = { class: "rds-e-modal__header" }, O = {
   key: 0,