energy-components 1.4.0 → 1.6.0-beta.0

package/dist/components/tablepaginatedcomponent.es.js

@@ -0,0 +1,137 @@
+import { defineComponent as $, toRefs as M, ref as s, watch as N, watchEffect as V, openBlock as c, createElementBlock as g, Fragment as K, renderList as h, unref as S, renderSlot as v, createBlock as B, mergeProps as z, createSlots as C, withCtx as A, normalizeProps as w, guardReactiveProps as E, createCommentVNode as F } from "vue";
+import q from "./tableslotedcomponent.es.js";
+import G from "./pagination.es.js";
+import { _ as J } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/tablepaginatedcomponent.css';const Q = { class: "table_paginated__container" }, W = /* @__PURE__ */ $({
+  __name: "TablePaginatedComponent",
+  props: {
+    loading: { type: Boolean, default: !1 },
+    header: {},
+    items: {},
+    totalItemsLength: { default: 0 },
+    checkedAll: { type: Boolean, default: !1 },
+    itemsPerPage: { default: () => [15] },
+    selectableKey: {},
+    hideSelectAll: { type: Boolean, default: !1 },
+    hideItemsPerPage: { type: Boolean },
+    hideHeaders: { type: Boolean },
+    hideLeyend: { type: Boolean },
+    hidePagination: { type: Boolean },
+    activePage: { default: 1 },
+    initChecked: { default: () => [] },
+    isMobileDevice: { type: Boolean, default: !1 },
+    variant: {},
+    condensed: { type: Boolean },
+    itemsExpanded: {},
+    showSelectAll: { type: Boolean, default: !0 },
+    showEmptyState: { type: Boolean, default: !0 },
+    asynchrone: { type: Boolean, default: !0 },
+    jumpTo: { type: Boolean, default: !1 }
+  },
+  emits: ["onUpdate:options", "onUpdate:reset", "onUpdate:selection", "onUpdate:selectedAll", "onUpdate:sort", "onItemExpansion"],
+  setup(U, { expose: _, emit: I }) {
+    const t = U, d = I, {
+      loading: O,
+      items: o,
+      selectableKey: T,
+      header: j,
+      asynchrone: P
+    } = M(t), m = s(), r = s([]), l = s([]), y = s({
+      item: {
+        header: j,
+        items: r
+      },
+      selectableKey: T,
+      listChecked: l,
+      checkedAll: t.checkedAll,
+      initChecked: [],
+      variant: t.variant,
+      condensed: t.condensed,
+      hideHeaders: t.hideHeaders,
+      showSelectAll: t.showSelectAll,
+      hideSelectAll: t.hideSelectAll,
+      showEmptyState: t.showEmptyState,
+      mockItems: t.itemsPerPage[0]
+    }), b = s(null), u = s(1), p = s(), x = () => {
+      o.value = [], r.value = [], u.value = 1, d("onUpdate:reset");
+    }, k = () => {
+      p.value && (r.value = o.value);
+    }, D = (e) => {
+      const a = {};
+      if ("pagination" in e) {
+        e.pagination.reset && x();
+        let n = !1;
+        p.value = e.pagination, e.pagination.page > u.value && (u.value = e.pagination.page, n = !0), p.value && (p.value.isNewPage = n), k();
+      }
+      Object.assign(a, p.value), m.value && m.value.clearVisibleDetails(), d("onUpdate:options", a);
+    }, L = (e) => {
+      const a = l.value.indexOf(e);
+      a > -1 ? l.value.splice(a, 1) : l.value.push(e), d("onUpdate:selection", l.value);
+    }, R = () => {
+      var e;
+      (e = b.value) == null || e.resetPagination();
+    }, H = (e) => {
+      e && (l.value = []), y.value.checkedAll = e, d("onUpdate:selectedAll", e);
+    };
+    return l.value = [...t.initChecked], P.value || (r.value = o.value), N(o, () => {
+      k();
+    }), V(() => {
+      if (!P.value && o.value.length > 0) {
+        const e = (t.activePage - 1) * t.itemsPerPage[0], a = e + t.itemsPerPage[0];
+        r.value = o.value.slice(e, a);
+      }
+    }), _({
+      /** Fuerza a refrescar la paginacion y la tabla */
+      $reset: R
+    }), (e, a) => (c(), g("div", Q, [
+      e.$slots.mobile && e.isMobileDevice ? (c(!0), g(K, { key: 0 }, h(S(o), (n, i) => (c(), g("div", {
+        key: `mobile-${i}`,
+        class: "table_paginted__mobile_item"
+      }, [
+        v(e.$slots, "mobile", { item: n }, void 0, !0)
+      ]))), 128)) : (c(), B(q, z({
+        key: 1,
+        ref_key: "tableSloted",
+        ref: m,
+        class: "mb-5"
+      }, y.value, {
+        loading: S(O),
+        "is-mobile-device": e.isMobileDevice,
+        "items-expanded": e.itemsExpanded,
+        onOnClickCheckbox: L,
+        onSelectAll: H,
+        onOnItemExpansion: a[0] || (a[0] = (n) => d("onItemExpansion", n)),
+        onOnHeaderSort: a[1] || (a[1] = (n) => d("onUpdate:sort", n))
+      }), C({ _: 2 }, [
+        h(e.$slots, (n, i) => ({
+          name: i,
+          fn: A((f) => [
+            v(e.$slots, i, w(E(f || {})), void 0, !0)
+          ])
+        }))
+      ]), 1040, ["loading", "is-mobile-device", "items-expanded"])),
+      e.hidePagination ? F("", !0) : (c(), B(G, {
+        key: 2,
+        ref_key: "paginationComponentRef",
+        ref: b,
+        class: "rds-mt-16",
+        "total-items": t.totalItemsLength,
+        "current-page": t.activePage,
+        "items-per-page": t.itemsPerPage[0],
+        "hide-leyend": t.hideLeyend,
+        "jump-to": t.jumpTo,
+        onPageChanged: a[2] || (a[2] = (n) => D({ pagination: n }))
+      }, C({ _: 2 }, [
+        h(e.$slots, (n, i) => ({
+          name: i,
+          fn: A((f) => [
+            v(e.$slots, i, w(E(f || {})), void 0, !0)
+          ])
+        }))
+      ]), 1032, ["total-items", "current-page", "items-per-page", "hide-leyend", "jump-to"]))
+    ]));
+  }
+}), te = /* @__PURE__ */ J(W, [["__scopeId", "data-v-10dce149"]]);
+export {
+  te as default
+};

