@m1z23r/ngx-ui 1.1.49 → 1.1.51

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,24 +6728,26 @@ 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();
@@ -6764,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;
@@ -6782,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;
         }
@@ -6848,12 +6852,12 @@ 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 {
@@ -6861,10 +6865,16 @@ class TreeComponent {
     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" }] : []));
+    valueFormatter = input(null, ...(ngDevMode ? [{ debugName: "valueFormatter" }] : []));
+    pathFormatter = input(null, ...(ngDevMode ? [{ debugName: "pathFormatter" }] : []));
+    objectFormatter = input(null, ...(ngDevMode ? [{ debugName: "objectFormatter" }] : []));
     nodeClick = output();
     nodeExpand = output();
     nodeCollapse = output();
     nodeDrop = output();
+    nodeContextAction = output();
     /** @internal */
     _dragNode = signal(null, ...(ngDevMode ? [{ debugName: "_dragNode" }] : []));
     /** @internal */
@@ -6872,6 +6882,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);
     }
@@ -6887,13 +6944,329 @@ 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': {
+                const text = this.valueFormatter()?.(node, path) ?? node.label;
+                this.copyToClipboard(text);
+                break;
+            }
+            case 'copyPath': {
+                const text = this.pathFormatter()?.(node, path) ??
+                    path.map((n) => n.label).join(this.pathSeparator());
+                this.copyToClipboard(text);
+                break;
+            }
+            case 'copyObject': {
+                const text = this.objectFormatter()?.(node, path) ?? this.serializeNode(node);
+                this.copyToClipboard(text);
+                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 }, expandOnClick: { classPropertyName: "expandOnClick", publicName: "expandOnClick", 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 }, valueFormatter: { classPropertyName: "valueFormatter", publicName: "valueFormatter", isSignal: true, isRequired: false, transformFunction: null }, pathFormatter: { classPropertyName: "pathFormatter", publicName: "pathFormatter", isSignal: true, isRequired: false, transformFunction: null }, objectFormatter: { classPropertyName: "objectFormatter", publicName: "objectFormatter", 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 }] }], expandOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandOnClick", 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 }] }], valueFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormatter", required: false }] }], pathFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "pathFormatter", required: false }] }], objectFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectFormatter", 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 }] }] } });
+
+const IDENT_RE = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
+function isIdentifier(key) {
+    return IDENT_RE.test(key);
+}
+function appendKey(path, key) {
+    return isIdentifier(key) ? (path ? `${path}.${key}` : key) : `${path}[${JSON.stringify(key)}]`;
+}
+function appendIndex(path, i) {
+    return `${path}[${i}]`;
+}
+function prettyPrimitive(v) {
+    if (v === null)
+        return 'null';
+    if (v === undefined)
+        return 'undefined';
+    if (typeof v === 'string')
+        return JSON.stringify(v);
+    if (typeof v === 'number' || typeof v === 'boolean' || typeof v === 'bigint')
+        return String(v);
+    if (v instanceof Date)
+        return JSON.stringify(v.toISOString());
+    return String(v);
+}
+function safeStringify(v) {
+    try {
+        return JSON.stringify(v, replacer(), 2);
+    }
+    catch {
+        return String(v);
+    }
+}
+function replacer() {
+    const seen = new WeakSet();
+    return function (_key, value) {
+        if (typeof value === 'bigint')
+            return value.toString();
+        if (typeof value === 'object' && value !== null) {
+            if (seen.has(value))
+                return '[Circular]';
+            seen.add(value);
+        }
+        return value;
+    };
+}
+function kindOf(v) {
+    if (Array.isArray(v))
+        return 'array';
+    if (v !== null && typeof v === 'object')
+        return 'object';
+    return 'primitive';
+}
+function sizeLabel(kind, value) {
+    if (kind === 'array')
+        return `[${value.length}]`;
+    if (kind === 'object')
+        return `{${Object.keys(value).length}}`;
+    return prettyPrimitive(value);
+}
+function makeLabel(keyPart, kind, value, isRoot) {
+    const size = sizeLabel(kind, value);
+    if (kind === 'primitive') {
+        if (isRoot)
+            return keyPart ? `${keyPart}: ${size}` : size;
+        return keyPart ? `${keyPart}: ${size}` : size;
+    }
+    // object / array
+    return keyPart ? `${keyPart} ${size}` : size;
+}
+/**
+ * Convert an arbitrary JSON-shaped value into a TreeNode array suitable for
+ * `<ui-tree [nodes]>`. Each generated node carries a `data: JsonNodeMeta`.
+ *
+ * Returns a single-element array containing the root node.
+ */
+function jsonToTreeNodes(value, options = {}) {
+    const rootLabel = options.rootLabel ?? '';
+    const pathRoot = options.pathRoot ?? '';
+    const expandDepth = options.expandDepth ?? 1;
+    const ancestors = new WeakSet();
+    const root = build(value, null, rootLabel, pathRoot, 0, expandDepth, ancestors, true);
+    return [root];
+}
+function build(value, key, keyPart, path, depth, expandDepth, ancestors, isRoot) {
+    // Detect cycles: only if `value` is one of our ancestors in this DFS path.
+    if (value !== null && typeof value === 'object' && ancestors.has(value)) {
+        const placeholder = '[Circular]';
+        return {
+            label: keyPart ? `${keyPart}: "${placeholder}"` : `"${placeholder}"`,
+            data: {
+                key,
+                value: placeholder,
+                kind: 'primitive',
+                jsonPath: path,
+            },
+        };
+    }
+    const kind = kindOf(value);
+    const label = makeLabel(keyPart, kind, value, isRoot);
+    const expanded = isRoot ? true : depth <= expandDepth;
+    const node = {
+        label,
+        expanded,
+        data: { key, value, kind, jsonPath: path },
+    };
+    if (kind === 'object' || kind === 'array') {
+        ancestors.add(value);
+        if (kind === 'object') {
+            const obj = value;
+            const keys = Object.keys(obj);
+            if (keys.length > 0) {
+                node.children = keys.map((k) => build(obj[k], k, k, appendKey(path, k), depth + 1, expandDepth, ancestors, false));
+            }
+        }
+        else {
+            const arr = value;
+            if (arr.length > 0) {
+                node.children = arr.map((v, i) => build(v, i, `[${i}]`, appendIndex(path, i), depth + 1, expandDepth, ancestors, false));
+            }
+        }
+        ancestors.delete(value);
+    }
+    return node;
+}
+
+class JsonTreeComponent {
+    json = input(undefined, ...(ngDevMode ? [{ debugName: "json" }] : []));
+    rootLabel = input('', ...(ngDevMode ? [{ debugName: "rootLabel" }] : []));
+    pathRoot = input('', ...(ngDevMode ? [{ debugName: "pathRoot" }] : []));
+    expandDepth = input(1, ...(ngDevMode ? [{ debugName: "expandDepth" }] : []));
+    indent = input(16, ...(ngDevMode ? [{ debugName: "indent" }] : []));
+    draggable = input(false, ...(ngDevMode ? [{ debugName: "draggable" }] : []));
+    expandOnClick = input(false, ...(ngDevMode ? [{ debugName: "expandOnClick" }] : []));
+    contextMenu = input(true, ...(ngDevMode ? [{ debugName: "contextMenu" }] : []));
+    nodeClick = output();
+    nodeContextAction = output();
+    nodes = computed(() => jsonToTreeNodes(this.json(), {
+        rootLabel: this.rootLabel(),
+        pathRoot: this.pathRoot(),
+        expandDepth: this.expandDepth(),
+    }), ...(ngDevMode ? [{ debugName: "nodes" }] : []));
+    valueFmt = (node) => {
+        const meta = node.data;
+        if (!meta)
+            return null;
+        if (meta.kind === 'primitive') {
+            const v = meta.value;
+            if (v === null)
+                return 'null';
+            if (v === undefined)
+                return 'undefined';
+            if (typeof v === 'string')
+                return v;
+            if (typeof v === 'bigint')
+                return v.toString();
+            return String(v);
+        }
+        return safeStringify(meta.value);
+    };
+    pathFmt = (node) => {
+        const meta = node.data;
+        return meta ? meta.jsonPath : null;
+    };
+    objectFmt = (node) => {
+        const meta = node.data;
+        return meta ? safeStringify(meta.value) : null;
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: JsonTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: JsonTreeComponent, isStandalone: true, selector: "ui-json-tree", inputs: { json: { classPropertyName: "json", publicName: "json", isSignal: true, isRequired: false, transformFunction: null }, rootLabel: { classPropertyName: "rootLabel", publicName: "rootLabel", isSignal: true, isRequired: false, transformFunction: null }, pathRoot: { classPropertyName: "pathRoot", publicName: "pathRoot", isSignal: true, isRequired: false, transformFunction: null }, expandDepth: { classPropertyName: "expandDepth", publicName: "expandDepth", 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 } }, outputs: { nodeClick: "nodeClick", nodeContextAction: "nodeContextAction" }, ngImport: i0, template: `
+    <ui-tree
+      [nodes]="nodes()"
+      [indent]="indent()"
+      [draggable]="draggable()"
+      [expandOnClick]="expandOnClick()"
+      [contextMenu]="contextMenu()"
+      [valueFormatter]="valueFmt"
+      [pathFormatter]="pathFmt"
+      [objectFormatter]="objectFmt"
+      (nodeClick)="nodeClick.emit($event)"
+      (nodeContextAction)="nodeContextAction.emit($event)"
+    />
+  `, isInline: true, dependencies: [{ kind: "component", type: TreeComponent, selector: "ui-tree", inputs: ["nodes", "indent", "draggable", "expandOnClick", "contextMenu", "pathSeparator", "valueFormatter", "pathFormatter", "objectFormatter"], outputs: ["nodeClick", "nodeExpand", "nodeCollapse", "nodeDrop", "nodeContextAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: JsonTreeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-json-tree',
+                    standalone: true,
+                    imports: [TreeComponent],
+                    template: `
+    <ui-tree
+      [nodes]="nodes()"
+      [indent]="indent()"
+      [draggable]="draggable()"
+      [expandOnClick]="expandOnClick()"
+      [contextMenu]="contextMenu()"
+      [valueFormatter]="valueFmt"
+      [pathFormatter]="pathFmt"
+      [objectFormatter]="objectFmt"
+      (nodeClick)="nodeClick.emit($event)"
+      (nodeContextAction)="nodeContextAction.emit($event)"
+    />
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { json: [{ type: i0.Input, args: [{ isSignal: true, alias: "json", required: false }] }], rootLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootLabel", required: false }] }], pathRoot: [{ type: i0.Input, args: [{ isSignal: true, alias: "pathRoot", required: false }] }], expandDepth: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandDepth", 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 }] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], nodeContextAction: [{ type: i0.Output, args: ["nodeContextAction"] }] } });
 
 /** Directive to mark a custom variable popover template */
 class VariablePopoverDirective {
@@ -7294,5 +7667,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionHeaderDirective, AccordionItemComponent, AlertComponent, BadgeComponent, ButtonComponent, CardComponent, CellTemplateDirective, CellValuePipe, CheckboxComponent, ChipInputComponent, ChipTemplateDirective, CircularProgressComponent, ContentComponent, ContextMenuDirective, DIALOG_DATA, DIALOG_REF, DatepickerComponent, DatetimepickerComponent, DialogRef, DialogService, DropdownComponent, DropdownDividerComponent, DropdownItemComponent, DropdownTriggerDirective, DynamicTabsComponent, FileChooserComponent, FilePreviewPipe, FileSizePipe, FooterComponent, InputComponent, LOADABLE, LoadingDirective, LoadingService, ModalComponent, NavbarComponent, OptionComponent, OptionTemplateDirective, PaginationComponent, ProgressComponent, RadioComponent, RadioGroupComponent, RangeSliderComponent, SelectComponent, ShellComponent, SidebarComponent, SidebarService, SidebarToggleComponent, SliderComponent, SpinnerComponent, SplitComponent, SplitPaneComponent, SwitchComponent, TAB_DATA, TAB_REF, TREE_HOST, TabActivePipe, TabComponent, TabIconDirective, TabRef, TableComponent, TabsComponent, TabsService, TemplateInputComponent, TemplateInputSuffixDirective, TextareaComponent, TimepickerComponent, ToastRef, ToastService, TooltipDirective, TreeComponent, TreeNodeComponent, Validators, VariablePopoverDirective };
+export { AccordionComponent, AccordionHeaderDirective, AccordionItemComponent, AlertComponent, BadgeComponent, ButtonComponent, CardComponent, CellTemplateDirective, CellValuePipe, CheckboxComponent, ChipInputComponent, ChipTemplateDirective, CircularProgressComponent, ContentComponent, ContextMenuDirective, DIALOG_DATA, DIALOG_REF, DatepickerComponent, DatetimepickerComponent, DialogRef, DialogService, DropdownComponent, DropdownDividerComponent, DropdownItemComponent, DropdownTriggerDirective, DynamicTabsComponent, FileChooserComponent, FilePreviewPipe, FileSizePipe, FooterComponent, InputComponent, JsonTreeComponent, LOADABLE, LoadingDirective, LoadingService, ModalComponent, NavbarComponent, OptionComponent, OptionTemplateDirective, PaginationComponent, ProgressComponent, RadioComponent, RadioGroupComponent, RangeSliderComponent, SelectComponent, ShellComponent, SidebarComponent, SidebarService, SidebarToggleComponent, SliderComponent, SpinnerComponent, SplitComponent, SplitPaneComponent, SwitchComponent, TAB_DATA, TAB_REF, TREE_HOST, TabActivePipe, TabComponent, TabIconDirective, TabRef, TableComponent, TabsComponent, TabsService, TemplateInputComponent, TemplateInputSuffixDirective, TextareaComponent, TimepickerComponent, ToastRef, ToastService, TooltipDirective, TreeComponent, TreeNodeComponent, Validators, VariablePopoverDirective, jsonToTreeNodes };
 //# sourceMappingURL=m1z23r-ngx-ui.mjs.map