primeng 21.0.0-beta.1 → 21.0.0-rc.1

package/fesm2022/primeng-tree.mjs

@@ -2,7 +2,7 @@ export * from 'primeng/types/tree';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, inject, forwardRef, signal, computed, numberAttribute, booleanAttribute, Input, ViewEncapsulation, Component, EventEmitter, HostListener, ContentChildren, ViewChild, ContentChild, Output, Optional, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { Injectable, InjectionToken, inject, forwardRef, signal, computed, numberAttribute, booleanAttribute, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, model, EventEmitter, HostListener, ContentChildren, ViewChild, ContentChild, Output, Optional, NgModule } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { getOuterWidth, getOuterHeight, find, findSingle, focus, removeAccents, resolveFieldData } from '@primeuix/utils';
@@ -43,7 +43,8 @@ const classes = {
         'p-tree-node-content': true,
         'p-tree-node-selectable': instance.selectable,
         'p-tree-node-dragover': instance.isNodeDropActive(),
-        'p-tree-node-selected': instance.selectionMode === 'checkbox' && instance.tree.highlightOnSelect ? instance.checked : instance.selected
+        'p-tree-node-selected': instance.selectionMode === 'checkbox' && instance.tree.highlightOnSelect ? instance.checked : instance.selected,
+        'p-tree-node-contextmenu-selected': instance.isContextMenuSelected()
     }),
     nodeToggleButton: 'p-tree-node-toggle-button',
     nodeToggleIcon: 'p-tree-node-toggle-icon',