package/dist/components/tableslotedcomponent.es.js

@@ -0,0 +1,293 @@
+import { defineComponent as ee, toRefs as le, getCurrentInstance as te, ref as _, computed as C, watchEffect as se, watch as ae, onMounted as oe, openBlock as o, createElementBlock as n, normalizeClass as b, createElementVNode as i, Fragment as p, renderList as x, renderSlot as h, normalizeStyle as ne, toDisplayString as O, createBlock as ce, mergeProps as ie, createCommentVNode as d, unref as $, createVNode as E, Transition as N, withCtx as V, nextTick as re } from "vue";
+import { I as L } from "./icon-svg-CeKfjk3j.js";
+import { _ as ue } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/tableslotedcomponent.css';const de = { key: 0 }, _e = ["data-header", "onClick"], be = ["id", "checked", "onClick"], ke = ["for"], fe = {
+  key: 0,
+  class: "table__cell table__cell--heading body-1 table__cell--right"
+}, pe = ["checked"], ye = {
+  key: 0,
+  class: "loading-overlay"
+}, ve = ["onClick"], ge = ["column-key", "data-cell"], he = ["title"], $e = {
+  key: 0,
+  class: "table__cell table__cell--shadow table__cell--right"
+}, me = ["id", "checked", "disabled", "onClick"], Ce = ["for"], Se = ["colspan"], xe = ["colspan"], Ee = /* @__PURE__ */ ee({
+  __name: "TableSlotedComponent",
+  props: {
+    loading: { type: Boolean, default: !1 },
+    item: {},
+    hideHeaders: { type: Boolean, default: !1 },
+    statusTranslate: {},
+    applyShadow: { type: Boolean, default: !1 },
+    selectableKey: {},
+    hideSelectAll: { type: Boolean },
+    checkedAll: { type: Boolean, default: !1 },
+    listChecked: { default: [] },
+    noFixedColumn: { type: Boolean, default: !1 },
+    isMobileDevice: { type: Boolean, default: !1 },
+    variant: { default: "default" },
+    condensed: { type: Boolean },
+    itemsExpanded: {},
+    showEmptyState: { type: Boolean, default: !1 },
+    mockItems: {}
+  },
+  emits: ["selectAll", "onClickCheckbox", "onItemExpansion", "onHeaderSort"],
+  setup(j, { expose: z, emit: F }) {
+    const c = j, y = F, { item: k, listChecked: P, selectableKey: r } = le(c), S = te(), q = _(), v = _([]), m = _([]), K = _([]), U = _({}), f = _(!1), Y = _(!0), G = C(() => {
+      const e = "table";
+      let t = e;
+      return t = `${t} ${e}--${c.variant}`, c.condensed && (t = `${t} ${e}--condensed`), t;
+    }), J = C(() => {
+      const e = "table__body";
+      let t = e;
+      return t = `${t} ${e}--${c.variant}`, c.condensed && (t = `${t} ${e}--condensed`), t;
+    }), Q = C(() => c.mockItems ? Array.from({ length: c.mockItems }, () => ({
+      expandible: !1,
+      visible: !1
+    })) : []), g = C(() => c.loading && v.value.length === 0 ? Q.value : v.value), W = (e) => {
+      if (r != null && r.value) {
+        const t = e[r.value];
+        return P.value.includes(t);
+      }
+      return !1;
+    }, X = (e) => {
+      r != null && r.value && y("onClickCheckbox", String(e[r.value]));
+    }, B = async (e, t = !1) => {
+      var l;
+      e.expandible && (c.isMobileDevice || (e.visible = !e.visible), y("onItemExpansion", {
+        ...e,
+        isMobileDevice: c.isMobileDevice
+      }), t && (await re(), (l = document.querySelector(".table__group--is-open")) == null || l.scrollIntoView({ behavior: "smooth" })));
+    }, Z = (e) => {
+      f.value = e.target.checked, y("selectAll", f.value);
+    }, A = (e) => e.align ? `table__cell--${e.align}` : "table__cell--left", R = (e, t) => t === "actions" ? !1 : e.status === "BLOCKED" || e.status === "BUSINESS_BLOCK" || e.status === "PT_BLOCKED" ? !0 : !!e.$disabled, D = (e, t, l) => {
+      var a, s;
+      if (!t) return "---";
+      if (e === "date") {
+        const u = (s = (a = k.value.items[l]) == null ? void 0 : a.rawElem) == null ? void 0 : s.operationHour;
+        if (u) return `${t} ${u}`;
+      }
+      return t;
+    }, w = (e, t) => {
+      if (!t.sortable) return;
+      const l = ["", "asc", "desc"], s = (l.indexOf(t.sort || "") + 1) % l.length;
+      if (m.value.forEach((u) => {
+        u.sortable && u.key !== t.key && (u.sort = "");
+      }), t.sort = l[s], t.sort === "")
+        return y("onHeaderSort", {});
+      y("onHeaderSort", {
+        sortBy: t.key,
+        order: t.sort
+      });
+    }, I = (e) => {
+      const t = {
+        name: "filter",
+        class: "",
+        style: {
+          transform: "translateY(6px)"
+        }
+      };
+      return e.sort === "asc" && (t.class = "sortable_icon--active", t.style.transform = `${t.style.transform} scale(-1)`), e.sort === "desc" && (t.class = "sortable_icon--active"), t;
+    }, H = (e = !1) => {
+      v.value = [...k.value.items].map((t, l) => {
+        var a;
+        return {
+          ...t,
+          visible: e ? !!((a = v.value[l]) != null && a.visible) : !1
+        };
+      });
+    }, T = (e = !1) => {
+      Y.value = !e, m.value = [
+        ...k.value.header.map((t) => ("sort" in t || Object.assign(t, { sort: "" }), t))
+      ], H(e), f.value = c.checkedAll;
+    };
+    T();
+    const M = (e) => Object.keys(e);
+    return se(() => {
+      var e;
+      T(!0), (e = c.itemsExpanded) != null && e.length && c.itemsExpanded.forEach((t) => {
+        k.value.items[t] && B(k.value.items[t], !0);
+      });
+    }), ae(() => c.isMobileDevice, () => {
+      v.value = [...k.value.items].map((e) => ({
+        ...e,
+        visible: !1
+      }));
+    }), z({
+      clearVisibleDetails: H
+    }), oe(() => {
+      var e;
+      q.value = (e = S == null ? void 0 : S.vnode) == null ? void 0 : e.scopeId;
+    }), (e, t) => (o(), n("div", {
+      class: b(["table__container", G.value])
+    }, [
+      i("table", null, [
+        e.hideHeaders ? d("", !0) : (o(), n("thead", de, [
+          i("tr", null, [
+            (o(!0), n(p, null, x(m.value, (l, a) => (o(), n("th", {
+              key: `header-${a}`,
+              "data-header": `data-header-${l.key}`,
+              class: b(["table__cell table__cell--heading body-1", [
+                A(l),
+                {
+                  "table__cell--shadow": l.sticky,
+                  "table__cell--no-sticky": !l.sticky,
+                  "table__cell--sortable": l.sortable
+                }
+              ]]),
+              onClick: (s) => w(s, l)
+            }, [
+              h(e.$slots, `header-${l.key}`, { item: l }, () => [
+                l.type === "selectAll" ? (o(), n(p, { key: 0 }, [
+                  i("input", {
+                    id: `checkbox_${l.key}`,
+                    class: "rds-checkbox",
+                    type: "checkbox",
+                    checked: l.allSelected,
+                    onClick: l.callback
+                  }, null, 8, be),
+                  i("label", {
+                    for: `checkbox_${l.key}`,
+                    class: "rds-checkbox__label"
+                  }, null, 8, ke)
+                ], 64)) : (o(), n(p, { key: 1 }, [
+                  i("span", {
+                    style: ne({
+                      color: (l == null ? void 0 : l.sort) !== "" ? "#00ADC3" : ""
+                    }),
+                    class: "rds-title-02"
+                  }, O(l.text || ""), 5),
+                  l.sortable ? (o(), ce(L, ie({
+                    key: 0,
+                    class: "table__header__icon sortable_icon",
+                    ref_for: !0
+                  }, I(l)), null, 16)) : d("", !0)
+                ], 64))
+              ], !0)
+            ], 10, _e))), 128)),
+            $(r) && !e.hideSelectAll ? (o(), n("th", fe, [
+              i("input", {
+                id: "All",
+                class: "rds-checkbox table__checkbox",
+                type: "checkbox",
+                checked: f.value,
+                onClick: Z
+              }, null, 8, pe),
+              t[0] || (t[0] = i("label", {
+                for: "All",
+                class: "rds-checkbox__label rds-checkbox__label--no-text"
+              }, null, -1))
+            ])) : d("", !0)
+          ])
+        ])),
+        i("tbody", {
+          class: b(J.value)
+        }, [
+          E(N, { name: "fade" }, {
+            default: V(() => [
+              e.loading ? (o(), n("div", ye, [
+                E(L, { name: "loading" })
+              ])) : d("", !0)
+            ]),
+            _: 1
+          }),
+          g.value.length !== 0 ? (o(!0), n(p, { key: 0 }, x(g.value, (l, a) => (o(), n(p, {
+            key: `row-${a}}`
+          }, [
+            i("tr", {
+              ref_for: !0,
+              ref: (s) => {
+                K.value[a] = s;
+              },
+              class: b(["table__group", [
+                { "table__group--odd": a % 2 === 0 },
+                { "table__group--is-open rds-background-grey": l.visible },
+                { "table__group--expandible": l.expandible },
+                l.$class || ""
+              ]]),
+              onClick: () => B(l)
+            }, [
+              (o(!0), n(p, null, x(m.value, (s, u) => (o(), n("td", {
+                key: `column-${u}`,
+                "column-key": u,
+                "data-cell": `data-cell-${s.key}`,
+                class: b(["table__cell rds-body-01", [
+                  A(s),
+                  {
+                    "table__cell--shadow": s.sticky,
+                    "table__cell--no-sticky": !s.sticky,
+                    "table__cell--disabled": R(l, s.key)
+                  },
+                  l[`$${s.key}_class`] || ""
+                ]])
+              }, [
+                h(e.$slots, `td-${s.key}`, {
+                  value: l[s.key],
+                  item: l
+                }, () => [
+                  i("span", {
+                    title: D(s.key, String(l[s.key] || ""), a)
+                  }, O(D(s.key, String(l[s.key] || ""), a)), 9, he)
+                ], !0)
+              ], 10, ge))), 128)),
+              $(r) ? (o(), n("td", $e, [
+                h(e.$slots, "td-checkbox", { item: l }, () => [
+                  i("input", {
+                    id: `add-${a}-${l[$(r)]}`,
+                    ref_for: !0,
+                    ref: () => {
+                      U.value[String(l[$(r)] || "")] = !0;
+                    },
+                    name: "checkbox-item",
+                    class: "rds-checkbox",
+                    checked: W(l) || f.value,
+                    disabled: f.value,
+                    type: "checkbox",
+                    onClick: (s) => X(l)
+                  }, null, 8, me),
+                  i("label", {
+                    for: `add-${a}-${l[$(r)]}`,
+                    class: "rds-checkbox__label rds-checkbox__label--no-text"
+                  }, null, 8, Ce)
+                ], !0)
+              ])) : d("", !0)
+            ], 10, ve),
+            g.value[a].visible ? (o(), n("tr", {
+              key: 0,
+              class: b(["table__group table__group--dropdown", [
+                {
+                  "table__group--odd": a % 2 === 0
+                }
+              ]])
+            }, [
+              i("td", {
+                class: b(["table__cell table__group--dropdown rds-background-grey", {
+                  "table__group--dropdown-disabled": l.status !== "ACTIVE",
+                  "table__cell--table": !l.expandible
+                }]),
+                colspan: M(l).length
+              }, [
+                h(e.$slots, "expandible", { item: l }, void 0, !0)
+              ], 10, Se)
+            ], 2)) : d("", !0),
+            g.value[a].visible ? (o(), n("tr", {
+              key: 1,
+              class: "table__group--spacer",
+              colspan: M(l).length
+            }, null, 8, xe)) : d("", !0)
+          ], 64))), 128)) : d("", !0)
+        ], 2)
+      ]),
+      E(N, { name: "fade" }, {
+        default: V(() => [
+          e.showEmptyState && !e.loading && g.value.length === 0 ? h(e.$slots, "empty", { key: 0 }, () => [
+            t[1] || (t[1] = i("p", { class: "rds-headline-03" }, " No hay datos para mostrar ", -1))
+          ], !0) : d("", !0)
+        ]),
+        _: 3
+      })
+    ], 2));
+  }
+}), He = /* @__PURE__ */ ue(Ee, [["__scopeId", "data-v-2f3d4308"]]);
+export {
+  He as default
+};

