energy-components 1.14.1 → 1.15.0

package/dist/components/checkbox.es.js

@@ -1,8 +1,9 @@
-import { defineComponent as g, ref as n, watch as f, onMounted as S, onBeforeUnmount as B, createElementBlock as C, openBlock as r, normalizeClass as c, createElementVNode as s, renderSlot as V, createTextVNode as D, createBlock as m, createCommentVNode as E, toDisplayString as L, withCtx as N, createVNode as R } from "vue";
-import { R as k } from "./icon-svg-DuzOdbk1.js";
-import T from "./tooltip.es.js";
-import { _ as q } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/checkbox.css';const p = ["id", "checked", "aria-label", "required", "disabled"], z = ["for"], F = /* @__PURE__ */ g({
+import { defineComponent as V, computed as r, ref as c, watch as _, onMounted as D, onBeforeUnmount as E, createElementBlock as L, openBlock as u, normalizeClass as d, createElementVNode as b, renderSlot as N, createTextVNode as R, createBlock as x, createCommentVNode as T, toDisplayString as q, withCtx as U, createVNode as z } from "vue";
+import { R as y } from "./icon-svg-BU0OQFKH.js";
+import I from "./tooltip.es.js";
+import { g as F } from "./getInstance-GhoEcxLF.js";
+import { _ as K } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/checkbox.css';const M = ["id", "checked", "aria-label", "required", "disabled"], $ = ["for"], j = /* @__PURE__ */ V({
   __name: "checkbox",
   props: {
     /**
@@ -17,7 +18,7 @@ import './style/checkbox.css';const p = ["id", "checked", "aria-label", "require
      */
     id: {
       type: [String, Number],
-      default: ""
+      default: void 0
     },
     /**
      * <span>Texto de accesibilidad</span>
@@ -41,11 +42,19 @@ import './style/checkbox.css';const p = ["id", "checked", "aria-label", "require
       default: ""
     },
     /**
+     * @deprecated Usar `v-model` o la prop `modelValue` en su lugar.
      * <span>Estado del checkbox</span>
      */
     isChecked: {
       type: Boolean,
-      default: !1
+      default: void 0
+    },
+    /**
+     * <span>Valor del checkbox, para uso con v-model.</span>
+     */
+    modelValue: {
+      type: Boolean,
+      default: void 0
     },
     /**
      * <span>Indica si el campo es requerido</span>
@@ -77,58 +86,60 @@ import './style/checkbox.css';const p = ["id", "checked", "aria-label", "require
     }
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: h }) {
-    const l = e, x = h, a = n(l.isChecked), i = n(!1), d = n(!1), o = n(null);
-    f(() => l.isChecked, (t) => {
-      a.value = t;
-    }), f(
-      () => l.indeterminate,
-      (t) => {
-        o.value && (o.value.indeterminate = !!(t && a.value));
+  setup(e, { emit: w }) {
+    const a = e, g = w, m = r(() => a.modelValue !== void 0), f = c(a.isChecked ?? !1), i = c(!1), s = c(!1), t = c(null), p = c(`rds-e-checkbox-${F()}`), h = r(() => {
+      var o;
+      return ((o = a.id) == null ? void 0 : o.toString()) || p.value;
+    }), l = r(() => m.value ? a.modelValue ?? !1 : f.value);
+    _(
+      () => [a.indeterminate, l.value],
+      ([o, n]) => {
+        t.value && (t.value.indeterminate = o && n);
       },
       { immediate: !0 }
     );
-    const v = () => {
-      d.value && (i.value = !0);
-    }, y = () => i.value = !1, w = (t) => {
-      a.value = t.target.checked, x("update:modelValue", t.target.checked);
-    }, u = (t) => {
-      t.key === "Tab" && (d.value = !0);
-    }, b = () => {
-      d.value = !1;
-    };
-    return S(() => {
-      o.value && (o.value.indeterminate = !!(l.indeterminate && a.value)), window.addEventListener("keydown", u), window.addEventListener("mousedown", b);
-    }), B(() => {
-      window.removeEventListener("keydown", u), window.removeEventListener("mousedown", b);
-    }), (t, I) => (r(), C("div", {
-      class: c(["rds-e-checkbox__container", { "rds-e-checkbox__container--focused": i.value }])
+    const C = (o) => {
+      const n = o.target.checked;
+      m.value || (f.value = n), g("update:modelValue", n);
+    }, k = (o) => {
+      o.key === "Tab" && (s.value = !0);
+    }, v = () => {
+      s.value = !1;
+    }, S = () => {
+      s.value && (i.value = !0);
+    }, B = () => i.value = !1;
+    return D(() => {
+      t.value && (t.value.indeterminate = !!(a.indeterminate && l.value)), window.addEventListener("keydown", k), window.addEventListener("mousedown", v);
+    }), E(() => {
+      window.removeEventListener("keydown", k), window.removeEventListener("mousedown", v);
+    }), (o, n) => (u(), L("div", {
+      class: d(["rds-e-checkbox__container", { "rds-e-checkbox__container--focused": i.value }])
     }, [
-      s("input", {
-        id: e.id.toString(),
+      b("input", {
+        id: h.value,
         ref_key: "inputRef",
-        ref: o,
-        checked: e.isChecked,
+        ref: t,
+        checked: l.value,
         "aria-label": e.accessibilityLabel,
         type: "checkbox",
-        class: c(["rds-e-checkbox", { "rds-e-checkbox--error": e.error }]),
+        class: d(["rds-e-checkbox", { "rds-e-checkbox--error": e.error }]),
         required: e.required,
         disabled: e.disabled,
-        onChange: w,
-        onFocus: v,
-        onBlur: y
-      }, null, 42, p),
-      s("label", {
-        for: e.id.toString(),
-        class: c(["rds-e-checkbox__label", {
+        onChange: C,
+        onFocus: S,
+        onBlur: B
+      }, null, 42, M),
+      b("label", {
+        for: h.value,
+        class: d(["rds-e-checkbox__label", {
           "rds-e-checkbox__label--disabled": e.disabled,
-          "rds-e-checkbox__label--checked": a.value,
-          "rds-e-checkbox__label--indeterminate": e.indeterminate && a.value
+          "rds-e-checkbox__label--checked": l.value,
+          "rds-e-checkbox__label--indeterminate": e.indeterminate && l.value
         }])
       }, [
-        V(t.$slots, "label-text", {}, () => [
-          s("span", {
-            class: c([
+        N(o.$slots, "label-text", {}, () => [
+          b("span", {
+            class: d([
               "rds-e-checkbox__label-box",
               {
                 "rds-e-checkbox__label-box--disabled": e.disabled,
@@ -136,33 +147,33 @@ import './style/checkbox.css';const p = ["id", "checked", "aria-label", "require
               }
             ])
           }, [
-            D(L(e.label) + " ", 1),
-            e.icon && e.iconTooltip ? (r(), m(T, {
+            R(q(e.label) + " ", 1),
+            e.icon && e.iconTooltip ? (u(), x(I, {
               key: 0,
               content: e.iconTooltip,
               placement: "top",
               "offset-space": 8
             }, {
-              default: N(() => [
-                R(k, {
+              default: U(() => [
+                z(y, {
                   class: "rds-e-checkbox__label-box--icon",
                   name: e.icon,
                   size: "sm"
                 }, null, 8, ["name"])
               ]),
               _: 1
-            }, 8, ["content"])) : e.icon ? (r(), m(k, {
+            }, 8, ["content"])) : e.icon ? (u(), x(y, {
               key: 1,
               class: "rds-e-checkbox__label-box--icon",
               name: e.icon,
               size: "sm"
-            }, null, 8, ["name"])) : E("", !0)
+            }, null, 8, ["name"])) : T("", !0)
           ], 2)
         ], !0)
-      ], 10, z)
+      ], 10, $)
     ], 2));
   }
-}), $ = /* @__PURE__ */ q(F, [["__scopeId", "data-v-472a518b"]]);
+}), P = /* @__PURE__ */ K(j, [["__scopeId", "data-v-bee9602e"]]);
 export {
-  $ as default
+  P as default
 };

