@alexochihua/exos-library-components 2.2.0 → 2.2.2

package/dist/exos-library-components.common.js

@@ -149,6 +149,13 @@ module.exports = {}
 
 /***/ }),
 
+/***/ 7397:
+/***/ (function(module) {
+
+module.exports = {}
+
+/***/ }),
+
 /***/ 5971:
 /***/ (function(module) {
 
@@ -3015,6 +3022,270 @@ const useSizeProps = {
 function sizeValue(props, sizes = useSizeDefaults) {
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => props.size !== void 0 ? props.size in sizes ? `${sizes[props.size]}px` : props.size : null);
 }
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ui/components/radio/ERadio.vue?vue&type=script&setup=true&lang=js
+
+const ERadiovue_type_script_setup_true_lang_js_hoisted_1 = ["id", "value", "name", "disabled", "checked"];
+const ERadiovue_type_script_setup_true_lang_js_hoisted_2 = ["for"];
+
+
+/* harmony default export */ var ERadiovue_type_script_setup_true_lang_js = ({
+  __name: 'ERadio',
+  props: {
+    /**
+     * Variable para manejar la lectura del valor
+     */
+    modelValue: {
+      required: true,
+      default: null
+    },
+    /**
+     * Se utiliza para agrupar varios radios juntos por su name.
+     *Ej:<br> name="radio_grupo1"
+     */
+    name: {
+      type: String,
+      default: "radioGrupo1"
+    },
+    /**
+     * Se utiliza para setear el valor del componente para cuando se realiza check en el.
+     * Ej:<br> val="opcion 1"
+     */
+    val: {
+      type: String,
+      default: null
+    },
+    /**
+     * Permite dar un tamaño al componente radio.
+     * @values xs, sm, md, lg, xl, xxl o algun valor especifico como exos-w-10 exos-h-10, exos-w-20 exos-h-20,etc
+     */
+    size: {
+      type: String,
+      default: "xs"
+    },
+    /**
+     * Label asociado al radio
+     */
+    label: {
+      type: String,
+      default: null
+    },
+    /**
+     * Bandera para posicionar el label a la izquiera del checkbox
+     */
+    leftLabel: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Setea el grosor y color del borde del radio, y se puede agregar para los modos light y dark y estados como hover.<br>
+     *Ej:<br> borderColor="border-gray-500 dark:border-whit hover:border-green-300"
+     */
+    borderStyle: {
+      type: String,
+      default: null
+    },
+    /**
+     * Setea el grosor y color del anillo del radio para el estado checked, y se puede agregar para los modos light y dark.<br>
+     *Ej:<br> borderColor="border-gray-500 dark:border-whit hover:border-green-300"
+     */
+    ringStyle: {
+      type: String,
+      default: null
+    },
+    /**
+     * Setea el color del bg del radio, así como el color del borde y anillo y se puede agregar para los modos light y dark y estados como checked, hover.<br>
+     * Ej:<br>color="bg-gray-500 dark:bg-whit hover:bg-green-300"
+     */
+    radioColor: {
+      type: String,
+      default: null
+    },
+    /**
+     * Bandera para indicar que el radio se manejará a través de iconos.
+     */
+    icon: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Indica si el icono debe estar relleno.
+     * @values true, false
+     */
+    iconFill: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Permite al usuario definir el icono que se mostrara al hacer check en lugar de la caja default
+     * @values Ver docs de EIcon, para saber los iconos que se pueden usar
+     */
+    checkedIcon: {
+      type: String,
+      default: "task_alt"
+    },
+    /**
+     * Permite al usuario definir el icono que se mostrara en lugar de la caja default cuando esta unchecked
+     * @values Ver docs de EIcon, para saber los iconos que se pueden usar
+     */
+    uncheckedIcon: {
+      type: String,
+      default: "radio_button_unchecked"
+    },
+    /**
+     * Setea el color del icono cuando el componente se encuentra en estado checked, se puede agregar para los modos light y dark y estados como hover.<br>
+     * Ej:<br>iconColor="text-gray-500 dark:text-whit hover:text-green-300"
+     */
+    iconColorCheck: {
+      type: String,
+      default: null
+    },
+    /**
+     * Setea el color del icono cuando el componente se encuentra en estado unchecked, se puede agregar para los modos light y dark y estados como hover.<br>
+     * Ej:<br>iconColor="text-gray-500 dark:text-whit hover:text-green-300"
+     */
+    iconColorUncheck: {
+      type: String,
+      default: null
+    },
+    /**
+     * Bandera para indicar que el checkbox debe estar deshabilitado
+     */
+    disable: Boolean,
+    /**
+     * Setea el estilo del radio cuando se encuentra en estado deshabilitado, y se puede agregar para los modos disabled y dark.<br>
+     *Ej:<br> disableStyle="disabled:exos-opacity-40 dark:disabled:exos-bg-gray-500"
+     */
+    disableStyle: {
+      type: String,
+      default: null
+    }
+  },
+  emits: [
+  /**
+   * Se emite al cambiar el estado del radio, solo funciona cuando la prop "disable" esta en false
+   * @property {mixed} estado valor asignado a los estados del radio
+   */
+  "update:modelValue"],
+  setup(__props, {
+    emit: __emit
+  }) {
+    const props = __props;
+    const sizeValueComputed = sizeValue(props);
+    const sizeInnerComputed = use_size(props);
+
+    /**
+     * Indica el tamaño del ícono.
+     */
+    const iconStyle = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => ({
+      ...sizeInnerComputed.value
+    }));
+
+    /**
+     * Indica si el componente fue chequeado o no.
+     */
+    const isChecked = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => {
+      return props.modelValue === props.val;
+    });
+    const emit = __emit;
+    const onChange = event => {
+      if (!props.disable) {
+        if (props.icon) {
+          emit("update:modelValue", props.val);
+        } else {
+          emit("update:modelValue", event.target.value);
+        }
+      }
+    };
+
+    /**
+     * Asigna las clases para el contenedor principal.
+     */
+    const containerClass = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => {
+      return `e-radio__mainContainer` + (props.leftLabel === true ? " exos-flex-row-reverse" : "");
+    });
+
+    /**
+     * Asigna las clases para el elemento input de tipo radio.
+     */
+    const radioClass = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => {
+      const checkedColor = props.radioColor + " e-radio__color-checked e-radio__color-unchecked";
+      const border = props.borderStyle + " e-radio__border e-radio__borderColor-checked e-radio__borderColor-unchecked";
+      const ring = props.ringStyle + " e-radio__ring-checked e-radio__ringColor-checked";
+      const disable = props.disableStyle + " e-radio__mainClass-disabled";
+      return ` e-radio__mainClass ${disable} ${checkedColor} ${border} ${ring}`;
+    });
+
+    /**
+     * Asigna las clases para el label.
+     */
+    const label = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => {
+      return "exos-px-2";
+    });
+
+    /**
+     * Asigna las clases el componente EInput en caso de utilizar el componente ERadio como ícono.
+     */
+    const iconInfo = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => {
+      return {
+        class: `${props.disable ? "exos-cursor-not-allowed" : "exos-cursor-pointer"}`,
+        size: sizeValueComputed,
+        fill: props.iconFill,
+        color: isChecked.value ? props.iconColorCheck + " e-radio__iconColor-checked" : props.iconColorUncheck + " e-radio__iconColor-unchecked",
+        name: isChecked.value ? props.checkedIcon : props.uncheckedIcon
+      };
+    });
+    return (_ctx, _cache) => {
+      const _component_EIcon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("EIcon");
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
+        class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(containerClass.value)
+      }, [__props.icon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_EIcon, {
+        key: 0,
+        id: __props.val,
+        style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)(iconStyle.value),
+        fill: iconInfo.value.fill,
+        color: iconInfo.value.color,
+        class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(iconInfo.value.class),
+        name: iconInfo.value.name,
+        onClick: onChange
+      }, null, 8, ["id", "style", "fill", "color", "class", "name"])) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("input", {
+        key: 1,
+        type: "radio",
+        id: __props.val,
+        value: __props.val,
+        name: __props.name,
+        disabled: __props.disable,
+        checked: isChecked.value,
+        class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(radioClass.value),
+        style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)({
+          width: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.unref)(sizeValueComputed),
+          height: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.unref)(sizeValueComputed)
+        }),
+        onChange: onChange
+      }, null, 46, ERadiovue_type_script_setup_true_lang_js_hoisted_1)), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("label", {
+        for: __props.val,
+        class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(label.value)
+      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(props.label), 11, ERadiovue_type_script_setup_true_lang_js_hoisted_2)], 2);
+    };
+  }
+});
+;// CONCATENATED MODULE: ./src/ui/components/radio/ERadio.vue?vue&type=script&setup=true&lang=js
+ 
+// EXTERNAL MODULE: ./node_modules/vue-cli-plugin-styleguidist/empty-object-loader.js!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ui/components/radio/ERadio.vue?vue&type=custom&index=0&blockType=docs&lang=md
+var ERadiovue_type_custom_index_0_blockType_docs_lang_md = __webpack_require__(7397);
+var ERadiovue_type_custom_index_0_blockType_docs_lang_md_default = /*#__PURE__*/__webpack_require__.n(ERadiovue_type_custom_index_0_blockType_docs_lang_md);
+;// CONCATENATED MODULE: ./src/ui/components/radio/ERadio.vue?vue&type=custom&index=0&blockType=docs&lang=md
+ 
+;// CONCATENATED MODULE: ./src/ui/components/radio/ERadio.vue
+
+
+/* custom blocks */
+;
+if (typeof (ERadiovue_type_custom_index_0_blockType_docs_lang_md_default()) === 'function') ERadiovue_type_custom_index_0_blockType_docs_lang_md_default()(ERadiovue_type_script_setup_true_lang_js)
+
+
+const ERadio_exports_ = ERadiovue_type_script_setup_true_lang_js;
+
+/* harmony default export */ var ERadio = (ERadio_exports_);
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ui/components/checkbox/ECheckbox.vue?vue&type=script&setup=true&lang=js
 
 const ECheckboxvue_type_script_setup_true_lang_js_hoisted_1 = ["onClick"];
