@alexochihua/exos-library-components 2.20.6 → 2.21.0

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

@@ -30956,29 +30956,50 @@ if (typeof (EBtnTogglevue_type_custom_index_0_blockType_docs_lang_md_default())
 const EBtnToggle_exports_ = EBtnTogglevue_type_script_setup_true_lang_js;
 
 /* harmony default export */ var EBtnToggle = (EBtnToggle_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/filePicker/EFilePicker.vue?vue&type=template&id=c979566e
+;// 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/filePicker/EFilePicker.vue?vue&type=template&id=94f7ed4a
 
-const EFilePickervue_type_template_id_c979566e_hoisted_1 = ["accept", "multiple", "disabled", "id"];
-const EFilePickervue_type_template_id_c979566e_hoisted_2 = ["for"];
-const EFilePickervue_type_template_id_c979566e_hoisted_3 = {
+const EFilePickervue_type_template_id_94f7ed4a_hoisted_1 = ["accept", "multiple", "disabled", "id"];
+const EFilePickervue_type_template_id_94f7ed4a_hoisted_2 = ["for"];
+const EFilePickervue_type_template_id_94f7ed4a_hoisted_3 = {
   key: 1,
+  class: "e-inputFile__multipleFiles__distributionContainer"
+};
+const EFilePickervue_type_template_id_94f7ed4a_hoisted_4 = {
   class: "e-inputFile__multipleFiles"
 };
-const EFilePickervue_type_template_id_c979566e_hoisted_4 = {
+const EFilePickervue_type_template_id_94f7ed4a_hoisted_5 = ["onClick"];
+const EFilePickervue_type_template_id_94f7ed4a_hoisted_6 = {
+  class: "e-inputFile__singleFile__distributionContainer"
+};
+const EFilePickervue_type_template_id_94f7ed4a_hoisted_7 = {
+  class: "e-inputFile__labelClass--dragger"
+};
+const EFilePickervue_type_template_id_94f7ed4a_hoisted_8 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("p", {
+  class: "e-inputFile__dragAndDrop__label"
+}, [/*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", {
+  class: "e-inputFile__dragAndDrop__label__callToAction"
+}, " Haga clic para cargar "), /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)(" o arrastre y suelte el archivo ")], -1);
+const EFilePickervue_type_template_id_94f7ed4a_hoisted_9 = {
+  key: 0,
+  class: "e-inputFile__dragAndDrop__label__detail"
+};
+const EFilePickervue_type_template_id_94f7ed4a_hoisted_10 = {
   key: 0,
   class: "e-inputFile__containerFileInfo"
 };
-const EFilePickervue_type_template_id_c979566e_hoisted_5 = {
+const EFilePickervue_type_template_id_94f7ed4a_hoisted_11 = {
   key: 1,
   class: "e-inputFile__message--error"
 };
-function EFilePickervue_type_template_id_c979566e_render(_ctx, _cache, $props, $setup, $data, $options) {
+function EFilePickervue_type_template_id_94f7ed4a_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_e_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("e-icon");
   const _component_e_file_viewer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("e-file-viewer");
   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)($options.mainContainer)
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.fileContainer)
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.fileContainer),
+    onDragover: _cache[5] || (_cache[5] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)((...args) => $options.onDragOver && $options.onDragOver(...args), ["prevent"])),
+    onDragleave: _cache[6] || (_cache[6] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)((...args) => $options.onDragLeave && $options.onDragLeave(...args), ["prevent"]))
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("input", {
     ref: 'e-filePicker-' + _ctx.$.uid,
     "data-test": "file-picker-cy",
@@ -30991,7 +31012,7 @@ function EFilePickervue_type_template_id_c979566e_render(_ctx, _cache, $props, $
     id: 'inputFile-' + $props.label,
     onChange: _cache[0] || (_cache[0] = (...args) => $options.handleFileChange && $options.handleFileChange(...args)),
     onClick: _cache[1] || (_cache[1] = (...args) => $options.handleClick && $options.handleClick(...args))
-  }, null, 40, EFilePickervue_type_template_id_c979566e_hoisted_1), !$props.modelValue ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("label", {
+  }, null, 40, EFilePickervue_type_template_id_94f7ed4a_hoisted_1), !$props.modelValue && $options.designClass !== 'asDragger' ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("label", {
     key: 0,
     for: 'inputFile-' + $props.label,
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.labelClass)
@@ -31000,31 +31021,39 @@ function EFilePickervue_type_template_id_c979566e_render(_ctx, _cache, $props, $
   }, $options.iconInfo)), null, 16)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("p", null, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((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", {
     key: 0,
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.requiredClass)
-  }, "*", 2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)])], 10, EFilePickervue_type_template_id_c979566e_hoisted_2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $props.multiple && $options.labelSelected ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", EFilePickervue_type_template_id_c979566e_hoisted_3, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderList)($options.labelSelected, (file, index) => {
+  }, "*", 2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)])], 10, EFilePickervue_type_template_id_94f7ed4a_hoisted_2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $props.multiple && $options.labelSelected ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", EFilePickervue_type_template_id_94f7ed4a_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", EFilePickervue_type_template_id_94f7ed4a_hoisted_4, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderList)($options.labelSelected, (file, index) => {
     return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
       key: index,
       class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.multipleFileBox)
     }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_e_icon, {
+      class: "e-inputFile__iconFile--multiple",
       color: "e-inputFile__text--active",
-      name: $options.typeFileIconName(file.type)
-    }, null, 8, ["name"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("p", {
-      class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.multipleFileLabelSelected)
-    }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(file.name), 3), $props.useTags ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_e_icon, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+      name: $options.typeFileIconName(file.type),
+      onClick: $event => $options.openOneItemFileViewerText(index)
+    }, null, 8, ["name", "onClick"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("p", {
+      class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.multipleFileLabelSelected),
+      onClick: $event => $options.openOneItemFileViewerText(index)
+    }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(file.name), 11, EFilePickervue_type_template_id_94f7ed4a_hoisted_5), $props.useTags ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_e_icon, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
       key: 0,
       ref_for: true
     }, $options.closeTagIcon, {
       onClick: $event => $options.handleCloseOneFile(index)
     }), null, 16, ["onClick"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2);
-  }), 128))])) : $options.labelSelected ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
+  }), 128))]), $options.showCloseIcon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
+    key: 0,
+    "data-test": "clean-icon",
+    onClick: _cache[2] || (_cache[2] = (...args) => $options.clean && $options.clean(...args)),
+    class: "e-inputFile__closeIcon__container"
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "iconClose", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_e_icon, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.guardReactiveProps)($options.closeIcon)), null, 16)])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)])) : $options.labelSelected ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     key: 2,
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.singleFileBox)
-  }, [$props.fileIcon && $options.designClass === 'asButton' ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_e_icon, {
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", EFilePickervue_type_template_id_94f7ed4a_hoisted_6, [$options.showFileIcon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_e_icon, {
     key: 0,
     name: $options.typeFileIconName($options.labelSelected.type),
     color: $options.singleFileIcon,
     onClick: $options.openFileViewerIcon
   }, null, 8, ["name", "color", "onClick"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
-    onClick: _cache[2] || (_cache[2] = (...args) => $options.openFileViewerText && $options.openFileViewerText(...args))
+    onClick: _cache[3] || (_cache[3] = (...args) => $options.openFileViewerText && $options.openFileViewerText(...args))
   }, [$options.designClass === 'asInput' ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("p", {
     key: 0,
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.singleFileLabelSelectedInput)
@@ -31032,12 +31061,16 @@ function EFilePickervue_type_template_id_c979566e_render(_ctx, _cache, $props, $
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.singleFileLabelSelected)
   }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($options.labelSelected.name), 3), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("p", {
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.singleFileDescription)
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "fileDescription")], 2)])], 2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $options.showCloseIcon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
-    key: 3,
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "fileDescription")], 2)])]), $options.showCloseIcon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
+    key: 0,
     "data-test": "clean-icon",
-    onClick: _cache[3] || (_cache[3] = (...args) => $options.clean && $options.clean(...args)),
+    onClick: _cache[4] || (_cache[4] = (...args) => $options.clean && $options.clean(...args)),
     class: "e-inputFile__closeIcon__container"
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "iconClose", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_e_icon, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.guardReactiveProps)($options.closeIcon)), null, 16)])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2), $options.showInfoFileCounter ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", EFilePickervue_type_template_id_c979566e_hoisted_4, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($options.formattedFileInfo), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), !!$data.messageError ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", EFilePickervue_type_template_id_c979566e_hoisted_5, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($data.messageError), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $data.showFileViwerFlag ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_e_file_viewer, {
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "iconClose", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_e_icon, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.guardReactiveProps)($options.closeIcon)), null, 16)])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $options.designClass === 'asDragger' ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "drag-drop-content", {
+    key: 3
+  }, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(["e-inputFile__file__container--dragger", $props.dragDropHeight])
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_e_icon, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.guardReactiveProps)($options.draggerIcon)), null, 16), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", EFilePickervue_type_template_id_94f7ed4a_hoisted_7, [EFilePickervue_type_template_id_94f7ed4a_hoisted_8, $props.accept ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("p", EFilePickervue_type_template_id_94f7ed4a_hoisted_9, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.accept), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)])], 2)]) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 34), $options.showInfoFileCounter ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", EFilePickervue_type_template_id_94f7ed4a_hoisted_10, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($options.formattedFileInfo), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), !!$data.messageError ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", EFilePickervue_type_template_id_94f7ed4a_hoisted_11, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($data.messageError), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $data.showFileViwerFlag ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_e_file_viewer, {
     key: 2,
     data: $data.fileToview,
     fileName: $data.nameFile,
@@ -31046,7 +31079,7 @@ function EFilePickervue_type_template_id_c979566e_render(_ctx, _cache, $props, $
     onClose: $options.handleCloseFileViewer
   }, null, 8, ["data", "fileName", "extention", "notSupported", "onClose"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2);
 }
-;// CONCATENATED MODULE: ./src/ui/components/filePicker/EFilePicker.vue?vue&type=template&id=c979566e
+;// CONCATENATED MODULE: ./src/ui/components/filePicker/EFilePicker.vue?vue&type=template&id=94f7ed4a
 
 ;// 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/filePicker/EFilePicker.vue?vue&type=script&lang=js
 
@@ -31063,6 +31096,42 @@ function EFilePickervue_type_template_id_c979566e_render(_ctx, _cache, $props, $
       required: true,
       default: null
     },
+    /**
+     * Clase de TailwindCSS que define la altura del área de drag and drop.
+     *
+     * Esta propiedad permite aplicar una clase de utilidad de TailwindCSS para controlar la altura del contenedor
+     * de carga por arrastre. Solo se deben usar clases válidas relacionadas con `height`, como `h-32`, `min-h-[10rem]`, `max-h-screen`, etc.
+     *
+     * Solo tiene efecto si **no** se utiliza el slot `drag-drop-content`. En caso de que ese slot esté definido,
+     * se considera que se está personalizando completamente el diseño del área de drag and drop, y por lo tanto esta propiedad no será aplicada.
+     *
+     * **Ejemplo de uso:**
+     * `<e-file-picker dragDropHeight="h-48" />`
+     *
+     * @default null
+     */
+    dragDropHeight: {
+      type: String,
+      default: null,
+      description: 'Clase de TailwindCSS para definir la altura del área de drag and drop, como "h-32", "min-h-[10rem]" o "max-h-screen". Solo aplica si no se utiliza el slot "drag-drop-content".'
+    },
+    /**
+     * Tamaño del icono para la sección drag and drop.
+     * @values xs, sm, md, lg, xl, o un valor compatible con font-size -> 3px, 1rem, 2vw, etc
+     */
+    dragDropIconSize: {
+      type: String,
+      default: null,
+      description: 'Tamaño del icono para la sección drag and drop.'
+    },
+    /**
+     * Nombre del icono para la sección drag and drop.
+     */
+    dragDropIconName: {
+      type: String,
+      default: null,
+      description: 'Nombre del icono para la sección drag and drop.'
+    },
     /**
      * Indica si el archivo debe permanecer cargado incluso cuando no cumple con las validaciones.
      * Si el archivo es inválido, se mostrará un mensaje de error, pero no se eliminará automáticamente.
@@ -31088,13 +31157,37 @@ function EFilePickervue_type_template_id_c979566e_render(_ctx, _cache, $props, $
       default: false
     },
     /**
-     * Estilo que tendrá el componente.
-     * @values botton, input, card
+     * Estilo visual que define la presentación del componente `EFilePicker`.
+     *
+     * Esta propiedad controla cómo se representa visualmente el área de carga del archivo. Los diferentes estilos están
+     * pensados para ajustarse a distintos flujos de interacción dentro de formularios o interfaces.
+     *
+     * ### Estilos disponibles:
+     *
+     * - **`input`**: Presenta una caja tradicional similar a un campo de formulario con etiqueta flotante.
+     *   - Ideal para formularios donde se busca mantener una estética uniforme.
+     *   - Ejemplo: campo de selección de archivo dentro de una línea de campos como nombre, fecha, etc.
+     *
+     * - **`button`**: Muestra un botón de acción completo que lanza el explorador de archivos.
+     *   - Se recomienda cuando el selector de archivos es una acción secundaria o aislada del formulario.
+     *   - Ejemplo: botón azul con ícono y texto alineado horizontalmente al centro.
+     *
+     * - **`dragger`**: Permite arrastrar y soltar archivos sobre un área amplia con borde punteado y mensaje central.
+     *   - Es el estilo más visual e interactivo.
+     *   - Ejemplo: caja centrada con ícono de nube y texto "Haga clic o arrastre y suelte el archivo".
+     *
+     * ### Consideraciones:
+     * - Si no se establece, el valor por defecto será `button`.
+     * - Esta propiedad afecta la disposición de elementos internos como íconos, etiquetas, comportamiento del input y slots.
+     * - Al usar `dragger`, se pueden personalizar la altura (`dragDropHeight`) y el ícono (`dragDropIconName`).
+     *
+     * @values 'input', 'button', 'dragger'
+     * @default 'button'
      */
     design: {
       type: String,
-      default: null,
-      description: 'Estilo que tendrá el componente.'
+      default: 'button',
+      description: 'Estilo visual del componente de carga de archivos.'
     },
     /**
      * Si es true, el ícono estará en el lado derecho del componente; de lo contrario, en el lado izquierdo.
@@ -31375,6 +31468,7 @@ function EFilePickervue_type_template_id_c979566e_render(_ctx, _cache, $props, $
   data() {
     return {
       iconsSVG: iconsSVG,
+      isHovering: false,
       showFileViwerFlag: false,
       messageError: null,
       selectedFiles: [],
@@ -31412,7 +31506,7 @@ function EFilePickervue_type_template_id_c979566e_render(_ctx, _cache, $props, $
       return filterRules;
     },
     fileContainer() {
-      const mainContainerClass = ['e-inputFile__file__container', this.labelSelected ? 'padding--active' : 'padding--inactive', this.designClass, this.shadowSize ? 'shadow-' + this.shadowSize : 'shadow-def', this.roundedSize ? 'rounded-' + this.roundedSize : 'rounded-def', this.disabled ? 'hover:exos-cursor-not-allowed exos-bg--disabled' : ['hover:exos-cursor-pointer', this.bgColor ? this.bgColor : this.modelValue ? 'exos-bg--active' : 'exos-bg--inactive']];
+      const mainContainerClass = ['e-inputFile__file__container', this.labelSelected ? 'padding--active' : 'padding--inactive', this.designClass, this.designClass === 'asDragger' && !this.modelValue ? [this.isHovering ? 'exos-bg--hover border-dashed--hover' : 'border-dashed--inactive'] : '', this.shadowSize ? 'shadow-' + this.shadowSize : 'shadow-def', this.roundedSize ? 'rounded-' + this.roundedSize : 'rounded-def', this.disabled ? 'hover:exos-cursor-not-allowed exos-bg--disabled' : ['hover:exos-cursor-pointer', this.bgColor ? this.bgColor : this.modelValue ? 'exos-bg--active' : 'exos-bg--inactive']];
       return mainContainerClass;
     },
     closeIcon() {
@@ -31422,6 +31516,13 @@ function EFilePickervue_type_template_id_c979566e_render(_ctx, _cache, $props, $
         class: closeClasses
       };
     },
+    draggerIcon() {
+      return {
+        name: this.dragDropIconName ?? 'sym-cloud_upload',
+        color: this.disabled ? 'e-inputFile__iconDragger--disabled' : 'e-inputFile__iconDragger--enable',
+        size: this.dragDropIconSize ?? 'xl'
+      };
+    },
     closeTagIcon() {
       const closeTagClasses = 'e-inputFile__iconTag';
       return {
@@ -31432,6 +31533,9 @@ function EFilePickervue_type_template_id_c979566e_render(_ctx, _cache, $props, $
         class: closeTagClasses
       };
     },
+    showFileIcon() {
+      return this.fileIcon && this.designClass === 'asButton' || this.designClass === 'asDragger';
+    },
     showCloseIcon() {
       return !!this.modelValue && !this.disabled && this.showCleanBtn;
     },
@@ -31472,13 +31576,14 @@ function EFilePickervue_type_template_id_c979566e_render(_ctx, _cache, $props, $
       return baseClasses;
     },
     multipleFileLabelSelected() {
-      const baseClasses = [this.textSize ? 'textSize-' + this.textSize : 'textSize-def', this.labelColor ?? 'e-inputFile__multipleFile__fileName__color'];
+      const baseClasses = ['exos-relative exos-z-10', this.textSize ? 'textSize-' + this.textSize : 'textSize-def', this.labelColor ?? 'e-inputFile__multipleFile__fileName__color'];
       return baseClasses;
     },
     designClass() {
       const designMap = {
         button: 'asButton',
-        input: 'asInput'
+        input: 'asInput',
+        dragger: 'asDragger'
       };
       return designMap[this.design] || 'asButton';
     },
@@ -31557,6 +31662,14 @@ function EFilePickervue_type_template_id_c979566e_render(_ctx, _cache, $props, $
       // Devolver el icono correspondiente o uno por defecto si no existe en el mapa
       return iconMap[fileType] || 'sym-draft';
     },
+    onDragOver() {
+      if (this.designClass !== 'asDragger') return;
+      this.isHovering = true;
+    },
+    onDragLeave() {
+      if (this.designClass !== 'asDragger') return;
+      this.isHovering = false;
+    },
     handleCloseFileViewer() {
       this.fileToview = null;
       this.showFileViwerFlag = false;
@@ -31611,6 +31724,13 @@ function EFilePickervue_type_template_id_c979566e_render(_ctx, _cache, $props, $
       this.extensionFile = this.modelValue.name.split('.').pop();
       this.showFileViwerFlag = true;
     },
+    async openOneItemFileViewe(index) {
+      let file64 = await this.convertFileToBase64(this.modelValue?.[index]);
+      this.nameFile = this.modelValue?.[index].name;
+      this.fileToview = file64.split(',')[1];
+      this.extensionFile = this.modelValue?.[index].name.split('.').pop();
+      this.showFileViwerFlag = true;
+    },
     async openFileViewerIcon() {
       if (!this.disabled) {
         this.onlyRead ? await this.openFileViewer() : this.$refs['e-filePicker-' + this.$.uid].click();
@@ -31621,6 +31741,11 @@ function EFilePickervue_type_template_id_c979566e_render(_ctx, _cache, $props, $
         await this.openFileViewer();
       }
     },
+    async openOneItemFileViewerText(index) {
+      if (!this.disabled) {
+        await this.openOneItemFileViewe(index);
+      }
+    },
     validateMultipleFiles(filterRules) {
       let i = 0;
       let result = true;
@@ -31734,6 +31859,7 @@ function EFilePickervue_type_template_id_c979566e_render(_ctx, _cache, $props, $
     },
     // Resetear mensaje de error y estilos de la regla, llamar a resetear mensaje y estilos de restricción
     reset() {
+      this.isHovering = false;
       this.messageError = null;
     },
     // Limpiar el contenido del componente EFilePicker, emitir evento clean y resetear variables de error de regla
@@ -31923,7 +32049,7 @@ if (typeof (EFilePickervue_type_custom_index_0_blockType_docs_lang_md_default())
 
 
 ;
-const EFilePicker_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(EFilePickervue_type_script_lang_js, [['render',EFilePickervue_type_template_id_c979566e_render]])
+const EFilePicker_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(EFilePickervue_type_script_lang_js, [['render',EFilePickervue_type_template_id_94f7ed4a_render]])
 
 /* harmony default export */ var EFilePicker = (EFilePicker_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/dataDetail/EDataDetail.vue?vue&type=template&id=22bb1c42
@@ -32396,9 +32522,9 @@ if (typeof (EDataDetailvue_type_custom_index_0_blockType_docs_lang_md_default())
 const EDataDetail_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(EDataDetailvue_type_script_lang_js, [['render',EDataDetailvue_type_template_id_22bb1c42_render]])
 
 /* harmony default export */ var EDataDetail = (EDataDetail_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/tooltip/ETooltip.vue?vue&type=template&id=32fc3bd7
+;// 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/tooltip/ETooltip.vue?vue&type=template&id=2334a1fd
 
-function ETooltipvue_type_template_id_32fc3bd7_render(_ctx, _cache, $props, $setup, $data, $options) {
+function ETooltipvue_type_template_id_2334a1fd_render(_ctx, _cache, $props, $setup, $data, $options) {
   return $data.isVisible ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     key: 0,
     lang: "es",
@@ -32407,7 +32533,7 @@ function ETooltipvue_type_template_id_32fc3bd7_render(_ctx, _cache, $props, $set
     ref: 'e-tooltip-' + _ctx.$.uid
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 6)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true);
 }
-;// CONCATENATED MODULE: ./src/ui/components/tooltip/ETooltip.vue?vue&type=template&id=32fc3bd7
+;// CONCATENATED MODULE: ./src/ui/components/tooltip/ETooltip.vue?vue&type=template&id=2334a1fd
 
 ;// 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/tooltip/ETooltip.vue?vue&type=script&lang=js
 /* harmony default export */ var ETooltipvue_type_script_lang_js = ({
@@ -32604,7 +32730,7 @@ function ETooltipvue_type_template_id_32fc3bd7_render(_ctx, _cache, $props, $set
   },
   computed: {
     tooltip() {
-      const baseClasses = ['e-tooltip__tooltip', this.bgColor ?? 'exos-bg-secondary', this.textColor ?? 'exos-text-white', this.width ? this.width + ' exos-break-words exos-hyphens-auto' : 'exos-w-fit', this.roundedSize ? 'rounded-' + this.roundedSize : 'rounded-def'];
+      const baseClasses = ['e-tooltip__tooltip', this.bgColor ?? 'e-tooltip__bgColor', this.textColor ?? 'e-tooltip__textColor', this.width ? this.width + ' e-tooltip__breakWords' : 'e-tooltip__width', this.roundedSize ? 'rounded-' + this.roundedSize : 'rounded-def'];
       return baseClasses;
     }
   },
@@ -32631,7 +32757,7 @@ if (typeof (ETooltipvue_type_custom_index_0_blockType_docs_lang_md_default()) ==
 
 
 ;
-const ETooltip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(ETooltipvue_type_script_lang_js, [['render',ETooltipvue_type_template_id_32fc3bd7_render]])
+const ETooltip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(ETooltipvue_type_script_lang_js, [['render',ETooltipvue_type_template_id_2334a1fd_render]])
 
 /* harmony default export */ var ETooltip = (ETooltip_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/stepTracker/EStepTracker.vue?vue&type=template&id=d9b0d8a8