package/dist/components/tag.es.js

@@ -1,5 +1,5 @@
-import { defineComponent as h, toRefs as x, computed as u, openBlock as o, createElementBlock as $, normalizeClass as r, unref as t, createBlock as p, createCommentVNode as d, createTextVNode as S, toDisplayString as B } from "vue";
-import { R as f } from "./icon-svg-u9BWBbvW.js";
+import { defineComponent as h, toRefs as x, computed as u, openBlock as o, createElementBlock as $, normalizeClass as r, unref as t, createBlock as p, createCommentVNode as d, createTextVNode as B, toDisplayString as S } from "vue";
+import { I as f } from "./icon-svg-CeKfjk3j.js";
 import { _ as k } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 import './style/tag.css';const C = /* @__PURE__ */ h({
   __name: "tag",
@@ -76,7 +76,7 @@ import './style/tag.css';const C = /* @__PURE__ */ h({
         class: r(["rds-e-tag__icon", i.value]),
         "aria-hidden": "true"
       }, null, 8, ["name", "class"])) : d("", !0),
-      S(" " + B(t(_)) + " ", 1),
+      B(" " + S(t(_)) + " ", 1),
       t(c) ? (o(), p(f, {
         key: 1,
         name: "arrow_right",
@@ -85,7 +85,7 @@ import './style/tag.css';const C = /* @__PURE__ */ h({
       }, null, 8, ["class"])) : d("", !0)
     ], 2));
   }