@@ -4978,66 +5249,70 @@ function EModalvue_type_template_id_cfaa37a0_render(_ctx, _cache, $props, $setup
 const EModal_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(EModalvue_type_script_lang_js, [['render',EModalvue_type_template_id_cfaa37a0_render]])
 
 /* harmony default export */ var EModal = (EModal_exports_);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ui/components/collapse/ECollapse.vue?vue&type=template&id=530df53a
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ui/components/collapse/ECollapse.vue?vue&type=template&id=1bf449de
 
-const ECollapsevue_type_template_id_530df53a_hoisted_1 = {
+const ECollapsevue_type_template_id_1bf449de_hoisted_1 = {
   class: "exos-flex exos-flex-col exos-w-full exos-h-full exos-relative"
 };
-const ECollapsevue_type_template_id_530df53a_hoisted_2 = {
+const ECollapsevue_type_template_id_1bf449de_hoisted_2 = {
   class: "exos-flex exos-justify-start exos-items-center exos-space-x-3 exos-w-full exos-h-full"
 };
-const ECollapsevue_type_template_id_530df53a_hoisted_3 = {
+const ECollapsevue_type_template_id_1bf449de_hoisted_3 = {
   key: 0
 };
-const ECollapsevue_type_template_id_530df53a_hoisted_4 = {
+const ECollapsevue_type_template_id_1bf449de_hoisted_4 = {
   key: 1,
-  xmlns: "http://www.w3.org/2000/svg",
   width: "25.56",
   height: "25",
-  viewBox: "0 0 25.56 25"
+  viewBox: "0 0 25.56 25",
+  class: "exos-fill-secondary",
+  xmlns: "http://www.w3.org/2000/svg"
 };
-const ECollapsevue_type_template_id_530df53a_hoisted_5 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", {
+const ECollapsevue_type_template_id_1bf449de_hoisted_5 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", {
   id: "filter_alt_FILL0_wght400_GRAD0_opsz48",
   d: "M52.769-192.5a1.512,1.512,0,0,1-1.113-.449,1.512,1.512,0,0,1-.449-1.113v-9.375l-9.336-11.914a1.182,1.182,0,0,1-.156-1.406,1.284,1.284,0,0,1,1.211-.742H65.738a1.284,1.284,0,0,1,1.211.742,1.182,1.182,0,0,1-.156,1.406l-9.336,11.914v9.375a1.512,1.512,0,0,1-.449,1.113,1.512,1.512,0,0,1-1.113.449Zm1.563-10.781,9.375-11.875H44.957ZM54.332-203.281Z",
-  transform: "translate(-41.552 217.5)",
-  fill: "#3275e0"
+  transform: "translate(-41.552 217.5)"
 }, null, -1);
-const ECollapsevue_type_template_id_530df53a_hoisted_6 = [ECollapsevue_type_template_id_530df53a_hoisted_5];
-const ECollapsevue_type_template_id_530df53a_hoisted_7 = {
+const ECollapsevue_type_template_id_1bf449de_hoisted_6 = [ECollapsevue_type_template_id_1bf449de_hoisted_5];
+const ECollapsevue_type_template_id_1bf449de_hoisted_7 = {
   class: "exos-flex exos-flex-col exos-space-y-0"
 };
-const ECollapsevue_type_template_id_530df53a_hoisted_8 = {
+const ECollapsevue_type_template_id_1bf449de_hoisted_8 = {
+  key: 0,
+  class: "exos-w-full"
+};
+const ECollapsevue_type_template_id_1bf449de_hoisted_9 = {
   key: 1,
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "23.746",
   height: "14",
-  viewBox: "0 0 23.746 14"
+  width: "23.746",
+  viewBox: "0 0 23.746 14",
+  class: "exos-fill-secondary",
+  xmlns: "http://www.w3.org/2000/svg"
 };
-const ECollapsevue_type_template_id_530df53a_hoisted_9 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", {
+const ECollapsevue_type_template_id_1bf449de_hoisted_10 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", {
   id: "expand_less_FILL0_wght400_GRAD0_opsz48",
   d: "M47.074-117.611l-2.127,2.127L56.82-103.611l11.873-11.823-2.127-2.127-9.746,9.746Z",
-  transform: "translate(-44.947 117.611)",
-  fill: "#3275e0"
+  transform: "translate(-44.947 117.611)"
 }, null, -1);
-const ECollapsevue_type_template_id_530df53a_hoisted_10 = [ECollapsevue_type_template_id_530df53a_hoisted_9];
-function ECollapsevue_type_template_id_530df53a_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", ECollapsevue_type_template_id_530df53a_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+const ECollapsevue_type_template_id_1bf449de_hoisted_11 = [ECollapsevue_type_template_id_1bf449de_hoisted_10];
+function ECollapsevue_type_template_id_1bf449de_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", ECollapsevue_type_template_id_1bf449de_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
     onClick: _cache[0] || (_cache[0] = (...args) => $options.toggleCollapse && $options.toggleCollapse(...args)),
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.mainClass),
     ref: "collapse"
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ECollapsevue_type_template_id_530df53a_hoisted_2, [$props.iconLeft ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", ECollapsevue_type_template_id_530df53a_hoisted_3, [_ctx.$slots.iconLeft ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "iconLeft", {
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ECollapsevue_type_template_id_1bf449de_hoisted_2, [$props.iconLeft ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", ECollapsevue_type_template_id_1bf449de_hoisted_3, [_ctx.$slots.iconLeft ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "iconLeft", {
     key: 0
-  }) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", ECollapsevue_type_template_id_530df53a_hoisted_4, ECollapsevue_type_template_id_530df53a_hoisted_6))])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ECollapsevue_type_template_id_530df53a_hoisted_7, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("p", {
+  }) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", ECollapsevue_type_template_id_1bf449de_hoisted_4, ECollapsevue_type_template_id_1bf449de_hoisted_6))])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ECollapsevue_type_template_id_1bf449de_hoisted_7, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("p", {
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.textClass)
   }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.text), 3), _ctx.$slots.description ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "description", {
     key: 0
-  }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)])]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+  }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)])]), _ctx.$slots.rightSection ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", ECollapsevue_type_template_id_1bf449de_hoisted_8, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "rightSection")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(["exos-flex exos-items-center exos-justify-center", {
       'exos-rotate-180': $data.isCollapseOpen
     }])
   }, [_ctx.$slots.arrow ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "arrow", {
     key: 0
-  }) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", ECollapsevue_type_template_id_530df53a_hoisted_8, ECollapsevue_type_template_id_530df53a_hoisted_10))], 2)], 2), $data.isCollapseOpen ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
+  }) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", ECollapsevue_type_template_id_1bf449de_hoisted_9, ECollapsevue_type_template_id_1bf449de_hoisted_11))], 2)], 2), $data.isCollapseOpen ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     key: 0,
     ref: "contentCollapse",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.filter),