@@ -58,10 +59,10 @@ class TreeStyle extends BaseStyle {
     name = 'tree';
     style = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TreeStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TreeStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TreeStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -159,19 +160,37 @@ class UITreeNode extends BaseComponent {
     loadingMode;
     tree = inject(forwardRef(() => Tree));
     timeout;
-    isPrevDropPointHovered = signal(false, ...(ngDevMode ? [{ debugName: "isPrevDropPointHovered" }] : []));
-    isNextDropPointHovered = signal(false, ...(ngDevMode ? [{ debugName: "isNextDropPointHovered" }] : []));
-    isNodeDropHovered = signal(false, ...(ngDevMode ? [{ debugName: "isNodeDropHovered" }] : []));
-    isPrevDropPointActive = computed(() => this.isPrevDropPointHovered() && this.isDroppable(), ...(ngDevMode ? [{ debugName: "isPrevDropPointActive" }] : []));
-    isNextDropPointActive = computed(() => this.isNextDropPointHovered() && this.isDroppable(), ...(ngDevMode ? [{ debugName: "isNextDropPointActive" }] : []));
-    isNodeDropActive = computed(() => this.isNodeDropHovered() && this.isNodeDroppable(), ...(ngDevMode ? [{ debugName: "isNodeDropActive" }] : []));
-    dropPosition = computed(() => (this.isPrevDropPointActive() ? -1 : this.isNextDropPointActive() ? 1 : 0), ...(ngDevMode ? [{ debugName: "dropPosition" }] : []));
+    isPrevDropPointHovered = signal(false, { ...(ngDevMode ? { debugName: "isPrevDropPointHovered" } : {}) });
+    isNextDropPointHovered = signal(false, { ...(ngDevMode ? { debugName: "isNextDropPointHovered" } : {}) });
+    isNodeDropHovered = signal(false, { ...(ngDevMode ? { debugName: "isNodeDropHovered" } : {}) });
+    isPrevDropPointActive = computed(() => this.isPrevDropPointHovered() && this.isDroppable(), { ...(ngDevMode ? { debugName: "isPrevDropPointActive" } : {}) });
+    isNextDropPointActive = computed(() => this.isNextDropPointHovered() && this.isDroppable(), { ...(ngDevMode ? { debugName: "isNextDropPointActive" } : {}) });
+    isNodeDropActive = computed(() => this.isNodeDropHovered() && this.isNodeDroppable(), { ...(ngDevMode ? { debugName: "isNodeDropActive" } : {}) });
+    dropPosition = computed(() => (this.isPrevDropPointActive() ? -1 : this.isNextDropPointActive() ? 1 : 0), { ...(ngDevMode ? { debugName: "dropPosition" } : {}) });
     _componentStyle = inject(TreeStyle);
+    /**
+     * Computed signal that reactively tracks selection state.
+     */
+    _selected = computed(() => {
+        // Reading selection() makes this computed reactive to selection changes
+        this.tree.selection();
+        return this.tree.isSelected(this.node);
+    }, { ...(ngDevMode ? { debugName: "_selected" } : {}) });
+    /**
+     * Computed signal that reactively tracks context menu selection state.
+     */
+    _contextMenuSelected = computed(() => {
+        const selection = this.tree.contextMenuSelection();
+        if (!selection || !this.node) {
+            return false;
+        }
+        return selection === this.node || (selection.key && selection.key === this.node.key);
+    }, { ...(ngDevMode ? { debugName: "_contextMenuSelected" } : {}) });
     get selected() {
-        return this.tree.selectionMode === 'single' || this.tree.selectionMode === 'multiple' ? this.isSelected() : undefined;
+        return this.tree.selectionMode === 'single' || this.tree.selectionMode === 'multiple' ? this._selected() : undefined;
     }
     get checked() {
-        return this.tree.selectionMode === 'checkbox' ? this.isSelected() : undefined;
+        return this.tree.selectionMode === 'checkbox' ? this._selected() : undefined;
     }
     get nodeClass() {
         return this.tree._componentStyle.classes.node({ instance: this });
@@ -216,7 +235,10 @@ class UITreeNode extends BaseComponent {
         return this.tree.isNodeLeaf(this.node);
     }
     isSelected() {
-        return this.tree.isSelected(this.node);
+        return this._selected();
+    }
+    isContextMenuSelected() {
+        return this._contextMenuSelected();
     }
     isSameNode(event) {
         return event.currentTarget && (event.currentTarget.isSameNode(event.target) || event.currentTarget.isSameNode(event.target.closest('[role="treeitem"]')));
@@ -571,8 +593,8 @@ class UITreeNode extends BaseComponent {
             focus(node);
         }, 1);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UITreeNode, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: UITreeNode, isStandalone: true, selector: "p-treeNode", inputs: { rowNode: "rowNode", node: "node", parentNode: "parentNode", root: ["root", "root", booleanAttribute], index: ["index", "index", numberAttribute], firstChild: ["firstChild", "firstChild", booleanAttribute], lastChild: ["lastChild", "lastChild", booleanAttribute], level: ["level", "level", numberAttribute], indentation: ["indentation", "indentation", numberAttribute], itemSize: ["itemSize", "itemSize", numberAttribute], loadingMode: "loadingMode" }, providers: [TreeStyle, { provide: TREENODE_INSTANCE, useExisting: UITreeNode }, { provide: PARENT_INSTANCE, useExisting: UITreeNode }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: UITreeNode, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: UITreeNode, isStandalone: true, selector: "p-treeNode", inputs: { rowNode: "rowNode", node: "node", parentNode: "parentNode", root: ["root", "root", booleanAttribute], index: ["index", "index", numberAttribute], firstChild: ["firstChild", "firstChild", booleanAttribute], lastChild: ["lastChild", "lastChild", booleanAttribute], level: ["level", "level", numberAttribute], indentation: ["indentation", "indentation", numberAttribute], itemSize: ["itemSize", "itemSize", numberAttribute], loadingMode: "loadingMode" }, providers: [TreeStyle, { provide: TREENODE_INSTANCE, useExisting: UITreeNode }, { provide: PARENT_INSTANCE, useExisting: UITreeNode }], usesInheritance: true, ngImport: i0, template: `
         @if (node) {
             <li
                 [class]="cn(cx('node'), node.styleClass)"
@@ -663,7 +685,7 @@ class UITreeNode extends BaseComponent {
                     </span>
                 </div>
                 @if (isNextDropPointActive()) {
-                    <div [class]="cx('dropPoint')" [attr.aria-hidden]="true" [pBind]="getPTOptions('dropPoint')"></div>
+                    <div [class]="cx('dropPoint', { next: true })" [attr.aria-hidden]="true" [pBind]="getPTOptions('dropPoint')"></div>
                 }
                 <ul [class]="cx('nodeChildren')" *ngIf="!tree.virtualScroll && node.children && node.expanded" role="group" [pBind]="ptm('nodeChildren')">
                     <p-treeNode
@@ -682,14 +704,15 @@ class UITreeNode extends BaseComponent {
                 </ul>
             </li>
         }
-    `, isInline: true, dependencies: [{ kind: "component", type: UITreeNode, selector: "p-treeNode", inputs: ["rowNode", "node", "parentNode", "root", "index", "firstChild", "lastChild", "level", "indentation", "itemSize", "loadingMode"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "component", type: Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ChevronRightIcon, selector: "[data-p-icon=\"chevron-right\"]" }, { kind: "component", type: ChevronDownIcon, selector: "[data-p-icon=\"chevron-down\"]" }, { kind: "component", type: SpinnerIcon, selector: "[data-p-icon=\"spinner\"]" }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i3.Bind, selector: "[pBind]", inputs: ["pBind"] }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "component", type: UITreeNode, selector: "p-treeNode", inputs: ["rowNode", "node", "parentNode", "root", "index", "firstChild", "lastChild", "level", "indentation", "itemSize", "loadingMode"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "component", type: Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ChevronRightIcon, selector: "[data-p-icon=\"chevron-right\"]" }, { kind: "component", type: ChevronDownIcon, selector: "[data-p-icon=\"chevron-down\"]" }, { kind: "component", type: SpinnerIcon, selector: "[data-p-icon=\"spinner\"]" }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i3.Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UITreeNode, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: UITreeNode, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-treeNode',
                     standalone: true,
                     imports: [CommonModule, Ripple, Checkbox, FormsModule, ChevronRightIcon, ChevronDownIcon, SpinnerIcon, SharedModule, BindModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
         @if (node) {
             <li
@@ -781,7 +804,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                     </span>
                 </div>
                 @if (isNextDropPointActive()) {
-                    <div [class]="cx('dropPoint')" [attr.aria-hidden]="true" [pBind]="getPTOptions('dropPoint')"></div>
+                    <div [class]="cx('dropPoint', { next: true })" [attr.aria-hidden]="true" [pBind]="getPTOptions('dropPoint')"></div>
                 }
                 <ul [class]="cx('nodeChildren')" *ngIf="!tree.virtualScroll && node.children && node.expanded" role="group" [pBind]="ptm('nodeChildren')">
                     <p-treeNode
@@ -864,7 +887,7 @@ class Tree extends BaseComponent {
      * A single treenode instance or an array to refer to the selections.
      * @group Props
      */
-    selection;
+    selection = model(null, { ...(ngDevMode ? { debugName: "selection" } : {}) });
     /**
      * Style class of the component.
      * @deprecated since v20.0.0, use `class` instead.
@@ -876,6 +899,16 @@ class Tree extends BaseComponent {
      * @group Props
      */
     contextMenu;
+    /**
+     * Defines the behavior of context menu selection, in "separate" mode context menu updates contextMenuSelection property whereas in joint mode selection property is used instead so that when row selection is enabled, both row selection and context menu selection use the same property.
+     * @group Props
+     */
+    contextMenuSelectionMode = 'joint';
+    /**
+     * Selected node with a context menu.
+     * @group Props
+     */
+    contextMenuSelection = model(null, { ...(ngDevMode ? { debugName: "contextMenuSelection" } : {}) });
     /**
      * Scope of the draggable nodes to match a droppableScope.
      * @group Props
@@ -1031,12 +1064,6 @@ class Tree extends BaseComponent {
      * @group Props
      */
     highlightOnSelect = false;
-    /**
-     * Callback to invoke on selection change.
-     * @param {(TreeNode<any> | TreeNode<any>[] | null)} event - Custom selection change event.
-     * @group Emits
-     */
-    selectionChange = new EventEmitter();
     /**
      * Callback to invoke when a node is selected.
      * @param {TreeNodeSelectEvent} event - Node select event.
@@ -1104,52 +1131,60 @@ class Tree extends BaseComponent {
      */
     onFilter = new EventEmitter();
     /**
-     * Filter template.
+     * Custom filter template.
+     * @param {TreeFilterTemplateContext} context - filter context.
+     * @see {@link TreeFilterTemplateContext}
      * @group Templates
      */
     filterTemplate;
     /**
-     * Node template.
+     * Custom node template.
      * @group Templates
      */
     nodeTemplate;
     /**
-     * Header template.
+     * Custom header template.
      * @group Templates
      */
     headerTemplate;
     /**
-     * Footer template.
+     * Custom footer template.
      * @group Templates
      */
     footerTemplate;
     /**
-     * Loader template.
+     * Custom loader template.
+     * @param {TreeLoaderTemplateContext} context - loader context.
+     * @see {@link TreeLoaderTemplateContext}
      * @group Templates
      */
     loaderTemplate;
     /**
-     * Empty message template.
+     * Custom empty message template.
      * @group Templates
      */
-    emptyMessageTemplate;
+    emptyTemplate;
     /**
-     * Toggler icon template.
+     * Custom toggler icon template.
+     * @param {TreeTogglerIconTemplateContext} context - toggler icon context.
+     * @see {@link TreeTogglerIconTemplateContext}
      * @group Templates
      */
     togglerIconTemplate;
     /**
-     * Checkbox icon template.
+     * Custom checkbox icon template.
+     * @param {TreeCheckboxIconTemplateContext} context - checkbox icon context.
+     * @see {@link TreeCheckboxIconTemplateContext}
      * @group Templates
      */
     checkboxIconTemplate;
     /**
-     * Loading icon template.
+     * Custom loading icon template.
      * @group Templates
      */
     loadingIconTemplate;
     /**
-     * Filter icon template.
+     * Custom filter icon template.
      * @group Templates
      */
     filterIconTemplate;
@@ -1159,7 +1194,7 @@ class Tree extends BaseComponent {
     contentViewChild;
     templates;
     _headerTemplate;
-    _emptyMessageTemplate;
+    _emptyTemplate;
     _footerTemplate;
     _loaderTemplate;
     _togglerIconTemplate;
@@ -1177,7 +1212,7 @@ class Tree extends BaseComponent {
                     this._headerTemplate = item.template;
                     break;
                 case 'empty':
-                    this._emptyMessageTemplate = item.template;
+                    this._emptyTemplate = item.template;
                     break;
                 case 'footer':
                     this._footerTemplate = item.template;
@@ -1296,7 +1331,7 @@ class Tree extends BaseComponent {
         if (section === 'nodetogglebutton' || section === 'nodetoggleicon') {
             return;
         }
-        else if (this.selectionMode) {
+        if (this.selectionMode) {
             if (node.selectable === false) {
                 node.style = '--p-focus-ring-color: none;';
                 return;
@@ -1314,27 +1349,26 @@ class Tree extends BaseComponent {
             }
             let index = this.findIndexInSelection(node);
             let selected = index >= 0;
+            const currentSelection = this.selection();
             if (this.isCheckboxSelectionMode()) {
                 if (selected) {
                     if (this.propagateSelectionDown)
                         this.propagateDown(node, false);
                     else
-                        this.selection = this.selection.filter((val, i) => i != index);
+                        this.selection.set(currentSelection.filter((_val, i) => i != index));
                     if (this.propagateSelectionUp && node.parent) {
                         this.propagateUp(node.parent, false);
                     }
-                    this.selectionChange.emit(this.selection);
                     this.onNodeUnselect.emit({ originalEvent: event, node: node });
                 }
                 else {
                     if (this.propagateSelectionDown)
                         this.propagateDown(node, true);
                     else
-                        this.selection = [...(this.selection || []), node];
+                        this.selection.set([...(currentSelection || []), node]);
                     if (this.propagateSelectionUp && node.parent) {
                         this.propagateUp(node.parent, true);
                     }
-                    this.selectionChange.emit(this.selection);
                     this.onNodeSelect.emit({ originalEvent: event, node: node });
                 }
             }
@@ -1344,22 +1378,20 @@ class Tree extends BaseComponent {
                     let metaKey = event.metaKey || event.ctrlKey;
                     if (selected && metaKey) {
                         if (this.isSingleSelectionMode()) {
-                            this.selectionChange.emit(null);
+                            this.selection.set(null);
                         }
                         else {
-                            this.selection = this.selection.filter((val, i) => i != index);
-                            this.selectionChange.emit(this.selection);
+                            this.selection.set(currentSelection.filter((_val, i) => i != index));
                         }
                         this.onNodeUnselect.emit({ originalEvent: event, node: node });
                     }
                     else {
                         if (this.isSingleSelectionMode()) {
-                            this.selectionChange.emit(node);
+                            this.selection.set(node);
                         }
                         else if (this.isMultipleSelectionMode()) {
-                            this.selection = !metaKey ? [] : this.selection || [];
-                            this.selection = [...this.selection, node];
-                            this.selectionChange.emit(this.selection);
+                            const base = !metaKey ? [] : currentSelection || [];
+                            this.selection.set([...base, node]);
                         }
                         this.onNodeSelect.emit({ originalEvent: event, node: node });
                     }
@@ -1367,11 +1399,11 @@ class Tree extends BaseComponent {
                 else {
                     if (this.isSingleSelectionMode()) {
                         if (selected) {
-                            this.selection = null;
+                            this.selection.set(null);
                             this.onNodeUnselect.emit({ originalEvent: event, node: node });
                         }
                         else {
-                            this.selection = node;
+                            this.selection.set(node);
                             setTimeout(() => {
                                 this.onNodeSelect.emit({ originalEvent: event, node: node });
                             });
@@ -1379,17 +1411,16 @@ class Tree extends BaseComponent {
                     }
                     else {
                         if (selected) {
-                            this.selection = this.selection.filter((val, i) => i != index);
+                            this.selection.set(currentSelection.filter((_val, i) => i != index));
                             this.onNodeUnselect.emit({ originalEvent: event, node: node });
                         }
                         else {
-                            this.selection = [...(this.selection || []), node];
+                            this.selection.set([...(currentSelection || []), node]);
                             setTimeout(() => {
                                 this.onNodeSelect.emit({ originalEvent: event, node: node });
                             });
                         }
                     }
-                    this.selectionChange.emit(this.selection);
                 }
             }
         }
@@ -1405,17 +1436,32 @@ class Tree extends BaseComponent {
             if (section === 'nodetogglebutton' || section === 'nodetoggleicon') {
                 return;
             }
-            else {
-                let index = this.findIndexInSelection(node);
-                let selected = index >= 0;
-                if (!selected) {
-                    if (this.isSingleSelectionMode())
-                        this.selectionChange.emit(node);
-                    else
-                        this.selectionChange.emit([node]);
-                }
+            let index = this.findIndexInSelection(node);
+            let isNodeSelected = index >= 0;
+            const onContextMenuCallback = () => {
                 this.contextMenu.show(event);
+                this.contextMenu.hideCallback = () => {
+                    this.contextMenuSelection.set(null);
+                };
                 this.onNodeContextMenuSelect.emit({ originalEvent: event, node: node });
+            };
+            if (this.contextMenuSelectionMode === 'separate') {
+                // In 'separate' mode: Update contextMenuSelection with clicked node, don't modify selection
+                this.contextMenuSelection.set(node);
+                onContextMenuCallback();
+            }
+            else if (this.contextMenuSelectionMode === 'joint') {
+                // In 'joint' mode: Update only selection, don't touch contextMenuSelection
+                if (!isNodeSelected) {
+                    if (this.isSingleSelectionMode()) {
+                        this.selection.set(node);
+                    }
+                    else {
+                        this.selection.set([node]);
+                    }
+                }
+                // If already selected, keep current selection as is
+                onContextMenuCallback();
             }
         }
     }
@@ -1424,14 +1470,17 @@ class Tree extends BaseComponent {
     }
     findIndexInSelection(node) {
         let index = -1;
-        if (this.selectionMode && this.selection) {
+        const currentSelection = this.selection();
+        if (this.selectionMode && currentSelection) {
             if (this.isSingleSelectionMode()) {
-                let areNodesEqual = (this.selection.key && this.selection.key === node.key) || this.selection == node;
+                const sel = currentSelection;
+                let areNodesEqual = (sel.key && sel.key === node.key) || sel == node;
                 index = areNodesEqual ? 0 : -1;
             }
             else {
-                for (let i = 0; i < this.selection.length; i++) {
-                    let selectedNode = this.selection[i];
+                const selArray = currentSelection;
+                for (let i = 0; i < selArray.length; i++) {
+                    let selectedNode = selArray[i];
                     let areNodesEqual = (selectedNode.key && selectedNode.key === node.key) || selectedNode == node;
                     if (areNodesEqual) {
                         index = i;
@@ -1480,15 +1529,16 @@ class Tree extends BaseComponent {
                     childPartialSelected = true;
                 }
             }
+            const currentSelection = this.selection() || [];
             if (select && selectedCount == node.children.length) {
-                this.selection = [...(this.selection || []), node];
+                this.selection.set([...currentSelection, node]);
                 node.partialSelected = false;
             }
             else {
                 if (!select) {
                     let index = this.findIndexInSelection(node);
                     if (index >= 0) {
-                        this.selection = this.selection.filter((val, i) => i != index);
+                        this.selection.set(currentSelection.filter((_val, i) => i != index));
                     }
                 }
                 if (childPartialSelected || (selectedCount > 0 && selectedCount != node.children.length))
@@ -1505,11 +1555,12 @@ class Tree extends BaseComponent {
     }
     propagateDown(node, select) {
         let index = this.findIndexInSelection(node);
+        const currentSelection = this.selection() || [];
         if (select && index == -1) {
-            this.selection = [...(this.selection || []), node];
+            this.selection.set([...currentSelection, node]);
         }
         else if (!select && index > -1) {
-            this.selection = this.selection.filter((val, i) => i != index);
+            this.selection.set(currentSelection.filter((_val, i) => i != index));
         }
         node.partialSelected = false;
         this.syncNodeOption(node, this.filteredNodes, 'partialSelected');
@@ -1787,9 +1838,9 @@ class Tree extends BaseComponent {
             scrollable: this.scrollHeight === 'flex'
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: Tree, deps: [{ token: i4.TreeDragDropService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: Tree, isStandalone: true, selector: "p-tree", inputs: { value: "value", selectionMode: "selectionMode", loadingMode: "loadingMode", selection: "selection", styleClass: "styleClass", contextMenu: "contextMenu", draggableScope: "draggableScope", droppableScope: "droppableScope", draggableNodes: ["draggableNodes", "draggableNodes", booleanAttribute], droppableNodes: ["droppableNodes", "droppableNodes", booleanAttribute], metaKeySelection: ["metaKeySelection", "metaKeySelection", booleanAttribute], propagateSelectionUp: ["propagateSelectionUp", "propagateSelectionUp", booleanAttribute], propagateSelectionDown: ["propagateSelectionDown", "propagateSelectionDown", booleanAttribute], loading: ["loading", "loading", booleanAttribute], loadingIcon: "loadingIcon", emptyMessage: "emptyMessage", ariaLabel: "ariaLabel", togglerAriaLabel: "togglerAriaLabel", ariaLabelledBy: "ariaLabelledBy", validateDrop: ["validateDrop", "validateDrop", booleanAttribute], filter: ["filter", "filter", booleanAttribute], filterInputAutoFocus: ["filterInputAutoFocus", "filterInputAutoFocus", booleanAttribute], filterBy: "filterBy", filterMode: "filterMode", filterOptions: "filterOptions", filterPlaceholder: "filterPlaceholder", filteredNodes: "filteredNodes", filterLocale: "filterLocale", scrollHeight: "scrollHeight", lazy: ["lazy", "lazy", booleanAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", indentation: ["indentation", "indentation", numberAttribute], _templateMap: "_templateMap", trackBy: "trackBy", highlightOnSelect: ["highlightOnSelect", "highlightOnSelect", booleanAttribute] }, outputs: { selectionChange: "selectionChange", onNodeSelect: "onNodeSelect", onNodeUnselect: "onNodeUnselect", onNodeExpand: "onNodeExpand", onNodeCollapse: "onNodeCollapse", onNodeContextMenuSelect: "onNodeContextMenuSelect", onNodeDoubleClick: "onNodeDoubleClick", onNodeDrop: "onNodeDrop", onLazyLoad: "onLazyLoad", onScroll: "onScroll", onScrollIndexChange: "onScrollIndexChange", onFilter: "onFilter" }, host: { listeners: { "drop": "handleDropEvent($event)", "dragover": "handleDragOverEvent($event)", "dragenter": "handleDragEnterEvent()", "dragleave": "handleDragLeaveEvent($event)" }, properties: { "class": "cn(cx('root'), styleClass)", "attr.data-p": "containerDataP" } }, providers: [TreeStyle, { provide: TREE_INSTANCE, useExisting: Tree }, { provide: PARENT_INSTANCE, useExisting: Tree }], queries: [{ propertyName: "filterTemplate", first: true, predicate: ["filter"] }, { propertyName: "nodeTemplate", first: true, predicate: ["node"] }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "loaderTemplate", first: true, predicate: ["loader"] }, { propertyName: "emptyMessageTemplate", first: true, predicate: ["empty"] }, { propertyName: "togglerIconTemplate", first: true, predicate: ["togglericon"] }, { propertyName: "checkboxIconTemplate", first: true, predicate: ["checkboxicon"] }, { propertyName: "loadingIconTemplate", first: true, predicate: ["loadingicon"] }, { propertyName: "filterIconTemplate", first: true, predicate: ["filtericon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "filterViewChild", first: true, predicate: ["filter"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "wrapperViewChild", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i3.Bind }], ngImport: i0, template: `
-        <div [class]="cx('mask')" *ngIf="loading && loadingMode === 'mask'" [pBind]="ptm('mask')">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Tree, deps: [{ token: i4.TreeDragDropService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: Tree, isStandalone: true, selector: "p-tree", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: false, isRequired: false, transformFunction: null }, loadingMode: { classPropertyName: "loadingMode", publicName: "loadingMode", isSignal: false, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, contextMenu: { classPropertyName: "contextMenu", publicName: "contextMenu", isSignal: false, isRequired: false, transformFunction: null }, contextMenuSelectionMode: { classPropertyName: "contextMenuSelectionMode", publicName: "contextMenuSelectionMode", isSignal: false, isRequired: false, transformFunction: null }, contextMenuSelection: { classPropertyName: "contextMenuSelection", publicName: "contextMenuSelection", isSignal: true, isRequired: false, transformFunction: null }, draggableScope: { classPropertyName: "draggableScope", publicName: "draggableScope", isSignal: false, isRequired: false, transformFunction: null }, droppableScope: { classPropertyName: "droppableScope", publicName: "droppableScope", isSignal: false, isRequired: false, transformFunction: null }, draggableNodes: { classPropertyName: "draggableNodes", publicName: "draggableNodes", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, droppableNodes: { classPropertyName: "droppableNodes", publicName: "droppableNodes", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, metaKeySelection: { classPropertyName: "metaKeySelection", publicName: "metaKeySelection", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, propagateSelectionUp: { classPropertyName: "propagateSelectionUp", publicName: "propagateSelectionUp", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, propagateSelectionDown: { classPropertyName: "propagateSelectionDown", publicName: "propagateSelectionDown", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: false, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, togglerAriaLabel: { classPropertyName: "togglerAriaLabel", publicName: "togglerAriaLabel", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, validateDrop: { classPropertyName: "validateDrop", publicName: "validateDrop", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, filterInputAutoFocus: { classPropertyName: "filterInputAutoFocus", publicName: "filterInputAutoFocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: false, isRequired: false, transformFunction: null }, filterMode: { classPropertyName: "filterMode", publicName: "filterMode", isSignal: false, isRequired: false, transformFunction: null }, filterOptions: { classPropertyName: "filterOptions", publicName: "filterOptions", isSignal: false, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: false, isRequired: false, transformFunction: null }, filteredNodes: { classPropertyName: "filteredNodes", publicName: "filteredNodes", isSignal: false, isRequired: false, transformFunction: null }, filterLocale: { classPropertyName: "filterLocale", publicName: "filterLocale", isSignal: false, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: false, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: false, isRequired: false, transformFunction: numberAttribute }, virtualScrollOptions: { classPropertyName: "virtualScrollOptions", publicName: "virtualScrollOptions", isSignal: false, isRequired: false, transformFunction: null }, indentation: { classPropertyName: "indentation", publicName: "indentation", isSignal: false, isRequired: false, transformFunction: numberAttribute }, _templateMap: { classPropertyName: "_templateMap", publicName: "_templateMap", isSignal: false, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: false, isRequired: false, transformFunction: null }, highlightOnSelect: { classPropertyName: "highlightOnSelect", publicName: "highlightOnSelect", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, outputs: { selection: "selectionChange", contextMenuSelection: "contextMenuSelectionChange", onNodeSelect: "onNodeSelect", onNodeUnselect: "onNodeUnselect", onNodeExpand: "onNodeExpand", onNodeCollapse: "onNodeCollapse", onNodeContextMenuSelect: "onNodeContextMenuSelect", onNodeDoubleClick: "onNodeDoubleClick", onNodeDrop: "onNodeDrop", onLazyLoad: "onLazyLoad", onScroll: "onScroll", onScrollIndexChange: "onScrollIndexChange", onFilter: "onFilter" }, host: { listeners: { "drop": "handleDropEvent($event)", "dragover": "handleDragOverEvent($event)", "dragenter": "handleDragEnterEvent()", "dragleave": "handleDragLeaveEvent($event)" }, properties: { "class": "cn(cx('root'), styleClass)", "attr.data-p": "containerDataP" } }, providers: [TreeStyle, { provide: TREE_INSTANCE, useExisting: Tree }, { provide: PARENT_INSTANCE, useExisting: Tree }], queries: [{ propertyName: "filterTemplate", first: true, predicate: ["filter"] }, { propertyName: "nodeTemplate", first: true, predicate: ["node"] }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "loaderTemplate", first: true, predicate: ["loader"] }, { propertyName: "emptyTemplate", first: true, predicate: ["empty"] }, { propertyName: "togglerIconTemplate", first: true, predicate: ["togglericon"] }, { propertyName: "checkboxIconTemplate", first: true, predicate: ["checkboxicon"] }, { propertyName: "loadingIconTemplate", first: true, predicate: ["loadingicon"] }, { propertyName: "filterIconTemplate", first: true, predicate: ["filtericon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "filterViewChild", first: true, predicate: ["filter"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "wrapperViewChild", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i3.Bind }], ngImport: i0, template: `
+        <div [class]="cx('mask')" *ngIf="loading && loadingMode === 'mask'" [pBind]="ptm('mask')" animate.enter="p-overlay-mask-enter-active" animate.leave="p-overlay-mask-leave-active">
             <i *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), 'pi-spin' + loadingIcon)" [pBind]="ptm('loadingIcon')"></i>
             <ng-container *ngIf="!loadingIcon">
                 <svg data-p-icon="spinner" *ngIf="!loadingIconTemplate && !_loadingIconTemplate" spin [class]="cx('loadingIcon')" [pBind]="ptm('loadingIcon')" />
@@ -1900,22 +1951,22 @@ class Tree extends BaseComponent {
         </ng-container>
 
         <div [class]="cx('emptyMessage')" *ngIf="!loading && (getRootNode() == null || getRootNode().length === 0)" [pBind]="ptm('emptyMessage')">
-            <ng-container *ngIf="!emptyMessageTemplate && !_emptyMessageTemplate; else emptyFilter">
+            <ng-container *ngIf="!emptyTemplate && !_emptyTemplate; else emptyFilter">
                 {{ emptyMessageLabel }}
             </ng-container>
-            <ng-template #emptyFilter *ngTemplateOutlet="emptyMessageTemplate || _emptyMessageTemplate"></ng-template>
+            <ng-template #emptyFilter *ngTemplateOutlet="emptyTemplate || _emptyTemplate"></ng-template>
         </div>
         <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Scroller, selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", inputs: ["hostName", "id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: SearchIcon, selector: "[data-p-icon=\"search\"]" }, { kind: "component", type: SpinnerIcon, selector: "[data-p-icon=\"spinner\"]" }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPt", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: UITreeNode, selector: "p-treeNode", inputs: ["rowNode", "node", "parentNode", "root", "index", "firstChild", "lastChild", "level", "indentation", "itemSize", "loadingMode"] }, { kind: "ngmodule", type: AutoFocusModule }, { kind: "directive", type: i5.AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Scroller, selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", inputs: ["hostName", "id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: SearchIcon, selector: "[data-p-icon=\"search\"]" }, { kind: "component", type: SpinnerIcon, selector: "[data-p-icon=\"spinner\"]" }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: UITreeNode, selector: "p-treeNode", inputs: ["rowNode", "node", "parentNode", "root", "index", "firstChild", "lastChild", "level", "indentation", "itemSize", "loadingMode"] }, { kind: "ngmodule", type: AutoFocusModule }, { kind: "directive", type: i5.AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: Tree, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Tree, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tree',
                     standalone: true,
                     imports: [CommonModule, Scroller, SharedModule, SearchIcon, SpinnerIcon, InputText, FormsModule, IconField, InputIcon, UITreeNode, AutoFocusModule, Bind],
                     template: `
-        <div [class]="cx('mask')" *ngIf="loading && loadingMode === 'mask'" [pBind]="ptm('mask')">
+        <div [class]="cx('mask')" *ngIf="loading && loadingMode === 'mask'" [pBind]="ptm('mask')" animate.enter="p-overlay-mask-enter-active" animate.leave="p-overlay-mask-leave-active">
             <i *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), 'pi-spin' + loadingIcon)" [pBind]="ptm('loadingIcon')"></i>
             <ng-container *ngIf="!loadingIcon">
                 <svg data-p-icon="spinner" *ngIf="!loadingIconTemplate && !_loadingIconTemplate" spin [class]="cx('loadingIcon')" [pBind]="ptm('loadingIcon')" />
@@ -2026,10 +2077,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
         </ng-container>
 
         <div [class]="cx('emptyMessage')" *ngIf="!loading && (getRootNode() == null || getRootNode().length === 0)" [pBind]="ptm('emptyMessage')">
-            <ng-container *ngIf="!emptyMessageTemplate && !_emptyMessageTemplate; else emptyFilter">
+            <ng-container *ngIf="!emptyTemplate && !_emptyTemplate; else emptyFilter">
                 {{ emptyMessageLabel }}
             </ng-container>
-            <ng-template #emptyFilter *ngTemplateOutlet="emptyMessageTemplate || _emptyMessageTemplate"></ng-template>
+            <ng-template #emptyFilter *ngTemplateOutlet="emptyTemplate || _emptyTemplate"></ng-template>
         </div>
         <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
     `,
@@ -2050,13 +2101,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                 type: Input
             }], loadingMode: [{
                 type: Input
-            }], selection: [{
-                type: Input
-            }], styleClass: [{
+            }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], styleClass: [{
                 type: Input
             }], contextMenu: [{
                 type: Input
-            }], draggableScope: [{
+            }], contextMenuSelectionMode: [{
+                type: Input
+            }], contextMenuSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenuSelection", required: false }] }, { type: i0.Output, args: ["contextMenuSelectionChange"] }], draggableScope: [{
                 type: Input
             }], droppableScope: [{
                 type: Input
@@ -2132,8 +2183,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
             }], highlightOnSelect: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], selectionChange: [{
-                type: Output
             }], onNodeSelect: [{
                 type: Output
             }], onNodeUnselect: [{
@@ -2171,7 +2220,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
             }], loaderTemplate: [{
                 type: ContentChild,
                 args: ['loader', { descendants: false }]
-            }], emptyMessageTemplate: [{
+            }], emptyTemplate: [{
                 type: ContentChild,
                 args: ['empty', { descendants: false }]
             }], togglerIconTemplate: [{
@@ -2215,11 +2264,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                 args: ['dragleave', ['$event']]
             }] } });
 class TreeModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: TreeModule, imports: [Tree, SharedModule], exports: [Tree, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeModule, imports: [Tree, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: TreeModule, imports: [Tree, SharedModule], exports: [Tree, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TreeModule, imports: [Tree, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TreeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Tree, SharedModule],