@alexochihua/exos-library-components 2.7.0 → 2.8.1

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

@@ -417,6 +417,13 @@ module.exports = {}
 
 /***/ }),
 
+/***/ 5299:
+/***/ (function(module) {
+
+module.exports = {}
+
+/***/ }),
+
 /***/ 7035:
 /***/ (function(module) {
 
@@ -508,6 +515,13 @@ module.exports = {}
 
 /***/ }),
 
+/***/ 6877:
+/***/ (function(module) {
+
+module.exports = {}
+
+/***/ }),
+
 /***/ 9306:
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
@@ -6347,25 +6361,62 @@ const EFileViewervue_type_script_setup_true_lang_js_hoisted_11 = ["src"];
 /* harmony default export */ var EFileViewervue_type_script_setup_true_lang_js = ({
   __name: 'EFileViewer',
   props: {
+    /**
+     * Prop que recibe un b64 para mostrar
+     * Se debe enviar solo el cuerpo del b64 (JVBERi0xLjUKJYCB) SIN incluir el header (data:image/jpeg;base64,)
+     *
+     * La prioridad de archivos para mostrar es:
+     * 1.-link
+     * 2.-file
+     * 3.-data
+     *
+     */
     data: {
+      type: String,
       default: null
     },
+    /**
+     * Prop que recibe un archivo (class File) para mostrar
+     * La prioridad de archivos para mostrar es:
+     * 1.-link
+     * 2.-file
+     * 3.-data
+     */
     file: {
       default: null
     },
+    /**
+     * Prop que recibe un link de un archivo para mostrar
+     * La prioridad de archivos para mostrar es:
+     * 1.-link
+     * 2.-file
+     * 3.-data
+     */
     link: {
+      type: String,
       default: null
     },
+    /**
+     * Nombre que se le dara al archivo en la vista previa y en la descarga
+     */
     fileName: {
       type: String,
       default: null,
       required: true
     },
+    /**
+     * Extension del archivo que se esta previsualizando
+     * No debe llevar " . " (punto), solo la extension
+     * @values pdf, jpg, png
+     */
     extention: {
       type: String,
       default: null,
       required: true
     },
+    /**
+     * Bandera que al estar activa muestra el icono de descarga del archivo
+     */
     showDownload: {
       type: Boolean,
       default: true
@@ -6415,6 +6466,12 @@ const EFileViewervue_type_script_setup_true_lang_js_hoisted_11 = ["src"];
       mixins_default().methods.downloadFileFromLink(src.value, nameFile.value);
     }
     function handleClose() {
+      /**
+       * Se emite al dar click en el boton de cerrar
+       *
+       * @event close
+       * @type {Event}
+       */
       emit('close');
     }
     return (_ctx, _cache) => {
@@ -6715,18 +6772,18 @@ function EModalvue_type_template_id_79530638_render(_ctx, _cache, $props, $setup
 const EModal_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(EModalvue_type_script_lang_js, [['render',EModalvue_type_template_id_79530638_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=8223d4aa
+;// 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=725d6b30
 
-const ECollapsevue_type_template_id_8223d4aa_hoisted_1 = {
+const ECollapsevue_type_template_id_725d6b30_hoisted_1 = {
   class: "exos-flex exos-flex-col exos-w-full exos-h-full exos-relative"
 };
-const ECollapsevue_type_template_id_8223d4aa_hoisted_2 = {
+const ECollapsevue_type_template_id_725d6b30_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_8223d4aa_hoisted_3 = {
+const ECollapsevue_type_template_id_725d6b30_hoisted_3 = {
   key: 0
 };
-const ECollapsevue_type_template_id_8223d4aa_hoisted_4 = {
+const ECollapsevue_type_template_id_725d6b30_hoisted_4 = {
   key: 1,
   width: "25.56",
   height: "25",
@@ -6734,20 +6791,24 @@ const ECollapsevue_type_template_id_8223d4aa_hoisted_4 = {
   class: "exos-fill-secondary",
   xmlns: "http://www.w3.org/2000/svg"
 };
-const ECollapsevue_type_template_id_8223d4aa_hoisted_5 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", {
+const ECollapsevue_type_template_id_725d6b30_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)"
 }, null, -1);
-const ECollapsevue_type_template_id_8223d4aa_hoisted_6 = [ECollapsevue_type_template_id_8223d4aa_hoisted_5];
-const ECollapsevue_type_template_id_8223d4aa_hoisted_7 = {
+const ECollapsevue_type_template_id_725d6b30_hoisted_6 = [ECollapsevue_type_template_id_725d6b30_hoisted_5];
+const ECollapsevue_type_template_id_725d6b30_hoisted_7 = {
   class: "exos-flex exos-flex-col exos-w-full exos-space-y-0"
 };
-const ECollapsevue_type_template_id_8223d4aa_hoisted_8 = {
+const ECollapsevue_type_template_id_725d6b30_hoisted_8 = {
   key: 0,
   class: "exos-w-fit"
 };
-const ECollapsevue_type_template_id_8223d4aa_hoisted_9 = {
+const ECollapsevue_type_template_id_725d6b30_hoisted_9 = {
+  key: 1,
+  class: "exos-flex exos-justify-center exos-align-center exos-text-secondary exos-z-20"
+};
+const ECollapsevue_type_template_id_725d6b30_hoisted_10 = {
   key: 1,
   height: "14",
   width: "23.746",
@@ -6755,39 +6816,73 @@ const ECollapsevue_type_template_id_8223d4aa_hoisted_9 = {
   class: "exos-fill-secondary",
   xmlns: "http://www.w3.org/2000/svg"
 };
-const ECollapsevue_type_template_id_8223d4aa_hoisted_10 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", {
+const ECollapsevue_type_template_id_725d6b30_hoisted_11 = /*#__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)"
 }, null, -1);
-const ECollapsevue_type_template_id_8223d4aa_hoisted_11 = [ECollapsevue_type_template_id_8223d4aa_hoisted_10];
-function ECollapsevue_type_template_id_8223d4aa_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_8223d4aa_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+const ECollapsevue_type_template_id_725d6b30_hoisted_12 = [ECollapsevue_type_template_id_725d6b30_hoisted_11];
+const ECollapsevue_type_template_id_725d6b30_hoisted_13 = {
+  class: "exos-flex exos-justify-between exos-w-full exos-mb-6"
+};
+const ECollapsevue_type_template_id_725d6b30_hoisted_14 = {
+  key: 0,
+  class: "exos-font-extrabold exos-text-xl"
+};
+const ECollapsevue_type_template_id_725d6b30_hoisted_15 = {
+  class: "exos-inline-block exos-rounded-full exos-cursor-pointer exos-shadow-md exos-p-1.5 exos-h-9 exos-w-9 exos-bg-zinc-100 dark:exos-bg-fieldDark"
+};
+function ECollapsevue_type_template_id_725d6b30_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_EIcon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("EIcon");
+  const _component_EBtn = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("EBtn");
+  const _component_EDialog = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("EDialog");
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (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.createElementVNode)("div", ECollapsevue_type_template_id_725d6b30_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_8223d4aa_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_8223d4aa_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_725d6b30_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_725d6b30_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_8223d4aa_hoisted_4, ECollapsevue_type_template_id_8223d4aa_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_8223d4aa_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_725d6b30_hoisted_4, ECollapsevue_type_template_id_725d6b30_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_725d6b30_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)])]), _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_8223d4aa_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", {
+  }) : (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_725d6b30_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), $data.isCollapseOpen && $props.showExpand ? ((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_725d6b30_hoisted_9, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_EIcon, {
+    name: "zoom_out_map",
+    class: "exos-mr-6",
+    onClick: $options.expandContent
+  }, null, 8, ["onClick"])])) : (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_8223d4aa_hoisted_9, ECollapsevue_type_template_id_8223d4aa_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", {
+  }) : ((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_725d6b30_hoisted_10, ECollapsevue_type_template_id_725d6b30_hoisted_12))], 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),
     style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)($options.calculateDropPositionY())
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "filter-collapse"), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
     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=8223d4aa
+  }, [(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)]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_EDialog, {
+    show: $data.showExpandDialog
+  }, {
+    content: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ECollapsevue_type_template_id_725d6b30_hoisted_13, [$props.text != null ? ((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_725d6b30_hoisted_14, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.text), 1)) : (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_725d6b30_hoisted_15, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_EBtn, {
+      rounded: "",
+      roundedSize: "xl",
+      textColor: "exos-text-secondary",
+      color: "exos-bg-white",
+      iconName: "close",
+      iconSize: "1.2rem",
+      onClick: _cache[2] || (_cache[2] = $event => $data.showExpandDialog = false)
+    })])]), _ctx.$slots.contentExpand ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "contentExpand", {
+      key: 0
+    }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "filter-collapse", {
+      key: 1
+    })]),
+    _: 3
+  }, 8, ["show"])], 64);
+}
+;// CONCATENATED MODULE: ./src/ui/components/collapse/ECollapse.vue?vue&type=template&id=725d6b30
 
 ;// 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 = ({
@@ -6978,6 +7073,14 @@ function ECollapsevue_type_template_id_8223d4aa_render(_ctx, _cache, $props, $se
       type: String,
       default: '',
       description: 'Setea el color del borde del contenido desplegado.'
+    },
+    /**
+     * 'Bandera para mostrar el icon expand que activara la funcionalidad de mostrat el contenido del ecollapse en un EDialog al darle click'
+     */
+    showExpand: {
+      type: Boolean,
+      default: false,
+      description: 'Bandera para mostrar el icon expand que activara la funcionalidad de mostrat el contenido del ecollapse en un EDialog al darle click'
     }
   },
   data() {
@@ -6985,7 +7088,8 @@ function ECollapsevue_type_template_id_8223d4aa_render(_ctx, _cache, $props, $se
       collapseContentHeight: null,
       collapseHeight: null,
       isCollapseOpen: false,
-      showPosition: true
+      showPosition: true,
+      showExpandDialog: false
     };
   },
   computed: {
@@ -7009,6 +7113,9 @@ function ECollapsevue_type_template_id_8223d4aa_render(_ctx, _cache, $props, $se
     }
   },
   methods: {
+    expandContent() {
+      this.showExpandDialog = true;
+    },
     calculateDropPositionY() {
       if (this.isCollapseOpen) {
         if (this.calculateAvailableSpaceY(this.$refs.collapse)) {
@@ -7096,7 +7203,7 @@ if (typeof (ECollapsevue_type_custom_index_0_blockType_docs_lang_md_default()) =
 
 
 ;
-const ECollapse_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(ECollapsevue_type_script_lang_js, [['render',ECollapsevue_type_template_id_8223d4aa_render]])
+const ECollapse_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(ECollapsevue_type_script_lang_js, [['render',ECollapsevue_type_template_id_725d6b30_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=3c9a20b8
@@ -28600,6 +28707,119 @@ if (typeof (ETablevue_type_custom_index_0_blockType_docs_lang_md_default()) ===
 const ETable_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(ETablevue_type_script_lang_js, [['render',ETablevue_type_template_id_6ab87d66_render]])
 
 /* harmony default export */ var ETable = (ETable_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/tab/ETab.vue?vue&type=script&setup=true&lang=js
+
+const ETabvue_type_script_setup_true_lang_js_hoisted_1 = {
+  class: "e-tab"
+};
+const ETabvue_type_script_setup_true_lang_js_hoisted_2 = {
+  class: "e-tab__header"
+};
+const ETabvue_type_script_setup_true_lang_js_hoisted_3 = {
+  class: "e-tab__options-group"
+};
+const ETabvue_type_script_setup_true_lang_js_hoisted_4 = ["onClick"];
+const ETabvue_type_script_setup_true_lang_js_hoisted_5 = {
+  class: "e-tab__container"
+};
+
+/* harmony default export */ var ETabvue_type_script_setup_true_lang_js = ({
+  __name: 'ETab',
+  props: {
+    /**
+     * Valor del elemento seleccionado
+     */
+    modelValue: {
+      default: null
+    },
+    /**
+     * Arreglo de objetos que definen cada opción.
+     * Sus campos son label y value {label, value}
+     * Para cambiar el campo value puede usar el prop "option-value"
+     * Para cambiar el campo label puede usar el prop "option-label"
+     */
+    options: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * Indica el campo de la opcion que se utilizara para emitir al seleccionar una opcion
+     */
+    optionValue: {
+      type: String,
+      default: 'value'
+    },
+    /**
+     * Indica el campo de la opcion que se utilizara para obtener el texto de una opcion
+     */
+    optionLabel: {
+      type: String,
+      default: 'label'
+    },
+    /**
+     * Bandera para poder emitir todo el objeto de la opcion seleccionada, en caso de estar en false emite el valor del campo seleccionado en "option-value"
+     */
+    fullEmit: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Bandera para desactivar los clicks en las opciones
+     */
+    onlyRead: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:modelValue'],
+  setup(__props, {
+    emit: __emit
+  }) {
+    const props = __props;
+    const $emit = __emit;
+    const optionSelected = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => {
+      let optionSelected = props.fullEmit ? props.modelValue?.[props.optionValue] : props.modelValue;
+      return optionSelected;
+    });
+    function handleSelected(option) {
+      let valueToEmit = props.fullEmit ? {
+        ...option
+      } : option[props.optionValue];
+      /**
+       * Se emite al seleccionar una opción.
+       *
+       * @event update:modelValue
+       * @type {Event}
+       * @property valor de la opción, si se tiene activa la bandera "full-emit" emite todo el objeto de la opción, en caso que no este activa emite el valor del campo indicado en el prop "option-value"
+       */
+      $emit('update:modelValue', valueToEmit);
+    }
+    return (_ctx, _cache) => {
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", ETabvue_type_script_setup_true_lang_js_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ETabvue_type_script_setup_true_lang_js_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+        class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(["e-tab__title", _ctx.$slots.title ? 'exos-bg-red' : ''])
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "title")], 2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ETabvue_type_script_setup_true_lang_js_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)(props.options, (option, index) => {
+        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)(["e-tab__option", `${option[props.optionValue] == optionSelected.value ? 'e-tab__option-selected' : ''} ${props.onlyRead ? '' : 'e-tab__only-read'}`]),
+          key: 'tabOpt' + index,
+          onClick: $event => !props.onlyRead ? handleSelected(option) : false
+        }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(option[props.optionLabel]), 11, ETabvue_type_script_setup_true_lang_js_hoisted_4);
+      }), 128))])]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ETabvue_type_script_setup_true_lang_js_hoisted_5, [_ctx.$slots[`tab-${optionSelected.value}`] ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, `tab-${optionSelected.value}`, {
+        key: 0
+      }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), !_ctx.$slots[`tab-${optionSelected.value}`] ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", {
+        key: 1
+      }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)])]);
+    };
+  }
+});
+;// CONCATENATED MODULE: ./src/ui/components/tab/ETab.vue?vue&type=script&setup=true&lang=js
+ 
+;// CONCATENATED MODULE: ./src/ui/components/tab/ETab.vue
+
+
+
+const ETab_exports_ = ETabvue_type_script_setup_true_lang_js;
+
+/* harmony default export */ var ETab = (ETab_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/stepper/EStepper.vue?vue&type=script&setup=true&lang=js
 
 const ESteppervue_type_script_setup_true_lang_js_hoisted_1 = {
@@ -29063,36 +29283,36 @@ 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=384e2c43
+;// 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=3ec76745
 
-const EFilePickervue_type_template_id_384e2c43_hoisted_1 = {
+const EFilePickervue_type_template_id_3ec76745_hoisted_1 = {
   class: "exos-flex exos-w-full exos-flex-col exos-space-y-1"
 };
-const EFilePickervue_type_template_id_384e2c43_hoisted_2 = ["accept", "multiple", "disabled", "id"];
-const EFilePickervue_type_template_id_384e2c43_hoisted_3 = ["for"];
-const EFilePickervue_type_template_id_384e2c43_hoisted_4 = {
+const EFilePickervue_type_template_id_3ec76745_hoisted_2 = ["accept", "multiple", "disabled", "id"];
+const EFilePickervue_type_template_id_3ec76745_hoisted_3 = ["for"];
+const EFilePickervue_type_template_id_3ec76745_hoisted_4 = {
   key: 0
 };
-const EFilePickervue_type_template_id_384e2c43_hoisted_5 = {
+const EFilePickervue_type_template_id_3ec76745_hoisted_5 = {
   key: 0,
   class: "exos-w-full exos-space-y-1"
 };
-const EFilePickervue_type_template_id_384e2c43_hoisted_6 = {
+const EFilePickervue_type_template_id_3ec76745_hoisted_6 = {
   class: "exos-flex exos-space-x-2"
 };
-const EFilePickervue_type_template_id_384e2c43_hoisted_7 = {
+const EFilePickervue_type_template_id_3ec76745_hoisted_7 = {
   class: "e-inputFile__containerFileInfo"
 };
-const EFilePickervue_type_template_id_384e2c43_hoisted_8 = ["onClick"];
-const EFilePickervue_type_template_id_384e2c43_hoisted_9 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", {
+const EFilePickervue_type_template_id_3ec76745_hoisted_8 = ["onClick"];
+const EFilePickervue_type_template_id_3ec76745_hoisted_9 = /*#__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 EFilePickervue_type_template_id_384e2c43_hoisted_10 = [EFilePickervue_type_template_id_384e2c43_hoisted_9];
-const EFilePickervue_type_template_id_384e2c43_hoisted_11 = {
+const EFilePickervue_type_template_id_3ec76745_hoisted_10 = [EFilePickervue_type_template_id_3ec76745_hoisted_9];
+const EFilePickervue_type_template_id_3ec76745_hoisted_11 = {
   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",
@@ -29100,21 +29320,22 @@ const EFilePickervue_type_template_id_384e2c43_hoisted_11 = {
   fill: "none",
   viewBox: "0 0 15 15"
 };
-const EFilePickervue_type_template_id_384e2c43_hoisted_12 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", {
+const EFilePickervue_type_template_id_3ec76745_hoisted_12 = /*#__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 EFilePickervue_type_template_id_384e2c43_hoisted_13 = [EFilePickervue_type_template_id_384e2c43_hoisted_12];
-const EFilePickervue_type_template_id_384e2c43_hoisted_14 = {
+const EFilePickervue_type_template_id_3ec76745_hoisted_13 = [EFilePickervue_type_template_id_3ec76745_hoisted_12];
+const EFilePickervue_type_template_id_3ec76745_hoisted_14 = {
   key: 1,
   class: "e-inputFile__message--error"
 };
-function EFilePickervue_type_template_id_384e2c43_render(_ctx, _cache, $props, $setup, $data, $options) {
+function EFilePickervue_type_template_id_3ec76745_render(_ctx, _cache, $props, $setup, $data, $options) {
   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", EFilePickervue_type_template_id_384e2c43_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+  const _component_EFileViewer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("EFileViewer");
+  return (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_3ec76745_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.mainContainerClass)
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("input", {
     type: "file",
@@ -29125,26 +29346,26 @@ function EFilePickervue_type_template_id_384e2c43_render(_ctx, _cache, $props, $
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.mainClass),
     id: 'inputFile-' + $props.label,
     onChange: _cache[0] || (_cache[0] = (...args) => $options.handleFileChange && $options.handleFileChange(...args))
-  }, null, 42, EFilePickervue_type_template_id_384e2c43_hoisted_2), !$props.modelValue ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("label", {
+  }, null, 42, EFilePickervue_type_template_id_3ec76745_hoisted_2), !$props.modelValue ? ((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)
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.labelBoxClass)
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "content", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_EIcon, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.guardReactiveProps)($options.iconInfo)), null, 16), (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", EFilePickervue_type_template_id_384e2c43_hoisted_4, "*")) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)])])], 2)], 10, EFilePickervue_type_template_id_384e2c43_hoisted_3)) : (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", {
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "content", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_EIcon, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.guardReactiveProps)($options.iconInfo)), null, 16), (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", EFilePickervue_type_template_id_3ec76745_hoisted_4, "*")) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)])])], 2)], 10, EFilePickervue_type_template_id_3ec76745_hoisted_3)) : (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: 1,
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.labelSelectedClass)
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.containerFileClass)
-  }, [$props.multiple ? ((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_384e2c43_hoisted_5, [((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) => {
+  }, [$props.multiple ? ((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_3ec76745_hoisted_5, [((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.fileBoxContainer)
-    }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", EFilePickervue_type_template_id_384e2c43_hoisted_6, [$props.fileIcon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_EIcon, {
+    }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", EFilePickervue_type_template_id_3ec76745_hoisted_6, [$props.fileIcon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_EIcon, {
       key: 0,
       name: $options.typeFileIconName(file.type),
       color: "exos-text-secondary"
-    }, null, 8, ["name"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", null, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("p", null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(file.name), 1), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", EFilePickervue_type_template_id_384e2c43_hoisted_7, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "fileDescription")])])]), $props.useTags ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", {
+    }, null, 8, ["name"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", null, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("p", null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(file.name), 1), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", EFilePickervue_type_template_id_3ec76745_hoisted_7, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "fileDescription")])])]), $props.useTags ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", {
       key: 0,
       fill: "none",
       "aria-hidden": "true",
@@ -29152,7 +29373,7 @@ function EFilePickervue_type_template_id_384e2c43_render(_ctx, _cache, $props, $
       xmlns: "http://www.w3.org/2000/svg",
       class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.iconCloseTagClass),
       onClick: $event => $options.handleCloseOneFile(index)
-    }, EFilePickervue_type_template_id_384e2c43_hoisted_10, 10, EFilePickervue_type_template_id_384e2c43_hoisted_8)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2);
+    }, EFilePickervue_type_template_id_3ec76745_hoisted_10, 10, EFilePickervue_type_template_id_3ec76745_hoisted_8)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2);
   }), 128))])) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     key: 1,
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.fileBoxContainer)
@@ -29160,24 +29381,35 @@ function EFilePickervue_type_template_id_384e2c43_render(_ctx, _cache, $props, $
     key: 0,
     name: $options.typeFileIconName($options.labelSelected.type),
     color: "exos-text-secondary"
-  }, null, 8, ["name"])) : (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.toDisplayString)($options.labelSelected.name), 1), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "fileDescription")], 2))], 2)], 2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), !!$props.modelValue && !$props.disabled && $props.showCleanBtn ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
+  }, null, 8, ["name"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("p", {
+    onClick: _cache[1] || (_cache[1] = (...args) => $options.openFileViewer && $options.openFileViewer(...args)),
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($props.onlyRead ? 'exos-z-20 exos-cursor-pointer' : '')
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($options.labelSelected.name), 3), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "fileDescription")], 2))], 2)], 2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), !!$props.modelValue && !$props.disabled && $props.showCleanBtn ? ((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[1] || (_cache[1] = (...args) => $options.clean && $options.clean(...args)),
+    onClick: _cache[2] || (_cache[2] = (...args) => $options.clean && $options.clean(...args)),
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.iconCloseClass)
   }, [_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", EFilePickervue_type_template_id_384e2c43_hoisted_11, EFilePickervue_type_template_id_384e2c43_hoisted_13))], 2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2), $props.counter || $props.counterLabel ? ((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", EFilePickervue_type_template_id_3ec76745_hoisted_11, EFilePickervue_type_template_id_3ec76745_hoisted_13))], 2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2), $props.counter || $props.counterLabel ? ((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.containerFileInfoClass)
-  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($options.formattedFileInfo), 3)) : (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_384e2c43_hoisted_14, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($data.messageError), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($options.formattedFileInfo), 3)) : (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_3ec76745_hoisted_14, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($data.messageError), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $props.onlyRead ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_EFileViewer, {
+    key: 2,
+    data: $data.fileToview,
+    fileName: $data.nameFile,
+    extention: $data.extensionFile,
+    onClose: _cache[3] || (_cache[3] = $event => $data.fileToview = null)
+  }, null, 8, ["data", "fileName", "extention"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
 }
-;// CONCATENATED MODULE: ./src/ui/components/filePicker/EFilePicker.vue?vue&type=template&id=384e2c43
+;// CONCATENATED MODULE: ./src/ui/components/filePicker/EFilePicker.vue?vue&type=template&id=3ec76745
 
 ;// 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
 
 
+
 /* harmony default export */ var EFilePickervue_type_script_lang_js = ({
   name: 'EFilePicker',
+  EFileViewer: EFileViewer,
   mixins: [(mixins_default())],
   props: {
     /**
@@ -29454,12 +29686,23 @@ function EFilePickervue_type_template_id_384e2c43_render(_ctx, _cache, $props, $
       type: String,
       default: 'Se ha alcanzado el número máximo de archivos permitidos',
       description: 'Mensaje para indicar al usuario cuando el número máximo total de archivos fue alcanzado.'
+    },
+    /**
+     * 'Bandera para indicar si funcionaran como previzualizador de documentos'
+     */
+    onlyRead: {
+      type: Boolean,
+      default: false,
+      description: 'Bandera para indicar si funcionaran como previzualizador de documentos'
     }
   },
   data() {
     return {
       messageError: null,
-      selectedFiles: []
+      selectedFiles: [],
+      fileToview: null,
+      nameFile: null,
+      extensionFile: null
     };
   },
   computed: {
@@ -29513,7 +29756,7 @@ function EFilePickervue_type_template_id_384e2c43_render(_ctx, _cache, $props, $
       return [this.$slots.fileDescription ? 'exos-flex exos-flex-col' : ''];
     },
     labelClass() {
-      const dynamicLabelClasses = ['e-inputFile__labelClass', this.textSize ? 'textSize-' + this.textSize : 'textSize-def', this.messageError ? ['exos-text-danger'] : [this.labelColorNV + ' exos-text-white']];
+      const dynamicLabelClasses = ['e-inputFile__labelClass', this.textSize ? 'textSize-' + this.textSize : 'textSize-def', this.messageError ? ['exos-text-danger'] : [this.labelColorNV ?? 'exos-text-white']];
       return dynamicLabelClasses;
     },
     labelBoxClass() {
@@ -29617,6 +29860,14 @@ function EFilePickervue_type_template_id_384e2c43_render(_ctx, _cache, $props, $
         return this.validateOneFile(filterRules);
       }
     },
+    async openFileViewer() {
+      if (this.onlyRead) {
+        let file64 = await this.convertFileToBase64(this.modelValue);
+        this.nameFile = this.modelValue.name;
+        this.fileToview = file64.split(',')[1];
+        this.extensionFile = this.modelValue.name.split('.').pop();
+      }
+    },
     validateMultipleFiles(filterRules) {
       let i = 0;
       let result = true;
@@ -29862,48 +30113,114 @@ 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_384e2c43_render]])
+const EFilePicker_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(EFilePickervue_type_script_lang_js, [['render',EFilePickervue_type_template_id_3ec76745_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/infoPanel/EInfoPanel.vue?vue&type=template&id=16de9ddc&scoped=true
+;// 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=7b85beb3
 
-const EInfoPanelvue_type_template_id_16de9ddc_scoped_true_withScopeId = n => (_pushScopeId("data-v-16de9ddc"), n = n(), _popScopeId(), n);
-const EInfoPanelvue_type_template_id_16de9ddc_scoped_true_hoisted_1 = {
-  key: 1
+const EDataDetailvue_type_template_id_7b85beb3_hoisted_1 = {
+  key: 0,
+  class: "e-dataDetail__titleContainerClass"
 };
-const EInfoPanelvue_type_template_id_16de9ddc_scoped_true_hoisted_2 = {
-  class: "exos-text-secondary exos-text-xs"
+const EDataDetailvue_type_template_id_7b85beb3_hoisted_2 = {
+  class: "e-dataDetail__contentTRClass"
 };
-const EInfoPanelvue_type_template_id_16de9ddc_scoped_true_hoisted_3 = {
+const EDataDetailvue_type_template_id_7b85beb3_hoisted_3 = {
+  key: 0
+};
+const EDataDetailvue_type_template_id_7b85beb3_hoisted_4 = {
   class: "exos-text-black exos-text-base"
 };
-function EInfoPanelvue_type_template_id_16de9ddc_scoped_true_render(_ctx, _cache, $props, $setup, $data, $options) {
+const EDataDetailvue_type_template_id_7b85beb3_hoisted_5 = {
+  key: 0,
+  class: "e-dataDetail__paginationContainerClass"
+};
+const EDataDetailvue_type_template_id_7b85beb3_hoisted_6 = {
+  class: "e-dataDetail__infoPageContainerClass"
+};
+const EDataDetailvue_type_template_id_7b85beb3_hoisted_7 = {
+  key: 0,
+  class: "e-dataDetail__footerContainerClass"
+};
+function EDataDetailvue_type_template_id_7b85beb3_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_EBtn = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("EBtn");
+  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)($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.gridContainerClass, ""])
-  }, [((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)($props.info, (item, index) => {
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", null, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.headerContainer)
+  }, [_ctx.$slots.title ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", EDataDetailvue_type_template_id_7b85beb3_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "title")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", EDataDetailvue_type_template_id_7b85beb3_hoisted_2, [_ctx.$slots.contentTR ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", EDataDetailvue_type_template_id_7b85beb3_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "contentTR")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $props.closeBtn ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_EBtn, {
+    key: 1,
+    rounded: "",
+    padding: "exos-p-1",
+    iconName: "sym-close",
+    color: "exos-bg-white",
+    textColor: "exos-text-secondary",
+    onClick: $options.close
+  }, null, 8, ["onClick"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)])], 2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.gridContainerClass)
+  }, [((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.currentData, (item, 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
-    }, [item.slot ? ((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.detailGrid)
+    }, [!$props.modeGrid ? ((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)(item.style ?? '')
-    }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, item.slot, {}, undefined, true)], 2)) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", EInfoPanelvue_type_template_id_16de9ddc_scoped_true_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("p", EInfoPanelvue_type_template_id_16de9ddc_scoped_true_hoisted_2, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(item.label), 1), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("p", EInfoPanelvue_type_template_id_16de9ddc_scoped_true_hoisted_3, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(item.text), 1)]))]);
-  }), 128))], 2)], 2);
+      class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.labelClass)
+    }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(item.label), 3)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, `cell-name-${item.slot}`, {
+      index: index,
+      item: {
+        label: item.label,
+        value: item.value
+      },
+      data: item.field,
+      labelClass: $options.labelClass,
+      valueClass: ['exos-text-black exos-text-base']
+    }, () => [$props.modeGrid ? ((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.labelClass)
+    }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(item.label), 3)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("p", EDataDetailvue_type_template_id_7b85beb3_hoisted_4, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(item.value), 1)])], 2);
+  }), 128))], 2), this.structuredData.length > 1 ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", EDataDetailvue_type_template_id_7b85beb3_hoisted_5, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_EIcon, {
+    name: "chevron_left",
+    color: "exos-text-secondary",
+    class: "hover:exos-cursor-pointer",
+    onClick: $options.handlePrev
+  }, null, 8, ["onClick"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("p", EDataDetailvue_type_template_id_7b85beb3_hoisted_6, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($data.page + 1) + "/" + (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(this.structuredData.length), 1), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_EIcon, {
+    name: "chevron_right",
+    color: "exos-text-secondary",
+    class: "hover:exos-cursor-pointer",
+    onClick: $options.handleNext
+  }, null, 8, ["onClick"])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]), _ctx.$slots.footer ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", EDataDetailvue_type_template_id_7b85beb3_hoisted_7, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2);
 }