@@ -5046,7 +5321,7 @@ function ECollapsevue_type_template_id_530df53a_render(_ctx, _cache, $props, $se
     onClick: _cache[1] || (_cache[1] = (...args) => $options.toggleCollapse && $options.toggleCollapse(...args))
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "btn-collapse")])], 6)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
 }
-;// CONCATENATED MODULE: ./src/ui/components/collapse/ECollapse.vue?vue&type=template&id=530df53a
+;// CONCATENATED MODULE: ./src/ui/components/collapse/ECollapse.vue?vue&type=template&id=1bf449de
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ui/components/collapse/ECollapse.vue?vue&type=script&lang=js
 /* harmony default export */ var ECollapsevue_type_script_lang_js = ({
@@ -5402,7 +5677,7 @@ if (typeof (ECollapsevue_type_custom_index_0_blockType_docs_lang_md_default()) =
 
 
 ;
-const ECollapse_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(ECollapsevue_type_script_lang_js, [['render',ECollapsevue_type_template_id_530df53a_render]])
+const ECollapse_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(ECollapsevue_type_script_lang_js, [['render',ECollapsevue_type_template_id_1bf449de_render]])
 
 /* harmony default export */ var ECollapse = (ECollapse_exports_);
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ui/components/switch/ESwitch.vue?vue&type=template&id=4a17c364
@@ -24652,31 +24927,32 @@ if (typeof (EMenuCalendarvue_type_custom_index_0_blockType_docs_lang_md_default(
 const EMenuCalendar_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(EMenuCalendarvue_type_script_lang_js, [['render',EMenuCalendarvue_type_template_id_0c5bd428_scoped_true_render],['__scopeId',"data-v-0c5bd428"]])
 
 /* harmony default export */ var EMenuCalendar = (EMenuCalendar_exports_);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ui/components/select/ESelect.vue?vue&type=template&id=520bc088
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ui/components/select/ESelect.vue?vue&type=template&id=1fa1f6ec
 
-const ESelectvue_type_template_id_520bc088_hoisted_1 = {
+const ESelectvue_type_template_id_1fa1f6ec_hoisted_1 = {
   ref: "mainSelectComponent",
   class: "exos-flex exos-flex-col"
 };
-const ESelectvue_type_template_id_520bc088_hoisted_2 = {
+const ESelectvue_type_template_id_1fa1f6ec_hoisted_2 = {
   class: "exos-relative"
 };
-const ESelectvue_type_template_id_520bc088_hoisted_3 = {
-  key: 0
+const ESelectvue_type_template_id_1fa1f6ec_hoisted_3 = {
+  key: 0,
+  class: "exos-relative"
 };
-const ESelectvue_type_template_id_520bc088_hoisted_4 = ["disabled", "id", "value"];
-const ESelectvue_type_template_id_520bc088_hoisted_5 = ["for"];
-const ESelectvue_type_template_id_520bc088_hoisted_6 = {
+const ESelectvue_type_template_id_1fa1f6ec_hoisted_4 = ["disabled", "id", "value"];
+const ESelectvue_type_template_id_1fa1f6ec_hoisted_5 = ["for"];
+const ESelectvue_type_template_id_1fa1f6ec_hoisted_6 = {
   key: 0
 };
-const ESelectvue_type_template_id_520bc088_hoisted_7 = ["disabled", "id"];
-const ESelectvue_type_template_id_520bc088_hoisted_8 = {
+const ESelectvue_type_template_id_1fa1f6ec_hoisted_7 = ["disabled", "id"];
+const ESelectvue_type_template_id_1fa1f6ec_hoisted_8 = {
   class: "exos-flex exos-items-center exos-w-full"
 };
-const ESelectvue_type_template_id_520bc088_hoisted_9 = {
+const ESelectvue_type_template_id_1fa1f6ec_hoisted_9 = {
   key: 0
 };
-const ESelectvue_type_template_id_520bc088_hoisted_10 = {
+const ESelectvue_type_template_id_1fa1f6ec_hoisted_10 = {
   key: 1,
   class: "exos-w-4 exos-h-4 exos-text-secondary exos-opacity-60 hover:exos-opacity-100 dark:exos-text-white",
   "aria-hidden": "true",
@@ -24684,15 +24960,15 @@ const ESelectvue_type_template_id_520bc088_hoisted_10 = {
   fill: "none",
   viewBox: "0 0 15 15"
 };
-const ESelectvue_type_template_id_520bc088_hoisted_11 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", {
+const ESelectvue_type_template_id_1fa1f6ec_hoisted_11 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", {
   stroke: "currentColor",
   "stroke-linecap": "round",
   "stroke-linejoin": "round",
   "stroke-width": "2",
   d: "m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
 }, null, -1);
-const ESelectvue_type_template_id_520bc088_hoisted_12 = [ESelectvue_type_template_id_520bc088_hoisted_11];
-const ESelectvue_type_template_id_520bc088_hoisted_13 = {
+const ESelectvue_type_template_id_1fa1f6ec_hoisted_12 = [ESelectvue_type_template_id_1fa1f6ec_hoisted_11];
+const ESelectvue_type_template_id_1fa1f6ec_hoisted_13 = {
   key: 1,
   "aria-hidden": "true",
   class: "exos-w-6 exos-h-6 exos-text-gray-200 exos-animate-spin dark:exos-text-gray-600 exos-fill-secondary",
@@ -24700,46 +24976,50 @@ const ESelectvue_type_template_id_520bc088_hoisted_13 = {
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
-const ESelectvue_type_template_id_520bc088_hoisted_14 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", {
+const ESelectvue_type_template_id_1fa1f6ec_hoisted_14 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", {
   d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z",
   fill: "currentColor"
 }, null, -1);
-const ESelectvue_type_template_id_520bc088_hoisted_15 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", {
+const ESelectvue_type_template_id_1fa1f6ec_hoisted_15 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", {
   d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z",
   fill: "currentFill"
 }, null, -1);
-const ESelectvue_type_template_id_520bc088_hoisted_16 = [ESelectvue_type_template_id_520bc088_hoisted_14, ESelectvue_type_template_id_520bc088_hoisted_15];
-const ESelectvue_type_template_id_520bc088_hoisted_17 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", {
+const ESelectvue_type_template_id_1fa1f6ec_hoisted_16 = [ESelectvue_type_template_id_1fa1f6ec_hoisted_14, ESelectvue_type_template_id_1fa1f6ec_hoisted_15];
+const ESelectvue_type_template_id_1fa1f6ec_hoisted_17 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", {
   stroke: "currentColor",
   "stroke-linecap": "round",
   "stroke-linejoin": "round",
   "stroke-width": "1.9",
   d: "m1 1 5.326 5.7a.909.909 0 0 0 1.348 0L13 1"
 }, null, -1);
-const ESelectvue_type_template_id_520bc088_hoisted_18 = [ESelectvue_type_template_id_520bc088_hoisted_17];
-const ESelectvue_type_template_id_520bc088_hoisted_19 = ["onClick"];
-const ESelectvue_type_template_id_520bc088_hoisted_20 = {
+const ESelectvue_type_template_id_1fa1f6ec_hoisted_18 = [ESelectvue_type_template_id_1fa1f6ec_hoisted_17];
+const ESelectvue_type_template_id_1fa1f6ec_hoisted_19 = ["onClick"];
+const ESelectvue_type_template_id_1fa1f6ec_hoisted_20 = {
   key: 0,
   class: "e-select--error-message exos-animate-slide-down"
 };
-function ESelectvue_type_template_id_520bc088_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", ESelectvue_type_template_id_520bc088_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ESelectvue_type_template_id_520bc088_hoisted_2, [$props.suggestion ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", ESelectvue_type_template_id_520bc088_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("input", {
+function ESelectvue_type_template_id_1fa1f6ec_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", ESelectvue_type_template_id_1fa1f6ec_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ESelectvue_type_template_id_1fa1f6ec_hoisted_2, [$props.suggestion ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", ESelectvue_type_template_id_1fa1f6ec_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("input", {
     placeholder: " ",
     ref: "refSelect",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.mainClass),
     disabled: $props.disabled,
     id: 'input-' + $props.label,
-    value: $options.labelSelected,
+    value: $data.tempValueInput,
+    style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)($options.inputPaddingSelectedClass),
     onBlur: _cache[0] || (_cache[0] = (...args) => $options.onInputBlur && $options.onInputBlur(...args)),
     onFocus: _cache[1] || (_cache[1] = (...args) => $options.onInputFocus && $options.onInputFocus(...args)),
     onInput: _cache[2] || (_cache[2] = (...args) => $options.fetchSuggestions && $options.fetchSuggestions(...args)),
     onClick: _cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)((...args) => $options.toggleDropdown && $options.toggleDropdown(...args), ["prevent"]))
-  }, null, 42, ESelectvue_type_template_id_520bc088_hoisted_4), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("label", {
+  }, null, 46, ESelectvue_type_template_id_1fa1f6ec_hoisted_4), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+    ref: "inputLabelSelected",
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.inputLabelSelectedClass)
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($options.labelSelected), 3), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("label", {
     for: 'input-' + $props.label,
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.labelClass)
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.classBoxLabel)
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("p", null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.label), 1), $props.required ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", ESelectvue_type_template_id_520bc088_hoisted_6, "*")) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2)], 10, ESelectvue_type_template_id_520bc088_hoisted_5)])) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("button", {
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("p", null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.label), 1), $props.required ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", ESelectvue_type_template_id_1fa1f6ec_hoisted_6, "*")) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2)], 10, ESelectvue_type_template_id_1fa1f6ec_hoisted_5)])) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("button", {
     key: 1,
     ref: "refSelect",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.mainClass),
@@ -24748,24 +25028,25 @@ function ESelectvue_type_template_id_520bc088_render(_ctx, _cache, $props, $setu
     onBlur: _cache[4] || (_cache[4] = (...args) => $options.onInputBlur && $options.onInputBlur(...args)),
     onFocus: _cache[5] || (_cache[5] = (...args) => $options.onInputFocus && $options.onInputFocus(...args)),
     onClick: _cache[6] || (_cache[6] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)((...args) => $options.toggleDropdown && $options.toggleDropdown(...args), ["prevent"]))
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ESelectvue_type_template_id_520bc088_hoisted_8, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ESelectvue_type_template_id_1fa1f6ec_hoisted_8, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['exos-flex exos-flex-col', _ctx.$slots.icon ? [$props.iconRight ? '' : 'exos-pl-5'] : ''])
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("label", {
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)([$options.labelSelected ? $options.labelClass : $options.textSizeClass, $props.disabled ? 'exos-cursor-not-allowed' : 'exos-cursor-pointer'])
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.classBoxLabel)
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("p", null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.label), 1), $props.required ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", ESelectvue_type_template_id_520bc088_hoisted_9, "*")) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2)], 2), !$props.suggestion ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("p", null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.label), 1), $props.required ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", ESelectvue_type_template_id_1fa1f6ec_hoisted_9, "*")) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2)], 2), !$props.suggestion ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     key: 0,
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.labelSelectedClass)
-  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($options.getFormattedOptionSelected($options.labelSelected)), 3)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2)])], 42, ESelectvue_type_template_id_520bc088_hoisted_7)), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($options.getFormattedOptionSelected($options.labelSelected)), 3)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2)])], 42, ESelectvue_type_template_id_1fa1f6ec_hoisted_7)), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+    ref: "eSelectIconSection",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['e-select-icon', $props.disabled ? 'exos-cursor-not-allowed' : 'exos-cursor-pointer', _ctx.$slots.icon ? 'exos-right-11' :  true ? $props.iconRight ? 'exos-right-11' : 'exos-right-3' : 0])
-  }, [this.modelValue && $props.showClean && !$props.disabled || this.messageRule && $props.showClean && !$props.disabled ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
+  }, [$options.showCleanBtn ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     key: 0,
     onClick: _cache[7] || (_cache[7] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)((...args) => $options.clean && $options.clean(...args), ["stop", "prevent"])),
     class: "exos-animate-slide-down"
   }, [_ctx.$slots.iconClose ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "iconClose", {
     key: 0
-  }) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", ESelectvue_type_template_id_520bc088_hoisted_10, ESelectvue_type_template_id_520bc088_hoisted_12))])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $props.loading ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", ESelectvue_type_template_id_520bc088_hoisted_13, ESelectvue_type_template_id_520bc088_hoisted_16)) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
+  }) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", ESelectvue_type_template_id_1fa1f6ec_hoisted_10, ESelectvue_type_template_id_1fa1f6ec_hoisted_12))])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $props.loading ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", ESelectvue_type_template_id_1fa1f6ec_hoisted_13, ESelectvue_type_template_id_1fa1f6ec_hoisted_16)) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     key: 2,
     onClick: _cache[8] || (_cache[8] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)((...args) => $options.toggleDropdown && $options.toggleDropdown(...args), ["prevent"])),
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)({
@@ -24780,7 +25061,7 @@ function ESelectvue_type_template_id_520bc088_render(_ctx, _cache, $props, $setu
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 14 8"
-  }, ESelectvue_type_template_id_520bc088_hoisted_18, 2))], 2))], 2), $setup.isDropdownOpen ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
+  }, ESelectvue_type_template_id_1fa1f6ec_hoisted_18, 2))], 2))], 2), $setup.isDropdownOpen ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     key: 2,
     ref: "contentSelect",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.containerOptionsClass),
