@m1z23r/ngx-ui 1.1.48 → 1.1.50

package/fesm2022/m1z23r-ngx-ui.mjs

@@ -6710,21 +6710,17 @@ class TreeNodeComponent {
     node = input.required(...(ngDevMode ? [{ debugName: "node" }] : []));
     level = input(0, ...(ngDevMode ? [{ debugName: "level" }] : []));
     indent = input(16, ...(ngDevMode ? [{ debugName: "indent" }] : []));
+    parentPath = input([], ...(ngDevMode ? [{ debugName: "parentPath" }] : []));
     nodeClick = output();
     nodeExpand = output();
     nodeCollapse = output();
     treeHost = inject(TREE_HOST);
-    _expanded = signal(null, ...(ngDevMode ? [{ debugName: "_expanded" }] : []));
-    isExpanded = computed(() => {
-        const manualState = this._expanded();
-        if (manualState !== null) {
-            return manualState;
-        }
-        return this.node().expanded ?? false;
-    }, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
+    contentRef = viewChild('contentRef', ...(ngDevMode ? [{ debugName: "contentRef" }] : []));
+    path = computed(() => [...this.parentPath(), this.node()], ...(ngDevMode ? [{ debugName: "path" }] : []));
+    isExpanded = computed(() => this.treeHost.isExpanded(this.node()), ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
     hasChildren = computed(() => {
         const children = this.node().children;
-        return children && children.length > 0;
+        return !!children && children.length > 0;
     }, ...(ngDevMode ? [{ debugName: "hasChildren" }] : []));
     indentGuides = computed(() => {
         const lvl = this.level();
@@ -6732,28 +6728,33 @@ class TreeNodeComponent {
     }, ...(ngDevMode ? [{ debugName: "indentGuides" }] : []));
     isDraggable = computed(() => this.treeHost.draggable(), ...(ngDevMode ? [{ debugName: "isDraggable" }] : []));
     isDragging = computed(() => this.treeHost._dragNode() === this.node(), ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+    isFlashing = computed(() => this.treeHost._flashNode() === this.node(), ...(ngDevMode ? [{ debugName: "isFlashing" }] : []));
     dropPosition = computed(() => {
         if (this.treeHost._dragOverNode() === this.node()) {
             return this.treeHost._dropPosition();
         }
         return null;
     }, ...(ngDevMode ? [{ debugName: "dropPosition" }] : []));
+    ngAfterViewInit() {
+        const el = this.contentRef()?.nativeElement;
+        if (el)
+            this.treeHost._registerNode(this.node(), el);
+    }
+    ngOnDestroy() {
+        this.treeHost._unregisterNode(this.node());
+    }
     toggle(event) {
         event.stopPropagation();
         if (!this.hasChildren())
             return;
-        const newState = !this.isExpanded();
-        this._expanded.set(newState);
-        if (newState) {
-            this.nodeExpand.emit(this.node());
-        }
-        else {
-            this.nodeCollapse.emit(this.node());
-        }
+        this.treeHost.setExpanded(this.node(), !this.isExpanded());
     }
     onClick(event) {
         event.stopPropagation();
         this.nodeClick.emit(this.node());
+        if (this.treeHost.expandOnClick() && this.hasChildren()) {
+            this.toggle(event);
+        }
     }
     onDoubleClick(event) {
         event.stopPropagation();
@@ -6761,6 +6762,13 @@ class TreeNodeComponent {
             this.toggle(event);
         }
     }
+    onContextMenu(event) {
+        if (!this.treeHost.contextMenu())
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.treeHost._openContextMenu(this.node(), this.path(), event.clientX, event.clientY);
+    }
     onDragStart(event) {
         if (!this.isDraggable())
             return;
@@ -6779,7 +6787,6 @@ class TreeNodeComponent {
         const dragNode = this.treeHost._dragNode();
         if (!dragNode)
             return;
-        // Prevent dropping on self or own descendants
         if (dragNode === this.node() || isDescendantOf(this.node(), dragNode)) {
             return;
         }
@@ -6845,22 +6852,26 @@ class TreeNodeComponent {
         this.nodeCollapse.emit(node);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TreeNodeComponent, isStandalone: true, selector: "ui-tree-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, indent: { classPropertyName: "indent", publicName: "indent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeClick: "nodeClick", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse" }, ngImport: i0, template: "<div\n  class=\"ui-tree-node\"\n  [class.ui-tree-node--dragging]=\"isDragging()\"\n  [attr.draggable]=\"isDraggable()\"\n  (dragstart)=\"onDragStart($event)\"\n  (dragend)=\"onDragEnd()\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <div class=\"ui-tree-node__guides\">\n    @for (guide of indentGuides(); track guide) {\n      <span class=\"ui-tree-node__guide\" [style.width.px]=\"indent()\"></span>\n    }\n  </div>\n  <div\n    class=\"ui-tree-node__content\"\n    [class.ui-tree-node__content--selected]=\"false\"\n    [class.ui-tree-node__content--drop-before]=\"dropPosition() === 'before'\"\n    [class.ui-tree-node__content--drop-after]=\"dropPosition() === 'after'\"\n    [class.ui-tree-node__content--drop-inside]=\"dropPosition() === 'inside'\"\n    [style.padding-left.px]=\"level() * indent() + 8\"\n    (click)=\"onClick($event)\"\n    (dblclick)=\"onDoubleClick($event)\"\n  >\n    @if (hasChildren()) {\n      <button\n        type=\"button\"\n        class=\"ui-tree-node__toggle\"\n        [class.ui-tree-node__toggle--expanded]=\"isExpanded()\"\n        (click)=\"toggle($event)\"\n        [attr.aria-expanded]=\"isExpanded()\"\n        [attr.aria-label]=\"isExpanded() ? 'Collapse' : 'Expand'\"\n      >\n        <svg\n          class=\"ui-tree-node__chevron\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M6 4L10 8L6 12\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    }\n    @if (node().icon) {\n      <span class=\"ui-tree-node__icon\">{{ node().icon }}</span>\n    }\n    <span class=\"ui-tree-node__label\">{{ node().label }}</span>\n  </div>\n</div>\n@if (isExpanded() && hasChildren()) {\n  @for (child of node().children; track child) {\n    <ui-tree-node\n      [node]=\"child\"\n      [level]=\"level() + 1\"\n      [indent]=\"indent()\"\n      (nodeClick)=\"_onChildNodeClick($event)\"\n      (nodeExpand)=\"_onChildNodeExpand($event)\"\n      (nodeCollapse)=\"_onChildNodeCollapse($event)\"\n    />\n  }\n}\n", styles: [":host{display:block}.ui-tree-node{position:relative}.ui-tree-node__guides{position:absolute;top:0;bottom:0;left:0;display:flex;pointer-events:none}.ui-tree-node__guide{position:relative;flex-shrink:0}.ui-tree-node__guide:after{content:\"\";position:absolute;left:50%;top:0;bottom:0;width:1px;background-color:var(--ui-border-hover)}.ui-tree-node__content{display:flex;align-items:center;gap:var(--ui-spacing-xs);padding:var(--ui-spacing-xs) var(--ui-spacing-sm) var(--ui-spacing-xs) 0;border-radius:var(--ui-radius-sm);cursor:pointer;transition:background-color var(--ui-transition-fast)}.ui-tree-node__content:hover{background-color:var(--ui-bg-hover)}.ui-tree-node__content--selected{background-color:var(--ui-option-selected-bg);color:var(--ui-option-selected-text)}.ui-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);cursor:pointer;flex-shrink:0;transition:color var(--ui-transition-fast),background-color var(--ui-transition-fast)}.ui-tree-node__toggle:hover{background-color:var(--ui-bg-hover);color:var(--ui-text)}.ui-tree-node__toggle:focus-visible{outline:2px solid var(--ui-primary);outline-offset:-2px}.ui-tree-node__chevron{transition:transform var(--ui-transition-fast)}.ui-tree-node__toggle--expanded .ui-tree-node__chevron{transform:rotate(90deg)}.ui-tree-node__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:18px;height:18px;font-size:var(--ui-font-sm);color:var(--ui-text-muted)}.ui-tree-node__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}.ui-tree-node--dragging{opacity:.4}.ui-tree-node__content--drop-before{position:relative}.ui-tree-node__content--drop-before:before{content:\"\";position:absolute;top:0;left:0;right:0;height:2px;background-color:var(--ui-primary);border-radius:1px;pointer-events:none}.ui-tree-node__content--drop-after{position:relative}.ui-tree-node__content--drop-after:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px;background-color:var(--ui-primary);border-radius:1px;pointer-events:none}.ui-tree-node__content--drop-inside{background-color:color-mix(in srgb,var(--ui-primary) 10%,transparent);outline:1px solid var(--ui-primary);outline-offset:-1px;border-radius:var(--ui-radius-sm)}\n"], dependencies: [{ kind: "component", type: TreeNodeComponent, selector: "ui-tree-node", inputs: ["node", "level", "indent"], outputs: ["nodeClick", "nodeExpand", "nodeCollapse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TreeNodeComponent, isStandalone: true, selector: "ui-tree-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, indent: { classPropertyName: "indent", publicName: "indent", isSignal: true, isRequired: false, transformFunction: null }, parentPath: { classPropertyName: "parentPath", publicName: "parentPath", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeClick: "nodeClick", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse" }, viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["contentRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ui-tree-node\"\n  [class.ui-tree-node--dragging]=\"isDragging()\"\n  [attr.draggable]=\"isDraggable()\"\n  (dragstart)=\"onDragStart($event)\"\n  (dragend)=\"onDragEnd()\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <div class=\"ui-tree-node__guides\">\n    @for (guide of indentGuides(); track guide) {\n      <span class=\"ui-tree-node__guide\" [style.width.px]=\"indent()\"></span>\n    }\n  </div>\n  <div\n    #contentRef\n    class=\"ui-tree-node__content\"\n    [class.ui-tree-node__content--selected]=\"false\"\n    [class.ui-tree-node__content--flash]=\"isFlashing()\"\n    [class.ui-tree-node__content--drop-before]=\"dropPosition() === 'before'\"\n    [class.ui-tree-node__content--drop-after]=\"dropPosition() === 'after'\"\n    [class.ui-tree-node__content--drop-inside]=\"dropPosition() === 'inside'\"\n    [style.padding-left.px]=\"level() * indent() + 8\"\n    (click)=\"onClick($event)\"\n    (dblclick)=\"onDoubleClick($event)\"\n    (contextmenu)=\"onContextMenu($event)\"\n  >\n    @if (hasChildren()) {\n      <button\n        type=\"button\"\n        class=\"ui-tree-node__toggle\"\n        [class.ui-tree-node__toggle--expanded]=\"isExpanded()\"\n        (click)=\"toggle($event)\"\n        [attr.aria-expanded]=\"isExpanded()\"\n        [attr.aria-label]=\"isExpanded() ? 'Collapse' : 'Expand'\"\n      >\n        <svg\n          class=\"ui-tree-node__chevron\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M6 4L10 8L6 12\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    }\n    @if (node().icon) {\n      <span class=\"ui-tree-node__icon\">{{ node().icon }}</span>\n    }\n    <span class=\"ui-tree-node__label\">{{ node().label }}</span>\n  </div>\n</div>\n@if (isExpanded() && hasChildren()) {\n  @for (child of node().children; track child) {\n    <ui-tree-node\n      [node]=\"child\"\n      [level]=\"level() + 1\"\n      [indent]=\"indent()\"\n      [parentPath]=\"path()\"\n      (nodeClick)=\"_onChildNodeClick($event)\"\n      (nodeExpand)=\"_onChildNodeExpand($event)\"\n      (nodeCollapse)=\"_onChildNodeCollapse($event)\"\n    />\n  }\n}\n", styles: [":host{display:block}.ui-tree-node{position:relative}.ui-tree-node__guides{position:absolute;top:0;bottom:0;left:0;display:flex;pointer-events:none}.ui-tree-node__guide{position:relative;flex-shrink:0}.ui-tree-node__guide:after{content:\"\";position:absolute;left:50%;top:0;bottom:0;width:1px;background-color:var(--ui-border-hover)}.ui-tree-node__content{display:flex;align-items:center;gap:var(--ui-spacing-xs);padding:var(--ui-spacing-xs) var(--ui-spacing-sm) var(--ui-spacing-xs) 0;border-radius:var(--ui-radius-sm);cursor:pointer;transition:background-color var(--ui-transition-fast)}.ui-tree-node__content:hover{background-color:var(--ui-bg-hover)}.ui-tree-node__content--selected{background-color:var(--ui-option-selected-bg);color:var(--ui-option-selected-text)}.ui-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);cursor:pointer;flex-shrink:0;transition:color var(--ui-transition-fast),background-color var(--ui-transition-fast)}.ui-tree-node__toggle:hover{background-color:var(--ui-bg-hover);color:var(--ui-text)}.ui-tree-node__toggle:focus-visible{outline:2px solid var(--ui-primary);outline-offset:-2px}.ui-tree-node__chevron{transition:transform var(--ui-transition-fast)}.ui-tree-node__toggle--expanded .ui-tree-node__chevron{transform:rotate(90deg)}.ui-tree-node__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:18px;height:18px;font-size:var(--ui-font-sm);color:var(--ui-text-muted)}.ui-tree-node__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}.ui-tree-node--dragging{opacity:.4}.ui-tree-node__content--drop-before{position:relative}.ui-tree-node__content--drop-before:before{content:\"\";position:absolute;top:0;left:0;right:0;height:2px;background-color:var(--ui-primary);border-radius:1px;pointer-events:none}.ui-tree-node__content--drop-after{position:relative}.ui-tree-node__content--drop-after:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px;background-color:var(--ui-primary);border-radius:1px;pointer-events:none}.ui-tree-node__content--drop-inside{background-color:color-mix(in srgb,var(--ui-primary) 10%,transparent);outline:1px solid var(--ui-primary);outline-offset:-1px;border-radius:var(--ui-radius-sm)}.ui-tree-node__content--flash{animation:ui-tree-node-flash 1s ease-out}@keyframes ui-tree-node-flash{0%{background-color:color-mix(in srgb,var(--ui-primary) 40%,transparent)}to{background-color:transparent}}\n"], dependencies: [{ kind: "component", type: TreeNodeComponent, selector: "ui-tree-node", inputs: ["node", "level", "indent", "parentPath"], outputs: ["nodeClick", "nodeExpand", "nodeCollapse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TreeNodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-tree-node', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ui-tree-node\"\n  [class.ui-tree-node--dragging]=\"isDragging()\"\n  [attr.draggable]=\"isDraggable()\"\n  (dragstart)=\"onDragStart($event)\"\n  (dragend)=\"onDragEnd()\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <div class=\"ui-tree-node__guides\">\n    @for (guide of indentGuides(); track guide) {\n      <span class=\"ui-tree-node__guide\" [style.width.px]=\"indent()\"></span>\n    }\n  </div>\n  <div\n    class=\"ui-tree-node__content\"\n    [class.ui-tree-node__content--selected]=\"false\"\n    [class.ui-tree-node__content--drop-before]=\"dropPosition() === 'before'\"\n    [class.ui-tree-node__content--drop-after]=\"dropPosition() === 'after'\"\n    [class.ui-tree-node__content--drop-inside]=\"dropPosition() === 'inside'\"\n    [style.padding-left.px]=\"level() * indent() + 8\"\n    (click)=\"onClick($event)\"\n    (dblclick)=\"onDoubleClick($event)\"\n  >\n    @if (hasChildren()) {\n      <button\n        type=\"button\"\n        class=\"ui-tree-node__toggle\"\n        [class.ui-tree-node__toggle--expanded]=\"isExpanded()\"\n        (click)=\"toggle($event)\"\n        [attr.aria-expanded]=\"isExpanded()\"\n        [attr.aria-label]=\"isExpanded() ? 'Collapse' : 'Expand'\"\n      >\n        <svg\n          class=\"ui-tree-node__chevron\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M6 4L10 8L6 12\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    }\n    @if (node().icon) {\n      <span class=\"ui-tree-node__icon\">{{ node().icon }}</span>\n    }\n    <span class=\"ui-tree-node__label\">{{ node().label }}</span>\n  </div>\n</div>\n@if (isExpanded() && hasChildren()) {\n  @for (child of node().children; track child) {\n    <ui-tree-node\n      [node]=\"child\"\n      [level]=\"level() + 1\"\n      [indent]=\"indent()\"\n      (nodeClick)=\"_onChildNodeClick($event)\"\n      (nodeExpand)=\"_onChildNodeExpand($event)\"\n      (nodeCollapse)=\"_onChildNodeCollapse($event)\"\n    />\n  }\n}\n", styles: [":host{display:block}.ui-tree-node{position:relative}.ui-tree-node__guides{position:absolute;top:0;bottom:0;left:0;display:flex;pointer-events:none}.ui-tree-node__guide{position:relative;flex-shrink:0}.ui-tree-node__guide:after{content:\"\";position:absolute;left:50%;top:0;bottom:0;width:1px;background-color:var(--ui-border-hover)}.ui-tree-node__content{display:flex;align-items:center;gap:var(--ui-spacing-xs);padding:var(--ui-spacing-xs) var(--ui-spacing-sm) var(--ui-spacing-xs) 0;border-radius:var(--ui-radius-sm);cursor:pointer;transition:background-color var(--ui-transition-fast)}.ui-tree-node__content:hover{background-color:var(--ui-bg-hover)}.ui-tree-node__content--selected{background-color:var(--ui-option-selected-bg);color:var(--ui-option-selected-text)}.ui-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);cursor:pointer;flex-shrink:0;transition:color var(--ui-transition-fast),background-color var(--ui-transition-fast)}.ui-tree-node__toggle:hover{background-color:var(--ui-bg-hover);color:var(--ui-text)}.ui-tree-node__toggle:focus-visible{outline:2px solid var(--ui-primary);outline-offset:-2px}.ui-tree-node__chevron{transition:transform var(--ui-transition-fast)}.ui-tree-node__toggle--expanded .ui-tree-node__chevron{transform:rotate(90deg)}.ui-tree-node__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:18px;height:18px;font-size:var(--ui-font-sm);color:var(--ui-text-muted)}.ui-tree-node__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}.ui-tree-node--dragging{opacity:.4}.ui-tree-node__content--drop-before{position:relative}.ui-tree-node__content--drop-before:before{content:\"\";position:absolute;top:0;left:0;right:0;height:2px;background-color:var(--ui-primary);border-radius:1px;pointer-events:none}.ui-tree-node__content--drop-after{position:relative}.ui-tree-node__content--drop-after:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px;background-color:var(--ui-primary);border-radius:1px;pointer-events:none}.ui-tree-node__content--drop-inside{background-color:color-mix(in srgb,var(--ui-primary) 10%,transparent);outline:1px solid var(--ui-primary);outline-offset:-1px;border-radius:var(--ui-radius-sm)}\n"] }]
-        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], indent: [{ type: i0.Input, args: [{ isSignal: true, alias: "indent", required: false }] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], nodeExpand: [{ type: i0.Output, args: ["nodeExpand"] }], nodeCollapse: [{ type: i0.Output, args: ["nodeCollapse"] }] } });
+            args: [{ selector: 'ui-tree-node', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ui-tree-node\"\n  [class.ui-tree-node--dragging]=\"isDragging()\"\n  [attr.draggable]=\"isDraggable()\"\n  (dragstart)=\"onDragStart($event)\"\n  (dragend)=\"onDragEnd()\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <div class=\"ui-tree-node__guides\">\n    @for (guide of indentGuides(); track guide) {\n      <span class=\"ui-tree-node__guide\" [style.width.px]=\"indent()\"></span>\n    }\n  </div>\n  <div\n    #contentRef\n    class=\"ui-tree-node__content\"\n    [class.ui-tree-node__content--selected]=\"false\"\n    [class.ui-tree-node__content--flash]=\"isFlashing()\"\n    [class.ui-tree-node__content--drop-before]=\"dropPosition() === 'before'\"\n    [class.ui-tree-node__content--drop-after]=\"dropPosition() === 'after'\"\n    [class.ui-tree-node__content--drop-inside]=\"dropPosition() === 'inside'\"\n    [style.padding-left.px]=\"level() * indent() + 8\"\n    (click)=\"onClick($event)\"\n    (dblclick)=\"onDoubleClick($event)\"\n    (contextmenu)=\"onContextMenu($event)\"\n  >\n    @if (hasChildren()) {\n      <button\n        type=\"button\"\n        class=\"ui-tree-node__toggle\"\n        [class.ui-tree-node__toggle--expanded]=\"isExpanded()\"\n        (click)=\"toggle($event)\"\n        [attr.aria-expanded]=\"isExpanded()\"\n        [attr.aria-label]=\"isExpanded() ? 'Collapse' : 'Expand'\"\n      >\n        <svg\n          class=\"ui-tree-node__chevron\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M6 4L10 8L6 12\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    }\n    @if (node().icon) {\n      <span class=\"ui-tree-node__icon\">{{ node().icon }}</span>\n    }\n    <span class=\"ui-tree-node__label\">{{ node().label }}</span>\n  </div>\n</div>\n@if (isExpanded() && hasChildren()) {\n  @for (child of node().children; track child) {\n    <ui-tree-node\n      [node]=\"child\"\n      [level]=\"level() + 1\"\n      [indent]=\"indent()\"\n      [parentPath]=\"path()\"\n      (nodeClick)=\"_onChildNodeClick($event)\"\n      (nodeExpand)=\"_onChildNodeExpand($event)\"\n      (nodeCollapse)=\"_onChildNodeCollapse($event)\"\n    />\n  }\n}\n", styles: [":host{display:block}.ui-tree-node{position:relative}.ui-tree-node__guides{position:absolute;top:0;bottom:0;left:0;display:flex;pointer-events:none}.ui-tree-node__guide{position:relative;flex-shrink:0}.ui-tree-node__guide:after{content:\"\";position:absolute;left:50%;top:0;bottom:0;width:1px;background-color:var(--ui-border-hover)}.ui-tree-node__content{display:flex;align-items:center;gap:var(--ui-spacing-xs);padding:var(--ui-spacing-xs) var(--ui-spacing-sm) var(--ui-spacing-xs) 0;border-radius:var(--ui-radius-sm);cursor:pointer;transition:background-color var(--ui-transition-fast)}.ui-tree-node__content:hover{background-color:var(--ui-bg-hover)}.ui-tree-node__content--selected{background-color:var(--ui-option-selected-bg);color:var(--ui-option-selected-text)}.ui-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);cursor:pointer;flex-shrink:0;transition:color var(--ui-transition-fast),background-color var(--ui-transition-fast)}.ui-tree-node__toggle:hover{background-color:var(--ui-bg-hover);color:var(--ui-text)}.ui-tree-node__toggle:focus-visible{outline:2px solid var(--ui-primary);outline-offset:-2px}.ui-tree-node__chevron{transition:transform var(--ui-transition-fast)}.ui-tree-node__toggle--expanded .ui-tree-node__chevron{transform:rotate(90deg)}.ui-tree-node__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:18px;height:18px;font-size:var(--ui-font-sm);color:var(--ui-text-muted)}.ui-tree-node__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}.ui-tree-node--dragging{opacity:.4}.ui-tree-node__content--drop-before{position:relative}.ui-tree-node__content--drop-before:before{content:\"\";position:absolute;top:0;left:0;right:0;height:2px;background-color:var(--ui-primary);border-radius:1px;pointer-events:none}.ui-tree-node__content--drop-after{position:relative}.ui-tree-node__content--drop-after:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px;background-color:var(--ui-primary);border-radius:1px;pointer-events:none}.ui-tree-node__content--drop-inside{background-color:color-mix(in srgb,var(--ui-primary) 10%,transparent);outline:1px solid var(--ui-primary);outline-offset:-1px;border-radius:var(--ui-radius-sm)}.ui-tree-node__content--flash{animation:ui-tree-node-flash 1s ease-out}@keyframes ui-tree-node-flash{0%{background-color:color-mix(in srgb,var(--ui-primary) 40%,transparent)}to{background-color:transparent}}\n"] }]
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], indent: [{ type: i0.Input, args: [{ isSignal: true, alias: "indent", required: false }] }], parentPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentPath", required: false }] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], nodeExpand: [{ type: i0.Output, args: ["nodeExpand"] }], nodeCollapse: [{ type: i0.Output, args: ["nodeCollapse"] }], contentRef: [{ type: i0.ViewChild, args: ['contentRef', { isSignal: true }] }] } });
 
 const TREE_HOST = new InjectionToken('TREE_HOST');
 class TreeComponent {
     nodes = input([], ...(ngDevMode ? [{ debugName: "nodes" }] : []));
     indent = input(16, ...(ngDevMode ? [{ debugName: "indent" }] : []));
     draggable = input(false, ...(ngDevMode ? [{ debugName: "draggable" }] : []));
+    expandOnClick = input(false, ...(ngDevMode ? [{ debugName: "expandOnClick" }] : []));
+    contextMenu = input(false, ...(ngDevMode ? [{ debugName: "contextMenu" }] : []));
+    pathSeparator = input(' / ', ...(ngDevMode ? [{ debugName: "pathSeparator" }] : []));
     nodeClick = output();
     nodeExpand = output();
     nodeCollapse = output();
     nodeDrop = output();
+    nodeContextAction = output();
     /** @internal */
     _dragNode = signal(null, ...(ngDevMode ? [{ debugName: "_dragNode" }] : []));
     /** @internal */
@@ -6868,6 +6879,53 @@ class TreeComponent {
     /** @internal */
     _dropPosition = signal(null, ...(ngDevMode ? [{ debugName: "_dropPosition" }] : []));
     /** @internal */
+    _flashNode = signal(null, ...(ngDevMode ? [{ debugName: "_flashNode" }] : []));
+    /** @internal context-menu target — node and its path (root → node, inclusive) */
+    _menuNode = signal(null, ...(ngDevMode ? [{ debugName: "_menuNode" }] : []));
+    /** @internal */
+    _menuPath = signal([], ...(ngDevMode ? [{ debugName: "_menuPath" }] : []));
+    /** @internal whether the targeted node has children (drives expand/collapse-all visibility) */
+    _menuHasChildren = computed(() => {
+        const n = this._menuNode();
+        return !!n?.children && n.children.length > 0;
+    }, ...(ngDevMode ? [{ debugName: "_menuHasChildren" }] : []));
+    /** @internal whether the targeted node has a parent (drives go-to/collapse-parent visibility) */
+    _menuHasParent = computed(() => this._menuPath().length > 1, ...(ngDevMode ? [{ debugName: "_menuHasParent" }] : []));
+    _expansion = signal(new Map(), ...(ngDevMode ? [{ debugName: "_expansion" }] : []));
+    _nodeElements = new WeakMap();
+    flashTimer = null;
+    menu = viewChild('treeMenu', ...(ngDevMode ? [{ debugName: "menu" }] : []));
+    isExpanded(node) {
+        const override = this._expansion().get(node);
+        return override ?? (node.expanded ?? false);
+    }
+    setExpanded(node, value) {
+        const current = this.isExpanded(node);
+        if (current === value)
+            return;
+        const next = new Map(this._expansion());
+        next.set(node, value);
+        this._expansion.set(next);
+        if (value) {
+            this.nodeExpand.emit(node);
+        }
+        else {
+            this.nodeCollapse.emit(node);
+        }
+    }
+    expandSubtree(node, value) {
+        const next = new Map(this._expansion());
+        const walk = (n) => {
+            if (!n.children?.length)
+                return;
+            next.set(n, value);
+            for (const c of n.children)
+                walk(c);
+        };
+        walk(node);
+        this._expansion.set(next);
+    }
+    /** @internal */
     _onNodeClick(node) {
         this.nodeClick.emit(node);
     }
@@ -6883,13 +6941,116 @@ class TreeComponent {
     _emitDrop(event) {
         this.nodeDrop.emit(event);
     }
+    /** @internal */
+    _registerNode(node, el) {
+        this._nodeElements.set(node, el);
+    }
+    /** @internal */
+    _unregisterNode(node) {
+        this._nodeElements.delete(node);
+    }
+    /** @internal */
+    _openContextMenu(node, path, x, y) {
+        this._menuNode.set(node);
+        this._menuPath.set(path);
+        this.menu()?.openAt(x, y);
+    }
+    /** @internal */
+    _runAction(action) {
+        const node = this._menuNode();
+        const path = this._menuPath();
+        if (!node)
+            return;
+        switch (action) {
+            case 'copyValue':
+                this.copyToClipboard(node.label);
+                break;
+            case 'copyPath':
+                this.copyToClipboard(path.map((n) => n.label).join(this.pathSeparator()));
+                break;
+            case 'copyObject':
+                this.copyToClipboard(this.serializeNode(node));
+                break;
+            case 'expandAll':
+                this.expandSubtree(node, true);
+                break;
+            case 'collapseAll':
+                this.expandSubtree(node, false);
+                break;
+            case 'goToParent': {
+                const parent = path[path.length - 2];
+                if (parent)
+                    this.scrollAndFlash(parent);
+                break;
+            }
+            case 'collapseParent': {
+                const parent = path[path.length - 2];
+                if (parent)
+                    this.setExpanded(parent, false);
+                break;
+            }
+        }
+        this.nodeContextAction.emit({ node, path, action });
+    }
+    serializeNode(node) {
+        const value = node.data !== undefined ? node.data : this.sanitize(node);
+        try {
+            return JSON.stringify(value, null, 2);
+        }
+        catch {
+            return String(value);
+        }
+    }
+    sanitize(node) {
+        return {
+            label: node.label,
+            ...(node.icon !== undefined ? { icon: node.icon } : {}),
+            ...(node.children?.length ? { children: node.children.map((c) => this.sanitize(c)) } : {}),
+        };
+    }
+    scrollAndFlash(node) {
+        const el = this._nodeElements.get(node);
+        if (el) {
+            el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }
+        this._flashNode.set(node);
+        if (this.flashTimer)
+            clearTimeout(this.flashTimer);
+        this.flashTimer = setTimeout(() => {
+            this._flashNode.set(null);
+            this.flashTimer = null;
+        }, 1000);
+    }
+    copyToClipboard(text) {
+        if (navigator.clipboard?.writeText) {
+            navigator.clipboard.writeText(text).catch(() => this.execCommandCopy(text));
+        }
+        else {
+            this.execCommandCopy(text);
+        }
+    }
+    execCommandCopy(text) {
+        const ta = document.createElement('textarea');
+        ta.value = text;
+        ta.setAttribute('readonly', '');
+        ta.style.position = 'fixed';
+        ta.style.opacity = '0';
+        document.body.appendChild(ta);
+        ta.select();
+        try {
+            document.execCommand('copy');
+        }
+        finally {
+            document.body.removeChild(ta);
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TreeComponent, isStandalone: true, selector: "ui-tree", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, indent: { classPropertyName: "indent", publicName: "indent", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeClick: "nodeClick", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", nodeDrop: "nodeDrop" }, providers: [{ provide: TREE_HOST, useExisting: TreeComponent }], ngImport: i0, template: "<div class=\"ui-tree\">\n  @for (node of nodes(); track node) {\n    <ui-tree-node\n      [node]=\"node\"\n      [level]=\"0\"\n      [indent]=\"indent()\"\n      (nodeClick)=\"_onNodeClick($event)\"\n      (nodeExpand)=\"_onNodeExpand($event)\"\n      (nodeCollapse)=\"_onNodeCollapse($event)\"\n    />\n  }\n</div>\n", styles: [":host{display:block}.ui-tree{font-size:var(--ui-font-sm);color:var(--ui-text);-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "component", type: TreeNodeComponent, selector: "ui-tree-node", inputs: ["node", "level", "indent"], outputs: ["nodeClick", "nodeExpand", "nodeCollapse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TreeComponent, isStandalone: true, selector: "ui-tree", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, indent: { classPropertyName: "indent", publicName: "indent", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, expandOnClick: { classPropertyName: "expandOnClick", publicName: "expandOnClick", isSignal: true, isRequired: false, transformFunction: null }, contextMenu: { classPropertyName: "contextMenu", publicName: "contextMenu", isSignal: true, isRequired: false, transformFunction: null }, pathSeparator: { classPropertyName: "pathSeparator", publicName: "pathSeparator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeClick: "nodeClick", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", nodeDrop: "nodeDrop", nodeContextAction: "nodeContextAction" }, providers: [{ provide: TREE_HOST, useExisting: TreeComponent }], viewQueries: [{ propertyName: "menu", first: true, predicate: ["treeMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ui-tree\">\n  @for (node of nodes(); track node) {\n    <ui-tree-node\n      [node]=\"node\"\n      [level]=\"0\"\n      [indent]=\"indent()\"\n      [parentPath]=\"[]\"\n      (nodeClick)=\"_onNodeClick($event)\"\n      (nodeExpand)=\"_onNodeExpand($event)\"\n      (nodeCollapse)=\"_onNodeCollapse($event)\"\n    />\n  }\n</div>\n\n@if (contextMenu()) {\n  <ui-dropdown #treeMenu>\n    <ui-dropdown-item (clicked)=\"_runAction('copyValue')\">Copy value</ui-dropdown-item>\n    <ui-dropdown-item (clicked)=\"_runAction('copyPath')\">Copy path</ui-dropdown-item>\n    <ui-dropdown-item (clicked)=\"_runAction('copyObject')\">Copy object</ui-dropdown-item>\n    @if (_menuHasChildren()) {\n      <ui-dropdown-divider />\n      <ui-dropdown-item (clicked)=\"_runAction('expandAll')\">Expand all</ui-dropdown-item>\n      <ui-dropdown-item (clicked)=\"_runAction('collapseAll')\">Collapse all</ui-dropdown-item>\n    }\n    @if (_menuHasParent()) {\n      <ui-dropdown-divider />\n      <ui-dropdown-item (clicked)=\"_runAction('goToParent')\">Go to parent</ui-dropdown-item>\n      <ui-dropdown-item (clicked)=\"_runAction('collapseParent')\">Collapse parent</ui-dropdown-item>\n    }\n  </ui-dropdown>\n}\n", styles: [":host{display:block}.ui-tree{font-size:var(--ui-font-sm);color:var(--ui-text);-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "component", type: TreeNodeComponent, selector: "ui-tree-node", inputs: ["node", "level", "indent", "parentPath"], outputs: ["nodeClick", "nodeExpand", "nodeCollapse"] }, { kind: "component", type: DropdownComponent, selector: "ui-dropdown", inputs: ["position", "closeOnSelect", "matchTriggerWidth"] }, { kind: "component", type: DropdownItemComponent, selector: "ui-dropdown-item", inputs: ["disabled", "icon"], outputs: ["clicked"] }, { kind: "component", type: DropdownDividerComponent, selector: "ui-dropdown-divider" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-tree', standalone: true, imports: [TreeNodeComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: TREE_HOST, useExisting: TreeComponent }], template: "<div class=\"ui-tree\">\n  @for (node of nodes(); track node) {\n    <ui-tree-node\n      [node]=\"node\"\n      [level]=\"0\"\n      [indent]=\"indent()\"\n      (nodeClick)=\"_onNodeClick($event)\"\n      (nodeExpand)=\"_onNodeExpand($event)\"\n      (nodeCollapse)=\"_onNodeCollapse($event)\"\n    />\n  }\n</div>\n", styles: [":host{display:block}.ui-tree{font-size:var(--ui-font-sm);color:var(--ui-text);-webkit-user-select:none;user-select:none}\n"] }]
-        }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], indent: [{ type: i0.Input, args: [{ isSignal: true, alias: "indent", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], nodeExpand: [{ type: i0.Output, args: ["nodeExpand"] }], nodeCollapse: [{ type: i0.Output, args: ["nodeCollapse"] }], nodeDrop: [{ type: i0.Output, args: ["nodeDrop"] }] } });
+            args: [{ selector: 'ui-tree', standalone: true, imports: [TreeNodeComponent, DropdownComponent, DropdownItemComponent, DropdownDividerComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: TREE_HOST, useExisting: TreeComponent }], template: "<div class=\"ui-tree\">\n  @for (node of nodes(); track node) {\n    <ui-tree-node\n      [node]=\"node\"\n      [level]=\"0\"\n      [indent]=\"indent()\"\n      [parentPath]=\"[]\"\n      (nodeClick)=\"_onNodeClick($event)\"\n      (nodeExpand)=\"_onNodeExpand($event)\"\n      (nodeCollapse)=\"_onNodeCollapse($event)\"\n    />\n  }\n</div>\n\n@if (contextMenu()) {\n  <ui-dropdown #treeMenu>\n    <ui-dropdown-item (clicked)=\"_runAction('copyValue')\">Copy value</ui-dropdown-item>\n    <ui-dropdown-item (clicked)=\"_runAction('copyPath')\">Copy path</ui-dropdown-item>\n    <ui-dropdown-item (clicked)=\"_runAction('copyObject')\">Copy object</ui-dropdown-item>\n    @if (_menuHasChildren()) {\n      <ui-dropdown-divider />\n      <ui-dropdown-item (clicked)=\"_runAction('expandAll')\">Expand all</ui-dropdown-item>\n      <ui-dropdown-item (clicked)=\"_runAction('collapseAll')\">Collapse all</ui-dropdown-item>\n    }\n    @if (_menuHasParent()) {\n      <ui-dropdown-divider />\n      <ui-dropdown-item (clicked)=\"_runAction('goToParent')\">Go to parent</ui-dropdown-item>\n      <ui-dropdown-item (clicked)=\"_runAction('collapseParent')\">Collapse parent</ui-dropdown-item>\n    }\n  </ui-dropdown>\n}\n", styles: [":host{display:block}.ui-tree{font-size:var(--ui-font-sm);color:var(--ui-text);-webkit-user-select:none;user-select:none}\n"] }]
+        }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], indent: [{ type: i0.Input, args: [{ isSignal: true, alias: "indent", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], expandOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandOnClick", required: false }] }], contextMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenu", required: false }] }], pathSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "pathSeparator", required: false }] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], nodeExpand: [{ type: i0.Output, args: ["nodeExpand"] }], nodeCollapse: [{ type: i0.Output, args: ["nodeCollapse"] }], nodeDrop: [{ type: i0.Output, args: ["nodeDrop"] }], nodeContextAction: [{ type: i0.Output, args: ["nodeContextAction"] }], menu: [{ type: i0.ViewChild, args: ['treeMenu', { isSignal: true }] }] } });
 
 /** Directive to mark a custom variable popover template */
 class VariablePopoverDirective {