-;// CONCATENATED MODULE: ./src/ui/components/infoPanel/EInfoPanel.vue?vue&type=template&id=16de9ddc&scoped=true
+;// CONCATENATED MODULE: ./src/ui/components/dataDetail/EDataDetail.vue?vue&type=template&id=7b85beb3
 
-;// 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/infoPanel/EInfoPanel.vue?vue&type=script&lang=js
-/* harmony default export */ var EInfoPanelvue_type_script_lang_js = ({
-  name: 'EInfoPanel',
+;// 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/dataDetail/EDataDetail.vue?vue&type=script&lang=js
+/* harmony default export */ var EDataDetailvue_type_script_lang_js = ({
+  name: 'EDataDetail',
   props: {
     /**
-     * Información que será mostrada en el componente.
+     * Información que será mostrada en el componente
      */
-    info: {
+    data: {
+      type: [Object, Array],
+      default: () => {
+        return [];
+      },
+      description: 'Información que será mostrada en el componente.'
+    },
+    /**
+     * Recibe un layout dinámico para poder montar los campos de forma dinámica.
+     * Ejemplo:
+     * [
+     *   {
+     *     field: "fecha_intercambio",
+     *     title: "Fecha de intercambio",
+     *   },
+     * ];
+     */
+    layout: {
       type: Array,
       default: () => [],
-      description: 'Setea la dirección a la que estará orientada la información.'
+      description: 'Recibe un layout dinámico para poder montar los campos de forma dinámica.'
     },
     /**
      * Bandera para indicar que el contenido se mostrará en columnas.
@@ -29916,19 +30233,10 @@ function EInfoPanelvue_type_template_id_16de9ddc_scoped_true_render(_ctx, _cache
     /**
      * Número de columnas totales a mostrar.
      */
-    columns: {
-      type: [Number, String],
-      default: null,
-      description: 'Número de columnas totales a mostrar.'
-    },
-    /**
-     * Setea las columnas customizables.
-     * Ej:<br>columnsCustom="xs:max-sm:exos-grid-cols-2 sm:max-md:exos-grid-cols-4"
-     */
-    columnsCustom: {
+    numColumns: {
       type: String,
       default: null,
-      description: 'Setea las columnas customizables.'
+      description: 'Número de columnas totales a mostrar.'
     },
     /**
      * Setea el color del bg del componente, y se puede agregar para los modos light y dark y estados como hover.<br>
@@ -29956,38 +30264,331 @@ function EInfoPanelvue_type_template_id_16de9ddc_scoped_true_render(_ctx, _cache
       type: String,
       default: null,
       description: 'Grado de redondeo de los bordes del componente. Ej. sm, md, lg...'
+    },
+    /**
+     * Muestra u oculta el botón para cerrar el componente.
+     */
+    closeBtn: {
+      type: Boolean,
+      default: false,
+      description: 'Muestra u oculta el botón para cerrar el componente.'
     }
   },
+  data() {
+    return {
+      page: 0
+    };
+  },
   computed: {
+    currentData() {
+      return this.finalData[this.page];
+    },
+    structuredData() {
+      return Array.isArray(this.data) ? this.data : [this.data];
+    },
+    structuredLayout() {
+      return Array.isArray(this.layout) ? [...this.layout] : [];
+    },
+    finalData() {
+      if (!this.structuredData.length) {
+        return [];
+      }
+      return this.structuredData.map(data => {
+        return this.structuredLayout.map(col => {
+          return {
+            label: col.title,
+            value: this.$filters['formatInfo'](this.$filters.getFromNestedObject(data, col.field)),
+            field: data,
+            slot: col.field
+          };
+        });
+      });
+    },
     gridContainerClass() {
-      const baseClasses = ['e-infoPanel__gridContainer exos-grid exos-gap-x-1 exos-gap-y-5'];
-      const dynamicClasses = this.modeGrid ? [this.columnsCustom ? this.columnsCustom : ['xs:max-sm:exos-grid-cols-1 sm:max-md:exos-grid-cols-3', this.columns ? 'columns-' + this.columns : 'columns-1']] : '';
-      return baseClasses.concat(dynamicClasses);
+      const baseClasses = ['e-dataDetail__gridContainer'];
+      const dynamicClasses = this.numColumns + ' e-dataDetail__gridDefaultClass';
+      return this.modeGrid ? baseClasses.concat(dynamicClasses) : 'exos-flex exos-flex-col exos-w-full';
+    },
+    detailGrid() {
+      const baseClasses = ['exos-grid exos-grid-cols-2 exos-space-y-1'];
+      return this.modeGrid ? '' : baseClasses;
     },
     mainContainer() {
-      const baseClasses = ['e-infoPanel__containerClass', this.bgColor ?? 'exos-bg-field', this.shadowSize ? 'shadow-' + this.shadowSize : 'shadow-def', this.roundedSize ? 'rounded-' + this.roundedSize : 'rounded-def'];
+      const baseClasses = ['e-dataDetail__containerClass', this.bgColor ?? 'exos-bg-transparent', this.shadowSize ? 'shadow-' + this.shadowSize : 'shadow-none', this.roundedSize ? 'rounded-' + this.roundedSize : 'rounded-def'];
       return baseClasses;
+    },
+    headerContainer() {
+      const baseClasses = ['e-dataDetail__headerContainerClass'];
+      const dynamicClasses = [this.$slots.title ? 'e-dataDetail__headerContainerClass-slotTitle' : ''];
+      return baseClasses.concat(dynamicClasses);
+    },
+    labelClass() {
+      const baseClasses = ['exos-text-secondary'];
+      const dynamicClasses = [this.modeGrid ? 'exos-text-xs' : 'exos-text-sm'];
+      return baseClasses.concat(dynamicClasses);
+    }
+  },
+  methods: {
+    handlePrev() {
+      this.page = this.page > 0 ? this.page - 1 : 0;
+    },
+    handleNext() {
+      this.page = this.page < this.structuredData.length - 1 ? this.page + 1 : this.structuredData.length - 1;
+    },
+    close() {
+      /**
+       * Emite el evento 'close' cuando se hace clic en el botón del encabezado para cerrar el detalle.
+       *
+       * @event close
+       * @type {Event}
+       */
+      this.$emit('close');
     }
   }
 });
-;// CONCATENATED MODULE: ./src/ui/components/infoPanel/EInfoPanel.vue?vue&type=script&lang=js
+;// CONCATENATED MODULE: ./src/ui/components/dataDetail/EDataDetail.vue?vue&type=script&lang=js
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ui/components/infoPanel/EInfoPanel.vue?vue&type=style&index=0&id=16de9ddc&scoped=true&lang=css
-// extracted by mini-css-extract-plugin
+// 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/dataDetail/EDataDetail.vue?vue&type=custom&index=0&blockType=docs&lang=md
+var EDataDetailvue_type_custom_index_0_blockType_docs_lang_md = __webpack_require__(5299);
+var EDataDetailvue_type_custom_index_0_blockType_docs_lang_md_default = /*#__PURE__*/__webpack_require__.n(EDataDetailvue_type_custom_index_0_blockType_docs_lang_md);
+;// CONCATENATED MODULE: ./src/ui/components/dataDetail/EDataDetail.vue?vue&type=custom&index=0&blockType=docs&lang=md
+ 
+;// CONCATENATED MODULE: ./src/ui/components/dataDetail/EDataDetail.vue
 
-;// CONCATENATED MODULE: ./src/ui/components/infoPanel/EInfoPanel.vue?vue&type=style&index=0&id=16de9ddc&scoped=true&lang=css
 
-;// CONCATENATED MODULE: ./src/ui/components/infoPanel/EInfoPanel.vue
 
+/* custom blocks */
+;
+if (typeof (EDataDetailvue_type_custom_index_0_blockType_docs_lang_md_default()) === 'function') EDataDetailvue_type_custom_index_0_blockType_docs_lang_md_default()(EDataDetailvue_type_script_lang_js)
 
 
+;
+const EDataDetail_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(EDataDetailvue_type_script_lang_js, [['render',EDataDetailvue_type_template_id_7b85beb3_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=6ec1becb
 
+function ETooltipvue_type_template_id_6ec1becb_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", {
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.mainContainer)
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+    ref: "etooltipRef",
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.tooltipReferenceContainer),
+    onMouseover: _cache[0] || (_cache[0] = $event => $data.showTooltip = true),
+    onMouseleave: _cache[1] || (_cache[1] = $event => $data.showTooltip = false)
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "label")], 34), $data.showTooltip ? ((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.tooltipContainer),
+    style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)($options.computedDirection)
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.tooltip)
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 2)], 6)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2);
+}
+;// CONCATENATED MODULE: ./src/ui/components/tooltip/ETooltip.vue?vue&type=template&id=6ec1becb
+
+;// 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 = ({
+  name: 'ETooltip',
+  props: {
+    /**
+     * Dirección hacia donde se desea se muestre el tooltip.
+     * @values t, tl, tr, b, bl, br
+     */
+    displayDirection: {
+      type: String,
+      default: null,
+      description: 'Dirección hacia donde se desea se muestre el contenido del componente.'
+    },
+    /**
+     * Dirección hacia donde se justificará el contenido del tooltip.
+     * @values l, c, r
+     */
+    justifyDirection: {
+      type: String,
+      default: null,
+      description: 'Dirección hacia donde se desea se muestre el contenido del componente.'
+    },
+    /**
+     * Valor de la anchura que tomará el componente tooltip.
+     */
+    width: {
+      type: String,
+      default: null,
+      description: 'Valor de la anchura que tomará el componente tooltip.'
+    },
+    /**
+     * Valor de la anchura que tomará el componente padre que mantiene dentro al tooltip.
+     */
+    widthTooltipTrack: {
+      type: String,
+      default: null,
+      description: 'Valor de la anchura que tomará el componente padre que mantiene dentro al tooltip.'
+    },
+    /**
+     * Setea el color del bg del tooltip, y se puede agregar para los modos light y dark y estados como hover.<br>
+     * Ej:<br>bgColor="bg-gray-500 dark:bg-white hover:bg-green-300"
+     */
+    bgColor: {
+      type: String,
+      default: null,
+      description: 'Color bg del componente.'
+    },
+    /**
+     * Setea el color del texto del tooltip, y se puede agregar para los modos light y dark y estados como hover.<br>
+     * Ej:<br>textColor="text-gray-500 dark:text-white hover:text-green-300"
+     */
+    textColor: {
+      type: String,
+      default: null,
+      description: 'Color del texto del componente.'
+    },
+    /**
+     * Grado de la sombra del componente.
+     * @values none, xs, sm, md, lg, xl, xxl
+     */
+    shadowSize: {
+      type: String,
+      default: null,
+      description: 'Grado de la sombra del componente.'
+    },
+    /**
+     * Setea el grado de redondeo del botón.
+     * @values sm, md, lg, xl, xxl, full
+     */
+    roundedSize: {
+      type: String,
+      default: null,
+      description: 'Grado de redondeo de los bordes del componente. Ej. sm, md, lg...'
+    }
+  },
+  data() {
+    return {
+      showTooltip: false,
+      tooltipWidth: null,
+      showToCenter: null,
+      showToRight: null,
+      showToBottom: null
+    };
+  },
+  methods: {
+    calculateAvailableSpaceX() {
+      const rect = this.$refs.etooltipRef.getBoundingClientRect();
+      const leftSpace = rect.left;
+      const rightSpace = window.innerWidth - rect.right;
+      this.showToCenter = leftSpace > window.innerWidth / 4 && rightSpace > window.innerWidth / 4;
+      return rightSpace > rect.right ? true : false; // derecha : izquierda
+    },
+    calculateAvailableSpaceY() {
+      const rect = this.$refs.etooltipRef.getBoundingClientRect();
+      const bottomSpace = window.innerHeight - rect.bottom;
+      return bottomSpace > rect.bottom ? true : false; // abajo : arriba
+    }
+  },
+  mounted() {
+    if (this.$refs.etooltipRef) {
+      this.tooltipWidth = this.$refs.etooltipRef.offsetWidth;
+      this.showToRight = this.calculateAvailableSpaceX();
+      this.showToBottom = this.calculateAvailableSpaceY();
+    }
+  },
+  computed: {
+    computedDirection() {
+      const offset = `calc(100% + 10px)`;
+      const halfOffset = {
+        top: '50%',
+        transform: 'translateY(-50%)'
+      };
+      const directions = {
+        t: {
+          bottom: offset
+        },
+        tl: {
+          bottom: offset,
+          right: offset
+        },
+        tr: {
+          bottom: offset,
+          left: offset
+        },
+        b: {
+          top: offset
+        },
+        bl: {
+          top: offset,
+          right: offset
+        },
+        br: {
+          top: offset,
+          left: offset
+        },
+        l: {
+          ...halfOffset,
+          right: offset
+        },
+        r: {
+          ...halfOffset,
+          left: offset
+        }
+      };
+      if (this.displayDirection) {
+        return directions[this.displayDirection];
+      } else {
+        switch (true) {
+          case this.showToCenter && this.showToBottom:
+            return directions['b'];
+          case this.showToCenter && !this.showToBottom:
+            return directions['t'];
+          case this.showToRight && this.showToBottom:
+            return directions['br'];
+          case this.showToRight && !this.showToBottom:
+            return directions['tr'];
+          case !this.showToRight && this.showToBottom:
+            return directions['bl'];
+          case !this.showToRight && !this.showToBottom:
+            return directions['tl'];
+        }
+      }
+      return directions['b'];
+    },
+    mainContainer() {
+      const baseClasses = ['e-tooltip__mainContainer'];
+      return baseClasses;
+    },
+    tooltipReferenceContainer() {
+      const baseClasses = ['exos-w-full hover:exos-cursor-pointer'];
+      return baseClasses;
+    },
+    tooltipContainer() {
+      const baseClasses = ['e-tooltip__tooltipContainerClass'];
+      const dynamicClasses = [this.widthTooltipTrack ?? 'exos-w-[70vw]', this.justifyDirection ? ['justify-' + this.justifyDirection, this.displayDirection ? 'show-to-' + this.displayDirection : 'show-to-b'] : [this.showToCenter ? 'justify-c' : [this.showToRight ? 'justify-l' : 'justify-r']]];
+      return baseClasses.concat(dynamicClasses);
+    },
+    tooltip() {
+      const baseClasses = ['e-tooltip__tooltip', this.bgColor ?? 'exos-bg-secondary', this.textColor ?? 'exos-text-white', this.width ?? 'exos-w-fit', this.shadowSize ? 'shadow-' + this.shadowSize : 'shadow-def', this.roundedSize ? 'rounded-' + this.roundedSize : 'rounded-def'];
+      return baseClasses;
+    }
+  }
+});
+;// CONCATENATED MODULE: ./src/ui/components/tooltip/ETooltip.vue?vue&type=script&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/tooltip/ETooltip.vue?vue&type=custom&index=0&blockType=docs&lang=md
+var ETooltipvue_type_custom_index_0_blockType_docs_lang_md = __webpack_require__(6877);
+var ETooltipvue_type_custom_index_0_blockType_docs_lang_md_default = /*#__PURE__*/__webpack_require__.n(ETooltipvue_type_custom_index_0_blockType_docs_lang_md);
+;// CONCATENATED MODULE: ./src/ui/components/tooltip/ETooltip.vue?vue&type=custom&index=0&blockType=docs&lang=md
+ 
+;// CONCATENATED MODULE: ./src/ui/components/tooltip/ETooltip.vue
+
+
+
+/* custom blocks */
 ;
