@alexochihua/exos-library-components 2.8.2 → 2.8.3

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

@@ -29284,36 +29284,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=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/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=13a27be4
 
-const EFilePickervue_type_template_id_3ec76745_hoisted_1 = {
+const EFilePickervue_type_template_id_13a27be4_hoisted_1 = {
   class: "exos-flex exos-w-full exos-flex-col exos-space-y-1"
 };
-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 = {
+const EFilePickervue_type_template_id_13a27be4_hoisted_2 = ["accept", "multiple", "disabled", "id"];
+const EFilePickervue_type_template_id_13a27be4_hoisted_3 = ["for"];
+const EFilePickervue_type_template_id_13a27be4_hoisted_4 = {
   key: 0
 };
-const EFilePickervue_type_template_id_3ec76745_hoisted_5 = {
+const EFilePickervue_type_template_id_13a27be4_hoisted_5 = {
   key: 0,
   class: "exos-w-full exos-space-y-1"
 };
-const EFilePickervue_type_template_id_3ec76745_hoisted_6 = {
+const EFilePickervue_type_template_id_13a27be4_hoisted_6 = {
   class: "exos-flex exos-space-x-2"
 };
-const EFilePickervue_type_template_id_3ec76745_hoisted_7 = {
+const EFilePickervue_type_template_id_13a27be4_hoisted_7 = {
   class: "e-inputFile__containerFileInfo"
 };
-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", {
+const EFilePickervue_type_template_id_13a27be4_hoisted_8 = ["onClick"];
+const EFilePickervue_type_template_id_13a27be4_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_3ec76745_hoisted_10 = [EFilePickervue_type_template_id_3ec76745_hoisted_9];
-const EFilePickervue_type_template_id_3ec76745_hoisted_11 = {
+const EFilePickervue_type_template_id_13a27be4_hoisted_10 = [EFilePickervue_type_template_id_13a27be4_hoisted_9];
+const EFilePickervue_type_template_id_13a27be4_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",
@@ -29321,24 +29321,25 @@ const EFilePickervue_type_template_id_3ec76745_hoisted_11 = {
   fill: "none",
   viewBox: "0 0 15 15"
 };
-const EFilePickervue_type_template_id_3ec76745_hoisted_12 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", {
+const EFilePickervue_type_template_id_13a27be4_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_3ec76745_hoisted_13 = [EFilePickervue_type_template_id_3ec76745_hoisted_12];
-const EFilePickervue_type_template_id_3ec76745_hoisted_14 = {
+const EFilePickervue_type_template_id_13a27be4_hoisted_13 = [EFilePickervue_type_template_id_13a27be4_hoisted_12];
+const EFilePickervue_type_template_id_13a27be4_hoisted_14 = {
   key: 1,
   class: "e-inputFile__message--error"
 };
-function EFilePickervue_type_template_id_3ec76745_render(_ctx, _cache, $props, $setup, $data, $options) {
+function EFilePickervue_type_template_id_13a27be4_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_EIcon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("EIcon");
   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", {
+  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_13a27be4_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", {
+    ref: _ctx.$.uid,
     type: "file",
     placeholder: " ",
     accept: $props.accept,
@@ -29347,26 +29348,26 @@ function EFilePickervue_type_template_id_3ec76745_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_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", {
+  }, null, 42, EFilePickervue_type_template_id_13a27be4_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_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", {
+  }, [(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_13a27be4_hoisted_4, "*")) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)])])], 2)], 10, EFilePickervue_type_template_id_13a27be4_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_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) => {
+  }, [$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_13a27be4_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_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, {
+    }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", EFilePickervue_type_template_id_13a27be4_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_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", {
+    }, 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_13a27be4_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",
@@ -29374,7 +29375,7 @@ function EFilePickervue_type_template_id_3ec76745_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_3ec76745_hoisted_10, 10, EFilePickervue_type_template_id_3ec76745_hoisted_8)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2);
+    }, EFilePickervue_type_template_id_13a27be4_hoisted_10, 10, EFilePickervue_type_template_id_13a27be4_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)
@@ -29391,10 +29392,10 @@ function EFilePickervue_type_template_id_3ec76745_render(_ctx, _cache, $props, $
     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_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", {
+  }) : ((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_13a27be4_hoisted_11, EFilePickervue_type_template_id_13a27be4_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_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, {
+  }, (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_13a27be4_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,
@@ -29402,7 +29403,7 @@ function EFilePickervue_type_template_id_3ec76745_render(_ctx, _cache, $props, $
     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=3ec76745
+;// CONCATENATED MODULE: ./src/ui/components/filePicker/EFilePicker.vue?vue&type=template&id=13a27be4
 
 ;// 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
 
@@ -29810,6 +29811,9 @@ function EFilePickervue_type_template_id_3ec76745_render(_ctx, _cache, $props, $
     if (this.register) {
       this.register(this);
     }
+    if (this.modelValue) {
+      this.handlePreloadFile(this.modelValue);
+    }
   },
   beforeUnmount() {
     // Desregistra este componente en EForm antes de destruirse
@@ -29882,10 +29886,12 @@ function EFilePickervue_type_template_id_3ec76745_render(_ctx, _cache, $props, $
             if (result !== true) {
               this.selectedFiles.splice(j, 1); // Eliminar el archivo que no cumple la validación
               this.setMessageError(result);
+              this.emitValidation(false, result);
               valid = false;
               j--; // Decrementar j para ajustar el índice después de la eliminación
             } else {
               this.reset();
+              this.emitValidation(true, 'Archivo válido');
               valid = true;
             }
           }
@@ -29910,8 +29916,10 @@ function EFilePickervue_type_template_id_3ec76745_render(_ctx, _cache, $props, $
           if (result !== true) {
             this.selectedFiles.splice(0, 1); // Eliminar el archivo que no cumple la validación
             this.setMessageError(result);
+            this.emitValidation(false, result);
             valid = false;
           } else {
+            this.emitValidation(true, 'Archivo válido');
             this.reset();
             valid = true;
           }
@@ -29924,6 +29932,12 @@ function EFilePickervue_type_template_id_3ec76745_render(_ctx, _cache, $props, $
       }
       return valid;
     },
+    emitValidation(status, message) {
+      this.$emit('validation', {
+        status: status,
+        message: message
+      });
+    },
     setMessageError(message) {
       this.messageError = message;
     },
@@ -29985,6 +29999,13 @@ function EFilePickervue_type_template_id_3ec76745_render(_ctx, _cache, $props, $
         }
       }
     },
+    /**
+     * Se llama para realizar click en el componente.
+     * @public Éste es un método público
+     */
+    showPicker() {
+      this.$refs[this.$.uid].showPicker();
+    },
     handlePreloadFile(preloadedFile) {
       if (preloadedFile) {
         this.selectedFiles.push(preloadedFile);
@@ -30114,43 +30135,67 @@ 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_3ec76745_render]])
+const EFilePicker_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(EFilePickervue_type_script_lang_js, [['render',EFilePickervue_type_template_id_13a27be4_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=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/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=3bacf87c
 
-const EDataDetailvue_type_template_id_7b85beb3_hoisted_1 = {
+const EDataDetailvue_type_template_id_3bacf87c_hoisted_1 = {
   key: 0,
   class: "e-dataDetail__titleContainerClass"
 };
-const EDataDetailvue_type_template_id_7b85beb3_hoisted_2 = {
+const EDataDetailvue_type_template_id_3bacf87c_hoisted_2 = {
   class: "e-dataDetail__contentTRClass"
 };
-const EDataDetailvue_type_template_id_7b85beb3_hoisted_3 = {
+const EDataDetailvue_type_template_id_3bacf87c_hoisted_3 = {
   key: 0
 };
-const EDataDetailvue_type_template_id_7b85beb3_hoisted_4 = {
+const EDataDetailvue_type_template_id_3bacf87c_hoisted_4 = {
   class: "exos-text-black exos-text-base"
 };
-const EDataDetailvue_type_template_id_7b85beb3_hoisted_5 = {
+const EDataDetailvue_type_template_id_3bacf87c_hoisted_5 = {
   key: 0,
   class: "e-dataDetail__paginationContainerClass"
 };
-const EDataDetailvue_type_template_id_7b85beb3_hoisted_6 = {
+const EDataDetailvue_type_template_id_3bacf87c_hoisted_6 = {
   class: "e-dataDetail__infoPageContainerClass"
 };
-const EDataDetailvue_type_template_id_7b85beb3_hoisted_7 = {
+const EDataDetailvue_type_template_id_3bacf87c_hoisted_7 = {
   key: 0,
   class: "e-dataDetail__footerContainerClass"
 };
-function EDataDetailvue_type_template_id_7b85beb3_render(_ctx, _cache, $props, $setup, $data, $options) {
+const EDataDetailvue_type_template_id_3bacf87c_hoisted_8 = {
+  key: 1
+};
+const EDataDetailvue_type_template_id_3bacf87c_hoisted_9 = {
+  key: 0,
+  class: "e-dataDetail__titleContainerClass"
+};
+const EDataDetailvue_type_template_id_3bacf87c_hoisted_10 = {
+  class: "e-dataDetail__contentTRClass"
+};
+const EDataDetailvue_type_template_id_3bacf87c_hoisted_11 = {
+  key: 0
+};
+const EDataDetailvue_type_template_id_3bacf87c_hoisted_12 = {
+  class: "exos-text-black exos-text-base"
+};
+const EDataDetailvue_type_template_id_3bacf87c_hoisted_13 = {
+  key: 0,
+  class: "e-dataDetail__paginationContainerClass"
+};
+const EDataDetailvue_type_template_id_3bacf87c_hoisted_14 = {
+  class: "e-dataDetail__infoPageContainerClass"
+};
+function EDataDetailvue_type_template_id_3bacf87c_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", {
+  return !$props.numFieldsByPage ? ((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.mainContainer)
   }, [(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, {
+  }, [_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_3bacf87c_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_3bacf87c_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_3bacf87c_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",
@@ -30179,20 +30224,62 @@ function EDataDetailvue_type_template_id_7b85beb3_render(_ctx, _cache, $props, $
     }, () => [$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, {
+    }, (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_3bacf87c_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_3bacf87c_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, {
+  }, null, 8, ["onClick"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("p", EDataDetailvue_type_template_id_3bacf87c_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);
+  }, 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_3bacf87c_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)) : ((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_3bacf87c_hoisted_8, [(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_3bacf87c_hoisted_9, [(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_3bacf87c_hoisted_10, [_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_3bacf87c_hoisted_11, [(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.structuredLayout, (itemLayout, 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.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)($options.labelClass)
+    }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(itemLayout.title), 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-${itemLayout.field}`, {
+      index: index,
+      item: {
+        label: itemLayout.title,
+        value: $props.data[itemLayout.field]
+      },
+      data: itemLayout,
+      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)(itemLayout.title), 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_3bacf87c_hoisted_12, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(_ctx.$filters['formatInfo'](_ctx.$filters.getFromNestedObject($props.data, itemLayout.field))), 1)])], 2);
+  }), 128))], 2), $options.structuredLayout.length > 1 && $props.useLayoutPagination ? ((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_3bacf87c_hoisted_13, [(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_3bacf87c_hoisted_14, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($data.pageLayout + 1) + "/" + (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($options.totalLayoutPages), 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)])]));
 }
-;// CONCATENATED MODULE: ./src/ui/components/dataDetail/EDataDetail.vue?vue&type=template&id=7b85beb3
+;// CONCATENATED MODULE: ./src/ui/components/dataDetail/EDataDetail.vue?vue&type=template&id=3bacf87c
 
 ;// 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 = ({
@@ -30223,6 +30310,22 @@ function EDataDetailvue_type_template_id_7b85beb3_render(_ctx, _cache, $props, $
       default: () => [],
       description: 'Recibe un layout dinámico para poder montar los campos de forma dinámica.'
     },
+    /**
+     * Paginación por medio del layout.
+     */
+    numFieldsByPage: {
+      type: [String, Number],
+      default: null,
+      description: 'Paginación por medio del layout.'
+    },
+    /**
+     * Bandera para mostrar los datos de forma paginada en caso de ser true, de lo contrario mostrar todos los datos.
+     */
+    useLayoutPagination: {
+      type: Boolean,
+      default: false,
+      description: 'Bandera para mostrar los datos de forma paginada en caso de ser true, de lo contrario mostrar todos los datos.'
+    },
     /**
      * Bandera para indicar que el contenido se mostrará en columnas.
      */
@@ -30277,10 +30380,14 @@ function EDataDetailvue_type_template_id_7b85beb3_render(_ctx, _cache, $props, $
   },
   data() {
     return {
-      page: 0
+      page: 0,
+      pageLayout: 0
     };
   },
   computed: {
+    totalLayoutPages() {
+      return Math.ceil(this.layout.length / this.numFieldsByPage);
+    },
     currentData() {
       return this.finalData[this.page];
     },
@@ -30288,6 +30395,19 @@ function EDataDetailvue_type_template_id_7b85beb3_render(_ctx, _cache, $props, $
       return Array.isArray(this.data) ? this.data : [this.data];
     },
     structuredLayout() {
+      if (Array.isArray(this.layout) && this.numFieldsByPage > 0 && this.useLayoutPagination) {
+        let initIndex = this.pageLayout * this.numFieldsByPage;
+        let finalIndex = initIndex + this.numFieldsByPage;
+        let paginatedlayout = this.layout.filter((col, index) => index >= initIndex && index < finalIndex);
+
+        // for (let i = 0; i < this.layout.length; i += this.numFieldsByPage) {
+        //   paginatedlayout.push(
+        //     this.layout.slice(i, i + this.numFieldsByPage)
+        //   );
+        // }
+
+        return paginatedlayout;
+      }
       return Array.isArray(this.layout) ? [...this.layout] : [];
     },
     finalData() {
@@ -30331,10 +30451,18 @@ function EDataDetailvue_type_template_id_7b85beb3_render(_ctx, _cache, $props, $
   },
   methods: {
     handlePrev() {
-      this.page = this.page > 0 ? this.page - 1 : 0;
+      if (this.numFieldsByPage) {
+        this.pageLayout = this.pageLayout > 0 ? this.pageLayout - 1 : 0;
+      } else {
+        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;
+      if (this.numFieldsByPage) {
+        this.pageLayout = this.pageLayout < this.totalLayoutPages - 1 ? this.pageLayout + 1 : this.totalLayoutPages - 1;
+      } else {
+        this.page = this.page < this.structuredData.length - 1 ? this.page + 1 : this.structuredData.length - 1;
+      }
     },
     close() {
       /**
@@ -30364,7 +30492,7 @@ 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_7b85beb3_render]])
+const EDataDetail_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(EDataDetailvue_type_script_lang_js, [['render',EDataDetailvue_type_template_id_3bacf87c_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