-}), D = /* @__PURE__ */ k(C, [["__scopeId", "data-v-e784d437"]]);
+}), j = /* @__PURE__ */ k(C, [["__scopeId", "data-v-e784d437"]]);
 export {
-  D as default
+  j as default
 };

package/dist/components/textArea.es.js

@@ -1,5 +1,5 @@
-import { defineComponent as G, mergeModels as J, useModel as K, toRefs as L, ref as O, computed as o, openBlock as s, createElementBlock as f, normalizeClass as h, createElementVNode as a, withDirectives as Q, unref as e, vModelText as W, renderSlot as y, createBlock as I, mergeProps as q, toHandlers as T, createCommentVNode as i, createTextVNode as X, toDisplayString as u } from "vue";
-import { R as $ } from "./icon-svg-u9BWBbvW.js";
+import { defineComponent as G, mergeModels as J, useModel as K, toRefs as L, ref as O, computed as o, openBlock as s, createElementBlock as f, normalizeClass as h, createElementVNode as a, withDirectives as Q, unref as e, vModelText as W, renderSlot as y, createBlock as M, mergeProps as q, toHandlers as T, createCommentVNode as i, createTextVNode as X, toDisplayString as u } from "vue";
+import { I as $ } from "./icon-svg-CeKfjk3j.js";
 import { _ as Y } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 import './style/textArea.css';function b(t, _ = !0, d = !0) {
   return _ && !t.trim() ? (console.warn("Advertencia: El valor no puede estar vacío"), !1) : d && !/^[\w\-:]+$/.test(t) ? (console.warn("Advertencia: El valor contiene caracteres inválidos"), !1) : !0;
@@ -138,23 +138,23 @@ const Z = { class: "rds-e-textarea__container" }, ee = { class: "rds-e-textarea_
   setup(t) {
     const _ = t, d = K(t, "modelValue"), {
       label: w,
-      id: S,
+      id: k,
       disabled: p,
       maxlength: m,
       minlength: g,
       modelValue: c,
       icon: A,
-      rightIcon: k,
-      helper: D,
+      rightIcon: S,
+      helper: z,
       error: x,
-      helperText: R,
+      helperText: D,
       clearable: V,
-      lengthError: z
-    } = L(_), v = O(!1), F = () => {
+      lengthError: F
+    } = L(_), v = O(!1), P = () => {
       v.value = !1;
-    }, P = () => {
+    }, j = () => {
       v.value = !0;
-    }, B = o(() => c.value.length === m.value), E = o(() => c.value.length === 0 ? !1 : c.value.length < g.value), N = o(() => z.value && (B.value || E.value)), j = o(() => {
+    }, B = o(() => c.value.length === m.value), E = o(() => c.value.length === 0 ? !1 : c.value.length < g.value), N = o(() => F.value && (B.value || E.value)), H = o(() => {
       const r = [];
       return c.value && r.push("rds-e-textarea--filled"), x.value && r.push("rds-e-textarea--error"), p.value && r.push("rds-e-textarea--disabled"), N.value && r.push("rds-e-textarea--error"), r.join(" ");
     }), l = o(() => {
@@ -167,7 +167,7 @@ const Z = { class: "rds-e-textarea__container" }, ee = { class: "rds-e-textarea_
         }
       }, n = {
         left: { ...r },
-        right: { ...r, name: k.value }
+        right: { ...r, name: S.value }
       };
       return V.value && (n.right = {
         ...r,
@@ -177,16 +177,16 @@ const Z = { class: "rds-e-textarea__container" }, ee = { class: "rds-e-textarea_
           click: () => d.value = ""
         }
       }), n;
-    }), H = o(() => c.value.length);
+    }), R = o(() => c.value.length);
     return (r, n) => {
-      var C, M;
+      var C, I;
       return s(), f("div", {
-        class: h(["rds-e-textarea", j.value])
+        class: h(["rds-e-textarea", H.value])
       }, [
         a("div", Z, [
           a("div", ee, [
             Q(a("textarea", {
-              id: (C = e(S)) == null ? void 0 : C.toString(),
+              id: (C = e(k)) == null ? void 0 : C.toString(),
               "onUpdate:modelValue": n[0] || (n[0] = (U) => d.value = U),
               type: "text",
               class: h(["rds-e-textarea__input", { "rds-e-textarea__input--active": v.value }]),
@@ -195,8 +195,8 @@ const Z = { class: "rds-e-textarea__container" }, ee = { class: "rds-e-textarea_
               minlength: e(g),
               rows: t.rows,
               disabled: e(p),
-              onBlur: F,
-              onFocus: P
+              onBlur: P,
+              onFocus: j
             }, null, 42, te), [
               [W, d.value]
             ]),
@@ -216,14 +216,14 @@ const Z = { class: "rds-e-textarea__container" }, ee = { class: "rds-e-textarea_
               ])
             ], -1)),
             a("label", {
-              for: (M = e(S)) == null ? void 0 : M.toString(),
+              for: (I = e(k)) == null ? void 0 : I.toString(),
               class: h(["rds-e-textarea__label", {
                 "rds-e-textarea__label--with-icon": l.value.left.name,
                 "rds-e-textarea__label--active": v.value
               }])
             }, [
               y(r.$slots, "left-icon", {}, () => [
-                l.value.left.name ? (s(), I($, q({
+                l.value.left.name ? (s(), M($, q({
                   key: 0,
                   class: ["rds-e-textarea__icon rds-e-textarea__icon--left", { "rds-e-textarea__icon--hidden": v.value }],
                   "aria-hidden": "true"
@@ -237,9 +237,9 @@ const Z = { class: "rds-e-textarea__container" }, ee = { class: "rds-e-textarea_
                 "rds-e-textarea__counter--clearable": e(V)
               }])
             }, [
-              t.counter && !e(k) ? (s(), f("p", ae, u(H.value) + "/" + u(e(m)), 1)) : i("", !0),
+              t.counter && !e(S) ? (s(), f("p", ae, u(R.value) + "/" + u(e(m)), 1)) : i("", !0),
               y(r.$slots, "right-icon", {}, () => [
-                l.value.right.name && !l.value.left.name ? (s(), I($, q({
+                l.value.right.name && !l.value.left.name ? (s(), M($, q({
                   key: 0,
                   class: "rds-e-textarea__icon rds-e-textarea__icon--right",
                   "aria-hidden": "true"
@@ -255,7 +255,7 @@ const Z = { class: "rds-e-textarea__container" }, ee = { class: "rds-e-textarea_
           E.value ? (s(), f("li", ne, " Min text length is " + u(e(g)), 1)) : i("", !0),
           a("li", null, [
             y(r.$slots, "helper-text", {}, () => [
-              e(D) || e(x) ? (s(), f("span", se, u(e(R)), 1)) : i("", !0)
+              e(z) || e(x) ? (s(), f("span", se, u(e(D)), 1)) : i("", !0)
             ], !0)
           ])
         ], 2)