+if (typeof (ETooltipvue_type_custom_index_0_blockType_docs_lang_md_default()) === 'function') ETooltipvue_type_custom_index_0_blockType_docs_lang_md_default()(ETooltipvue_type_script_lang_js)
 
 
-const EInfoPanel_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(EInfoPanelvue_type_script_lang_js, [['render',EInfoPanelvue_type_template_id_16de9ddc_scoped_true_render],['__scopeId',"data-v-16de9ddc"]])
+;
+const ETooltip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(ETooltipvue_type_script_lang_js, [['render',ETooltipvue_type_template_id_6ec1becb_render]])
 
-/* harmony default export */ var EInfoPanel = (EInfoPanel_exports_);
+/* harmony default export */ var ETooltip = (ETooltip_exports_);
 ;// CONCATENATED MODULE: ./src/components/plugins/loading.js
 function createLoadingHTML(config) {
   const color = config?.color ?? '#FAFAFA';
@@ -30099,6 +30700,8 @@ const loading = {
 
 
 
+
+
 
 
 
@@ -30121,6 +30724,7 @@ const ExosLibraryComponents = {
     app.component('EPaginationTable', EPaginationTable);
     app.component('ESelect', ESelect);
     app.component('ETable', ETable);
+    app.component('ETab', ETab);
     app.component('ECollapse', ECollapse);
     app.component('ESwitch', ESwitch);
     app.component('EDialog', EDialog);
@@ -30133,7 +30737,8 @@ const ExosLibraryComponents = {
     app.component('ECheckbox', ECheckbox);
     app.component('ERadio', ERadio);
     app.component('EFilePicker', EFilePicker);
-    app.component('EInfoPanel', EInfoPanel);
+    app.component('EDataDetail', EDataDetail);
+    app.component('ETooltip', ETooltip);
     app.provide('$loading', loading);
     app.provide('$notify', notify);
     app.provide('$showMessage', message);