package/dist/components/collapsable.es.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./collapsable.scss_vue_type_style_index_0_src_true_lang-DfOWp1XD.js";
+import { _ as f } from "./collapsable.scss_vue_type_style_index_0_src_true_lang-Bi5q6Y3n.js";
 export {
   f as default
 };

package/dist/components/{collapsable.scss_vue_type_style_index_0_src_true_lang-DfOWp1XD.js → collapsable.scss_vue_type_style_index_0_src_true_lang-Bi5q6Y3n.js}

@@ -1,5 +1,5 @@
 import { defineComponent as w, ref as d, computed as r, watch as f, nextTick as c, createElementBlock as B, openBlock as m, normalizeClass as i, createElementVNode as a, withKeys as C, createBlock as S, createCommentVNode as $, createVNode as I, toDisplayString as v, renderSlot as N, createTextVNode as V } from "vue";
-import { R as h } from "./icon-svg-DuzOdbk1.js";
+import { R as h } from "./icon-svg-BU0OQFKH.js";
 import './style/collapsable.css';const H = ["id", "aria-expanded", "aria-controls", "disabled"], x = { class: "rds-e-collapsable__header-title" }, D = { class: "rds-e-collapsable__header-title-text" }, E = ["id", "aria-labelledby"], W = /* @__PURE__ */ w({
   __name: "collapsable",
   props: {

package/dist/components/directAccess.es.js

@@ -1,5 +1,5 @@
-import { defineComponent as j, toRefs as E, computed as o, createBlock as d, openBlock as i, resolveDynamicComponent as I, unref as t, normalizeClass as N, withCtx as O, renderSlot as u, createElementVNode as m, createCommentVNode as w, createElementBlock as T, normalizeStyle as b, toDisplayString as V } from "vue";
-import { R as S } from "./icon-svg-DuzOdbk1.js";
+import { defineComponent as j, toRefs as E, computed as o, createBlock as d, openBlock as l, resolveDynamicComponent as I, unref as t, normalizeClass as N, withCtx as O, renderSlot as u, createElementVNode as m, createCommentVNode as b, createElementBlock as T, normalizeStyle as w, toDisplayString as V } from "vue";
+import { R as S } from "./icon-svg-BU0OQFKH.js";
 import { _ as q } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 import './style/directAccess.css';const A = { class: "rds-e-direct-access__artwork-container" }, M = ["src", "alt", "aria-hidden"], F = { class: "rds-e-direct-access__text-container" }, G = { class: "rds-e-direct-access__text" }, H = /* @__PURE__ */ j({
   __name: "direct-access",
@@ -19,7 +19,7 @@ import './style/directAccess.css';const A = { class: "rds-e-direct-access__artwo
     layout: {
       type: String,
       default: "horizontal",
-      validator: (l) => ["horizontal", "vertical"].includes(l)
+      validator: (i) => ["horizontal", "vertical"].includes(i)
     },
     /**
      * Objeto para configurar el arte gráfico (icono o microilustración).
@@ -68,16 +68,23 @@ import './style/directAccess.css';const A = { class: "rds-e-direct-access__artwo
     useRouterLink: {
       type: Boolean,
       default: !1
+    },
+    /**
+     * ID del direct-access para testing
+     */
+    id: {
+      type: String,
+      default: void 0
     }
   },
   emits: ["click"],
-  setup(l, { emit: g }) {
-    const x = l, z = g, { text: _, layout: C, disabled: c, arrow: p, artwork: r, ariaLabel: $, linkTo: a, useRouterLink: B } = E(x), L = o(() => [
+  setup(i, { emit: g }) {
+    const x = i, z = g, { text: p, layout: C, disabled: c, arrow: _, artwork: r, ariaLabel: $, linkTo: a, useRouterLink: B } = E(x), L = o(() => [
       "rds-e-direct-access",
       `rds-e-direct-access--${C.value}`,
       { "rds-e-direct-access--disabled": c.value },
-      { "rds-e-direct-access--with-arrow": p.value }
-    ]), n = o(() => B.value && !!a.value), R = o(() => $.value || _.value), f = o(() => {
+      { "rds-e-direct-access--with-arrow": _.value }
+    ]), n = o(() => B.value && !!a.value), R = o(() => $.value || p.value), f = o(() => {
       var e;
       return (e = r.value) != null && e.microillustration && (r.value.microillustration.path || r.value.microillustration.url) || "";
     }), v = (e) => {
@@ -91,7 +98,8 @@ import './style/directAccess.css';const A = { class: "rds-e-direct-access__artwo
       }
       z("click", e);
     };
-    return (e, s) => (i(), d(I(t(a) ? n.value ? "router-link" : "a" : "button"), {
+    return (e, s) => (l(), d(I(t(a) ? n.value ? "router-link" : "a" : "button"), {
+      id: i.id,
       type: t(a) ? void 0 : "button",
       href: !n.value && t(a) ? t(a) : void 0,
       to: n.value && t(a) ? t(a) : void 0,
@@ -106,41 +114,41 @@ import './style/directAccess.css';const A = { class: "rds-e-direct-access__artwo
             u(e.$slots, "artwork", {}, () => {
               var k, y, h;
               return [
-                (y = (k = t(r)) == null ? void 0 : k.icon) != null && y.name ? (i(), d(S, {
+                (y = (k = t(r)) == null ? void 0 : k.icon) != null && y.name ? (l(), d(S, {
                   key: 0,
                   name: t(r).icon.name,
-                  style: b(v(t(r).icon)),
+                  style: w(v(t(r).icon)),
                   class: "rds-e-direct-access__artwork-item rds-e-direct-access__artwork-item--icon",
                   "aria-hidden": "true"
-                }, null, 8, ["name", "style"])) : (h = t(r)) != null && h.microillustration && f.value ? (i(), T("img", {
+                }, null, 8, ["name", "style"])) : (h = t(r)) != null && h.microillustration && f.value ? (l(), T("img", {
                   key: 1,
                   src: f.value,
                   alt: t(r).microillustration.alt || "",
-                  style: b(v(t(r).microillustration)),
+                  style: w(v(t(r).microillustration)),
                   class: "rds-e-direct-access__artwork-item rds-e-direct-access__artwork-item--microillustration",
                   "aria-hidden": !t(r).microillustration.alt
-                }, null, 12, M)) : w("", !0)
+                }, null, 12, M)) : b("", !0)
               ];
             }, !0)
           ]),
           m("div", F, [
             u(e.$slots, "text", {}, () => [
-              m("span", G, V(t(_)), 1)
+              m("span", G, V(t(p)), 1)
             ], !0)
           ]),
-          t(p) ? (i(), d(S, {
+          t(_) ? (l(), d(S, {
             key: 0,
             name: "arrow_right",
             small: "",
             class: "rds-e-direct-access__arrow",
             "aria-hidden": "true"
-          })) : w("", !0)
+          })) : b("", !0)
         ], !0)
       ]),
       _: 3
-    }, 8, ["type", "href", "to", "class", "disabled", "aria-label"]));
+    }, 8, ["id", "type", "href", "to", "class", "disabled", "aria-label"]));
   }
-}), Q = /* @__PURE__ */ q(H, [["__scopeId", "data-v-d6ee1420"]]);
+}), Q = /* @__PURE__ */ q(H, [["__scopeId", "data-v-9bb4e0b7"]]);
 export {
   Q as default
 };

