concepto-user-controls 0.0.8 → 0.0.9

package/fesm2022/concepto-user-controls.mjs

@@ -1,7 +1,12 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, EventEmitter, Output, Input, HostListener } from '@angular/core';
+import { Injectable, Component, EventEmitter, Output, Input, HostListener, signal, computed, ChangeDetectionStrategy, inject, ElementRef, HostBinding, Directive, effect, ViewChild, contentChild, TemplateRef } from '@angular/core';
 import * as i1 from '@angular/common';
 import { NgIf, CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { Subject, fromEvent, takeUntil } from 'rxjs';
+import { trigger, state, transition, style, animate } from '@angular/animations';
+import { debounceTime } from 'rxjs/operators';
 
 class ConceptoUserControlsService {
     constructor() { }
@@ -130,22 +135,1823 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['document:click', ['$event']]
             }] } });
 
+// lib/core/models/tree-node.model.ts
+class TreeNode {
+    // Signals for reactive state
+    isExpanded = signal(false);
+    isActive = signal(false);
+    isSelected = signal(false);
+    isFocused = signal(false);
+    isHidden = signal(false);
+    isLoading = signal(false);
+    // Computed signals
+    isCollapsed = computed(() => !this.isExpanded());
+    isLeaf = computed(() => !this.hasChildren);
+    isVisible = computed(() => !this.isHidden());
+    id;
+    data;
+    parent;
+    children = [];
+    level;
+    path;
+    index;
+    hasChildren;
+    icon;
+    constructor(data, parent, level, index, options) {
+        this.data = data;
+        this.parent = parent;
+        this.level = level;
+        this.index = index;
+        this.id = data[options.idField || 'id'];
+        this.icon = data[options.iconField || 'icon'];
+        const childrenData = data[options.childrenField || 'children'];
+        this.hasChildren = Array.isArray(childrenData) && childrenData.length > 0;
+        // Initialize expanded state
+        if (options.isExpandedField && data[options.isExpandedField]) {
+            this.isExpanded.set(true);
+        }
+        // Build path
+        this.path = parent ? [...parent.path, this.id] : [this.id];
+    }
+    // Actions
+    expand() {
+        if (this.hasChildren) {
+            this.isExpanded.set(true);
+        }
+    }
+    collapse() {
+        this.isExpanded.set(false);
+    }
+    toggle() {
+        this.isExpanded.update(value => !value);
+    }
+    setActive(value) {
+        this.isActive.set(value);
+    }
+    setSelected(value) {
+        this.isSelected.set(value);
+    }
+    setFocus(value) {
+        this.isFocused.set(value);
+    }
+    setHidden(value) {
+        this.isHidden.set(value);
+    }
+    setLoading(value) {
+        this.isLoading.set(value);
+    }
+    // Helper methods
+    ensureVisible() {
+        let node = this.parent;
+        while (node) {
+            node.expand();
+            node = node.parent;
+        }
+    }
+    setActiveAndVisible() {
+        this.ensureVisible();
+        this.setActive(true);
+    }
+    // Get all ancestors
+    getAncestors() {
+        const ancestors = [];
+        let node = this.parent;
+        while (node) {
+            ancestors.unshift(node);
+            node = node.parent;
+        }
+        return ancestors;
+    }
+    // Get all descendants
+    getDescendants() {
+        const descendants = [];
+        const traverse = (node) => {
+            node.children.forEach(child => {
+                descendants.push(child);
+                traverse(child);
+            });
+        };
+        traverse(this);
+        return descendants;
+    }
+}
+
+// lib/core/models/tree.model.ts
+class TreeModel {
+    options;
+    // Reactive state with signals
+    roots = signal([]);
+    focusedNodeId = signal(null);
+    expandedNodeIds = signal(new Set());
+    activeNodeIds = signal(new Set());
+    selectedNodeIds = signal(new Set());
+    hiddenNodeIds = signal(new Set());
+    // Computed signals
+    focusedNode = computed(() => {
+        const id = this.focusedNodeId();
+        return id ? this.getNodeById(id) : null;
+    });
+    expandedNodes = computed(() => this.getAllNodes().filter(node => this.expandedNodeIds().has(node.id)));
+    activeNodes = computed(() => this.getAllNodes().filter(node => this.activeNodeIds().has(node.id)));
+    selectedNodes = computed(() => this.getAllNodes().filter(node => this.selectedNodeIds().has(node.id)));
+    visibleNodes = computed(() => this.getAllNodes().filter(node => !node.isHidden()));
+    flattenedNodes = computed(() => {
+        const flattened = [];
+        const traverse = (nodes) => {
+            nodes.forEach(node => {
+                if (!node.isHidden()) {
+                    flattened.push(node);
+                    if (node.isExpanded() && node.children.length > 0) {
+                        traverse(node.children);
+                    }
+                }
+            });
+        };
+        traverse(this.roots());
+        return flattened;
+    });
+    // Event streams
+    events$ = new Subject();
+    // Virtual root for unified handling
+    virtualRoot = null;
+    // Node registry for quick lookup
+    nodeRegistry = new Map();
+    constructor(options) {
+        this.options = options;
+        // Constructor sin effects - se sincronizan en las operaciones
+    }
+    // Data management
+    setData(data) {
+        this.nodeRegistry.clear();
+        const roots = this.buildNodes(data, null, 0);
+        this.roots.set(roots);
+        this.emitEvent({ type: 'initialized', treeModel: this });
+    }
+    buildNodes(data, parent, level) {
+        return data.map((item, index) => {
+            const node = new TreeNode(item, parent, level, index, this.options);
+            this.nodeRegistry.set(node.id, node);
+            // Recursively build children
+            const childrenData = item[this.options.childrenField || 'children'];
+            if (Array.isArray(childrenData) && childrenData.length > 0) {
+                node.children = this.buildNodes(childrenData, node, level + 1);
+            }
+            return node;
+        });
+    }
+    update() {
+        // Trigger change detection by creating new signal values
+        this.roots.set([...this.roots()]);
+        this.emitEvent({ type: 'update', treeModel: this });
+    }
+    // Node lookup
+    getNodeById(id) {
+        return this.nodeRegistry.get(id) || null;
+    }
+    getNodeBy(predicate) {
+        return this.getAllNodes().find(predicate) || null;
+    }
+    getAllNodes() {
+        const nodes = [];
+        const traverse = (nodeList) => {
+            nodeList.forEach(node => {
+                nodes.push(node);
+                if (node.children.length > 0) {
+                    traverse(node.children);
+                }
+            });
+        };
+        traverse(this.roots());
+        return nodes;
+    }
+    // Navigation
+    focusNode(node) {
+        if (this.focusedNode()) {
+            this.focusedNode().setFocus(false);
+        }
+        if (node) {
+            this.focusedNodeId.set(node.id);
+            node.setFocus(true);
+            this.emitEvent({ type: 'focus', node });
+        }
+        else {
+            this.focusedNodeId.set(null);
+        }
+    }
+    focusNextNode() {
+        const flattened = this.flattenedNodes();
+        const currentIndex = flattened.findIndex(n => n.id === this.focusedNodeId());
+        if (currentIndex < flattened.length - 1) {
+            this.focusNode(flattened[currentIndex + 1]);
+        }
+    }
+    focusPreviousNode() {
+        const flattened = this.flattenedNodes();
+        const currentIndex = flattened.findIndex(n => n.id === this.focusedNodeId());
+        if (currentIndex > 0) {
+            this.focusNode(flattened[currentIndex - 1]);
+        }
+    }
+    focusDrillDown() {
+        const focused = this.focusedNode();
+        if (focused) {
+            if (!focused.isExpanded() && focused.hasChildren) {
+                focused.expand();
+            }
+            else if (focused.children.length > 0) {
+                this.focusNode(focused.children[0]);
+            }
+        }
+    }
+    focusDrillUp() {
+        const focused = this.focusedNode();
+        if (focused) {
+            if (focused.isExpanded() && focused.hasChildren) {
+                focused.collapse();
+            }
+            else if (focused.parent) {
+                this.focusNode(focused.parent);
+            }
+        }
+    }
+    // Operations
+    expandAll() {
+        const ids = new Set(this.getAllNodes().map(n => n.id));
+        this.expandedNodeIds.set(ids);
+        this.emitEvent({ type: 'expandAll', treeModel: this });
+    }
+    collapseAll() {
+        this.expandedNodeIds.set(new Set());
+        this.emitEvent({ type: 'collapseAll', treeModel: this });
+    }
+    expandNode(node) {
+        this.expandedNodeIds.update(ids => {
+            const newIds = new Set(ids);
+            newIds.add(node.id);
+            return newIds;
+        });
+        node.isExpanded.set(true);
+        this.emitEvent({ type: 'expand', node });
+    }
+    collapseNode(node) {
+        this.expandedNodeIds.update(ids => {
+            const newIds = new Set(ids);
+            newIds.delete(node.id);
+            return newIds;
+        });
+        node.isExpanded.set(false);
+        this.emitEvent({ type: 'collapse', node });
+    }
+    activateNode(node, multi = false) {
+        if (!multi) {
+            this.activeNodeIds.set(new Set([node.id]));
+            this.getAllNodes().forEach(n => n.isActive.set(n.id === node.id));
+        }
+        else {
+            this.activeNodeIds.update(ids => {
+                const newIds = new Set(ids);
+                newIds.add(node.id);
+                return newIds;
+            });
+            node.isActive.set(true);
+        }
+        this.emitEvent({ type: 'activate', node });
+    }
+    deactivateNode(node) {
+        this.activeNodeIds.update(ids => {
+            const newIds = new Set(ids);
+            newIds.delete(node.id);
+            return newIds;
+        });
+        node.isActive.set(false);
+        this.emitEvent({ type: 'deactivate', node });
+    }
+    selectNode(node, multi = false) {
+        if (!multi) {
+            this.selectedNodeIds.set(new Set([node.id]));
+        }
+        else {
+            this.selectedNodeIds.update(ids => {
+                const newIds = new Set(ids);
+                if (ids.has(node.id)) {
+                    newIds.delete(node.id);
+                }
+                else {
+                    newIds.add(node.id);
+                }
+                return newIds;
+            });
+        }
+        this.emitEvent({ type: 'select', node });
+    }
+    // Filtering
+    filterNodes(filterFn, autoShow = true) {
+        const hiddenIds = new Set();
+        this.getAllNodes().forEach(node => {
+            const matches = filterFn(node);
+            if (!matches) {
+                hiddenIds.add(node.id);
+            }
+            else if (autoShow) {
+                // Show ancestors of matching nodes
+                node.getAncestors().forEach(ancestor => {
+                    hiddenIds.delete(ancestor.id);
+                });
+            }
+        });
+        this.hiddenNodeIds.set(hiddenIds);
+        this.emitEvent({ type: 'filter', treeModel: this });
+    }
+    clearFilter() {
+        this.hiddenNodeIds.set(new Set());
+        this.emitEvent({ type: 'clearFilter', treeModel: this });
+    }
+    // Drag & Drop
+    canMoveNode(node, to) {
+        // Prevent moving to itself or descendants
+        if (node === to.parent)
+            return false;
+        if (to.parent.getAncestors().includes(node))
+            return false;
+        // Custom validation
+        if (this.options.allowDrop) {
+            if (typeof this.options.allowDrop === 'function') {
+                return this.options.allowDrop(node, to);
+            }
+            return this.options.allowDrop;
+        }
+        return true;
+    }
+    moveNode(node, to) {
+        if (!this.canMoveNode(node, to))
+            return;
+        // Remove from old parent
+        if (node.parent) {
+            const oldIndex = node.parent.children.indexOf(node);
+            if (oldIndex !== -1) {
+                // Create new array to trigger change detection
+                node.parent.children = [
+                    ...node.parent.children.slice(0, oldIndex),
+                    ...node.parent.children.slice(oldIndex + 1)
+                ];
+            }
+        }
+        else {
+            // Handle root nodes
+            const rootIndex = this.roots().indexOf(node);
+            if (rootIndex !== -1) {
+                this.roots.set([
+                    ...this.roots().slice(0, rootIndex),
+                    ...this.roots().slice(rootIndex + 1)
+                ]);
+            }
+        }
+        // Add to new parent - create new array to trigger change detection
+        const newChildren = [...to.parent.children];
+        newChildren.splice(to.index, 0, node);
+        to.parent.children = newChildren;
+        node.parent = to.parent;
+        // Update levels
+        this.updateNodeLevels(node);
+        this.emitEvent({ type: 'moveNode', node, to });
+        this.update();
+    }
+    updateNodeLevels(node) {
+        const newLevel = node.parent ? node.parent.level + 1 : 0;
+        node.level = newLevel;
+        node.children.forEach(child => this.updateNodeLevels(child));
+    }
+    // Async children loading
+    async loadChildren(node) {
+        if (!this.options.getChildren)
+            return;
+        node.setLoading(true);
+        try {
+            const childrenData = await this.options.getChildren(node);
+            node.children = this.buildNodes(childrenData, node, node.level + 1);
+            node.hasChildren = node.children.length > 0;
+            this.emitEvent({ type: 'loadChildren', node });
+            this.update();
+        }
+        catch (error) {
+            this.emitEvent({ type: 'loadChildrenError', node, error });
+        }
+        finally {
+            node.setLoading(false);
+        }
+    }
+    // Events
+    emitEvent(event) {
+        this.events$.next(event);
+    }
+}
+
+const DEFAULT_TREE_OPTIONS = {
+    idField: 'id',
+    childrenField: 'children',
+    displayField: 'name',
+    isExpandedField: 'isExpanded',
+    hasChildrenField: 'hasChildren',
+    iconField: 'icon',
+    allowDrag: false,
+    allowDrop: false,
+    useCheckbox: false,
+    useTriState: false,
+    levelPadding: 20,
+    useVirtualScroll: false,
+    nodeHeight: 22,
+    bufferAmount: 5,
+    animateExpand: false,
+    animateSpeed: 1,
+    animateAcceleration: 1.2,
+    scrollOnActivate: true,
+    rtl: false,
+    multiSelect: false,
+    useMetaKey: true,
+};
+
+// lib/components/tree-node-expander/tree-node-expander.component.ts
+class TreeNodeExpanderComponent {
+    node;
+    treeModel;
+    toggle = new EventEmitter();
+    onExpanderClick(event) {
+        event.stopPropagation();
+        this.toggle.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeNodeExpanderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TreeNodeExpanderComponent, isStandalone: true, selector: "tree-node-expander", inputs: { node: "node", treeModel: "treeModel" }, outputs: { toggle: "toggle" }, ngImport: i0, template: `
+    <div class="tree-node-expander"
+         [class.tree-node-expander-loading]="node.isLoading()"
+         (click)="onExpanderClick($event)">
+      @if (node.isLoading()) {
+        <span class="expander-spinner"></span>
+      } @else if (node.hasChildren) {
+        <svg 
+          class="expander-icon"
+          [class.expander-icon-expanded]="node.isExpanded()"
+          width="16" 
+          height="16" 
+          viewBox="0 0 16 16">
+          <path d="M6 4l4 4-4 4" 
+                fill="none" 
+                stroke="currentColor" 
+                stroke-width="2" 
+                stroke-linecap="round"/>
+        </svg>
+      } @else {
+        <span class="expander-placeholder"></span>
+      }
+    </div>
+  `, isInline: true, styles: [".tree-node-expander{display:flex;align-items:center;justify-content:center;width:20px;height:20px;cursor:pointer;border-radius:3px;transition:background-color .15s;flex-shrink:0}.tree-node-expander:hover{background-color:#0000000d}.expander-icon{transition:transform .2s ease;transform:rotate(0)}.expander-icon-expanded{transform:rotate(90deg)}.expander-placeholder{width:16px;height:16px}.expander-spinner{display:inline-block;width:14px;height:14px;border:2px solid #f3f3f3;border-top:2px solid #2196f3;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeNodeExpanderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tree-node-expander', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="tree-node-expander"
+         [class.tree-node-expander-loading]="node.isLoading()"
+         (click)="onExpanderClick($event)">
+      @if (node.isLoading()) {
+        <span class="expander-spinner"></span>
+      } @else if (node.hasChildren) {
+        <svg 
+          class="expander-icon"
+          [class.expander-icon-expanded]="node.isExpanded()"
+          width="16" 
+          height="16" 
+          viewBox="0 0 16 16">
+          <path d="M6 4l4 4-4 4" 
+                fill="none" 
+                stroke="currentColor" 
+                stroke-width="2" 
+                stroke-linecap="round"/>
+        </svg>
+      } @else {
+        <span class="expander-placeholder"></span>
+      }
+    </div>
+  `, styles: [".tree-node-expander{display:flex;align-items:center;justify-content:center;width:20px;height:20px;cursor:pointer;border-radius:3px;transition:background-color .15s;flex-shrink:0}.tree-node-expander:hover{background-color:#0000000d}.expander-icon{transition:transform .2s ease;transform:rotate(0)}.expander-icon-expanded{transform:rotate(90deg)}.expander-placeholder{width:16px;height:16px}.expander-spinner{display:inline-block;width:14px;height:14px;border:2px solid #f3f3f3;border-top:2px solid #2196f3;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        }], propDecorators: { node: [{
+                type: Input,
+                args: [{ required: true }]
+            }], treeModel: [{
+                type: Input,
+                args: [{ required: true }]
+            }], toggle: [{
+                type: Output
+            }] } });
+
+// lib/components/tree-node-checkbox/tree-node-checkbox.component.ts
+class TreeNodeCheckboxComponent {
+    node;
+    treeModel;
+    useTriState = false;
+    change = new EventEmitter();
+    isChecked = computed(() => {
+        return this.treeModel.selectedNodeIds().has(this.node.id);
+    });
+    isIndeterminate = computed(() => {
+        if (!this.useTriState || !this.node.hasChildren) {
+            return false;
+        }
+        const selectedIds = this.treeModel.selectedNodeIds();
+        const descendants = this.node.getDescendants();
+        if (descendants.length === 0)
+            return false;
+        const selectedCount = descendants.filter(d => selectedIds.has(d.id)).length;
+        return selectedCount > 0 && selectedCount < descendants.length;
+    });
+    onCheckboxClick(event) {
+        event.stopPropagation();
+    }
+    onCheckboxChange(event) {
+        event.stopPropagation();
+        const checked = event.target.checked;
+        if (this.useTriState) {
+            // Update node and all descendants
+            this.updateNodeAndDescendants(this.node, checked);
+        }
+        else {
+            this.change.emit(checked);
+        }
+    }
+    updateNodeAndDescendants(node, checked) {
+        this.treeModel.selectedNodeIds.update(ids => {
+            const newIds = new Set(ids);
+            if (checked) {
+                newIds.add(node.id);
+                node.getDescendants().forEach(d => newIds.add(d.id));
+            }
+            else {
+                newIds.delete(node.id);
+                node.getDescendants().forEach(d => newIds.delete(d.id));
+            }
+            return newIds;
+        });
+        this.change.emit(checked);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeNodeCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TreeNodeCheckboxComponent, isStandalone: true, selector: "tree-node-checkbox", inputs: { node: "node", treeModel: "treeModel", useTriState: "useTriState" }, outputs: { change: "change" }, ngImport: i0, template: `
+    <div class="tree-node-checkbox"
+         (click)="onCheckboxClick($event)">
+      <input 
+        type="checkbox"
+        [checked]="isChecked()"
+        [indeterminate]="isIndeterminate()"
+        (change)="onCheckboxChange($event)"
+        (click)="$event.stopPropagation()">
+    </div>
+  `, isInline: true, styles: [".tree-node-checkbox{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0}input[type=checkbox]{cursor:pointer;width:16px;height:16px;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeNodeCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tree-node-checkbox', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="tree-node-checkbox"
+         (click)="onCheckboxClick($event)">
+      <input 
+        type="checkbox"
+        [checked]="isChecked()"
+        [indeterminate]="isIndeterminate()"
+        (change)="onCheckboxChange($event)"
+        (click)="$event.stopPropagation()">
+    </div>
+  `, styles: [".tree-node-checkbox{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0}input[type=checkbox]{cursor:pointer;width:16px;height:16px;margin:0}\n"] }]
+        }], propDecorators: { node: [{
+                type: Input,
+                args: [{ required: true }]
+            }], treeModel: [{
+                type: Input,
+                args: [{ required: true }]
+            }], useTriState: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }] } });
+
+// lib/components/tree-node-content/tree-node-content.component.ts
+class TreeNodeContentComponent {
+    node;
+    treeModel;
+    template;
+    displayField = 'name';
+    NgOnInit() {
+        console.log("Tree node:", this.node);
+    }
+    get templateContext() {
+        console.log("Tree node:", this.node);
+        return {
+            $implicit: this.node,
+            node: this.node,
+            treeModel: this.treeModel,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeNodeContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TreeNodeContentComponent, isStandalone: true, selector: "tree-node-content", inputs: { node: "node", treeModel: "treeModel", template: "template", displayField: "displayField" }, ngImport: i0, template: `
+    @if (template) {
+      <ng-container
+        *ngTemplateOutlet="template; context: templateContext">
+      </ng-container>
+    } @else {
+      <span class="tree-node-content-default">
+        @if (node.icon) {
+          <img [src]="node.icon" alt="" class="tree-node-icon" />
+        }
+        <span class="tree-node-text">{{ node.data[displayField] }}</span>
+      </span>
+    }
+  `, isInline: true, styles: [".tree-node-content-default{flex:1;padding:0 4px;display:flex;align-items:center;gap:6px;overflow:hidden;-webkit-user-select:none;user-select:none}.tree-node-icon{width:16px;height:16px;flex-shrink:0;object-fit:contain}.tree-node-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeNodeContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tree-node-content', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (template) {
+      <ng-container
+        *ngTemplateOutlet="template; context: templateContext">
+      </ng-container>
+    } @else {
+      <span class="tree-node-content-default">
+        @if (node.icon) {
+          <img [src]="node.icon" alt="" class="tree-node-icon" />
+        }
+        <span class="tree-node-text">{{ node.data[displayField] }}</span>
+      </span>
+    }
+  `, styles: [".tree-node-content-default{flex:1;padding:0 4px;display:flex;align-items:center;gap:6px;overflow:hidden;-webkit-user-select:none;user-select:none}.tree-node-icon{width:16px;height:16px;flex-shrink:0;object-fit:contain}.tree-node-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+        }], propDecorators: { node: [{
+                type: Input,
+                args: [{ required: true }]
+            }], treeModel: [{
+                type: Input,
+                args: [{ required: true }]
+            }], template: [{
+                type: Input
+            }], displayField: [{
+                type: Input
+            }] } });
+
+// lib/core/services/tree-drag-drop.service.ts
+class TreeDragDropService {
+    draggedNode = signal(null);
+    setDraggedNode(node) {
+        this.draggedNode.set(node);
+    }
+    getDraggedNode() {
+        return this.draggedNode();
+    }
+    clearDraggedNode() {
+        this.draggedNode.set(null);
+    }
+    isDragging() {
+        return this.draggedNode() !== null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeDragDropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeDragDropService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeDragDropService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+// lib/directives/tree-drag.directive.ts
+class TreeDragDirective {
+    node;
+    treeModel;
+    options;
+    // Use inject() function instead of constructor injection
+    elementRef = inject(ElementRef);
+    dragDropService = inject(TreeDragDropService);
+    get draggable() {
+        if (typeof this.options.allowDrag === 'function') {
+            return this.options.allowDrag(this.node);
+        }
+        return this.options.allowDrag || false;
+    }
+    onDragStart(event) {
+        if (!this.draggable) {
+            event.preventDefault();
+            return;
+        }
+        this.dragDropService.setDraggedNode(this.node);
+        if (event.dataTransfer) {
+            event.dataTransfer.effectAllowed = 'move';
+            event.dataTransfer.setData('text/plain', this.node.id.toString());
+            // Create drag image
+            const dragImage = this.elementRef.nativeElement.cloneNode(true);
+            dragImage.style.opacity = '0.7';
+            document.body.appendChild(dragImage);
+            event.dataTransfer.setDragImage(dragImage, 0, 0);
+            setTimeout(() => document.body.removeChild(dragImage), 0);
+        }
+        this.elementRef.nativeElement.classList.add('tree-node-dragging');
+    }
+    onDragEnd(event) {
+        this.dragDropService.clearDraggedNode();
+        this.elementRef.nativeElement.classList.remove('tree-node-dragging');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeDragDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: TreeDragDirective, isStandalone: true, selector: "[treeDrag]", inputs: { node: ["treeDrag", "node"], treeModel: "treeModel", options: "options" }, host: { listeners: { "dragstart": "onDragStart($event)", "dragend": "onDragEnd($event)" }, properties: { "attr.draggable": "this.draggable" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeDragDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[treeDrag]',
+                    standalone: true,
+                }]
+        }], propDecorators: { node: [{
+                type: Input,
+                args: [{ required: true, alias: 'treeDrag' }]
+            }], treeModel: [{
+                type: Input,
+                args: [{ required: true }]
+            }], options: [{
+                type: Input,
+                args: [{ required: true }]
+            }], draggable: [{
+                type: HostBinding,
+                args: ['attr.draggable']
+            }], onDragStart: [{
+                type: HostListener,
+                args: ['dragstart', ['$event']]
+            }], onDragEnd: [{
+                type: HostListener,
+                args: ['dragend', ['$event']]
+            }] } });
+
+// lib/directives/tree-drop.directive.ts
+class TreeDropDirective {
+    node;
+    treeModel;
+    options;
+    dropPosition = 'inside';
+    // Use inject() function instead of constructor injection
+    elementRef = inject(ElementRef);
+    dragDropService = inject(TreeDragDropService);
+    isDraggingOver = signal(false);
+    canDrop = signal(false);
+    get isDropTarget() {
+        return this.isDraggingOver() && this.canDrop();
+    }
+    get isDropDisabled() {
+        return this.isDraggingOver() && !this.canDrop();
+    }
+    onDragEnter(event) {
+        event.preventDefault();
+        const draggedNode = this.dragDropService.getDraggedNode();
+        if (!draggedNode)
+            return;
+        this.isDraggingOver.set(true);
+        const dropTarget = this.getDropTarget();
+        const canDrop = this.treeModel.canMoveNode(draggedNode, dropTarget);
+        this.canDrop.set(canDrop);
+        if (canDrop && event.dataTransfer) {
+            event.dataTransfer.dropEffect = 'move';
+        }
+    }
+    onDragOver(event) {
+        if (this.canDrop()) {
+            event.preventDefault();
+            if (event.dataTransfer) {
+                event.dataTransfer.dropEffect = 'move';
+            }
+        }
+    }
+    onDragLeave(event) {
+        // Check if we're really leaving (not just entering a child element)
+        const rect = this.elementRef.nativeElement.getBoundingClientRect();
+        const x = event.clientX;
+        const y = event.clientY;
+        if (x < rect.left || x >= rect.right || y < rect.top || y >= rect.bottom) {
+            this.isDraggingOver.set(false);
+            this.canDrop.set(false);
+        }
+    }
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const draggedNode = this.dragDropService.getDraggedNode();
+        if (!draggedNode || !this.canDrop())
+            return;
+        const dropTarget = this.getDropTarget();
+        this.treeModel.moveNode(draggedNode, dropTarget);
+        this.isDraggingOver.set(false);
+        this.canDrop.set(false);
+        this.dragDropService.clearDraggedNode();
+    }
+    getDropTarget() {
+        switch (this.dropPosition) {
+            case 'before':
+                return {
+                    parent: this.node.parent,
+                    index: this.node.index,
+                };
+            case 'after':
+                return {
+                    parent: this.node.parent,
+                    index: this.node.index + 1,
+                };
+            case 'inside':
+            default:
+                return {
+                    parent: this.node,
+                    index: this.node.children.length,
+                };
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: TreeDropDirective, isStandalone: true, selector: "[treeDrop]", inputs: { node: ["treeDrop", "node"], treeModel: "treeModel", options: "options", dropPosition: "dropPosition" }, host: { listeners: { "dragenter": "onDragEnter($event)", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "class.tree-drop-target": "this.isDropTarget", "class.tree-drop-disabled": "this.isDropDisabled" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeDropDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[treeDrop]',
+                    standalone: true,
+                }]
+        }], propDecorators: { node: [{
+                type: Input,
+                args: [{ required: true, alias: 'treeDrop' }]
+            }], treeModel: [{
+                type: Input,
+                args: [{ required: true }]
+            }], options: [{
+                type: Input,
+                args: [{ required: true }]
+            }], dropPosition: [{
+                type: Input
+            }], isDropTarget: [{
+                type: HostBinding,
+                args: ['class.tree-drop-target']
+            }], isDropDisabled: [{
+                type: HostBinding,
+                args: ['class.tree-drop-disabled']
+            }], onDragEnter: [{
+                type: HostListener,
+                args: ['dragenter', ['$event']]
+            }], onDragOver: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }], onDragLeave: [{
+                type: HostListener,
+                args: ['dragleave', ['$event']]
+            }], onDrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }] } });
+
+// lib/components/tree-node/tree-node.component.ts
+class TreeNodeComponent {
+    node;
+    treeModel;
+    options;
+    nodeTemplate;
+    paddingLeft = computed(() => {
+        return this.options.levelPadding || 40;
+    });
+    onNodeClick(event) {
+        const useMetaKey = this.options.useMetaKey !== false;
+        const multiSelect = this.options.multiSelect || false;
+        const isMetaKeyPressed = event.ctrlKey || event.metaKey;
+        const shouldMultiSelect = multiSelect && (!useMetaKey || isMetaKeyPressed);
+        this.treeModel.activateNode(this.node, shouldMultiSelect);
+        this.treeModel.focusNode(this.node);
+    }
+    onNodeDoubleClick(event) {
+        if (this.node.hasChildren) {
+            this.node.toggle();
+            this.treeModel.expandedNodeIds.update(ids => {
+                const newIds = new Set(ids);
+                if (this.node.isExpanded()) {
+                    newIds.add(this.node.id);
+                }
+                else {
+                    newIds.delete(this.node.id);
+                }
+                return newIds;
+            });
+        }
+    }
+    onNodeContextMenu(event) {
+        event.preventDefault();
+        // Emit context menu event
+    }
+    onToggleExpanded() {
+        if (this.node.hasChildren) {
+            this.node.toggle();
+            if (this.node.isExpanded()) {
+                // Load children if needed
+                if (this.options.getChildren && this.node.children.length === 0) {
+                    this.treeModel.loadChildren(this.node);
+                }
+                this.treeModel.expandNode(this.node);
+            }
+            else {
+                this.treeModel.collapseNode(this.node);
+            }
+        }
+    }
+    onCheckboxChange(checked) {
+        this.treeModel.selectNode(this.node, this.options.multiSelect || false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TreeNodeComponent, isStandalone: true, selector: "tree-node", inputs: { node: "node", treeModel: "treeModel", options: "options", nodeTemplate: "nodeTemplate" }, ngImport: i0, template: `
+    <div 
+      class="tree-node"
+      [class.tree-node-expanded]="node.isExpanded()"
+      [class.tree-node-collapsed]="node.isCollapsed()"
+      [class.tree-node-active]="node.isActive()"
+      [class.tree-node-focused]="node.isFocused()"
+      [class.tree-node-leaf]="node.isLeaf()"
+      [class.tree-node-loading]="node.isLoading()"
+      [style.padding-left.px]="paddingLeft()">
+      
+      <div class="tree-node-wrapper"
+           [treeDrag]="node"
+           [treeModel]="treeModel"
+           [options]="options">
+        
+        <!-- Drop zone before node -->
+        <div class="tree-node-drop-slot tree-node-drop-slot-before"
+             [treeDrop]="node"
+             [treeModel]="treeModel"
+             [dropPosition]="'before'"
+             [options]="options">
+        </div>
+        
+        <!-- Node content wrapper -->
+        <div class="tree-node-content-wrapper"
+             (click)="onNodeClick($event)"
+             (dblclick)="onNodeDoubleClick($event)"
+             (contextmenu)="onNodeContextMenu($event)">
+          
+          <!-- Expander -->
+          @if (node.hasChildren) {
+            <tree-node-expander
+              [node]="node"
+              [treeModel]="treeModel"
+              (toggle)="onToggleExpanded()">
+            </tree-node-expander>
+          }
+          
+          <!-- Checkbox -->
+          @if (options.useCheckbox) {
+            <tree-node-checkbox
+              [node]="node"
+              [treeModel]="treeModel"
+              [useTriState]="options.useTriState ?? false"
+              (change)="onCheckboxChange($event)">
+            </tree-node-checkbox>
+          }
+          
+          <!-- Content -->
+          <tree-node-content
+            [node]="node"
+            [treeModel]="treeModel"
+            [template]="nodeTemplate"
+            [displayField]="options.displayField || 'name'">
+          </tree-node-content>
+        </div>
+        
+        <!-- Drop zone after node -->
+        <div class="tree-node-drop-slot tree-node-drop-slot-after"
+             [treeDrop]="node"
+             [treeModel]="treeModel"
+             [dropPosition]="'after'"
+             [options]="options">
+        </div>
+      </div>
+      
+      <!-- Children container -->
+      @if (node.isExpanded() && node.children.length > 0) {
+        <div class="tree-node-children"
+             [@expandCollapse]="node.isExpanded() ? 'expanded' : 'collapsed'">
+          @for (child of node.children; track child.id) {
+            <tree-node
+              [node]="child"
+              [treeModel]="treeModel"
+              [options]="options"
+              [nodeTemplate]="nodeTemplate">
+            </tree-node>
+          }
+        </div>
+      }
+      
+      <!-- Loading indicator -->
+      @if (node.isLoading()) {
+        <div class="tree-node-loading">
+          <span class="loading-spinner"></span>
+          Loading...
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [".tree-node{position:relative}.tree-node-wrapper{position:relative;display:flex;align-items:center;min-height:22px}.tree-node-content-wrapper{display:flex;align-items:center;flex:1;cursor:pointer;border-radius:3px;padding:2px 4px;transition:background-color .15s}.tree-node-content-wrapper:hover{background-color:#f5f5f5}.tree-node-active .tree-node-content-wrapper{background-color:#e3f2fd}.tree-node-focused .tree-node-content-wrapper{outline:2px solid #2196f3;outline-offset:-2px}.tree-node-children{overflow:hidden}.tree-node-drop-slot{position:absolute;left:0;right:0;height:2px;z-index:10}.tree-node-drop-slot-before{top:-1px}.tree-node-drop-slot-after{bottom:-1px}.tree-node-loading{padding:8px 24px;display:flex;align-items:center;gap:8px;color:#666;font-size:14px}.loading-spinner{display:inline-block;width:16px;height:16px;border:2px solid #f3f3f3;border-top:2px solid #2196f3;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: TreeNodeComponent, selector: "tree-node", inputs: ["node", "treeModel", "options", "nodeTemplate"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: TreeNodeExpanderComponent, selector: "tree-node-expander", inputs: ["node", "treeModel"], outputs: ["toggle"] }, { kind: "component", type: TreeNodeCheckboxComponent, selector: "tree-node-checkbox", inputs: ["node", "treeModel", "useTriState"], outputs: ["change"] }, { kind: "component", type: TreeNodeContentComponent, selector: "tree-node-content", inputs: ["node", "treeModel", "template", "displayField"] }, { kind: "directive", type: TreeDragDirective, selector: "[treeDrag]", inputs: ["treeDrag", "treeModel", "options"] }, { kind: "directive", type: TreeDropDirective, selector: "[treeDrop]", inputs: ["treeDrop", "treeModel", "options", "dropPosition"] }], animations: [
+            trigger('expandCollapse', [
+                state('collapsed', style({
+                    height: '0',
+                    overflow: 'hidden',
+                    opacity: '0'
+                })),
+                state('expanded', style({
+                    height: '*',
+                    overflow: 'visible',
+                    opacity: '1'
+                })),
+                transition('collapsed <=> expanded', [
+                    animate('200ms ease-in-out')
+                ])
+            ])
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeNodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tree-node', standalone: true, imports: [
+                        CommonModule,
+                        TreeNodeExpanderComponent,
+                        TreeNodeCheckboxComponent,
+                        TreeNodeContentComponent,
+                        TreeDragDirective,
+                        TreeDropDirective,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div 
+      class="tree-node"
+      [class.tree-node-expanded]="node.isExpanded()"
+      [class.tree-node-collapsed]="node.isCollapsed()"
+      [class.tree-node-active]="node.isActive()"
+      [class.tree-node-focused]="node.isFocused()"
+      [class.tree-node-leaf]="node.isLeaf()"
+      [class.tree-node-loading]="node.isLoading()"
+      [style.padding-left.px]="paddingLeft()">
+      
+      <div class="tree-node-wrapper"
+           [treeDrag]="node"
+           [treeModel]="treeModel"
+           [options]="options">
+        
+        <!-- Drop zone before node -->
+        <div class="tree-node-drop-slot tree-node-drop-slot-before"
+             [treeDrop]="node"
+             [treeModel]="treeModel"
+             [dropPosition]="'before'"
+             [options]="options">
+        </div>
+        
+        <!-- Node content wrapper -->
+        <div class="tree-node-content-wrapper"
+             (click)="onNodeClick($event)"
+             (dblclick)="onNodeDoubleClick($event)"
+             (contextmenu)="onNodeContextMenu($event)">
+          
+          <!-- Expander -->
+          @if (node.hasChildren) {
+            <tree-node-expander
+              [node]="node"
+              [treeModel]="treeModel"
+              (toggle)="onToggleExpanded()">
+            </tree-node-expander>
+          }
+          
+          <!-- Checkbox -->
+          @if (options.useCheckbox) {
+            <tree-node-checkbox
+              [node]="node"
+              [treeModel]="treeModel"
+              [useTriState]="options.useTriState ?? false"
+              (change)="onCheckboxChange($event)">
+            </tree-node-checkbox>
+          }
+          
+          <!-- Content -->
+          <tree-node-content
+            [node]="node"
+            [treeModel]="treeModel"
+            [template]="nodeTemplate"
+            [displayField]="options.displayField || 'name'">
+          </tree-node-content>
+        </div>
+        
+        <!-- Drop zone after node -->
+        <div class="tree-node-drop-slot tree-node-drop-slot-after"
+             [treeDrop]="node"
+             [treeModel]="treeModel"
+             [dropPosition]="'after'"
+             [options]="options">
+        </div>
+      </div>
+      
+      <!-- Children container -->
+      @if (node.isExpanded() && node.children.length > 0) {
+        <div class="tree-node-children"
+             [@expandCollapse]="node.isExpanded() ? 'expanded' : 'collapsed'">
+          @for (child of node.children; track child.id) {
+            <tree-node
+              [node]="child"
+              [treeModel]="treeModel"
+              [options]="options"
+              [nodeTemplate]="nodeTemplate">
+            </tree-node>
+          }
+        </div>
+      }
+      
+      <!-- Loading indicator -->
+      @if (node.isLoading()) {
+        <div class="tree-node-loading">
+          <span class="loading-spinner"></span>
+          Loading...
+        </div>
+      }
+    </div>
+  `, animations: [
+                        trigger('expandCollapse', [
+                            state('collapsed', style({
+                                height: '0',
+                                overflow: 'hidden',
+                                opacity: '0'
+                            })),
+                            state('expanded', style({
+                                height: '*',
+                                overflow: 'visible',
+                                opacity: '1'
+                            })),
+                            transition('collapsed <=> expanded', [
+                                animate('200ms ease-in-out')
+                            ])
+                        ])
+                    ], styles: [".tree-node{position:relative}.tree-node-wrapper{position:relative;display:flex;align-items:center;min-height:22px}.tree-node-content-wrapper{display:flex;align-items:center;flex:1;cursor:pointer;border-radius:3px;padding:2px 4px;transition:background-color .15s}.tree-node-content-wrapper:hover{background-color:#f5f5f5}.tree-node-active .tree-node-content-wrapper{background-color:#e3f2fd}.tree-node-focused .tree-node-content-wrapper{outline:2px solid #2196f3;outline-offset:-2px}.tree-node-children{overflow:hidden}.tree-node-drop-slot{position:absolute;left:0;right:0;height:2px;z-index:10}.tree-node-drop-slot-before{top:-1px}.tree-node-drop-slot-after{bottom:-1px}.tree-node-loading{padding:8px 24px;display:flex;align-items:center;gap:8px;color:#666;font-size:14px}.loading-spinner{display:inline-block;width:16px;height:16px;border:2px solid #f3f3f3;border-top:2px solid #2196f3;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        }], propDecorators: { node: [{
+                type: Input,
+                args: [{ required: true }]
+            }], treeModel: [{
+                type: Input,
+                args: [{ required: true }]
+            }], options: [{
+                type: Input,
+                args: [{ required: true }]
+            }], nodeTemplate: [{
+                type: Input
+            }] } });
+
+// lib/components/tree-viewport/tree-viewport.component.ts
+class TreeViewportComponent {
+    treeModel;
+    options;
+    nodeTemplate;
+    scrollContainer;
+    destroy$ = new Subject();
+    scrollTop = signal(0);
+    viewportHeight = signal(0);
+    flattenedNodes = computed(() => {
+        return this.treeModel.flattenedNodes();
+    });
+    totalHeight = computed(() => {
+        const nodes = this.flattenedNodes();
+        const nodeHeight = this.options.nodeHeight || 22;
+        if (typeof nodeHeight === 'number') {
+            return nodes.length * nodeHeight;
+        }
+        return nodes.reduce((sum, node) => sum + nodeHeight(node), 0);
+    });
+    visibleRange = computed(() => {
+        const scrollTop = this.scrollTop();
+        const viewportHeight = this.viewportHeight();
+        const nodes = this.flattenedNodes();
+        const nodeHeight = this.options.nodeHeight || 22;
+        const bufferAmount = this.options.bufferAmount || 5;
+        let startIndex = 0;
+        let accumulatedHeight = 0;
+        // Find start index
+        for (let i = 0; i < nodes.length; i++) {
+            const height = typeof nodeHeight === 'number'
+                ? nodeHeight
+                : nodeHeight(nodes[i]);
+            if (accumulatedHeight + height > scrollTop) {
+                startIndex = Math.max(0, i - bufferAmount);
+                break;
+            }
+            accumulatedHeight += height;
+        }
+        // Find end index
+        let endIndex = startIndex;
+        accumulatedHeight = 0;
+        for (let i = startIndex; i < nodes.length; i++) {
+            const height = typeof nodeHeight === 'number'
+                ? nodeHeight
+                : nodeHeight(nodes[i]);
+            accumulatedHeight += height;
+            if (accumulatedHeight > viewportHeight + (bufferAmount * (typeof nodeHeight === 'number' ? nodeHeight : 22))) {
+                endIndex = i;
+                break;
+            }
+        }
+        if (endIndex === startIndex) {
+            endIndex = nodes.length;
+        }
+        return { startIndex, endIndex };
+    });
+    visibleNodes = computed(() => {
+        const range = this.visibleRange();
+        const nodes = this.flattenedNodes();
+        return nodes.slice(range.startIndex, range.endIndex);
+    });
+    paddingTop = computed(() => {
+        const range = this.visibleRange();
+        const nodes = this.flattenedNodes();
+        const nodeHeight = this.options.nodeHeight || 22;
+        let height = 0;
+        for (let i = 0; i < range.startIndex; i++) {
+            height += typeof nodeHeight === 'number'
+                ? nodeHeight
+                : nodeHeight(nodes[i]);
+        }
+        return height;
+    });
+    paddingBottom = computed(() => {
+        const range = this.visibleRange();
+        const nodes = this.flattenedNodes();
+        const nodeHeight = this.options.nodeHeight || 22;
+        const totalHeight = this.totalHeight();
+        let visibleHeight = this.paddingTop();
+        for (let i = range.startIndex; i < range.endIndex; i++) {
+            visibleHeight += typeof nodeHeight === 'number'
+                ? nodeHeight
+                : nodeHeight(nodes[i]);
+        }
+        return Math.max(0, totalHeight - visibleHeight);
+    });
+    constructor() {
+        // Update viewport when tree changes
+        effect(() => {
+            this.flattenedNodes(); // Subscribe to changes
+            this.updateViewport();
+        });
+    }
+    ngOnInit() {
+        this.setupScrollListener();
+        this.updateViewportHeight();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    setupScrollListener() {
+        fromEvent(this.scrollContainer.nativeElement, 'scroll')
+            .pipe(debounceTime(10), takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.onScroll();
+        });
+    }
+    updateViewportHeight() {
+        const height = this.scrollContainer.nativeElement.clientHeight;
+        this.viewportHeight.set(height);
+    }
+    onScroll() {
+        const scrollTop = this.scrollContainer.nativeElement.scrollTop;
+        this.scrollTop.set(scrollTop);
+    }
+    updateViewport() {
+        // Force recalculation
+        this.scrollTop.set(this.scrollContainer.nativeElement.scrollTop);
+    }
+    scrollToNode(node) {
+        const nodes = this.flattenedNodes();
+        const index = nodes.findIndex(n => n.id === node.id);
+        if (index === -1)
+            return;
+        const nodeHeight = this.options.nodeHeight || 22;
+        let targetScrollTop = 0;
+        for (let i = 0; i < index; i++) {
+            targetScrollTop += typeof nodeHeight === 'number'
+                ? nodeHeight
+                : nodeHeight(nodes[i]);
+        }
+        this.scrollContainer.nativeElement.scrollTop = targetScrollTop;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeViewportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TreeViewportComponent, isStandalone: true, selector: "tree-viewport", inputs: { treeModel: "treeModel", options: "options", nodeTemplate: "nodeTemplate" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, static: true }], ngImport: i0, template: `
+    <div 
+      #scrollContainer
+      class="tree-viewport-container"
+      [style.height.px]="options.scrollContainerHeight || 400"
+      (scroll)="onScroll()">
+      
+      <div class="tree-viewport-content"
+           [style.height.px]="totalHeight()">
+        
+        <div class="tree-viewport-padding-top"
+             [style.height.px]="paddingTop()">
+        </div>
+        
+        @for (node of visibleNodes(); track node.id) {
+          <tree-node
+            [node]="node"
+            [treeModel]="treeModel"
+            [options]="options"
+            [nodeTemplate]="nodeTemplate">
+          </tree-node>
+        }
+        
+        <div class="tree-viewport-padding-bottom"
+             [style.height.px]="paddingBottom()">
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: [".tree-viewport-container{overflow-y:auto;overflow-x:hidden;position:relative}.tree-viewport-content{position:relative;width:100%}.tree-viewport-padding-top,.tree-viewport-padding-bottom{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TreeNodeComponent, selector: "tree-node", inputs: ["node", "treeModel", "options", "nodeTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeViewportComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tree-viewport', standalone: true, imports: [CommonModule, TreeNodeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div 
+      #scrollContainer
+      class="tree-viewport-container"
+      [style.height.px]="options.scrollContainerHeight || 400"
+      (scroll)="onScroll()">
+      
+      <div class="tree-viewport-content"
+           [style.height.px]="totalHeight()">
+        
+        <div class="tree-viewport-padding-top"
+             [style.height.px]="paddingTop()">
+        </div>
+        
+        @for (node of visibleNodes(); track node.id) {
+          <tree-node
+            [node]="node"
+            [treeModel]="treeModel"
+            [options]="options"
+            [nodeTemplate]="nodeTemplate">
+          </tree-node>
+        }
+        
+        <div class="tree-viewport-padding-bottom"
+             [style.height.px]="paddingBottom()">
+        </div>
+      </div>
+    </div>
+  `, styles: [".tree-viewport-container{overflow-y:auto;overflow-x:hidden;position:relative}.tree-viewport-content{position:relative;width:100%}.tree-viewport-padding-top,.tree-viewport-padding-bottom{width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { treeModel: [{
+                type: Input,
+                args: [{ required: true }]
+            }], options: [{
+                type: Input,
+                args: [{ required: true }]
+            }], nodeTemplate: [{
+                type: Input
+            }], scrollContainer: [{
+                type: ViewChild,
+                args: ['scrollContainer', { static: true }]
+            }] } });
+
+// lib/directives/tree-node-template.directive.ts
+class TreeNodeTemplateDirective {
+    template;
+    constructor(template) {
+        this.template = template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeNodeTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: TreeNodeTemplateDirective, isStandalone: true, selector: "[treeNodeTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeNodeTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[treeNodeTemplate]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+// lib/components/tree-root/tree-root.component.ts
+class TreeRootComponent {
+    nodes = [];
+    options = {};
+    initialized = new EventEmitter();
+    toggleExpanded = new EventEmitter();
+    activate = new EventEmitter();
+    deactivate = new EventEmitter();
+    select = new EventEmitter();
+    deselect = new EventEmitter();
+    focus = new EventEmitter();
+    blur = new EventEmitter();
+    moveNode = new EventEmitter();
+    loadChildren = new EventEmitter();
+    treeEvent = new EventEmitter();
+    // Content queries
+    nodeTemplate = contentChild(TreeNodeTemplateDirective, {
+        read: TemplateRef
+    });
+    treeModel;
+    mergedOptions;
+    isFocused = signal(false);
+    eventsSubscription;
+    ngOnInit() {
+        this.initializeTreeModel();
+    }
+    ngOnChanges(changes) {
+        if (changes['options'] && !changes['options'].firstChange) {
+            this.initializeTreeModel();
+        }
+        if (changes['nodes'] && !changes['nodes'].firstChange) {
+            this.treeModel.setData(this.nodes);
+        }
+    }
+    initializeTreeModel() {
+        // Unsubscribe from previous subscription if exists
+        this.eventsSubscription?.unsubscribe();
+        this.mergedOptions = {
+            ...DEFAULT_TREE_OPTIONS,
+            ...this.options,
+        };
+        this.treeModel = new TreeModel(this.mergedOptions);
+        this.treeModel.setData(this.nodes);
+        // Subscribe to tree events
+        this.eventsSubscription = this.treeModel.events$.subscribe(event => {
+            this.handleTreeEvent(event);
+        });
+    }
+    ngOnDestroy() {
+        // Clean up subscription
+        this.eventsSubscription?.unsubscribe();
+    }
+    handleTreeEvent(event) {
+        this.treeEvent.emit(event);
+        switch (event.type) {
+            case 'initialized':
+                this.initialized.emit(event);
+                break;
+            case 'expand':
+            case 'collapse':
+                this.toggleExpanded.emit(event);
+                break;
+            case 'activate':
+                this.activate.emit(event);
+                break;
+            case 'deactivate':
+                this.deactivate.emit(event);
+                break;
+            case 'select':
+                this.select.emit(event);
+                break;
+            case 'deselect':
+                this.deselect.emit(event);
+                break;
+            case 'focus':
+                this.focus.emit(event);
+                break;
+            case 'blur':
+                this.blur.emit(event);
+                break;
+            case 'moveNode':
+                this.moveNode.emit(event);
+                break;
+            case 'loadChildren':
+                this.loadChildren.emit(event);
+                break;
+        }
+    }
+    // Keyboard navigation
+    onKeydown(event) {
+        if (!this.isFocused())
+            return;
+        const key = event.key;
+        const isRtl = this.options.rtl;
+        switch (key) {
+            case 'ArrowDown':
+                this.treeModel.focusNextNode();
+                event.preventDefault();
+                break;
+            case 'ArrowUp':
+                this.treeModel.focusPreviousNode();
+                event.preventDefault();
+                break;
+            case 'ArrowRight':
+                isRtl ? this.treeModel.focusDrillUp() : this.treeModel.focusDrillDown();
+                event.preventDefault();
+                break;
+            case 'ArrowLeft':
+                isRtl ? this.treeModel.focusDrillDown() : this.treeModel.focusDrillUp();
+                event.preventDefault();
+                break;
+            case 'Enter':
+            case ' ':
+                const focused = this.treeModel.focusedNode();
+                if (focused) {
+                    this.treeModel.activateNode(focused);
+                }
+                event.preventDefault();
+                break;
+        }
+    }
+    onFocus() {
+        this.isFocused.set(true);
+    }
+    onBlur() {
+        this.isFocused.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TreeRootComponent, isStandalone: true, selector: "tree-root", inputs: { nodes: "nodes", options: "options" }, outputs: { initialized: "initialized", toggleExpanded: "toggleExpanded", activate: "activate", deactivate: "deactivate", select: "select", deselect: "deselect", focus: "focus", blur: "blur", moveNode: "moveNode", loadChildren: "loadChildren", treeEvent: "treeEvent" }, host: { listeners: { "keydown": "onKeydown($event)", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.tree-focused": "isFocused()" } }, queries: [{ propertyName: "nodeTemplate", first: true, predicate: TreeNodeTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: `
+    <div
+      class="tree-container"
+      [class.tree-rtl]="mergedOptions?.rtl"
+      tabindex="0">
+
+      @if (mergedOptions?.useVirtualScroll) {
+        <tree-viewport
+          [treeModel]="treeModel"
+          [options]="mergedOptions"
+          [nodeTemplate]="nodeTemplate()">
+        </tree-viewport>
+      } @else {
+        @for (root of treeModel.roots(); track root.id) {
+          <tree-node
+            [node]="root"
+            [treeModel]="treeModel"
+            [options]="mergedOptions"
+            [nodeTemplate]="nodeTemplate()">
+          </tree-node>
+        }
+      }
+    </div>
+  `, isInline: true, styles: [".tree-container{width:100%;height:100%;outline:none}.tree-rtl{direction:rtl}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TreeNodeComponent, selector: "tree-node", inputs: ["node", "treeModel", "options", "nodeTemplate"] }, { kind: "component", type: TreeViewportComponent, selector: "tree-viewport", inputs: ["treeModel", "options", "nodeTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeRootComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tree-root', standalone: true, imports: [
+                        CommonModule,
+                        TreeNodeComponent,
+                        TreeViewportComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div
+      class="tree-container"
+      [class.tree-rtl]="mergedOptions?.rtl"
+      tabindex="0">
+
+      @if (mergedOptions?.useVirtualScroll) {
+        <tree-viewport
+          [treeModel]="treeModel"
+          [options]="mergedOptions"
+          [nodeTemplate]="nodeTemplate()">
+        </tree-viewport>
+      } @else {
+        @for (root of treeModel.roots(); track root.id) {
+          <tree-node
+            [node]="root"
+            [treeModel]="treeModel"
+            [options]="mergedOptions"
+            [nodeTemplate]="nodeTemplate()">
+          </tree-node>
+        }
+      }
+    </div>
+  `, host: {
+                        '[class.tree-focused]': 'isFocused()',
+                    }, styles: [".tree-container{width:100%;height:100%;outline:none}.tree-rtl{direction:rtl}\n"] }]
+        }], propDecorators: { nodes: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], initialized: [{
+                type: Output
+            }], toggleExpanded: [{
+                type: Output
+            }], activate: [{
+                type: Output
+            }], deactivate: [{
+                type: Output
+            }], select: [{
+                type: Output
+            }], deselect: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }], blur: [{
+                type: Output
+            }], moveNode: [{
+                type: Output
+            }], loadChildren: [{
+                type: Output
+            }], treeEvent: [{
+                type: Output
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], onFocus: [{
+                type: HostListener,
+                args: ['focus']
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }] } });
+
 class ConceptoTreeComponent {
+    nodes = [];
+    options = {};
+    initialized = new EventEmitter();
+    toggleExpanded = new EventEmitter();
+    activate = new EventEmitter();
+    deactivate = new EventEmitter();
+    select = new EventEmitter();
+    deselect = new EventEmitter();
+    focus = new EventEmitter();
+    blur = new EventEmitter();
+    moveNode = new EventEmitter();
+    loadChildren = new EventEmitter();
+    treeEvent = new EventEmitter();
+    treeRoot;
+    isDropdownOpen = signal(false);
+    searchTerm = '';
+    selectedNode = signal(null);
+    // All nodes flattened
+    allNodes = [];
+    filteredNodes = signal([]);
+    get displayField() {
+        return this.options.displayField || 'name';
+    }
+    toggleDropdown() {
+        this.isDropdownOpen.update(v => !v);
+        if (this.isDropdownOpen()) {
+            this.searchTerm = '';
+            this.filterNodes();
+        }
+    }
+    closeDropdown() {
+        this.isDropdownOpen.set(false);
+    }
+    filterNodes() {
+        if (!this.searchTerm) {
+            this.filteredNodes.set(this.allNodes);
+        }
+        else {
+            const term = this.searchTerm.toLowerCase();
+            this.filteredNodes.set(this.allNodes.filter(node => String(node.data[this.displayField]).toLowerCase().includes(term)));
+        }
+    }
+    selectNode(node) {
+        this.selectedNode.set(node);
+        this.isDropdownOpen.set(false);
+        // Activate in tree
+        if (this.treeRoot && this.treeRoot.treeModel) {
+            this.treeRoot.treeModel.activateNode(node);
+            node.ensureVisible();
+        }
+    }
+    onTreeInitialized(event) {
+        this.initialized.emit(event);
+        // Get all nodes for the dropdown
+        if (event.treeModel) {
+            this.allNodes = event.treeModel.getAllNodes();
+            this.filteredNodes.set(this.allNodes);
+        }
+    }
+    onNodeActivated(event) {
+        this.activate.emit(event);
+        if (event.node) {
+            this.selectedNode.set(event.node);
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConceptoTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ConceptoTreeComponent, isStandalone: true, selector: "lib-concepto-tree", ngImport: i0, template: `
-    <p>
-      concepto-tree works!
-    </p>
-  `, isInline: true, styles: [""] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ConceptoTreeComponent, isStandalone: true, selector: "lib-concepto-tree", inputs: { nodes: "nodes", options: "options" }, outputs: { initialized: "initialized", toggleExpanded: "toggleExpanded", activate: "activate", deactivate: "deactivate", select: "select", deselect: "deselect", focus: "focus", blur: "blur", moveNode: "moveNode", loadChildren: "loadChildren", treeEvent: "treeEvent" }, viewQueries: [{ propertyName: "treeRoot", first: true, predicate: TreeRootComponent, descendants: true }], ngImport: i0, template: `
+    <div class="concepto-tree-container">
+      <div class="search-bar-container">
+        <div class="custom-select" [class.open]="isDropdownOpen()" (click)="toggleDropdown()">
+           <div class="selected-option">
+             {{ selectedNode() ? selectedNode()?.data?.[displayField] : 'Buscar nodo...' }}
+           </div>
+           <div class="arrow">▼</div>
+        </div>
+        
+        <div class="backdrop" *ngIf="isDropdownOpen()" (click)="closeDropdown()"></div>
+
+        <div class="dropdown-menu" *ngIf="isDropdownOpen()">
+           <div class="search-input-wrapper" (click)="$event.stopPropagation()">
+             <input 
+               type="text" 
+               [(ngModel)]="searchTerm" 
+               (ngModelChange)="filterNodes()"
+               placeholder="Buscar..."
+               class="search-input"
+               #searchInput
+               autofocus
+             >
+           </div>
+           <div class="options-list">
+             <div 
+               *ngFor="let node of filteredNodes()" 
+               class="option-item" 
+               (click)="selectNode(node); $event.stopPropagation()"
+             >
+               {{ node.data[displayField] }}
+             </div>
+             <div *ngIf="filteredNodes().length === 0" class="no-results">
+               No se encontraron resultados
+             </div>
+           </div>
+        </div>
+      </div>
+
+      <tree-root
+        [nodes]="nodes"
+        [options]="options"
+        (initialized)="onTreeInitialized($event)"
+        (toggleExpanded)="toggleExpanded.emit($event)"
+        (activate)="onNodeActivated($event)"
+        (deactivate)="deactivate.emit($event)"
+        (select)="select.emit($event)"
+        (deselect)="deselect.emit($event)"
+        (focus)="focus.emit($event)"
+        (blur)="blur.emit($event)"
+        (moveNode)="moveNode.emit($event)"
+        (loadChildren)="loadChildren.emit($event)"
+        (treeEvent)="treeEvent.emit($event)"
+      ></tree-root>
+    </div>
+  `, isInline: true, styles: [".concepto-tree-container{display:flex;flex-direction:column;height:100%;gap:10px}.search-bar-container{position:relative;width:100%;z-index:100}.custom-select{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border:1px solid #ccc;border-radius:4px;cursor:pointer;background:#fff;-webkit-user-select:none;user-select:none;transition:border-color .2s}.custom-select:hover{border-color:#888}.custom-select.open{border-color:#007bff;border-bottom-left-radius:0;border-bottom-right-radius:0}.backdrop{position:fixed;top:0;left:0;width:100%;height:100%;z-index:101;background:transparent}.dropdown-menu{position:absolute;top:100%;left:0;width:100%;background:#fff;border:1px solid #ccc;border-top:none;border-radius:0 0 4px 4px;box-shadow:0 4px 6px #0000001a;margin-top:0;max-height:300px;overflow-y:auto;z-index:102}.search-input-wrapper{padding:8px;position:sticky;top:0;background:#fff;border-bottom:1px solid #eee;z-index:103}.search-input{width:100%;padding:8px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;outline:none}.search-input:focus{border-color:#007bff}.options-list{max-height:250px;overflow-y:auto}.option-item{padding:8px 12px;cursor:pointer;transition:background-color .1s}.option-item:hover{background-color:#f5f5f5}.no-results{padding:12px;color:#888;font-style:italic;text-align:center}tree-root{flex:1;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TreeRootComponent, selector: "tree-root", inputs: ["nodes", "options"], outputs: ["initialized", "toggleExpanded", "activate", "deactivate", "select", "deselect", "focus", "blur", "moveNode", "loadChildren", "treeEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConceptoTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-concepto-tree', standalone: true, imports: [], template: `
-    <p>
-      concepto-tree works!
-    </p>
-  ` }]
-        }] });
+            args: [{ selector: 'lib-concepto-tree', standalone: true, imports: [CommonModule, FormsModule, TreeRootComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="concepto-tree-container">
+      <div class="search-bar-container">
+        <div class="custom-select" [class.open]="isDropdownOpen()" (click)="toggleDropdown()">
+           <div class="selected-option">
+             {{ selectedNode() ? selectedNode()?.data?.[displayField] : 'Buscar nodo...' }}
+           </div>
+           <div class="arrow">▼</div>
+        </div>
+        
+        <div class="backdrop" *ngIf="isDropdownOpen()" (click)="closeDropdown()"></div>
+
+        <div class="dropdown-menu" *ngIf="isDropdownOpen()">
+           <div class="search-input-wrapper" (click)="$event.stopPropagation()">
+             <input 
+               type="text" 
+               [(ngModel)]="searchTerm" 
+               (ngModelChange)="filterNodes()"
+               placeholder="Buscar..."
+               class="search-input"
+               #searchInput
+               autofocus
+             >
+           </div>
+           <div class="options-list">
+             <div 
+               *ngFor="let node of filteredNodes()" 
+               class="option-item" 
+               (click)="selectNode(node); $event.stopPropagation()"
+             >
+               {{ node.data[displayField] }}
+             </div>
+             <div *ngIf="filteredNodes().length === 0" class="no-results">
+               No se encontraron resultados
+             </div>
+           </div>
+        </div>
+      </div>
+
+      <tree-root
+        [nodes]="nodes"
+        [options]="options"
+        (initialized)="onTreeInitialized($event)"
+        (toggleExpanded)="toggleExpanded.emit($event)"
+        (activate)="onNodeActivated($event)"
+        (deactivate)="deactivate.emit($event)"
+        (select)="select.emit($event)"
+        (deselect)="deselect.emit($event)"
+        (focus)="focus.emit($event)"
+        (blur)="blur.emit($event)"
+        (moveNode)="moveNode.emit($event)"
+        (loadChildren)="loadChildren.emit($event)"
+        (treeEvent)="treeEvent.emit($event)"
+      ></tree-root>
+    </div>
+  `, styles: [".concepto-tree-container{display:flex;flex-direction:column;height:100%;gap:10px}.search-bar-container{position:relative;width:100%;z-index:100}.custom-select{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border:1px solid #ccc;border-radius:4px;cursor:pointer;background:#fff;-webkit-user-select:none;user-select:none;transition:border-color .2s}.custom-select:hover{border-color:#888}.custom-select.open{border-color:#007bff;border-bottom-left-radius:0;border-bottom-right-radius:0}.backdrop{position:fixed;top:0;left:0;width:100%;height:100%;z-index:101;background:transparent}.dropdown-menu{position:absolute;top:100%;left:0;width:100%;background:#fff;border:1px solid #ccc;border-top:none;border-radius:0 0 4px 4px;box-shadow:0 4px 6px #0000001a;margin-top:0;max-height:300px;overflow-y:auto;z-index:102}.search-input-wrapper{padding:8px;position:sticky;top:0;background:#fff;border-bottom:1px solid #eee;z-index:103}.search-input{width:100%;padding:8px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;outline:none}.search-input:focus{border-color:#007bff}.options-list{max-height:250px;overflow-y:auto}.option-item{padding:8px 12px;cursor:pointer;transition:background-color .1s}.option-item:hover{background-color:#f5f5f5}.no-results{padding:12px;color:#888;font-style:italic;text-align:center}tree-root{flex:1;overflow:hidden}\n"] }]
+        }], propDecorators: { nodes: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], initialized: [{
+                type: Output
+            }], toggleExpanded: [{
+                type: Output
+            }], activate: [{
+                type: Output
+            }], deactivate: [{
+                type: Output
+            }], select: [{
+                type: Output
+            }], deselect: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }], blur: [{
+                type: Output
+            }], moveNode: [{
+                type: Output
+            }], loadChildren: [{
+                type: Output
+            }], treeEvent: [{
+                type: Output
+            }], treeRoot: [{
+                type: ViewChild,
+                args: [TreeRootComponent]
+            }] } });
 
 class EntityComparisonService {
     parseEntities(xmlString) {