@@ -24790,15 +25071,74 @@ function ESelectvue_type_template_id_520bc088_render(_ctx, _cache, $props, $setu
       onClick: $event => $options.selectOption(option),
       key: option.value,
       class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)([$options.optionsClass, $options.labelSelectedColor(option.value)])
-    }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($options.getFormattedOption(option)), 11, ESelectvue_type_template_id_520bc088_hoisted_19);
-  }), 128))], 6)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]), !!$data.messageRule ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", ESelectvue_type_template_id_520bc088_hoisted_20, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($data.messageRule), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 512);
+    }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($options.getFormattedOption(option)), 11, ESelectvue_type_template_id_1fa1f6ec_hoisted_19);
+  }), 128))], 6)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]), !!$data.messageRule ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", ESelectvue_type_template_id_1fa1f6ec_hoisted_20, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($data.messageRule), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 512);
 }
-;// CONCATENATED MODULE: ./src/ui/components/select/ESelect.vue?vue&type=template&id=520bc088
+;// CONCATENATED MODULE: ./src/ui/components/select/ESelect.vue?vue&type=template&id=1fa1f6ec
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ui/components/select/ESelect.vue?vue&type=script&lang=js
 
 
 
+const ESelectvue_type_script_lang_js_patterns = {
+  email: /^(?=[a-zA-Z0-9@._%+-]{6,254}$)[a-zA-Z0-9._%+-]{1,250}@(?:[a-zA-Z0-9-]{1,63}\.){1,8}[a-zA-Z]{2,63}$/,
+  // Email
+  decimal: {
+    regex: /[^0-9.]/g,
+    //Decimal
+    msg: "El valor ingresado debe ser en formato decimal"
+  },
+  integer: {
+    regex: /[^0-9]/g,
+    // Números enteros
+    msg: "El valor ingresado debe ser en formato entero"
+  },
+  alfa: {
+    regex: /[^a-zA-ZáÁéÉíÍóÓúÚüÜ\s]/g,
+    // Alfabético con espacio y acentos
+    msg: "El valor ingresado debe ser alfabético"
+  },
+  alfaNum: {
+    regex: /[^a-zA-Z0-9]/g,
+    // Alfanumérico
+    msg: "El valor ingresado debe ser alfanumérico"
+  },
+  alfaNumChar: {
+    regex: /[^a-zA-Z0-9áéíóúÁÉÍÓÚüÜ!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?`~ ]/g,
+    // Alfanumérico con caracteres especiales,
+    msg: "El valor ingresado debe ser alfanumérico con caracteres"
+  },
+  alfaNumSpace: {
+    regex: /[^a-zA-Z0-9\s]/g,
+    // Letras, números y espacios
+    msg: "El valor ingresado debe contener solo letras, números y espacios"
+  },
+  nomenclaturaDoc: {
+    regex: /[^a-zA-Z0-9%_\-.,ñÑ\s]/g,
+    // Alfanumérico para nomenclatura de documentos
+    msg: "La nomenclatura contiene caracteres inválidos"
+  },
+  pathDocs: {
+    regex: /[^a-zA-Z0-9\\/,_\-.:]/g,
+    //Ruta de archivos
+    msg: "La ruta contiene caracteres inválidos"
+  },
+  money: {
+    regex: /[^0-9.,$]/g,
+    // $15,450.00 Números, punto, coma y signo de peso
+    msg: "El valor ingresado debe ser en formato de cantidad monetaria"
+  },
+  time: {
+    regex: /[^0-9:]/g,
+    //Horas HH:MM:SS
+    msg: "El campo debe contener el formato HH:MM:SS"
+  },
+  timens: {
+    regex: /[^0-9:]/g,
+    //Horas HH:MM
+    msg: "El campo debe contener el formato HH:MM"
+  }
+};
 /* harmony default export */ var ESelectvue_type_script_lang_js = ({
   name: "ESelect",
   props: {
@@ -24810,6 +25150,25 @@ function ESelectvue_type_template_id_520bc088_render(_ctx, _cache, $props, $setu
       default: null,
       description: "Valor que se le asignará al componente ESelect."
     },
+    /**
+     * Modificador del valor del componente input. Ayuda para dar tratamiento a las máscaras.
+     */
+    modelModifiers: {
+      default: null,
+      description: "Modificadores modelValue."
+    },
+    /**
+     * Regex para solo admitir ciertos caracteres, se maneja un objeto con 2 atributos
+     * {
+     *  regex: /[^a-zA-Z0-9]/g //Ejemplo para solo manejar alfanumericos, si no define un regex se apliara como alfabetico
+     *  msg: Mensaje a mostrar, en caso de no definir un msg se mostrara el texto "El caràcter NO cumple con las reglas establecidas"
+     * }
+     * Este prop solo funciona con el modificador charExclude
+     */
+    regexValidChars: {
+      default: null,
+      description: "Regex para solo admitir ciertos caracteres, se maneja un objeto con 2 atributos."
+    },
     /**
      * Bandera para habilitar el componente de selección multiple.
      */
@@ -25042,10 +25401,13 @@ function ESelectvue_type_template_id_520bc088_render(_ctx, _cache, $props, $setu
   },
   data() {
     return {
+      tempValueInput: null,
       auxSuggestions: this.options,
       multipleValue: [],
       selectContentHeight: null,
+      inputLabelSelectedW: null,
       selectHeight: null,
+      iconSectionWidth: null,
       selectedoption: false,
       errorRules: false,
       messageRule: false,
@@ -25076,7 +25438,7 @@ function ESelectvue_type_template_id_520bc088_render(_ctx, _cache, $props, $setu
       return baseLabelSelectedClasses.concat(iconClasses);
     },
     labelClass() {
-      const baseLabelClasses = ["e-select-label", this.roundedClass, this.textSizeClass];
+      const baseLabelClasses = [this.suggestion ? [this.labelSelected ? "e-select__inputSuggestLabel-suggest" : "e-select__inputSuggestLabel-selected"] : ["e-select-label"], this.roundedClass, this.textSizeClass];
       const dynamicLabelClasses = [this.modelValue ? [this.errorRules || this.messageRule ? ["e-select__labelTextColor--error"] : [this.labelColor + " e-select__labelTextColor"]] : this.errorRules || this.messageRule ? ["e-select__labelTextColor--error"] : [this.labelColorNV + " e-select__labelTextColor--noValue"], this.disabled ? "exos-cursor-not-allowed" : "exos-cursor-pointer"];
       return baseLabelClasses.concat(dynamicLabelClasses);
     },
@@ -25085,6 +25447,17 @@ function ESelectvue_type_template_id_520bc088_render(_ctx, _cache, $props, $setu
       const dynamicBoxLabelClasses = [this.modelValue || this.isInputFocused || this.messageRule ? [this.bgColor + " exos-bg-field dark:exos-bg-fieldDark"] : []];
       return baseBoxLabelClasses.concat(dynamicBoxLabelClasses);
     },
+    inputLabelSelectedClass() {
+      const inputLabelSelectedClass = ["e-select__inputSuggestLabel"];
+      const inputLabelTextColor = [this.errorRules || this.messageRule ? ["e-select__labelTextColor--error"] : [this.tempValueInput ? [this.labelColor + " e-select__labelTextColor"] : [this.labelColorNV + " e-select__labelTextColor--noValue"]]];
+      return inputLabelSelectedClass.concat(inputLabelTextColor);
+    },
+    inputPaddingSelectedClass() {
+      return {
+        "padding-left": this.inputLabelSelectedW ? this.inputLabelSelectedW + "px" : "0.75rem",
+        "padding-right": this.iconSectionWidth ? this.iconSectionWidth + "px" : "4rem"
+      };
+    },
     textOptTransformClass() {
       const textOptTransformClasses = {
         upper: "exos-uppercase",
@@ -25160,6 +25533,9 @@ function ESelectvue_type_template_id_520bc088_render(_ctx, _cache, $props, $setu
         rules.unshift(val => !!val || `El campo ${this.label} es requerido`);
       }
       return rules;
+    },
+    showCleanBtn() {
+      return this.modelValue && this.showClean && !this.disabled || this.messageRule && this.showClean && !this.disabled || this.tempValueInput;
     }
   },
   created() {
@@ -25172,6 +25548,7 @@ function ESelectvue_type_template_id_520bc088_render(_ctx, _cache, $props, $setu
     if (this.$refs.refSelect) {
       this.selectHeight = this.$refs.refSelect.offsetHeight;
     }
+    this.calculateIconSectionWidth();
   },
   beforeUnmount() {
     // Desregistra este componente en EForm antes de destruirse
@@ -25180,6 +25557,11 @@ function ESelectvue_type_template_id_520bc088_render(_ctx, _cache, $props, $setu
     }
   },
   methods: {
+    calculateIconSectionWidth() {
+      if (this.$refs.eSelectIconSection) {
+        this.iconSectionWidth = this.$refs.eSelectIconSection.offsetWidth + 20;
+      }
+    },
     calculateDropPositionY() {
       if (this.isDropdownOpen) {
         if (this.calculateAvailableSpaceY(this.$refs.refSelect)) {
@@ -25204,18 +25586,68 @@ function ESelectvue_type_template_id_520bc088_render(_ctx, _cache, $props, $setu
       return bottomSpace < 200 ? true : false; // arriba : abajo
     },
 
+    calculateWidthLabelSelected() {
+      this.$nextTick(() => {
+        if (this.$refs.inputLabelSelected) {
+          this.inputLabelSelectedW = this.$refs.inputLabelSelected.offsetWidth + 5;
+        }
+      });
+    },
+    setOptionsSuggest(val) {
+      this.auxSuggestions = val;
+      if (this.auxSuggestions.length > 0) {
+        this.isDropdownOpen = true;
+      }
+      if (this.tempValueInput) {
+        this.filterOptionsSuggest(this.tempValueInput);
+      } else {
+        if (this.labelSelected) {
+          this.filterOptionsSuggest(this.labelSelected);
+        }
+      }
+    },
+    filterOptionsSuggest(val) {
+      this.auxSuggestions = this.filterFn && typeof this.filterFn === "function" ? this.filterFn(this.options, val) : this.options.filter(option => {
+        return option.label.toLowerCase().includes(val.toLowerCase());
+      });
+    },
+    inputValReplaceRegex(regexToApply, valToReplace) {
+      this.tempValueInput = this.tempValueInput.replace(regexToApply, valToReplace);
+    },
+    inputRegexValidation(inputValue) {
+      if (this.modelModifiers) {
+        if (this.modelModifiers?.charExclude) {
+          // eslint-disable-next-line
+          let regexToApply = this.regexValidChars?.regex ?? /[^a-zA-ZáÁéÉíÍóÓúÚüÜ\s]/g;
+          // eslint-disable-next-line
+          let msgToShow = this.regexValidChars?.msg ?? "El carácter no cumple con las reglas establecidas";
+          this.inputValReplaceRegex(regexToApply, "");
+
+          // eslint-disable-next-line
+          let errorKey = regexToApply.test(inputValue);
+          if (!errorKey) {
+            this.reset();
+          } else {
+            this.messageRule = msgToShow;
+          }
+        } else {
+          Object.keys(this.modelModifiers).find(key => {
+            if (key == "email") {
+              return false;
+            }
+            this.inputValReplaceRegex(ESelectvue_type_script_lang_js_patterns[key].regex, "");
+          });
+        }
+      }
+    },
     fetchSuggestions(event) {
       this.selectedoption = false;
-      const valueInput = event.target.value;
-      if (valueInput === "") {
-        this.reset();
-        this.isDropdownOpen = false;
-        this.$emit("update:modelValue", null);
-        return;
-      }
-      this.auxSuggestions = this.filterFn && typeof this.filterFn === "function" ? this.filterFn(this.options, valueInput) : this.options.filter(option => option.label.toLowerCase().includes(valueInput.toLowerCase()));
+      this.tempValueInput = event.target.value;
+      this.calculateIconSectionWidth();
+      this.inputRegexValidation(event.target.value);
+      this.filterOptionsSuggest(this.tempValueInput);
+      this.$emit("searchValue", this.tempValueInput);
       this.isDropdownOpen = this.auxSuggestions.length > 0;
-      this.$emit("update:modelValue", valueInput);
     },
     labelSelectedColor(value) {
       if (this.modelValue) {
@@ -25258,9 +25690,10 @@ function ESelectvue_type_template_id_520bc088_render(_ctx, _cache, $props, $setu
     // Limpia la opción seleccionada del componente
     async clean() {
       this.reset();
-      this.isDropdownOpen = false;
       this.multipleValue = [];
+      this.isDropdownOpen = false;
       this.selectedoption = false;
+      this.tempValueInput = null;
       /**
        * Se emite al limpiar el contenido del componente.
        *
@@ -25415,6 +25848,17 @@ function ESelectvue_type_template_id_520bc088_render(_ctx, _cache, $props, $setu
     };
   },
   watch: {
+    labelSelected() {
+      this.calculateWidthLabelSelected();
+    },
+    options(newVal) {
+      if (this.suggestion && newVal.length > 0 && !this.multiple || newVal.length == 0) {
+        this.setOptionsSuggest(newVal);
+      }
+      if (this.suggestion && newVal.length == 0 && !this.multiple) {
+        this.auxSuggestions = newVal;
+      }
+    },
     isDropdownOpen(value) {
       if (value) {
         // Si se despliega el contenido oculto...
@@ -25466,7 +25910,7 @@ if (typeof (ESelectvue_type_custom_index_0_blockType_docs_lang_md_default()) ===
 
 
 ;
-const ESelect_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(ESelectvue_type_script_lang_js, [['render',ESelectvue_type_template_id_520bc088_render]])
+const ESelect_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(ESelectvue_type_script_lang_js, [['render',ESelectvue_type_template_id_1fa1f6ec_render]])
 
 /* harmony default export */ var ESelect = (ESelect_exports_);
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ui/components/table/ETable.vue?vue&type=template&id=62663a81
@@ -27154,6 +27598,7 @@ const loading = {
 
 
 
+
 
 
 const ExosLibraryComponents = {
@@ -27181,6 +27626,7 @@ const ExosLibraryComponents = {
     app.component("EForm", EForm);
     app.component("EStepper", EStepper);
     app.component("ECheckbox", ECheckbox);
+    app.component("ERadio", ERadio);
     app.provide("$loading", loading);
     app.provide("$notify", notify);
     app.provide("$showMessage", message);