@agrotools1/at-components 0.5.0 → 0.5.1-2

package/dist/Filter/components/Filter.vue.js

@@ -1,74 +1,72 @@
-import $ from "./Filter.vue2.js";
-import { resolveComponent as m, openBlock as n, createElementBlock as a, createVNode as l, withCtx as s, createElementVNode as t, createTextVNode as i, toDisplayString as d, createCommentVNode as h, Fragment as k, renderList as _, pushScopeId as w, popScopeId as S } from "vue";
+import w from "./Filter.vue2.js";
+import { resolveComponent as m, openBlock as n, createElementBlock as a, createVNode as l, withCtx as s, createElementVNode as t, createTextVNode as d, toDisplayString as i, createCommentVNode as b, Fragment as f, renderList as g, pushScopeId as S, popScopeId as D } from "vue";
 import "./Filter.vue3.js";
-import D from "../../_virtual/_plugin-vue_export-helper.js";
-const C = (e) => (w("data-v-38de30e6"), e = e(), S(), e), T = {
+import T from "../../_virtual/_plugin-vue_export-helper.js";
+const y = (e) => (S("data-v-a64d3c70"), e = e(), D(), e), B = {
   key: 1,
   class: "badge"
-}, B = { class: "filter" }, F = { class: "at-dropdown-header" }, U = { class: "at-dropdown-content" }, N = { class: "item" }, O = {
-  for: "checkAll",
-  class: "checkall-label"
-}, E = /* @__PURE__ */ C(() => /* @__PURE__ */ t("span", { class: "separator" }, null, -1)), L = /* @__PURE__ */ C(() => /* @__PURE__ */ t("span", { class: "separator" }, null, -1)), M = ["for"], P = ["for"], j = { class: "at-dropdown-footer" };
+}, $ = { class: "filter" }, F = { class: "at-dropdown-header" }, U = { class: "at-dropdown-content" }, N = { class: "item" }, O = ["for"], E = /* @__PURE__ */ y(() => /* @__PURE__ */ t("span", { class: "separator" }, null, -1)), L = /* @__PURE__ */ y(() => /* @__PURE__ */ t("span", { class: "separator" }, null, -1)), M = ["for"], P = ["for"], j = { class: "at-dropdown-footer" };
 function q(e, r, G, H, J, K) {
-  var y;
-  const V = m("AtFilterSolidIcon"), A = m("AtCloseSolidIcon"), u = m("AtParagraph"), b = m("AtButton"), f = m("AtCheckbox"), g = m("AtDropDown");
+  var A;
+  const C = m("AtFilterSolidIcon"), h = m("AtCloseSolidIcon"), c = m("AtParagraph"), k = m("AtButton"), I = m("AtCheckbox"), V = m("AtDropDown");
   return n(), a("div", { key: e.keyValue }, [
-    l(g, {
+    l(V, {
+      id: e.id,
       "is-open": e.isOpen,
-      "onUpdate:isOpen": r[3] || (r[3] = (c) => e.isOpen = c),
-      position: (y = e.options) == null ? void 0 : y.position
+      position: (A = e.options) == null ? void 0 : A.position,
+      "onUpdate:isOpen": r[3] || (r[3] = (u) => e.isOpen = u)
     }, {
       trigger: s(() => [
-        l(b, {
+        l(k, {
           id: "dropdown-button",
           variant: e.getButtonColor
         }, {
           default: s(() => {
-            var c;
+            var u;
             return [
               t("section", null, [
-                l(V, {
+                l(C, {
                   size: "16",
                   class: "me-1"
                 }),
-                i(" " + d(((c = e.options) == null ? void 0 : c.buttonText) ?? "Filtros"), 1)
+                d(" " + i(((u = e.options) == null ? void 0 : u.buttonText) ?? "Filtros"), 1)
               ]),
               e.count > 0 ? (n(), a("span", {
                 key: 0,
                 class: "clear-icon",
                 onClick: r[0] || (r[0] = () => e.clear())
               }, [
-                l(A, {
+                l(h, {
                   size: "20",
                   onClick: e.closeDialog
                 }, null, 8, ["onClick"])
-              ])) : h("", !0),
-              e.count > 0 ? (n(), a("span", T, [
-                l(u, { size: "p3" }, {
+              ])) : b("", !0),
+              e.count > 0 ? (n(), a("span", B, [
+                l(c, { size: "p3" }, {
                   default: s(() => [
-                    i(d(e.count), 1)
+                    d(i(e.count), 1)
                   ]),
                   _: 1
                 })
-              ])) : h("", !0)
+              ])) : b("", !0)
             ];
           }),
           _: 1
         }, 8, ["variant"])
       ]),
       default: s(() => {
-        var c;
+        var u;
         return [
-          t("div", B, [
+          t("div", $, [
             t("div", F, [
-              l(u, {
+              l(c, {
                 size: "p1",
                 weight: "bold"
               }, {
                 default: s(() => {
                   var o;
                   return [
-                    i(d((o = e.options) == null ? void 0 : o.title), 1)
+                    d(i((o = e.options) == null ? void 0 : o.title), 1)
                   ];
                 }),
                 _: 1
@@ -78,89 +76,93 @@ function q(e, r, G, H, J, K) {
                 class: "closeIcon",
                 onClick: r[1] || (r[1] = (...o) => e.closeDialog && e.closeDialog(...o))
               }, [
-                l(A, { size: "20" })
+                l(h, { size: "20" })
               ])
             ]),
             t("div", U, [
-              (c = e.options) != null && c.checkAllText ? (n(), a(k, { key: 0 }, [
+              (u = e.options) != null && u.checkAllText ? (n(), a(f, { key: 0 }, [
                 t("div", N, [
-                  l(f, {
-                    id: "checkAll",
+                  l(I, {
+                    id: e.getItemId({ text: "checkAll", value: !1 }),
                     modelValue: e.checkAllModel,
                     "onUpdate:modelValue": r[2] || (r[2] = (o) => e.checkAllModel = o),
+                    "prevent-default": !0,
                     size: "12",
                     labelledby: "checkAll"
-                  }, null, 8, ["modelValue"]),
-                  t("label", O, [
-                    l(u, { size: "p2" }, {
+                  }, null, 8, ["id", "modelValue"]),
+                  t("label", {
+                    for: e.getItemId({ text: "checkAll", value: !1 }),
+                    class: "checkall-label"
+                  }, [
+                    l(c, { size: "p2" }, {
                       default: s(() => {
                         var o;
                         return [
-                          i(d((o = e.options) == null ? void 0 : o.checkAllText), 1)
+                          d(i((o = e.options) == null ? void 0 : o.checkAllText), 1)
                         ];
                       }),
                       _: 1
                     })
-                  ])
+                  ], 8, O)
                 ]),
                 E
-              ], 64)) : h("", !0),
-              (n(!0), a(k, null, _(e.listSeparator, (o, v) => (n(), a("div", {
+              ], 64)) : b("", !0),
+              (n(!0), a(f, null, g(e.listSeparator, (o, v) => (n(), a("div", {
                 key: `${v}`,
                 class: "item-separator"
               }, [
-                l(u, {
+                l(c, {
                   size: "p2",
                   weight: "bold"
                 }, {
                   default: s(() => [
-                    i(d(o.key), 1)
+                    d(i(o.key), 1)
                   ]),
                   _: 2
                 }, 1024),
                 L,
-                (n(!0), a(k, null, _(o.value, (p, z) => (n(), a("div", {
+                (n(!0), a(f, null, g(o.value, (p, z) => (n(), a("div", {
                   key: `${z}`,
                   class: "item"
                 }, [
-                  l(f, {
-                    id: p.text,
+                  l(I, {
+                    id: e.getItemId(p),
                     modelValue: p.value,
-                    "onUpdate:modelValue": (I) => p.value = I,
-                    size: "12",
-                    labelledby: `${p.text}`
+                    "onUpdate:modelValue": (_) => p.value = _,
+                    labelledby: e.getItemId(p),
+                    size: "12"
                   }, null, 8, ["id", "modelValue", "onUpdate:modelValue", "labelledby"]),
                   t("label", {
-                    for: `${p.text}`,
+                    for: e.getItemId(p),
                     class: "item-label"
                   }, [
-                    l(u, { size: "p2" }, {
+                    l(c, { size: "p2" }, {
                       default: s(() => [
-                        i(d(e.getItemText(p)), 1)
+                        d(i(e.getItemText(p)), 1)
                       ]),
                       _: 2
                     }, 1024)
                   ], 8, M)
                 ]))), 128))
               ]))), 128)),
-              (n(!0), a(k, null, _(e.listArray, (o, v) => (n(), a("div", {
+              (n(!0), a(f, null, g(e.listArray, (o, v) => (n(), a("div", {
                 key: `${v}`,
                 class: "item"
               }, [
-                l(f, {
-                  id: o.text,
+                l(I, {
+                  id: e.getItemId(o),
                   modelValue: o.value,
                   "onUpdate:modelValue": (p) => o.value = p,
                   size: "12",
-                  labelledby: `${o.text}`
+                  labelledby: e.getItemId(o)
                 }, null, 8, ["id", "modelValue", "onUpdate:modelValue", "labelledby"]),
                 t("label", {
-                  for: `${o.text}`,
+                  for: e.getItemId(o),
                   class: "item-label"
                 }, [
-                  l(u, { size: "p2" }, {
+                  l(c, { size: "p2" }, {
                     default: s(() => [
-                      i(d(e.getItemText(o)), 1)
+                      d(i(e.getItemText(o)), 1)
                     ]),
                     _: 2
                   }, 1024)
@@ -168,7 +170,7 @@ function q(e, r, G, H, J, K) {
               ]))), 128))
             ]),
             t("div", j, [
-              l(b, {
+              l(k, {
                 variant: "secondary",
                 class: "clear-button",
                 onClick: e.clear
@@ -176,19 +178,19 @@ function q(e, r, G, H, J, K) {
                 default: s(() => {
                   var o;
                   return [
-                    i(d(((o = e.options) == null ? void 0 : o.cancelBtnText) ?? "Limpar"), 1)
+                    d(i(((o = e.options) == null ? void 0 : o.cancelBtnText) ?? "Limpar"), 1)
                   ];
                 }),
                 _: 1
               }, 8, ["onClick"]),
-              l(b, {
+              l(k, {
                 class: "save-button",
                 onClick: e.save
               }, {
                 default: s(() => {
                   var o;
                   return [
-                    i(d(((o = e.options) == null ? void 0 : o.saveBtnText) ?? "Filtrar"), 1)
+                    d(i(((o = e.options) == null ? void 0 : o.saveBtnText) ?? "Filtrar"), 1)
                   ];
                 }),
                 _: 1
@@ -198,10 +200,10 @@ function q(e, r, G, H, J, K) {
         ];
       }),
       _: 1
-    }, 8, ["is-open", "position"])
+    }, 8, ["id", "is-open", "position"])
   ]);
 }
-const Y = /* @__PURE__ */ D($, [["render", q], ["__scopeId", "data-v-38de30e6"]]);
+const Y = /* @__PURE__ */ T(w, [["render", q], ["__scopeId", "data-v-a64d3c70"]]);
 export {
   Y as default
 };

package/dist/Filter/components/Filter.vue2.js

@@ -1,21 +1,21 @@
-import { defineComponent as O, ref as n, computed as P, toRaw as V } from "vue";
+import { defineComponent as P, ref as n, computed as V, toRaw as q } from "vue";
 import { AtCloseSolidIcon as T } from "../../node_modules/.pnpm/agrotools-icons@0.2.6/node_modules/agrotools-icons/dist/AtCloseSolidIcon/index.js";
-import { AtFilterSolidIcon as q } from "../../node_modules/.pnpm/agrotools-icons@0.2.6/node_modules/agrotools-icons/dist/AtFilterSolidIcon/index.js";
-import B from "../../Button/Button.vue.js";
-import E from "../../Checkbox/Checkbox.vue.js";
-import M from "../../Dropdown/Dropdown.core.vue.js";
-import { AtTipograph as R } from "../../Tipograph/index.js";
-const _ = {
+import { AtFilterSolidIcon as B } from "../../node_modules/.pnpm/agrotools-icons@0.2.6/node_modules/agrotools-icons/dist/AtFilterSolidIcon/index.js";
+import E from "../../Button/Button.vue.js";
+import M from "../../Checkbox/Checkbox.vue.js";
+import R from "../../Dropdown/Dropdown.core.vue.js";
+import { AtTipograph as _ } from "../../Tipograph/index.js";
+const $ = {
   AtCloseSolidIcon: T,
-  AtFilterSolidIcon: q
-}, Q = O({
+  AtFilterSolidIcon: B
+}, U = P({
   name: "AtFilter",
   components: {
-    AtDropDown: M,
-    AtParagraph: R.Paragraph,
-    AtButton: B,
-    AtCheckbox: E,
-    ..._
+    AtDropDown: R,
+    AtParagraph: _.Paragraph,
+    AtButton: E,
+    AtCheckbox: M,
+    ...$
   },
   props: {
     dropDownList: {
@@ -25,74 +25,79 @@ const _ = {
     options: {
       type: Object,
       required: !1
+    },
+    id: {
+      type: String,
+      required: !1
     }
   },
   emits: ["update:isOpen", "onSave"],
-  setup(c, { emit: x }) {
+  setup(i, { emit: k, attrs: d }) {
     const C = (e) => {
       if (typeof e.text == "string")
         return e.text;
-    }, i = n(!1), w = () => {
-      i.value = !i.value;
-    }, D = P(() => i.value || u.value > 0 ? "primary" : "secondary"), d = n(!1), p = n([]), h = () => {
-      p.value = c.dropDownList.map(
-        (e) => structuredClone(V(e))
+    }, c = n(!1), w = () => {
+      c.value = !c.value;
+    }, D = V(() => c.value || u.value > 0 ? "primary" : "secondary"), h = n(!1), p = n([]), g = () => {
+      p.value = i.dropDownList.map(
+        (e) => structuredClone(q(e))
       );
     };
-    h();
-    const r = n(), l = n(), A = () => {
-      r.value = [], l.value = [], p.value.some((e) => "key" in e) ? r.value = p.value : l.value = p.value;
+    g();
+    const a = n(), l = n(), A = () => {
+      a.value = [], l.value = [], p.value.some((e) => "key" in e) ? a.value = p.value : l.value = p.value;
     };
     A();
-    const g = (e) => {
+    const x = (e) => {
       var t, o;
-      (t = r.value) == null || t.map(
-        (s) => s.value.map((a) => a.value = e)
-      ), (o = l.value) == null || o.map((s) => s.value = e);
-    }, v = () => i.value = !1, L = (e = !0) => {
-      d.value = !1, g(!1), k(), y(), e && setTimeout(v, 1);
+      (t = a.value) == null || t.map(
+        (r) => r.value.map((s) => s.value = e)
+      ), (o = l.value) == null || o.map((r) => r.value = e);
+    }, v = () => c.value = !1, L = (e = !0) => {
+      h.value = !1, x(!1), I(), y(), e && setTimeout(v, 1);
     }, S = () => {
-      var o, s;
-      const e = (o = r.value) == null ? void 0 : o.reduce(
-        (a, { key: b, value: m }) => {
-          const F = m == null ? void 0 : m.filter((f) => f.value).map((f) => f.text);
-          return a[b] = F, a;
+      var o, r;
+      const e = (o = a.value) == null ? void 0 : o.reduce(
+        (s, { key: F, value: f }) => {
+          const O = f == null ? void 0 : f.filter((m) => m.value).map((m) => m.text);
+          return s[F] = O, s;
         },
         {}
-      ), t = (s = l.value) == null ? void 0 : s.filter((a) => a.value).map((a) => a.text);
+      ), t = (r = l.value) == null ? void 0 : r.filter((s) => s.value).map((s) => s.text);
       return t != null && t.length ? t : e;
     }, y = () => {
       var t, o;
       const e = (t = l.value) != null && t.length ? l.value : (
         // .filter((item) => item.value)
-        r.value
+        a.value
       );
-      k(), v(), x(
+      I(), v(), k(
         "onSave",
-        (o = c.options) != null && o.returnOnlyChecked && (e != null && e.length) ? S() : e
+        (o = i.options) != null && o.returnOnlyChecked && (e != null && e.length) ? S() : e
       );
-    }, u = n(0), k = () => {
+    }, u = n(0), I = () => {
       var e, t;
-      u.value = 0, u.value += ((e = l.value) == null ? void 0 : e.filter((o) => o.value).length) ?? 0, (t = r.value) == null || t.forEach(
+      u.value = 0, u.value += ((e = l.value) == null ? void 0 : e.filter((o) => o.value).length) ?? 0, (t = a.value) == null || t.forEach(
         (o) => o.value.forEach(
-          (s) => s.value ? u.value++ : u
+          (r) => r.value ? u.value++ : u
         )
       );
-    }, I = n(0);
+    }, b = n(0);
     return {
-      props: c,
+      props: i,
       list: p,
-      listSeparator: r,
+      listSeparator: a,
       listArray: l,
-      checkAllModel: d,
-      isOpen: i,
+      checkAllModel: h,
+      isOpen: c,
       getButtonColor: D,
       count: u,
-      keyValue: I,
-      resetList: h,
+      keyValue: b,
+      getItemId: (e) => d.id ? `${d.id}-${e.text}` : e.text,
+      resetList: g,
       setListProps: A,
       toggleDropdown: w,
-      setAllCheckboxValues: g,
+      setAllCheckboxValues: x,
       clear: L,
       getItemText: C,
       closeDialog: v,
@@ -100,8 +105,8 @@ const _ = {
     };
   },
   watch: {
-    checkAllModel(c) {
-      this.setAllCheckboxValues(c);
+    checkAllModel(i) {
+      this.setAllCheckboxValues(i);
     },
     dropDownList() {
       this.resetList(), this.clear(!1), this.setListProps(), this.keyValue++;
@@ -109,5 +114,5 @@ const _ = {
   }
 });
 export {
-  Q as default
+  U as default
 };

package/dist/Input/Input.core.d.ts

@@ -54,6 +54,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     readonly: {
         type: BooleanConstructor;
         default: boolean;
@@ -4686,6 +4690,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     readonly: {
         type: BooleanConstructor;
         default: boolean;
@@ -4742,6 +4750,7 @@ declare const _default: import("vue").DefineComponent<{
     onClearInput?: ((...args: any[]) => any) | undefined;
 }, {
     type: string;
+    required: boolean;
     label: string;
     error: {
         value: boolean;

package/dist/Input/Input.core.vue.js

@@ -1,16 +1,19 @@
-import p from "./Input.core.vue2.js";
-import { resolveComponent as m, openBlock as n, createElementBlock as l, createElementVNode as r, toDisplayString as i, Fragment as I, renderList as v, createCommentVNode as d, mergeProps as C, normalizeClass as k, createBlock as u, resolveDynamicComponent as y, createTextVNode as T } from "vue";
+import m from "./Input.core.vue2.js";
+import { resolveComponent as I, openBlock as n, createElementBlock as l, createElementVNode as r, createTextVNode as u, toDisplayString as i, createCommentVNode as d, Fragment as v, renderList as k, mergeProps as C, normalizeClass as T, createBlock as a, resolveDynamicComponent as y } from "vue";
 import "./Input.core.vue3.js";
 import f from "../_virtual/_plugin-vue_export-helper.js";
-const h = ["data-mode", "disabled"], F = ["for"], O = ["title"], $ = { class: "AT-INPUT_item_slot" }, b = ["onClick"], A = {
+const h = ["data-mode", "disabled"], b = ["for"], $ = {
+  key: 0,
+  class: "AT-INPUT_required"
+}, A = ["title"], F = { class: "AT-INPUT_item_slot" }, N = ["onClick"], O = {
   key: 0,
   class: "AT-INPUT_items_length"
-}, N = ["id", "disabled", "readonly", "type", "placeholder", "name", "value"], g = {
+}, g = ["id", "disabled", "readonly", "type", "placeholder", "name", "value"], P = {
   key: 0,
   class: "AT-INPUT_error-message"
 }, M = ["src"];
-function P(e, s, U, B, E, z) {
-  const a = m("AtCircleXMarkSolidIcon");
+function U(e, s, c, B, E, z) {
+  const p = I("AtCircleXMarkSolidIcon");
   return n(), l("div", null, [
     r("div", {
       ref: "wrapperEl",
@@ -23,21 +26,24 @@ function P(e, s, U, B, E, z) {
       r("label", {
         for: e.id,
         onClick: s[0] || (s[0] = (...o) => e.handleOnFocus && e.handleOnFocus(...o))
-      }, i(e.label), 9, F),
+      }, [
+        u(i(e.label) + " ", 1),
+        e.$props.required ? (n(), l("span", $, "*")) : d("", !0)
+      ], 8, b),
       e.separator ? (n(), l("div", {
         key: 0,
         ref: "containerItemsEl",
         class: "AT-INPUT_items",
         onClick: s[1] || (s[1] = (...o) => e.handleOnFocus && e.handleOnFocus(...o))
       }, [
-        (n(!0), l(I, null, v(e.selectedItemsController.itemsToRender, (o) => (n(), l("span", {
+        (n(!0), l(v, null, k(e.selectedItemsController.itemsToRender, (o) => (n(), l("span", {
           key: o.value,
           ref_for: !0,
           ref: "selectedItemsEl",
           title: o.text,
           class: "AT-INPUT_item"
         }, [
-          r("span", $, i(o.text), 1),
+          r("span", F, i(o.text), 1),
           r("span", {
             class: "AT-INPUT_item_slot_x",
             style: { padding: "1px 5px" },
@@ -45,9 +51,9 @@ function P(e, s, U, B, E, z) {
               var t;
               (t = e.onSelectedItemClick) == null || t.call(e, o == null ? void 0 : o.value);
             }
-          }, "x", 8, b)
-        ], 8, O))), 128)),
-        e.selectedItems.length > e.selectedItemsController.supportedItems ? (n(), l("span", A, "+ " + i(e.selectedItems.length - e.selectedItemsController.supportedItems), 1)) : d("", !0)
+          }, "x", 8, N)
+        ], 8, A))), 128)),
+        e.selectedItems.length > e.selectedItemsController.supportedItems ? (n(), l("span", O, "+ " + i(e.selectedItems.length - e.selectedItemsController.supportedItems), 1)) : d("", !0)
       ], 512)) : (n(), l("input", C({ key: 1 }, e.$attrs, {
         id: e.id,
         ref: "inputEl",
@@ -61,32 +67,32 @@ function P(e, s, U, B, E, z) {
         onInput: s[2] || (s[2] = (...o) => e.onInput && e.onInput(...o)),
         onFocus: s[3] || (s[3] = (...o) => e.handleOnFocus && e.handleOnFocus(...o)),
         onFocusout: s[4] || (s[4] = (...o) => e.handleOnFocusOut && e.handleOnFocusOut(...o))
-      }), null, 16, N)),
+      }), null, 16, g)),
       e.$props.icon ? (n(), l("div", {
         key: 2,
-        class: k(["AT_INPUT_icon_slot", { clickable: e.useClearButton && e.isFocused }]),
+        class: T(["AT_INPUT_icon_slot", { clickable: e.useClearButton && e.isFocused }]),
         onClick: s[5] || (s[5] = (o) => e.showClearButton ? e.clearInput() : null)
       }, [
-        e.showClearButton ? (n(), u(a, {
+        e.showClearButton ? (n(), a(p, {
           key: 0,
           size: "20"
-        })) : (n(), u(y(e.icons[e.$props.icon.name]), {
+        })) : (n(), a(y(e.icons[e.$props.icon.name]), {
           key: 1,
           size: e.$props.icon.size || "20",
           color: e.iconColor
         }, null, 8, ["size", "color"]))
       ], 2)) : d("", !0)
     ], 40, h),
-    e.error.value ? (n(), l("span", g, [
+    e.error.value ? (n(), l("span", P, [
       r("img", {
         src: e.icons.error,
         alt: "error icon"
       }, null, 8, M),
-      T(" " + i(e.error.message), 1)
+      u(" " + i(e.error.message), 1)
     ])) : d("", !0)
   ]);
 }
-const D = /* @__PURE__ */ f(p, [["render", P], ["__scopeId", "data-v-0bd09748"]]);
+const D = /* @__PURE__ */ f(m, [["render", U], ["__scopeId", "data-v-bc1b9b88"]]);
 export {
   D as default
 };

package/dist/Input/Input.core.vue2.js

@@ -37,6 +37,10 @@ const Y = j({
       type: Boolean,
       default: !1
     },
+    required: {
+      type: Boolean,
+      default: !1
+    },
     readonly: {
       type: Boolean,
       default: !1
@@ -100,9 +104,9 @@ const Y = j({
       supportedItems: e.selectedItems.length,
       isCounterActive: !1,
       itemsToRender: e.selectedItems
-    }), F = Math.random().toString(36).substring(2), o = a(!1), M = () => {
+    }), q = Math.random().toString(36).substring(2), o = a(!1), F = () => {
       o.value = !0;
-    }, q = () => {
+    }, M = () => {
       o.value = !1;
     }, g = () => {
       u.value = !0;
@@ -182,7 +186,7 @@ const Y = j({
       wrapperEl: b,
       inputEl: V,
       inputError: A,
-      inputId: e.id ?? F,
+      inputId: e.id ?? q,
       handleOnFocus: g,
       handleOnFocusOut: m,
       icons: {
@@ -196,8 +200,8 @@ const Y = j({
       onInput: L,
       iconColor: x,
       isFocused: u,
-      handleMouseOver: M,
-      handleMouseLeave: q,
+      handleMouseOver: F,
+      handleMouseLeave: M,
       isHovered: o,
       inputComputedValue: W,
       currentMode: R,

package/dist/Input/index.d.ts

@@ -35,6 +35,10 @@ export declare const AtInput: {
             type: BooleanConstructor;
             default: boolean;
         };
+        required: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         readonly: {
             type: BooleanConstructor;
             default: boolean;
@@ -4673,6 +4677,10 @@ export declare const AtInput: {
             type: BooleanConstructor;
             default: boolean;
         };
+        required: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         readonly: {
             type: BooleanConstructor;
             default: boolean;
@@ -4735,6 +4743,7 @@ export declare const AtInput: {
         onClearInput?: ((...args: any[]) => any) | undefined;
     }, {
         type: string;
+        required: boolean;
         label: string;
         error: {
             value: boolean;