@alexochihua/exos-library-components 2.24.0 → 2.25.0

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

@@ -23452,6 +23452,13 @@ module.exports = {}
 
 /***/ }),
 
+/***/ 11031:
+/***/ (function(module) {
+
+module.exports = {}
+
+/***/ }),
+
 /***/ 79306:
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
@@ -27413,6 +27420,14 @@ const ECheckboxvue_type_script_setup_true_lang_js_hoisted_1 = {
       type: Boolean,
       default: false
     },
+    /**
+     * Setea el tamaño del icono.
+     * @values Ver docs de EIcon, para saber los tamaños que se pueden usar
+     */
+    iconSize: {
+      type: String,
+      default: null
+    },
     /**
      * Color de fondo cuando está seleccionado
      * @values 'bg-primary' - fondo primario, 'bg-success' - fondo de éxito, 'bg-gray-500 dark:bg-white' - fondo responsivo
@@ -27502,7 +27517,8 @@ const ECheckboxvue_type_script_setup_true_lang_js_hoisted_1 = {
       return {
         name: icon,
         textColor,
-        fill
+        fill,
+        size: props.iconSize
       };
     });
     const sizeInnerComputed = use_size(props);
@@ -27544,8 +27560,9 @@ const ECheckboxvue_type_script_setup_true_lang_js_hoisted_1 = {
         key: 0,
         name: iconInfo.value.name,
         color: iconInfo.value.textColor,
-        fill: iconInfo.value.fill
-      }, null, 8, ["name", "color", "fill"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 6), __props.label || (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.unref)(slots).default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", ECheckboxvue_type_script_setup_true_lang_js_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(__props.label), 1)])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2);
+        fill: iconInfo.value.fill,
+        size: iconInfo.value.size
+      }, null, 8, ["name", "color", "fill", "size"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 6), __props.label || (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.unref)(slots).default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", ECheckboxvue_type_script_setup_true_lang_js_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(__props.label), 1)])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2);
     };
   }
 });
@@ -54382,6 +54399,605 @@ if (typeof (EStepTrackervue_type_custom_index_0_blockType_docs_lang_md_default()
 const EStepTracker_exports_ = EStepTrackervue_type_script_setup_true_lang_js;
 
 /* harmony default export */ var EStepTracker = (EStepTracker_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/tree/ETree.vue?vue&type=script&setup=true&lang=js
+
+
+const ETreevue_type_script_setup_true_lang_js_hoisted_1 = {
+  class: "e-tree",
+  "data-testid": "tree-cy"
+};
+const ETreevue_type_script_setup_true_lang_js_hoisted_2 = {
+  class: "e-tree__container"
+};
+const ETreevue_type_script_setup_true_lang_js_hoisted_3 = ["onClick"];
+const ETreevue_type_script_setup_true_lang_js_hoisted_4 = {
+  key: 0,
+  class: "e-tree__horizontal-line",
+  "aria-hidden": "true"
+};
+const ETreevue_type_script_setup_true_lang_js_hoisted_5 = ["onClick"];
+const ETreevue_type_script_setup_true_lang_js_hoisted_6 = {
+  key: 0,
+  class: "e-tree__checkbox"
+};
+const ETreevue_type_script_setup_true_lang_js_hoisted_7 = {
+  key: 0,
+  class: "e-tree__node-icon"
+};
+const ETreevue_type_script_setup_true_lang_js_hoisted_8 = {
+  class: "e-tree__node-label"
+};
+const ETreevue_type_script_setup_true_lang_js_hoisted_9 = {
+  class: "e-tree__node-label-text"
+};
+const ETreevue_type_script_setup_true_lang_js_hoisted_10 = {
+  key: 0,
+  class: "e-tree__node-label-description"
+};
+const ETreevue_type_script_setup_true_lang_js_hoisted_11 = {
+  key: 0,
+  class: "e-tree__node-body"
+};
+const ETreevue_type_script_setup_true_lang_js_hoisted_12 = {
+  key: 1,
+  class: "e-tree__children"
+};
+
+/* harmony default export */ var ETreevue_type_script_setup_true_lang_js = ({
+  __name: 'ETree',
+  props: {
+    /**
+     * Array de nodos que define la estructura del árbol. Consulta la sección de documentación para ver la estructura y ejemplos detallados.
+     * @values [{ value: string, label: string, children: array, disabled: boolean, expanded: boolean, icon: string, description: string, header: string, body: string }]
+     */
+    nodes: {
+      type: Array,
+      required: true,
+      default: () => []
+    },
+    /**
+     * Array de valores de nodos seleccionados
+     * @values ['node1', 'node2', 'node3']
+     */
+    ticked: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * Estrategia de selección para los checkboxes
+     * @values 'none' - sin checkboxes, 'leaf' - solo hojas, 'leaf-filtered' - hojas filtradas, 'strict' - nodo específico
+     */
+    tickStrategy: {
+      type: String,
+      default: 'none',
+      validator: value => ['none', 'leaf', 'leaf-filtered', 'strict'].includes(value)
+    },
+    /**
+     * Color de fondo para nodos seleccionados en estrategia leaf
+     * @values 'bg-red-500' - rojo, 'bg-green-500' - verde, 'bg-purple-500' - púrpura
+     */
+    tickedColor: {
+      type: String,
+      default: null
+    },
+    /**
+     * Color de fondo para nodos con selección parcial (guión medio) en estrategia leaf
+     * @values 'bg-red-500' - rojo, 'bg-green-500' - verde, 'bg-purple-500' - púrpura
+     */
+    tickedPartialColor: {
+      type: String,
+      default: null
+    },
+    /**
+     * Tamaño del icono de los nodos
+     * @values 'xs' - extra pequeño, 'sm' - pequeño, 'md' - mediano, 'lg' - grande
+     */
+    iconSize: {
+      type: String,
+      default: null
+    },
+    /**
+     * Color del icono de los nodos
+     * @values 'text-red-500' - rojo, 'text-green-500' - verde, 'text-purple-500' - púrpura
+     */
+    iconColor: {
+      type: String,
+      default: null
+    },
+    /**
+     * Nodo padre para el contexto de recursión
+     * @ignore
+     */
+    parentNode: {
+      type: Object,
+      default: null
+    },
+    /**
+     * Array de valores de nodos expandidos
+     * @ignore
+     */
+    expanded: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: [
+  /**
+   * Emitido cuando cambia el estado de expansión de los nodos
+   * @values ['node1', 'node2', 'node3']
+   */
+  'expanded',
+  /**
+   * Emitido cuando se selecciona un nodo
+   * @values { value: string, label: string, children: array }
+   */
+  'selected',
+  /**
+   * Emitido cuando cambia el estado de selección de los checkboxes
+   * @values ['node1', 'node2', 'node3']
+   */
+  'ticked'],
+  setup(__props, {
+    expose: __expose,
+    emit: __emit
+  }) {
+    const props = __props;
+    const emit = __emit;
+    const instance = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.getCurrentInstance)();
+    const $slots = instance?.slots;
+
+    // Estado reactivo
+    const localExpanded = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(props.expanded ? [...props.expanded] : []);
+    const localTicked = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(props.ticked ? [...props.ticked] : []);
+
+    // Computed properties
+    const processedNodes = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => {
+      return processNodesWithDisabled(props.nodes);
+    });
+    const iconConfig = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => {
+      return {
+        size: props.iconSize || 'xs',
+        color: props.iconColor || 'e-tree__node-icon'
+      };
+    });
+
+    // Watchers
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.watch)(() => props.expanded, newVal => {
+      localExpanded.value = [...newVal];
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.watch)(() => props.ticked, newVal => {
+      localTicked.value = [...newVal];
+    });
+
+    // Métodos
+    const processNodesWithDisabled = nodes => {
+      return nodes.map(node => {
+        const processedNode = {
+          ...node
+        };
+
+        // Si el nodo padre está deshabilitado, este nodo también debe estar deshabilitado
+        if (props.parentNode && props.parentNode.disabled) {
+          processedNode.disabled = true;
+        }
+
+        // Si el nodo actual está deshabilitado y tiene hijos, propagar disabled a todos los hijos
+        if (processedNode.disabled && hasChildren(processedNode)) {
+          processedNode.children = processNodesWithDisabled(processedNode.children);
+        } else if (hasChildren(processedNode)) {
+          // Si no está deshabilitado pero tiene hijos, procesar recursivamente
+          processedNode.children = processNodesWithDisabled(processedNode.children);
+        }
+        return processedNode;
+      });
+    };
+    const hasChildren = node => {
+      return node?.children && node?.children.length > 0;
+    };
+    const isDisabled = node => {
+      return node?.disabled === true;
+    };
+    const getNodeContentClasses = node => {
+      const disabled = isDisabled(node);
+      const hoverClasses = disabled ? 'e-tree__node-content--hover--disabled' : 'e-tree__node-content--hover--enabled';
+      const disabledClasses = disabled ? 'e-tree__node-content--disabled' : '';
+      return [hoverClasses, disabledClasses];
+    };
+    const handleSelected = node => {
+      if (isDisabled(node)) return;
+      emit('selected', node);
+    };
+    const isExpanded = node => {
+      return localExpanded.value.includes(node?.value);
+    };
+    const isTicked = node => {
+      if (props.tickStrategy === 'none') return false;
+      const nodeValue = node?.value;
+      if (props.tickStrategy === 'strict') {
+        return localTicked.value.includes(nodeValue);
+      } else {
+        if (!hasChildren(node)) {
+          return localTicked.value.includes(nodeValue);
+        } else {
+          const leafNodes = getLeafNodes(node?.children);
+          return leafNodes.length > 0 && leafNodes.every(leaf => localTicked.value.includes(leaf.value));
+        }
+      }
+    };
+    const toggleNode = node => {
+      if (!hasChildren(node) || isDisabled(node)) return;
+      const nodeValue = node?.value;
+      const newExpanded = [...localExpanded.value];
+      if (isExpanded(node)) {
+        // Contraer (ya está en el array)
+        const index = newExpanded.indexOf(nodeValue);
+        if (index !== -1) {
+          newExpanded.splice(index, 1);
+        }
+      } else {
+        // Expandir (no está en el array)
+        newExpanded.push(nodeValue);
+      }
+      localExpanded.value = [...newExpanded];
+      emit('expanded', localExpanded.value);
+    };
+    const toggleTicked = node => {
+      if (props.tickStrategy === 'none' || isDisabled(node)) return;
+      const newTicked = [...localTicked.value];
+      if (isTicked(node)) {
+        // Desmarcar nodo y sus hijos
+        untickNode(node, newTicked);
+      } else {
+        // Marcar nodo y sus hijos según la estrategia
+        tickNode(node, newTicked);
+      }
+      localTicked.value = [...newTicked];
+      emit('ticked', localTicked.value);
+    };
+    const getLeafNodes = nodes => {
+      const leafNodes = [];
+      nodes.forEach(node => {
+        // Si el nodo tiene hijos, obtener los nodos hojas de los hijos
+        if (hasChildren(node)) {
+          // Agregar los nodos hojas de los hijos al array de nodos hojas con el método recursivo
+          leafNodes.push(...getLeafNodes(node?.children));
+        } else {
+          // Si el nodo no tiene hijos, agregar el nodo al array de nodos hojas
+          leafNodes.push(node);
+        }
+      });
+      return leafNodes;
+    };
+    const tickNode = (node, tickedArray) => {
+      const nodeValue = node?.value;
+      if (props.tickStrategy === 'leaf' || props.tickStrategy === 'leaf-filtered') {
+        // Solo marcar hojas
+        if (!hasChildren(node)) {
+          if (!tickedArray.includes(nodeValue)) {
+            tickedArray.push(nodeValue);
+          }
+        } else {
+          // Marcar todas las hojas hijas
+          const leafNodes = getLeafNodes(node?.children);
+          leafNodes.forEach(leaf => {
+            const leafValue = leaf?.value;
+            if (!tickedArray.includes(leafValue)) {
+              tickedArray.push(leafValue);
+            }
+          });
+        }
+      } else if (props.tickStrategy === 'strict') {
+        // Marcar solo el nodo actual (sin propagar a hijos)
+        if (!tickedArray.includes(nodeValue)) {
+          tickedArray.push(nodeValue);
+        }
+      }
+    };
+    const untickNode = (node, tickedArray) => {
+      const nodeValue = node?.value;
+      if (props.tickStrategy === 'strict') {
+        // Desmarcar solo el nodo actual (sin propagar a hijos)
+        const index = tickedArray.indexOf(nodeValue);
+        if (index > -1) {
+          tickedArray.splice(index, 1);
+        }
+      } else {
+        // Para otras estrategias, desmarcar solo hojas
+        if (!hasChildren(node)) {
+          const index = tickedArray.indexOf(nodeValue);
+          if (index > -1) {
+            tickedArray.splice(index, 1);
+          }
+        } else {
+          // Desmarcar todas las hojas hijas
+          const leafNodes = getLeafNodes(node?.children);
+          leafNodes.forEach(leaf => {
+            const leafValue = leaf?.value;
+            const index = tickedArray.indexOf(leafValue);
+            if (index > -1) {
+              tickedArray.splice(index, 1);
+            }
+          });
+        }
+      }
+    };
+
+    // Método para verificar si todos los hijos de un nodo están seleccionados
+    const areAllChildrenSelected = node => {
+      if (!hasChildren(node)) return false;
+      const leafNodes = getLeafNodes(node?.children);
+      return leafNodes.length > 0 && leafNodes.every(leaf => localTicked.value.includes(leaf.value));
+    };
+
+    // Método para verificar si algunos hijos de un nodo están seleccionados
+    const areSomeChildrenSelected = node => {
+      if (!hasChildren(node)) return false;
+      const leafNodes = getLeafNodes(node?.children);
+      return leafNodes.length > 0 && leafNodes.some(leaf => localTicked.value.includes(leaf.value));
+    };
+
+    // Método para obtener el icono de check según la estrategia y estado
+    const getCheckIcon = node => {
+      // Para estrategia strict, usar el icono por defecto
+      if (props.tickStrategy === 'strict') {
+        return null; // Usar el icono por defecto
+      }
+
+      // Para estrategia leaf
+      if (props.tickStrategy === 'leaf' || props.tickStrategy === 'leaf-filtered') {
+        if (hasChildren(node)) {
+          // Es un nodo padre
+          if (isTicked(node)) {
+            // Si está completamente seleccionado, verificar el estado de los hijos
+            if (areAllChildrenSelected(node)) {
+              // Todos los hijos seleccionados - mostrar check
+              return 'sym-check';
+            } else if (areSomeChildrenSelected(node)) {
+              // Algunos hijos seleccionados - mostrar guión medio
+              return 'sym-remove';
+            }
+          } else if (areSomeChildrenSelected(node)) {
+            // Si no está completamente seleccionado pero algunos hijos están seleccionados
+            // Mostrar guión medio para indicar selección parcial
+            return 'sym-remove';
+          }
+        } else {
+          // Es un nodo hoja - usar check normal
+          return 'sym-check';
+        }
+      }
+      return null; // Usar el icono por defecto
+    };
+
+    // Método para obtener el icono cuando no está seleccionado
+    const getUncheckedIcon = node => {
+      // Para estrategia leaf, mostrar guión medio si algunos hijos están seleccionados
+      if ((props.tickStrategy === 'leaf' || props.tickStrategy === 'leaf-filtered') && hasChildren(node) && areSomeChildrenSelected(node) && !isTicked(node)) {
+        return 'sym-remove';
+      }
+      return null; // No mostrar icono por defecto
+    };
+
+    // Método para obtener el color del check según el estado
+    const getCheckColor = node => {
+      // Para estrategia leaf
+      if ((props.tickStrategy === 'leaf' || props.tickStrategy === 'leaf-filtered') && hasChildren(node)) {
+        // Si el nodo padre tiene algunos hijos seleccionados (muestra guión medio)
+        // o si está completamente seleccionado, usar color personalizado o por defecto
+        if (areSomeChildrenSelected(node) || isTicked(node)) {
+          return props.tickedColor || 'exos-bg-primary';
+        }
+      }
+
+      // Para otros casos, usar el color por defecto
+      return null;
+    };
+
+    // Método para obtener el color del uncheck según el estado
+    const getUncheckColor = node => {
+      // Para estrategia leaf
+      if ((props.tickStrategy === 'leaf' || props.tickStrategy === 'leaf-filtered') && hasChildren(node) && areSomeChildrenSelected(node) && !isTicked(node)) {
+        // Si el nodo padre no está completamente seleccionado pero tiene algunos hijos
+        // usar color personalizado o por defecto para el guión medio
+        return props.tickedPartialColor || 'exos-bg-primary';
+      }
+
+      // Para otros casos, usar el color por defecto
+      return null;
+    };
+
+    // Método para recolectar todos los nodos expandidos de forma recursiva
+    const collectExpandedNodes = nodes => {
+      const expandedNodes = [];
+      const stack = [...nodes];
+      while (stack.length > 0) {
+        const node = stack.pop();
+        if (node.expanded) {
+          expandedNodes.push(node.value);
+        }
+        if (hasChildren(node)) {
+          stack.push(...node.children);
+        }
+      }
+      return expandedNodes;
+    };
+    const handleExpanded = expandedNodes => {
+      localExpanded.value = expandedNodes;
+      emit('expanded', expandedNodes);
+    };
+    const handleTicked = tickedNodes => {
+      localTicked.value = tickedNodes;
+      emit('ticked', tickedNodes);
+    };
+
+    // Lifecycle
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.onMounted)(() => {
+      if (localExpanded.value.length == 0) {
+        // Recolectar todos los nodos expandidos de forma recursiva
+        const expandedNodes = collectExpandedNodes(props.nodes);
+        localExpanded.value = expandedNodes;
+        emit('expanded', localExpanded.value);
+      }
+    });
+
+    // Expose methods
+    __expose({
+      /**
+       * Expande un nodo específico por su valor. Parámetro: nodeValue (string)
+       */
+      expandNode: nodeValue => {
+        if (!localExpanded.value.includes(nodeValue)) {
+          localExpanded.value.push(nodeValue);
+          emit('expanded', localExpanded.value);
+        }
+      },
+      /**
+       * Contrae un nodo específico por su valor. Parámetro: nodeValue (string)
+       */
+      collapseNode: nodeValue => {
+        const index = localExpanded.value.indexOf(nodeValue);
+        if (index !== -1) {
+          localExpanded.value.splice(index, 1);
+          emit('expanded', localExpanded.value);
+        }
+      },
+      /**
+       * Muestra todos los nodos del árbol. Sin parámetros.
+       */
+      showAll: () => {
+        const allNodes = [];
+        const collectAllNodes = nodes => {
+          nodes.forEach(node => {
+            allNodes.push(node.value);
+            if (hasChildren(node)) {
+              collectAllNodes(node.children);
+            }
+          });
+        };
+        collectAllNodes(props.nodes);
+        localExpanded.value = allNodes;
+        emit('expanded', localExpanded.value);
+      },
+      /**
+       * Cierra todos los nodos del árbol. Sin parámetros.
+       */
+      closeAll: () => {
+        localExpanded.value = [];
+        emit('expanded', localExpanded.value);
+      },
+      /**
+       * Marca (ticked) un nodo específico por su valor. Parámetro: nodeValue (string)
+       */
+      tickNode: nodeValue => {
+        const newTicked = [...localTicked.value];
+        if (!newTicked.includes(nodeValue)) {
+          newTicked.push(nodeValue);
+          emit('ticked', newTicked);
+        }
+      },
+      /**
+       * Desmarca (unticked) un nodo específico por su valor. Parámetro: nodeValue (string)
+       */
+      untickNode: nodeValue => {
+        const newTicked = [...localTicked.value];
+        const index = newTicked.indexOf(nodeValue);
+        if (index > -1) {
+          newTicked.splice(index, 1);
+          emit('ticked', newTicked);
+        }
+      }
+    });
+    return (_ctx, _cache) => {
+      const _component_e_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("e-icon");
+      const _component_e_checkbox = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("e-checkbox");
+      const _component_e_tree = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("e-tree", true);
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", ETreevue_type_script_setup_true_lang_js_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ETreevue_type_script_setup_true_lang_js_hoisted_2, [((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)(processedNodes.value, (node, idx) => {
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
+          key: node.value,
+          class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(["e-tree__node", {
+            'e-tree__node--is-item': idx !== processedNodes.value.length - 1,
+            'e-tree__node--is-parent': !__props.parentNode
+          }])
+        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+          class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(["e-tree__node-content", {
+            'e-tree__node-content--is-last-item': idx === processedNodes.value.length - 1,
+            'e-tree__node-content--no-border': !__props.parentNode
+          }]),
+          "data-testid": "tree-select-cy",
+          onClick: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => handleSelected(node), ["stop"])
+        }, [__props.parentNode ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", ETreevue_type_script_setup_true_lang_js_hoisted_4)) : (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)([getNodeContentClasses(node), "e-tree__node-content-wrapper exos-flex exos-flex-1 exos-items-center exos-py-2 exos-gap-1.5 exos-pl-1.5 exos-rounded-md hover:exos-bg-neutralLightGrey exos-transition-colors exos-duration-200"])
+        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+          class: "e-tree__expand-icon",
+          "data-testid": "tree-toggle-cy",
+          onClick: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => toggleNode(node), ["stop"])
+        }, [hasChildren(node) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_e_icon, {
+          key: 0,
+          name: isExpanded(node) ? 'sym-arrow_drop_down' : 'sym-arrow_right'
+        }, null, 8, ["name"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 8, ETreevue_type_script_setup_true_lang_js_hoisted_5), __props.tickStrategy !== 'none' ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", ETreevue_type_script_setup_true_lang_js_hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_e_checkbox, {
+          modelValue: node?.disabled ? false : isTicked(node),
+          checkedIcon: getCheckIcon(node),
+          uncheckedIcon: getUncheckedIcon(node),
+          checkColor: getCheckColor(node),
+          uncheckColor: getUncheckColor(node),
+          size: "14px",
+          iconSize: "10px",
+          "data-testid": "tree-checkbox-cy",
+          "onUpdate:modelValue": $event => toggleTicked(node)
+        }, null, 8, ["modelValue", "checkedIcon", "uncheckedIcon", "checkColor", "uncheckColor", "onUpdate:modelValue"])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), node?.header && (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.unref)($slots)[`header-${node?.header}`] ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, `header-${node?.header}`, {
+          key: 1,
+          node: node,
+          allNodes: processedNodes.value
+        }) : ((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, {
+          key: 2
+        }, [node?.icon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", ETreevue_type_script_setup_true_lang_js_hoisted_7, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_e_icon, {
+          name: node?.icon,
+          size: iconConfig.value.size,
+          color: iconConfig.value.color
+        }, null, 8, ["name", "size", "color"])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ETreevue_type_script_setup_true_lang_js_hoisted_8, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ETreevue_type_script_setup_true_lang_js_hoisted_9, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(node.label), 1), node?.description ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", ETreevue_type_script_setup_true_lang_js_hoisted_10, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(node.description), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)])], 64))], 2)], 10, ETreevue_type_script_setup_true_lang_js_hoisted_3), node?.body && (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.unref)($slots)[`body-${node.body}`] ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", ETreevue_type_script_setup_true_lang_js_hoisted_11, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, `body-${node.body}`, {
+          node: node,
+          allNodes: processedNodes.value
+        })])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), hasChildren(node) && isExpanded(node) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", ETreevue_type_script_setup_true_lang_js_hoisted_12, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_e_tree, {
+          nodes: node.children,
+          parentNode: node,
+          tickStrategy: __props.tickStrategy,
+          ticked: localTicked.value,
+          expanded: localExpanded.value,
+          onTicked: handleTicked,
+          onExpanded: handleExpanded,
+          onSelected: _cache[0] || (_cache[0] = $event => _ctx.$emit('selected', $event))
+        }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createSlots)({
+          _: 2
+        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderList)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.unref)($slots), (slotFn, name) => {
+          return {
+            name: name,
+            fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(slotProps => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, name, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+              ref_for: true
+            }, slotProps))])
+          };
+        })]), 1032, ["nodes", "parentNode", "tickStrategy", "ticked", "expanded"])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2);
+      }), 128))])]);
+    };
+  }
+});
+;// CONCATENATED MODULE: ./src/ui/components/tree/ETree.vue?vue&type=script&setup=true&lang=js
+ 
+// EXTERNAL MODULE: ./node_modules/vue-cli-plugin-styleguidist/empty-object-loader.js!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ui/components/tree/ETree.vue?vue&type=custom&index=0&blockType=docs&lang=md
+var ETreevue_type_custom_index_0_blockType_docs_lang_md = __webpack_require__(11031);
+var ETreevue_type_custom_index_0_blockType_docs_lang_md_default = /*#__PURE__*/__webpack_require__.n(ETreevue_type_custom_index_0_blockType_docs_lang_md);
+;// CONCATENATED MODULE: ./src/ui/components/tree/ETree.vue?vue&type=custom&index=0&blockType=docs&lang=md
+ 
+;// CONCATENATED MODULE: ./src/ui/components/tree/ETree.vue
+
+
+/* custom blocks */
+;
+if (typeof (ETreevue_type_custom_index_0_blockType_docs_lang_md_default()) === 'function') ETreevue_type_custom_index_0_blockType_docs_lang_md_default()(ETreevue_type_script_setup_true_lang_js)
+
+
+const ETree_exports_ = ETreevue_type_script_setup_true_lang_js;
+
+/* harmony default export */ var ETree = (ETree_exports_);
 ;// CONCATENATED MODULE: ./src/components/plugins/loading.js
 function createLoadingHTML(config) {
   const color = config?.color ?? '#FAFAFA';
@@ -54496,6 +55112,7 @@ const loading = {
 
 
 
+
 
 
 const ExosLibraryComponents = {
@@ -54534,6 +55151,7 @@ const ExosLibraryComponents = {
     app.component('EDataDetail', EDataDetail);
     app.component('ETooltip', ETooltip);
     app.component('EStepTracker', EStepTracker);
+    app.component('ETree', ETree);
     app.provide('$loading', loading);
     app.provide('$notify', notify);
     app.provide('$showMessage', message);