package/dist/components/dragAndDrop.es.js

@@ -1,6 +1,6 @@
 import { defineComponent as k, ref as _, computed as c, createElementBlock as b, openBlock as x, withModifiers as f, normalizeClass as q, createElementVNode as u, renderSlot as L, createVNode as M, createCommentVNode as z, toDisplayString as D } from "vue";
 import { g as A } from "./getInstance-GhoEcxLF.js";
-import { R as U } from "./icon-svg-DuzOdbk1.js";
+import { R as U } from "./icon-svg-BU0OQFKH.js";
 import { _ as V } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 import './style/dragAndDrop.css';const O = ["id", "accept", "multiple", "disabled"], P = ["for"], j = { class: "rds-e-drag-and-drop__icon-wrapper" }, G = { class: "rds-e-drag-and-drop__text-container" }, H = { class: "rds-e-drag-and-drop__text" }, J = {
   key: 0,

package/dist/components/dropdown.es.js

@@ -1,15 +1,15 @@
-import { defineComponent as fe, mergeModels as J, toRefs as ve, useModel as ye, ref as D, computed as i, provide as U, onMounted as be, nextTick as R, onBeforeUnmount as we, createElementBlock as w, openBlock as u, normalizeClass as T, unref as a, createVNode as O, mergeProps as Q, withModifiers as n, createSlots as X, withCtx as d, createElementVNode as c, createCommentVNode as S, createBlock as K, renderSlot as v, Fragment as ge, toDisplayString as E } from "vue";
+import { defineComponent as fe, mergeModels as J, toRefs as ve, useModel as ye, ref as D, computed as i, provide as U, onMounted as be, nextTick as F, onBeforeUnmount as we, createElementBlock as w, openBlock as u, normalizeClass as T, unref as a, createVNode as S, mergeProps as Q, withModifiers as n, createSlots as X, withCtx as d, createElementVNode as c, createCommentVNode as O, createBlock as K, renderSlot as v, Fragment as ge, toDisplayString as E } from "vue";
 import he from "./multiselect.es.js";
 import ke from "./checkbox.es.js";
 import { _ as $e } from "./radio-group.vue_vue_type_script_setup_true_lang-DpguLlRK.js";
 import Ce from "./radioButton.es.js";
-import { R as Y } from "./icon-svg-DuzOdbk1.js";
+import { R as Y } from "./icon-svg-BU0OQFKH.js";
 import Z from "./textField.es.js";
 import { _ as De } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/dropdown.css';const Oe = ["id"], Se = { class: "rds-e-dropdown__option" }, xe = { class: "rds-e-dropdown__option-container" }, Ve = { class: "rds-e-dropdown__option--prepend" }, Be = { class: "rds-e-dropdown__option--content" }, Ae = {
+import './style/dropdown.css';const Se = ["id"], Oe = { class: "rds-e-dropdown__option" }, xe = { class: "rds-e-dropdown__option-container" }, Ve = { class: "rds-e-dropdown__option--prepend" }, Be = { class: "rds-e-dropdown__option--content" }, Ae = {
   key: 0,
   class: "rds-e-dropdown__option-detail"
-}, Fe = { key: 1 }, Re = {
+}, Re = { key: 1 }, Fe = {
   key: 0,
   class: "rds-e-dropdown__option--append"
 }, Te = { class: "rds-e-dropdown__before-list-container" }, Ee = {
@@ -251,11 +251,11 @@ import './style/dropdown.css';const Oe = ["id"], Se = { class: "rds-e-dropdown__
     }, ue = (e) => {
       k("close", e, s.id);
     }, ce = (e) => {
-      R(() => {
+      F(() => {
         k("select", e);
       });
     }, pe = () => {
-      R(() => {
+      F(() => {
         if ($.value) {
           const e = h.value.filter(
             (t) => B(t)
@@ -272,14 +272,14 @@ import './style/dropdown.css';const Oe = ["id"], Se = { class: "rds-e-dropdown__
       m.value.select(e), V = !0;
     }, A = () => {
       m.value.activate();
-    }, F = () => {
+    }, R = () => {
       m.value.deactivate();
     }, W = () => {
       m.value.toggle(), V = !0;
     }, z = () => {
-      le.value ? F() : A();
+      le.value ? R() : A();
     }, me = () => {
-      C.value && y.value && (te(), A(), R(() => {
+      C.value && y.value && (te(), A(), F(() => {
         y.value.focus();
       }));
     }, G = (e) => {
@@ -291,12 +291,12 @@ import './style/dropdown.css';const Oe = ["id"], Se = { class: "rds-e-dropdown__
       const t = e.target, l = !((g = (f = m.value) == null ? void 0 : f.$el) != null && g.contains(t));
       if (_.value) {
         const b = y.value && !y.value.$el.contains(t) && !t.closest(".rds-e-dropdown__before-list");
-        l && b && (_.value = !1, F());
-      } else l && F();
+        l && b && (_.value = !1, R());
+      } else l && R();
     };
     return be(() => {
       var e;
-      (e = m.value) != null && e.$el && p.value.push(m.value.$el), R(() => {
+      (e = m.value) != null && e.$el && p.value.push(m.value.$el), F(() => {
         var t;
         if (C.value && ((t = y.value) != null && t.$el)) {
           p.value.push(y.value.$el);
@@ -314,14 +314,14 @@ import './style/dropdown.css';const Oe = ["id"], Se = { class: "rds-e-dropdown__
       /**
        * Cierra el dropdown
        */
-      deactivate: F
+      deactivate: R
     }), (e, t) => (u(), w("div", {
       class: T(["rds-e-dropdown", {
         "rds-e-dropdown--text-only": a(j),
         "rds-e-dropdown--inverse": o.inverse
       }])
     }, [
-      O(he, Q({
+      S(he, Q({
         ref_key: "multiselect",
         ref: m,
         modelValue: r.value,
@@ -356,7 +356,7 @@ import './style/dropdown.css';const Oe = ["id"], Se = { class: "rds-e-dropdown__
             onMousedown: n(z, ["prevent", "stop"])
           }, [
             c("span", null, E(q.value || o.label), 1),
-            O(a(Y), {
+            S(a(Y), {
               name: "arrow_down",
               "aria-hidden": "true",
               class: T(["rds-e-dropdown__input-caret", {
@@ -364,7 +364,7 @@ import './style/dropdown.css';const Oe = ["id"], Se = { class: "rds-e-dropdown__
               }]),
               onMousedown: n(z, ["prevent", "stop"])
             }, null, 8, ["class"])
-          ], 42, Oe)) : (u(), K(a(Z), {
+          ], 42, Se)) : (u(), K(a(Z), {
             key: 1,
             id: `multiselect-dropdown-${o.id}`,
             modelValue: q.value,
@@ -378,7 +378,7 @@ import './style/dropdown.css';const Oe = ["id"], Se = { class: "rds-e-dropdown__
             onMousedown: n(W, ["prevent"])
           }, X({
             "right-icon": d(() => [
-              O(a(Y), {
+              S(a(Y), {
                 name: "arrow_down",
                 "aria-hidden": "true",
                 class: T(["rds-e-dropdown__input-caret", {
@@ -402,7 +402,7 @@ import './style/dropdown.css';const Oe = ["id"], Se = { class: "rds-e-dropdown__
           t[14] || (t[14] = c("span", null, null, -1))
         ]),
         option: d(({ option: l, search: f, index: g }) => [
-          c("div", Se, [
+          c("div", Oe, [
             c("div", xe, [
               c("div", Ve, [
                 a($) ? (u(), K(a(ke), {
@@ -419,7 +419,7 @@ import './style/dropdown.css';const Oe = ["id"], Se = { class: "rds-e-dropdown__
                   "group-name": `group-${o.id}`
                 }, {
                   default: d(() => [
-                    O(a(Ce), {
+                    S(a(Ce), {
                       id: `${g}-${typeof l == "object" ? l.id : g}`,
                       small: o.small,
                       option: typeof l == "object" ? l.id : l,
@@ -429,7 +429,7 @@ import './style/dropdown.css';const Oe = ["id"], Se = { class: "rds-e-dropdown__
                     }, null, 8, ["id", "small", "option", "checked", "disabled", "onClick"])
                   ]),
                   _: 2
-                }, 1032, ["modelValue", "group-name"])) : S("", !0)
+                }, 1032, ["modelValue", "group-name"])) : O("", !0)
               ]),
               c("div", Be, [
                 v(e.$slots, "singleLabel", { option: l }, () => {
@@ -437,19 +437,19 @@ import './style/dropdown.css';const Oe = ["id"], Se = { class: "rds-e-dropdown__
                   return [
                     (b = N.value) != null && b.label ? (u(), w(ge, { key: 0 }, [
                       c("span", null, E(l.label), 1),
-                      l != null && l.detail ? (u(), w("span", Ae, E(l.detail), 1)) : S("", !0)
-                    ], 64)) : (u(), w("span", Fe, E(l), 1))
+                      l != null && l.detail ? (u(), w("span", Ae, E(l.detail), 1)) : O("", !0)
+                    ], 64)) : (u(), w("span", Re, E(l), 1))
                   ];
                 }, !0)
               ])
             ]),
-            e.$slots.optionAppend ? (u(), w("div", Re, [
+            e.$slots.optionAppend ? (u(), w("div", Fe, [
               v(e.$slots, "optionAppend", {
                 option: l,
                 search: f,
                 index: g
               }, void 0, !0)
-            ])) : S("", !0)
+            ])) : O("", !0)
           ])
         ]),
         _: 2
@@ -505,7 +505,7 @@ import './style/dropdown.css';const Oe = ["id"], Se = { class: "rds-e-dropdown__
               }, ["stop"]))
             }, [
               c("div", Te, [
-                O(a(Z), Q({
+                S(a(Z), Q({
                   ref_key: "textFieldInput",
                   ref: y,
                   modelValue: I.value,
@@ -518,12 +518,12 @@ import './style/dropdown.css';const Oe = ["id"], Se = { class: "rds-e-dropdown__
                   }, ["stop"]))
                 }), null, 16, ["modelValue"])
               ])
-            ], 32)) : S("", !0),
+            ], 32)) : O("", !0),
             e.$slots.beforeList ? (u(), w("div", Ee, [
               c("div", Le, [
                 v(e.$slots, "beforeList", {}, void 0, !0)
               ])
-            ])) : S("", !0)
+            ])) : O("", !0)
           ]),
           key: "4"
         } : void 0,

package/dist/components/fileUploadItem.es.js

@@ -1,20 +1,20 @@
 import { defineComponent as M, ref as N, computed as c, createElementBlock as l, openBlock as o, normalizeClass as $, createElementVNode as r, renderSlot as v, createVNode as p, createCommentVNode as n, toDisplayString as m, withModifiers as I } from "vue";
-import { R as g } from "./icon-svg-DuzOdbk1.js";
+import { R as g } from "./icon-svg-BU0OQFKH.js";
 import z from "./progressBar.es.js";
 import { _ as C } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/fileUploadItem.css';const R = { class: "rds-e-file-upload-item__icon-container" }, w = { class: "rds-e-file-upload-item__details" }, E = { class: "rds-e-file-upload-item__info-wrapper" }, F = { class: "rds-e-file-upload-item__name" }, x = {
+import './style/fileUploadItem.css';const R = ["id"], w = { class: "rds-e-file-upload-item__icon-container" }, E = { class: "rds-e-file-upload-item__details" }, F = { class: "rds-e-file-upload-item__info-wrapper" }, x = { class: "rds-e-file-upload-item__name" }, D = {
   key: 0,
   class: "rds-e-file-upload-item__meta"
-}, D = { class: "rds-e-file-upload-item__size" }, P = {
+}, P = { class: "rds-e-file-upload-item__size" }, V = {
   key: 0,
   class: "rds-e-file-upload-item__time-remaining"
-}, V = {
+}, q = {
   key: 1,
   class: "rds-e-file-upload-item__error-message"
-}, q = {
+}, T = {
   key: 0,
   class: "rds-e-file-upload-item__progress-indicator-container"
-}, T = { class: "rds-e-file-upload-item__action" }, j = ["aria-label", "disabled"], A = /* @__PURE__ */ M({
+}, j = { class: "rds-e-file-upload-item__action" }, A = ["aria-label", "disabled"], G = /* @__PURE__ */ M({
   __name: "file-upload-item",
   props: {
     /**
@@ -121,11 +121,12 @@ import './style/fileUploadItem.css';const R = { class: "rds-e-file-upload-item__
       !s.disabled && t && b("action", { actionType: t.type, fileId: s.id });
     };
     return (t, i) => (o(), l("div", {
+      id: e.id,
       class: $(["rds-e-file-upload-item rds-radius-inputs", [y.value]]),
       onMouseover: i[1] || (i[1] = (d) => f.value = !0),
       onMouseleave: i[2] || (i[2] = (d) => f.value = !1)
     }, [
-      r("div", R, [
+      r("div", w, [
         v(t.$slots, "file-icon", {}, () => [
           p(g, {
             name: h.value,
@@ -134,17 +135,18 @@ import './style/fileUploadItem.css';const R = { class: "rds-e-file-upload-item__
           }, null, 8, ["name"])
         ], !0)
       ]),
-      r("div", w, [
-        r("div", E, [
-          r("span", F, m(e.fileName), 1),
-          a.value !== "error" ? (o(), l("div", x, [
-            r("span", D, m(S.value), 1),
-            a.value === "uploading" && e.timeRemaining ? (o(), l("span", P, m(e.timeRemaining), 1)) : n("", !0)
+      r("div", E, [
+        r("div", F, [
+          r("span", x, m(e.fileName), 1),
+          a.value !== "error" ? (o(), l("div", D, [
+            r("span", P, m(S.value), 1),
+            a.value === "uploading" && e.timeRemaining ? (o(), l("span", V, m(e.timeRemaining), 1)) : n("", !0)
           ])) : n("", !0),
-          a.value === "error" && e.errorMessage ? (o(), l("div", V, m(e.errorMessage), 1)) : n("", !0)
+          a.value === "error" && e.errorMessage ? (o(), l("div", q, m(e.errorMessage), 1)) : n("", !0)
         ]),
-        a.value === "uploading" && e.showProgressBar ? (o(), l("div", q, [
+        a.value === "uploading" && e.showProgressBar ? (o(), l("div", T, [
           p(z, {
+            id: e.id,
             class: "rds-e-file-upload-item__progress-bar",
             step: e.progress,
             "max-steps": 100,
@@ -153,10 +155,10 @@ import './style/fileUploadItem.css';const R = { class: "rds-e-file-upload-item__
             "white-bar": "",
             "hide-counter": "",
             inverse: ""
-          }, null, 8, ["step"])
+          }, null, 8, ["id", "step"])
         ])) : n("", !0)
       ]),
-      r("div", T, [
+      r("div", j, [
         v(t.$slots, "action", {}, () => [
           e.action ? (o(), l("button", {
             key: 0,
@@ -171,12 +173,12 @@ import './style/fileUploadItem.css';const R = { class: "rds-e-file-upload-item__
               class: "rds-e-file-upload-item__action-icon",
               "aria-hidden": "true"
             }, null, 8, ["name"])
-          ], 8, j)) : n("", !0)
+          ], 8, A)) : n("", !0)
         ], !0)
       ])
-    ], 34));
+    ], 42, R));
   }
-}), U = /* @__PURE__ */ C(A, [["__scopeId", "data-v-1de9506e"]]);
+}), J = /* @__PURE__ */ C(G, [["__scopeId", "data-v-acd37774"]]);
 export {
-  U as default
+  J as default
 };