@ngstarter-ui/components 21.0.24 → 21.0.26

package/fesm2022/ngstarter-ui-components-tree.mjs

@@ -1,6 +1,8 @@
 import * as i0 from '@angular/core';
-import { inject, ViewContainerRef, Directive, viewChild, ChangeDetectionStrategy, Component, input, numberAttribute, booleanAttribute, HostAttributeToken, effect } from '@angular/core';
+import { inject, ViewContainerRef, Directive, input, booleanAttribute, output, signal, ViewChild, ChangeDetectionStrategy, Component, createComponent, ElementRef, Renderer2, ApplicationRef, EnvironmentInjector, PLATFORM_ID, numberAttribute, HostAttributeToken, effect } from '@angular/core';
 import { CDK_TREE_NODE_OUTLET_NODE, CdkTreeNodeOutlet, CdkTree, CdkTreeNode, CdkNestedTreeNode, CdkTreeNodePadding, CdkTreeNodeToggle, CdkTreeNodeDef } from '@angular/cdk/tree';
+import { isPlatformBrowser } from '@angular/common';
+import { Checkbox } from '@ngstarter-ui/components/checkbox';
 
 class TreeNodeOutlet {
     viewContainer = inject(ViewContainerRef);
@@ -27,11 +29,443 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                 }]
         }] });
 class Tree extends CdkTree {
-    // Outlets within the tree's template where the dataNodes will be inserted.
-    // We need an initializer here to avoid a TS error. The value will be set in `ngAfterViewInit`.
-    _nodeOutlet = viewChild(TreeNodeOutlet);
+    checkable = input(false, { ...(ngDevMode ? { debugName: "checkable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    selectable = input(false, { ...(ngDevMode ? { debugName: "selectable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    draggable = input(false, { ...(ngDevMode ? { debugName: "draggable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    childrenKey = input('children', ...(ngDevMode ? [{ debugName: "childrenKey" }] : /* istanbul ignore next */ []));
+    checkedChange = output();
+    selectedChange = output();
+    nodeDrop = output();
+    _checkStateVersion = signal(0, ...(ngDevMode ? [{ debugName: "_checkStateVersion" }] : /* istanbul ignore next */ []));
+    _selectedKey = signal(undefined, ...(ngDevMode ? [{ debugName: "_selectedKey" }] : /* istanbul ignore next */ []));
+    _dropTargetKey = signal(undefined, ...(ngDevMode ? [{ debugName: "_dropTargetKey" }] : /* istanbul ignore next */ []));
+    _dropTargetPosition = signal(undefined, ...(ngDevMode ? [{ debugName: "_dropTargetPosition" }] : /* istanbul ignore next */ []));
+    _checkedKeys = new Set();
+    _nodeValueByDataKey = new Map();
+    _disabledDataKeys = new Set();
+    _enabledDataKeys = new Set();
+    _draggedNode;
+    _nodeOutlet = undefined;
+    _toggleNodeChecked(node, checked) {
+        if (this._isNodeDisabled(node)) {
+            return;
+        }
+        const nodes = [node, ...this._getCheckableDescendants(node)].filter(item => !this._isNodeDisabled(item));
+        for (const item of nodes) {
+            const key = this._getCheckableNodeKey(item);
+            if (checked) {
+                this._checkedKeys.add(key);
+            }
+            else {
+                this._checkedKeys.delete(key);
+            }
+        }
+        this._syncCheckedParentKeys();
+        this._checkStateVersion.update(value => value + 1);
+        this.checkedChange.emit(this._getCheckedValues());
+    }
+    _isNodeChecked(node) {
+        if (this._isNodeDisabled(node)) {
+            return false;
+        }
+        const descendants = this._getCheckableDescendants(node).filter(item => !this._isNodeDisabled(item));
+        if (!descendants.length) {
+            return this._checkedKeys.has(this._getCheckableNodeKey(node));
+        }
+        return descendants.every(item => this._checkedKeys.has(this._getCheckableNodeKey(item)));
+    }
+    _isNodeIndeterminate(node) {
+        if (this._isNodeDisabled(node)) {
+            return false;
+        }
+        const descendants = this._getCheckableDescendants(node).filter(item => !this._isNodeDisabled(item));
+        if (!descendants.length) {
+            return false;
+        }
+        const selectedCount = descendants.filter(item => this._checkedKeys.has(this._getCheckableNodeKey(item))).length;
+        return selectedCount > 0 && selectedCount < descendants.length;
+    }
+    _selectNode(node) {
+        if (this._isNodeDisabled(node)) {
+            return;
+        }
+        const value = this._getTreeNodeValue(node);
+        if (Object.is(this._selectedKey(), value)) {
+            return;
+        }
+        this._selectedKey.set(value);
+        this.selectedChange.emit(value);
+    }
+    _isNodeSelected(node) {
+        return !this._isNodeDisabled(node) && Object.is(this._selectedKey(), this._getTreeNodeValue(node));
+    }
+    _canDragNode(node) {
+        return node !== undefined && this.draggable() && !this._isNodeDisabled(node);
+    }
+    _isNodeDropTarget(node) {
+        return node !== undefined && Object.is(this._dropTargetKey(), this._getTreeNodeDataKey(node));
+    }
+    _isNodeDropTargetPosition(node, position) {
+        return this._isNodeDropTarget(node) && this._dropTargetPosition() === position;
+    }
+    _startNodeDrag(node, event) {
+        if (!this._canDragNode(node)) {
+            event.preventDefault();
+            return;
+        }
+        this._draggedNode = node;
+        if (event.dataTransfer) {
+            event.dataTransfer.effectAllowed = 'move';
+            event.dataTransfer.setData('text/plain', String(this._getTreeNodeValue(node) ?? ''));
+        }
+    }
+    _dragNodeOver(node, event) {
+        const position = this._getDropPosition(event);
+        if (!this._canDropNode(node, position)) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = 'move';
+        }
+        this._dropTargetKey.set(this._getTreeNodeDataKey(node));
+        this._dropTargetPosition.set(position);
+    }
+    _dragNodeLeave(node, event) {
+        event.stopPropagation();
+        if (Object.is(this._dropTargetKey(), this._getTreeNodeDataKey(node))) {
+            this._dropTargetKey.set(undefined);
+            this._dropTargetPosition.set(undefined);
+        }
+    }
+    _dropNodeInto(node, event) {
+        const position = this._dropTargetPosition() ?? this._getDropPosition(event);
+        if (!this._canDropNode(node, position)) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const source = this._draggedNode;
+        const moved = this._moveNode(source, node, position);
+        this._clearNodeDrag();
+        if (moved) {
+            this.nodeDrop.emit({
+                source,
+                target: node,
+                position,
+                sourceValue: this._getTreeNodeValue(source),
+                targetValue: this._getTreeNodeValue(node),
+                dataSource: this._getRootNodes() ?? [],
+            });
+        }
+    }
+    _endNodeDrag() {
+        this._clearNodeDrag();
+    }
+    _registerNodeValue(node, value) {
+        const key = this._getTreeNodeDataKey(node);
+        this._nodeValueByDataKey.set(key, value);
+    }
+    _unregisterNodeValueByDataKey(key) {
+        this._nodeValueByDataKey.delete(key);
+    }
+    _registerNodeDisabled(node, disabled) {
+        const key = this._getTreeNodeDataKey(node);
+        if (disabled) {
+            const checkedKey = this._getCheckableNodeKey(node);
+            const wasChecked = this._checkedKeys.has(checkedKey);
+            this._disabledDataKeys.add(key);
+            this._enabledDataKeys.delete(key);
+            this._checkedKeys.delete(checkedKey);
+            if (Object.is(this._selectedKey(), this._getTreeNodeValue(node))) {
+                this._selectedKey.set(undefined);
+                this.selectedChange.emit(undefined);
+            }
+            if (wasChecked) {
+                this._syncCheckedParentKeys();
+                this._checkStateVersion.update(value => value + 1);
+                this.checkedChange.emit(this._getCheckedValues());
+            }
+        }
+        else {
+            this._disabledDataKeys.delete(key);
+            this._enabledDataKeys.add(key);
+        }
+    }
+    _unregisterNodeDisabledByDataKey(key) {
+        this._disabledDataKeys.delete(key);
+        this._enabledDataKeys.delete(key);
+    }
+    _isNodeDisabled(node) {
+        const key = this._getTreeNodeDataKey(node);
+        if (this._enabledDataKeys.has(key)) {
+            return false;
+        }
+        return this._disabledDataKeys.has(key) || node?.disabled === true;
+    }
+    _getTreeNodeDataKey(node) {
+        return this._getTreeNodeKey(node);
+    }
+    _getTreeNodeValue(node) {
+        const key = this._getTreeNodeDataKey(node);
+        return this._nodeValueByDataKey.has(key) ? this._nodeValueByDataKey.get(key) : key;
+    }
+    _canDropNode(target, position) {
+        const source = this._draggedNode;
+        return !!source
+            && this.draggable()
+            && !this._isNodeDisabled(target)
+            && !this._isSameNode(source, target)
+            && !this._isNodeDescendantOf(target, source);
+    }
+    _moveNode(source, target, position) {
+        const rootNodes = this._getRootNodes();
+        if (!rootNodes) {
+            return false;
+        }
+        const moved = position === 'inside'
+            ? this._moveNodeInto(source, target, rootNodes)
+            : this._moveNodeBeside(source, target, position, rootNodes);
+        if (!moved) {
+            return false;
+        }
+        this._refreshTreeData(rootNodes);
+        this._syncCheckedParentKeys();
+        this._checkStateVersion.update(value => value + 1);
+        return true;
+    }
+    _moveNodeInto(source, target, rootNodes) {
+        const sourceLocation = this._removeNodeFrom(rootNodes, source);
+        if (!sourceLocation) {
+            return false;
+        }
+        const targetChildren = this._getMutableNodeChildren(target);
+        if (!targetChildren) {
+            sourceLocation.items.splice(sourceLocation.index, 0, source);
+            return false;
+        }
+        targetChildren.push(source);
+        this.expand?.(target);
+        return true;
+    }
+    _moveNodeBeside(source, target, position, rootNodes) {
+        const sourceLocation = this._removeNodeFrom(rootNodes, source);
+        if (!sourceLocation) {
+            return false;
+        }
+        const targetLocation = this._findNodeLocation(rootNodes, target);
+        if (!targetLocation) {
+            sourceLocation.items.splice(sourceLocation.index, 0, source);
+            return false;
+        }
+        const insertIndex = position === 'before' ? targetLocation.index : targetLocation.index + 1;
+        targetLocation.items.splice(insertIndex, 0, source);
+        return true;
+    }
+    _findNodeLocation(nodes, target) {
+        for (let i = 0; i < nodes.length; i++) {
+            const node = nodes[i];
+            if (this._isSameNode(node, target)) {
+                return { items: nodes, index: i };
+            }
+            const children = this._getDataNodeChildren(node);
+            if (Array.isArray(children)) {
+                const location = this._findNodeLocation(children, target);
+                if (location) {
+                    return location;
+                }
+            }
+        }
+        return undefined;
+    }
+    _removeNodeFrom(nodes, source) {
+        for (let i = 0; i < nodes.length; i++) {
+            const node = nodes[i];
+            if (this._isSameNode(node, source)) {
+                nodes.splice(i, 1);
+                return { items: nodes, index: i };
+            }
+            const children = this._getDataNodeChildren(node);
+            if (Array.isArray(children)) {
+                const location = this._removeNodeFrom(children, source);
+                if (location) {
+                    return location;
+                }
+            }
+        }
+        return undefined;
+    }
+    _getRootNodes() {
+        return Array.isArray(this.dataSource) ? this.dataSource : undefined;
+    }
+    _getDataNodeChildren(node) {
+        const childrenAccessor = this.childrenAccessor;
+        const children = childrenAccessor?.(node);
+        return Array.isArray(children) ? children : undefined;
+    }
+    _getMutableNodeChildren(node) {
+        const existingChildren = this._getDataNodeChildren(node);
+        if (existingChildren?.length) {
+            return existingChildren;
+        }
+        const childrenKey = this.childrenKey();
+        const nodeRecord = node;
+        if (!nodeRecord || typeof nodeRecord !== 'object') {
+            return existingChildren;
+        }
+        if (!Array.isArray(nodeRecord[childrenKey])) {
+            nodeRecord[childrenKey] = [];
+        }
+        return nodeRecord[childrenKey];
+    }
+    _refreshTreeData(rootNodes) {
+        if (Array.isArray(this.dataSource)) {
+            this.dataSource = [];
+            this.dataSource = [...rootNodes];
+            return;
+        }
+        this.renderNodeChanges(rootNodes);
+    }
+    _isNodeDescendantOf(node, maybeAncestor) {
+        return this._getCheckableDescendants(maybeAncestor).some(item => this._isSameNode(item, node));
+    }
+    _isSameNode(first, second) {
+        return first === second || Object.is(this._getTreeNodeDataKey(first), this._getTreeNodeDataKey(second));
+    }
+    _getDropPosition(event) {
+        const element = event.currentTarget instanceof HTMLElement
+            ? event.currentTarget
+            : event.target instanceof HTMLElement
+                ? event.target
+                : null;
+        const rect = element?.getBoundingClientRect();
+        if (!rect?.height) {
+            return 'inside';
+        }
+        const relativeY = event.clientY - rect.top;
+        if (relativeY < rect.height * 0.25) {
+            return 'before';
+        }
+        if (relativeY > rect.height * 0.75) {
+            return 'after';
+        }
+        return 'inside';
+    }
+    _clearNodeDrag() {
+        this._draggedNode = undefined;
+        this._dropTargetKey.set(undefined);
+        this._dropTargetPosition.set(undefined);
+    }
+    _getCheckableDescendants(node) {
+        const treeControl = this.treeControl;
+        const flatNodes = treeControl?.dataNodes?.length
+            ? treeControl.dataNodes
+            : (this._keyManagerNodes?.value ?? this._flattenedNodes?.value ?? []);
+        if (flatNodes.length && treeControl?.getLevel) {
+            const nodeKey = this._getTreeNodeKey(node);
+            const startIndex = flatNodes.findIndex(item => (item === node || this._getTreeNodeKey(item) === nodeKey));
+            if (startIndex > -1) {
+                const descendants = [];
+                const level = treeControl.getLevel(flatNodes[startIndex]);
+                for (let i = startIndex + 1; i < flatNodes.length && treeControl.getLevel(flatNodes[i]) > level; i++) {
+                    descendants.push(flatNodes[i]);
+                }
+                return descendants;
+            }
+        }
+        if (treeControl?.getDescendants) {
+            return treeControl.getDescendants(node);
+        }
+        const childrenAccessor = this.childrenAccessor;
+        if (!childrenAccessor) {
+            return [];
+        }
+        const descendants = [];
+        const collect = (current) => {
+            const children = childrenAccessor(current);
+            if (!Array.isArray(children)) {
+                return;
+            }
+            for (const child of children) {
+                descendants.push(child);
+                collect(child);
+            }
+        };
+        collect(node);
+        return descendants;
+    }
+    _getCheckableNodeKey(node) {
+        return this._getTreeNodeValue(node);
+    }
+    _getCheckedValues() {
+        return Array.from(this._checkedKeys);
+    }
+    _syncCheckedParentKeys() {
+        const nodes = this._getCheckableNodes();
+        for (let i = nodes.length - 1; i >= 0; i--) {
+            const node = nodes[i];
+            if (this._isNodeDisabled(node)) {
+                this._checkedKeys.delete(this._getCheckableNodeKey(node));
+                continue;
+            }
+            const descendants = this._getCheckableDescendants(node).filter(item => !this._isNodeDisabled(item));
+            if (!descendants.length) {
+                continue;
+            }
+            const key = this._getCheckableNodeKey(node);
+            if (descendants.every(item => this._checkedKeys.has(this._getCheckableNodeKey(item)))) {
+                this._checkedKeys.add(key);
+            }
+            else {
+                this._checkedKeys.delete(key);
+            }
+        }
+    }
+    _getCheckableNodes() {
+        const treeControl = this.treeControl;
+        const flatNodes = treeControl?.dataNodes?.length
+            ? treeControl.dataNodes
+            : (this._keyManagerNodes?.value ?? this._flattenedNodes?.value ?? []);
+        if (flatNodes.length) {
+            return flatNodes;
+        }
+        const data = this.dataSource;
+        if (!Array.isArray(data)) {
+            return [];
+        }
+        const childrenAccessor = this.childrenAccessor;
+        if (!childrenAccessor) {
+            return data;
+        }
+        const nodes = [];
+        const collect = (items) => {
+            for (const item of items) {
+                nodes.push(item);
+                const children = childrenAccessor(item);
+                if (Array.isArray(children)) {
+                    collect(children);
+                }
+            }
+        };
+        collect(data);
+        return nodes;
+    }
+    _getTreeNodeKey(node) {
+        const treeControl = this.treeControl;
+        if (treeControl?.trackBy) {
+            return treeControl.trackBy(node);
+        }
+        if (this.expansionKey) {
+            return this.expansionKey(node);
+        }
+        if (this.trackBy) {
+            return this.trackBy(-1, node);
+        }
+        return node;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Tree, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: Tree, isStandalone: true, selector: "ngs-tree", host: { classAttribute: "ngs-tree" }, providers: [{ provide: CdkTree, useExisting: Tree }], viewQueries: [{ propertyName: "_nodeOutlet", first: true, predicate: TreeNodeOutlet, descendants: true, isSignal: true }], exportAs: ["ngsTree"], usesInheritance: true, ngImport: i0, template: `<ng-container ngsTreeNodeOutlet />`, isInline: true, styles: [":host{display:block;background:var(--ngs-tree-container-background-color, transparent)}:host ::ng-deep .ngs-tree-node,:host ::ng-deep .ngs-nested-tree-node{color:var(--ngs-tree-node-text-color, inherit);font-family:var(--ngs-tree-node-text-font, inherit);font-size:var(--ngs-tree-node-text-size, inherit);font-weight:var(--ngs-tree-node-text-weight, inherit)}:host ::ng-deep .ngs-tree-node{display:flex;align-items:center;flex:1;word-wrap:break-word;min-height:var(--ngs-tree-node-min-height, 48px);box-sizing:border-box}:host ::ng-deep .ngs-nested-tree-node{border-bottom-width:0}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: TreeNodeOutlet, selector: "[ngsTreeNodeOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: Tree, isStandalone: true, selector: "ngs-tree", inputs: { checkable: { classPropertyName: "checkable", publicName: "checkable", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, childrenKey: { classPropertyName: "childrenKey", publicName: "childrenKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange", selectedChange: "selectedChange", nodeDrop: "nodeDrop" }, host: { classAttribute: "ngs-tree" }, providers: [{ provide: CdkTree, useExisting: Tree }], viewQueries: [{ propertyName: "_nodeOutlet", first: true, predicate: TreeNodeOutlet, descendants: true, static: true }], exportAs: ["ngsTree"], usesInheritance: true, ngImport: i0, template: `<ng-container ngsTreeNodeOutlet />`, isInline: true, styles: [":host{--ngs-tree-padding: calc(var(--spacing, .25rem) * 3) 0;--ngs-tree-node-padding: var(--ngs-nav-item-padding);--ngs-tree-node-min-height: var(--ngs-nav-item-height);--ngs-tree-node-hover-bg: var(--ngs-nav-item-hover-bg);--ngs-tree-node-active-bg: var(--ngs-nav-item-active-bg);--ngs-tree-node-active-color: var(--ngs-nav-item-active-color);--ngs-tree-node-disabled-opacity: .38;--ngs-tree-node-title-font-size: 1rem;--ngs-tree-node-font-size: var(--ngs-nav-item-font-size);--ngs-tree-node-gap: var(--ngs-nav-item-gap);--ngs-tree-node-radius: var(--ngs-nav-item-radius);--ngs-tree-node-color: var(--ngs-nav-item-color);--ngs-tree-node-hover-color: var(--ngs-nav-item-hover-color);--ngs-tree-gap: calc(var(--spacing, .25rem) * 1);--ngs-tree-node-line-color: var(--ngs-color-neutral);display:flex;flex-direction:column;gap:var(--ngs-tree-gap);padding:var(--ngs-tree-padding);background:var(--ngs-tree-container-background-color, transparent)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: TreeNodeOutlet, selector: "[ngsTreeNodeOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Tree, decorators: [{
             type: Component,
@@ -39,24 +473,173 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         TreeNodeOutlet
                     ], template: `<ng-container ngsTreeNodeOutlet />`, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: CdkTree, useExisting: Tree }], host: {
                         'class': 'ngs-tree',
-                    }, styles: [":host{display:block;background:var(--ngs-tree-container-background-color, transparent)}:host ::ng-deep .ngs-tree-node,:host ::ng-deep .ngs-nested-tree-node{color:var(--ngs-tree-node-text-color, inherit);font-family:var(--ngs-tree-node-text-font, inherit);font-size:var(--ngs-tree-node-text-size, inherit);font-weight:var(--ngs-tree-node-text-weight, inherit)}:host ::ng-deep .ngs-tree-node{display:flex;align-items:center;flex:1;word-wrap:break-word;min-height:var(--ngs-tree-node-min-height, 48px);box-sizing:border-box}:host ::ng-deep .ngs-nested-tree-node{border-bottom-width:0}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
-        }], propDecorators: { _nodeOutlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TreeNodeOutlet), { isSignal: true }] }] } });
+                    }, styles: [":host{--ngs-tree-padding: calc(var(--spacing, .25rem) * 3) 0;--ngs-tree-node-padding: var(--ngs-nav-item-padding);--ngs-tree-node-min-height: var(--ngs-nav-item-height);--ngs-tree-node-hover-bg: var(--ngs-nav-item-hover-bg);--ngs-tree-node-active-bg: var(--ngs-nav-item-active-bg);--ngs-tree-node-active-color: var(--ngs-nav-item-active-color);--ngs-tree-node-disabled-opacity: .38;--ngs-tree-node-title-font-size: 1rem;--ngs-tree-node-font-size: var(--ngs-nav-item-font-size);--ngs-tree-node-gap: var(--ngs-nav-item-gap);--ngs-tree-node-radius: var(--ngs-nav-item-radius);--ngs-tree-node-color: var(--ngs-nav-item-color);--ngs-tree-node-hover-color: var(--ngs-nav-item-hover-color);--ngs-tree-gap: calc(var(--spacing, .25rem) * 1);--ngs-tree-node-line-color: var(--ngs-color-neutral);display:flex;flex-direction:column;gap:var(--ngs-tree-gap);padding:var(--ngs-tree-padding);background:var(--ngs-tree-container-background-color, transparent)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { checkable: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkable", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], childrenKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "childrenKey", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], nodeDrop: [{ type: i0.Output, args: ["nodeDrop"] }], _nodeOutlet: [{
+                type: ViewChild,
+                args: [TreeNodeOutlet, { static: true }]
+            }] } });
 
+const NGS_TREE_NODE_VALUE_UNSET = Symbol('ngs-tree-node-value-unset');
 function isNoopTreeKeyManager(keyManager) {
     return !!keyManager._isNoopTreeKeyManager;
 }
+function isTreeNodeControlClick(event, host) {
+    const target = event.target;
+    if (!(target instanceof Element)) {
+        return false;
+    }
+    const control = target.closest('.ngs-tree-node-checkbox, [ngsTreeNodeToggle], [ngstreenodetoggle]');
+    return !!control && control !== host;
+}
+class TreeNodeCheckbox {
+    _node;
+    _tree;
+    _elementRef;
+    _renderer;
+    _appRef;
+    _environmentInjector;
+    _disabled;
+    _isReady = false;
+    _wrapperElement;
+    _componentRef;
+    _unlistenClick;
+    _unlistenKeydown;
+    _changeSubscription;
+    constructor(_node, _tree, _elementRef, _renderer, _appRef, _environmentInjector, _disabled) {
+        this._node = _node;
+        this._tree = _tree;
+        this._elementRef = _elementRef;
+        this._renderer = _renderer;
+        this._appRef = _appRef;
+        this._environmentInjector = _environmentInjector;
+        this._disabled = _disabled;
+    }
+    enable() {
+        this._isReady = true;
+        this.sync();
+    }
+    sync() {
+        if (!this._isReady) {
+            return;
+        }
+        if (!this._tree.checkable()) {
+            this.destroy();
+            return;
+        }
+        const checkbox = this._ensureCheckbox();
+        const node = this._node.data;
+        const checked = this._tree._isNodeChecked(node);
+        const indeterminate = this._tree._isNodeIndeterminate(node);
+        checkbox.checked.set(checked);
+        checkbox.indeterminate.set(indeterminate);
+        checkbox.disabled.set(this._disabled());
+        this._componentRef?.changeDetectorRef.detectChanges();
+    }
+    destroy() {
+        this._unlistenClick?.();
+        this._unlistenClick = undefined;
+        this._unlistenKeydown?.();
+        this._unlistenKeydown = undefined;
+        this._changeSubscription?.unsubscribe();
+        this._changeSubscription = undefined;
+        if (this._componentRef) {
+            this._appRef.detachView(this._componentRef.hostView);
+            this._componentRef.destroy();
+            this._componentRef = undefined;
+        }
+        this._wrapperElement?.remove();
+        this._wrapperElement = undefined;
+    }
+    _ensureCheckbox() {
+        if (this._componentRef) {
+            return this._componentRef.instance;
+        }
+        const existingWrapper = this._elementRef.nativeElement.querySelector(':scope > .ngs-tree-node-checkbox');
+        const wrapper = existingWrapper ?? this._renderer.createElement('span');
+        let checkboxHost = wrapper.querySelector(':scope > ngs-checkbox');
+        if (!existingWrapper) {
+            this._renderer.addClass(wrapper, 'ngs-tree-node-checkbox');
+            checkboxHost = this._renderer.createElement('ngs-checkbox');
+            this._renderer.appendChild(wrapper, checkboxHost);
+            this._renderer.insertBefore(this._elementRef.nativeElement, wrapper, this._getCheckboxInsertionReference());
+        }
+        else if (!checkboxHost) {
+            checkboxHost = this._renderer.createElement('ngs-checkbox');
+            this._renderer.appendChild(wrapper, checkboxHost);
+        }
+        while (checkboxHost.firstChild) {
+            checkboxHost.firstChild.remove();
+        }
+        this._wrapperElement = wrapper;
+        this._componentRef = createComponent(Checkbox, {
+            environmentInjector: this._environmentInjector,
+            hostElement: checkboxHost,
+        });
+        this._componentRef.setInput('aria-label', 'Select tree node');
+        this._componentRef.setInput('tabIndex', -1);
+        this._appRef.attachView(this._componentRef.hostView);
+        this._bindCheckboxEvents(wrapper, this._componentRef);
+        return this._componentRef.instance;
+    }
+    _getCheckboxInsertionReference() {
+        const host = this._elementRef.nativeElement;
+        const firstElement = host.firstElementChild;
+        if (firstElement?.matches('button, [ngsTreeNodeToggle], [ngstreenodetoggle], [ngsIconButton], [ngsiconbutton]')) {
+            return firstElement.nextSibling;
+        }
+        return host.firstChild;
+    }
+    _bindCheckboxEvents(checkboxElement, checkboxRef) {
+        this._unlistenClick = this._renderer.listen(checkboxElement, 'click', (event) => {
+            event.stopPropagation();
+        });
+        this._unlistenKeydown = this._renderer.listen(checkboxElement, 'keydown', (event) => {
+            event.stopPropagation();
+        });
+        this._changeSubscription = checkboxRef.instance.change.subscribe((event) => {
+            this._tree._toggleNodeChecked(this._node.data, event.checked);
+        });
+    }
+}
 class TreeNode extends CdkTreeNode {
+    _hostElementRef = inject(ElementRef);
+    _renderer = inject(Renderer2);
+    _appRef = inject(ApplicationRef);
+    _environmentInjector = inject(EnvironmentInjector);
+    _platformId = inject(PLATFORM_ID);
+    _checkbox;
+    _dataChangesSubscription;
+    _checkboxEnableHandle;
+    _registeredDataKey = NGS_TREE_NODE_VALUE_UNSET;
     tabIndexInputBinding = input(0, { ...(ngDevMode ? { debugName: "tabIndexInputBinding" } : /* istanbul ignore next */ {}), transform: (value) => (value == null ? 0 : numberAttribute(value)),
         alias: 'tabIndex' });
+    value = input(NGS_TREE_NODE_VALUE_UNSET, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     defaultTabIndex = 0;
     constructor() {
         super();
+        const tree = this._tree;
+        this._checkbox = new TreeNodeCheckbox(this, tree, this._hostElementRef, this._renderer, this._appRef, this._environmentInjector, () => this.disabled());
+        this._dataChangesSubscription = this._dataChanges.subscribe(() => this._syncNodeState());
+        if (isPlatformBrowser(this._platformId)) {
+            this._checkboxEnableHandle = setTimeout(() => this._checkbox.enable());
+        }
         const tabIndex = inject(new HostAttributeToken('tabindex'), { optional: true });
         this._tabIndexInputBinding = Number(tabIndex) || this.defaultTabIndex;
         effect(() => {
             this.isDisabled = this.disabled();
         });
+        effect(() => {
+            tree.checkable();
+            tree._checkStateVersion();
+            this.disabled();
+            this._syncNodeDisabledRegistration();
+            this._checkbox.sync();
+        });
+        effect(() => {
+            this.value();
+            this._syncNodeState();
+        });
     }
     _getTabindexAttribute() {
         if (isNoopTreeKeyManager(this._tree._keyManager)) {
@@ -64,81 +647,313 @@ class TreeNode extends CdkTreeNode {
         }
         return this._tabindex;
     }
+    _handleNodeClick(event) {
+        this._focusItem();
+        this._selectNodeFromEvent(event);
+    }
+    _isSelectable() {
+        return this._tree.selectable() && !this.disabled();
+    }
+    _isSelected() {
+        const tree = this._tree;
+        return tree.selectable() && tree._isNodeSelected(this.data);
+    }
+    _getAriaSelected() {
+        return this._tree.selectable() ? this._isSelected() : null;
+    }
+    _isDraggable() {
+        return this._tree._canDragNode(this.data);
+    }
+    _isDropTarget() {
+        return this._tree._isNodeDropTarget(this.data);
+    }
+    _isDropTargetPosition(position) {
+        return this._tree._isNodeDropTargetPosition(this.data, position);
+    }
+    _getDraggableAttribute() {
+        return this._isDraggable() ? true : null;
+    }
+    _getAriaGrabbed() {
+        return this._tree.draggable() ? false : null;
+    }
+    _handleDragStart(event) {
+        this._tree._startNodeDrag(this.data, event);
+    }
+    _handleDragOver(event) {
+        this._tree._dragNodeOver(this.data, event);
+    }
+    _handleDragLeave(event) {
+        this._tree._dragNodeLeave(this.data, event);
+    }
+    _handleDrop(event) {
+        this._tree._dropNodeInto(this.data, event);
+    }
+    _handleDragEnd() {
+        this._tree._endNodeDrag();
+    }
+    _selectNodeFromEvent(event) {
+        if (!this._isSelectable() || this._isTreeControlClick(event)) {
+            return;
+        }
+        this._tree._selectNode(this.data);
+    }
+    _isTreeControlClick(event) {
+        return isTreeNodeControlClick(event, this._hostElementRef.nativeElement);
+    }
+    _syncNodeState() {
+        this._syncNodeValueRegistration();
+        this._syncNodeDisabledRegistration();
+        this._checkbox.sync();
+    }
+    _syncNodeValueRegistration() {
+        if (this.data === undefined) {
+            return;
+        }
+        const tree = this._tree;
+        const key = tree._getTreeNodeDataKey(this.data);
+        if (this._registeredDataKey !== NGS_TREE_NODE_VALUE_UNSET && !Object.is(this._registeredDataKey, key)) {
+            tree._unregisterNodeValueByDataKey(this._registeredDataKey);
+            tree._unregisterNodeDisabledByDataKey(this._registeredDataKey);
+        }
+        this._registeredDataKey = key;
+        if (this.value() === NGS_TREE_NODE_VALUE_UNSET) {
+            tree._unregisterNodeValueByDataKey(key);
+        }
+        else {
+            tree._registerNodeValue(this.data, this.value());
+        }
+    }
+    _syncNodeDisabledRegistration() {
+        if (this.data === undefined) {
+            return;
+        }
+        this._tree._registerNodeDisabled(this.data, this.disabled());
+    }
     ngOnInit() {
         super.ngOnInit();
+        this._syncNodeState();
     }
     ngOnDestroy() {
+        if (this._checkboxEnableHandle) {
+            clearTimeout(this._checkboxEnableHandle);
+        }
+        this._dataChangesSubscription?.unsubscribe();
+        if (this._registeredDataKey !== NGS_TREE_NODE_VALUE_UNSET) {
+            this._tree._unregisterNodeValueByDataKey(this._registeredDataKey);
+            this._tree._unregisterNodeDisabledByDataKey(this._registeredDataKey);
+        }
+        this._checkbox.destroy();
         super.ngOnDestroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TreeNode, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: TreeNode, isStandalone: true, selector: "ngs-tree-node", inputs: { tabIndexInputBinding: { classPropertyName: "tabIndexInputBinding", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activation: "activation", expandedChange: "expandedChange" }, host: { listeners: { "click": "_focusItem()" }, properties: { "attr.aria-expanded": "_getAriaExpanded()", "attr.aria-level": "level + 1", "attr.aria-posinset": "_getPositionInSet()", "attr.aria-setsize": "_getSetSize()", "tabindex": "_getTabindexAttribute()" }, classAttribute: "ngs-tree-node" }, providers: [{ provide: CdkTreeNode, useExisting: TreeNode }], exportAs: ["ngsTreeNode"], usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TreeNode, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: TreeNode, isStandalone: true, selector: "ngs-tree-node", inputs: { tabIndexInputBinding: { classPropertyName: "tabIndexInputBinding", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activation: "activation", expandedChange: "expandedChange" }, host: { listeners: { "click": "_handleNodeClick($event)", "dragstart": "_handleDragStart($event)", "dragover": "_handleDragOver($event)", "dragleave": "_handleDragLeave($event)", "drop": "_handleDrop($event)", "dragend": "_handleDragEnd()" }, properties: { "class.ngs-tree-node-selectable": "_isSelectable()", "class.ngs-tree-node-selected": "_isSelected()", "class.ngs-tree-node-disabled": "disabled()", "class.ngs-tree-node-draggable": "_isDraggable()", "class.ngs-tree-node-drop-target": "_isDropTarget()", "class.ngs-tree-node-drop-before": "_isDropTargetPosition(\"before\")", "class.ngs-tree-node-drop-inside": "_isDropTargetPosition(\"inside\")", "class.ngs-tree-node-drop-after": "_isDropTargetPosition(\"after\")", "attr.draggable": "_getDraggableAttribute()", "attr.aria-expanded": "_getAriaExpanded()", "attr.aria-level": "level + 1", "attr.aria-posinset": "_getPositionInSet()", "attr.aria-setsize": "_getSetSize()", "attr.aria-selected": "_getAriaSelected()", "attr.aria-disabled": "disabled()", "attr.aria-grabbed": "_getAriaGrabbed()", "tabindex": "_getTabindexAttribute()" }, classAttribute: "ngs-tree-node" }, providers: [{ provide: CdkTreeNode, useExisting: TreeNode }], exportAs: ["ngsTreeNode"], usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{color:var(--ngs-tree-node-color);font-size:var(--ngs-tree-node-font-size);position:relative}:host.ngs-tree-node{display:flex;align-items:center;flex:1;gap:var(--ngs-tree-node-gap);padding:var(--ngs-tree-node-padding);word-wrap:break-word;min-height:var(--ngs-tree-node-min-height);box-sizing:border-box}:host.ngs-nested-tree-node{border-bottom-width:0}:host.ngs-tree-node-selectable{border-radius:var(--ngs-tree-node-radius);cursor:pointer}:host.ngs-tree-node-disabled{opacity:var(--ngs-tree-node-disabled-opacity);cursor:default}:host.ngs-tree-node-draggable{cursor:grab}:host.ngs-tree-node-draggable:active{cursor:grabbing}:host.ngs-tree-node-drop-inside{color:var(--ngs-tree-node-drop-target-color, var(--ngs-tree-node-active-color));background:var(--ngs-tree-node-drop-target-bg, var(--ngs-tree-node-active-bg));outline:var(--ngs-tree-node-drop-target-outline, 1px solid var(--ngs-color-primary));outline-offset:var(--ngs-tree-node-drop-target-outline-offset, -1px)}:host.ngs-tree-node-drop-before:before,:host.ngs-tree-node-drop-after:after{content:\"\";position:absolute;z-index:1;inset-inline:0;height:var(--ngs-tree-node-drop-line-size, 2px);background:var(--ngs-tree-node-drop-line-color, var(--ngs-color-primary));border-radius:var(--ngs-tree-node-drop-line-radius, 999px);pointer-events:none}:host.ngs-tree-node-drop-before:before{top:0}:host.ngs-tree-node-drop-after:after{bottom:0}:host.ngs-tree-node-selectable:not(.ngs-tree-node-selected,.ngs-tree-node-disabled):hover{color:var(--ngs-tree-node-hover-color);background:var(--ngs-tree-node-hover-bg)}:host.ngs-tree-node-selected:not(.ngs-tree-node-disabled){color:var(--ngs-tree-node-active-color);background:var(--ngs-tree-node-active-bg)}:host.ngs-tree-node-selectable>button:disabled{pointer-events:none}:host .ngs-tree-node-checkbox{display:inline-flex;align-items:center;justify-content:center;flex:none;margin-inline-end:var(--ngs-tree-node-checkbox-gap, calc(var(--spacing, .25rem) * 2))}:host .ngs-tree-node-checkbox ngs-checkbox{--ngs-checkbox-gap: 0}:host .ngs-tree-node-checkbox .ngs-checkbox-label{display:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TreeNode, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ngs-tree-node',
-                    exportAs: 'ngsTreeNode',
-                    outputs: ['activation', 'expandedChange'],
-                    providers: [{ provide: CdkTreeNode, useExisting: TreeNode }],
-                    host: {
+            type: Component,
+            args: [{ selector: 'ngs-tree-node', exportAs: 'ngsTreeNode', template: '<ng-content />', standalone: true, outputs: ['activation', 'expandedChange'], providers: [{ provide: CdkTreeNode, useExisting: TreeNode }], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'ngs-tree-node',
+                        '[class.ngs-tree-node-selectable]': '_isSelectable()',
+                        '[class.ngs-tree-node-selected]': '_isSelected()',
+                        '[class.ngs-tree-node-disabled]': 'disabled()',
+                        '[class.ngs-tree-node-draggable]': '_isDraggable()',
+                        '[class.ngs-tree-node-drop-target]': '_isDropTarget()',
+                        '[class.ngs-tree-node-drop-before]': '_isDropTargetPosition("before")',
+                        '[class.ngs-tree-node-drop-inside]': '_isDropTargetPosition("inside")',
+                        '[class.ngs-tree-node-drop-after]': '_isDropTargetPosition("after")',
+                        '[attr.draggable]': '_getDraggableAttribute()',
                         '[attr.aria-expanded]': '_getAriaExpanded()',
                         '[attr.aria-level]': 'level + 1',
                         '[attr.aria-posinset]': '_getPositionInSet()',
                         '[attr.aria-setsize]': '_getSetSize()',
-                        '(click)': '_focusItem()',
+                        '[attr.aria-selected]': '_getAriaSelected()',
+                        '[attr.aria-disabled]': 'disabled()',
+                        '[attr.aria-grabbed]': '_getAriaGrabbed()',
+                        '(click)': '_handleNodeClick($event)',
+                        '(dragstart)': '_handleDragStart($event)',
+                        '(dragover)': '_handleDragOver($event)',
+                        '(dragleave)': '_handleDragLeave($event)',
+                        '(drop)': '_handleDrop($event)',
+                        '(dragend)': '_handleDragEnd()',
                         '[tabindex]': '_getTabindexAttribute()',
-                    },
-                    standalone: true
-                }]
-        }], ctorParameters: () => [], propDecorators: { tabIndexInputBinding: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+                    }, styles: [":host{color:var(--ngs-tree-node-color);font-size:var(--ngs-tree-node-font-size);position:relative}:host.ngs-tree-node{display:flex;align-items:center;flex:1;gap:var(--ngs-tree-node-gap);padding:var(--ngs-tree-node-padding);word-wrap:break-word;min-height:var(--ngs-tree-node-min-height);box-sizing:border-box}:host.ngs-nested-tree-node{border-bottom-width:0}:host.ngs-tree-node-selectable{border-radius:var(--ngs-tree-node-radius);cursor:pointer}:host.ngs-tree-node-disabled{opacity:var(--ngs-tree-node-disabled-opacity);cursor:default}:host.ngs-tree-node-draggable{cursor:grab}:host.ngs-tree-node-draggable:active{cursor:grabbing}:host.ngs-tree-node-drop-inside{color:var(--ngs-tree-node-drop-target-color, var(--ngs-tree-node-active-color));background:var(--ngs-tree-node-drop-target-bg, var(--ngs-tree-node-active-bg));outline:var(--ngs-tree-node-drop-target-outline, 1px solid var(--ngs-color-primary));outline-offset:var(--ngs-tree-node-drop-target-outline-offset, -1px)}:host.ngs-tree-node-drop-before:before,:host.ngs-tree-node-drop-after:after{content:\"\";position:absolute;z-index:1;inset-inline:0;height:var(--ngs-tree-node-drop-line-size, 2px);background:var(--ngs-tree-node-drop-line-color, var(--ngs-color-primary));border-radius:var(--ngs-tree-node-drop-line-radius, 999px);pointer-events:none}:host.ngs-tree-node-drop-before:before{top:0}:host.ngs-tree-node-drop-after:after{bottom:0}:host.ngs-tree-node-selectable:not(.ngs-tree-node-selected,.ngs-tree-node-disabled):hover{color:var(--ngs-tree-node-hover-color);background:var(--ngs-tree-node-hover-bg)}:host.ngs-tree-node-selected:not(.ngs-tree-node-disabled){color:var(--ngs-tree-node-active-color);background:var(--ngs-tree-node-active-bg)}:host.ngs-tree-node-selectable>button:disabled{pointer-events:none}:host .ngs-tree-node-checkbox{display:inline-flex;align-items:center;justify-content:center;flex:none;margin-inline-end:var(--ngs-tree-node-checkbox-gap, calc(var(--spacing, .25rem) * 2))}:host .ngs-tree-node-checkbox ngs-checkbox{--ngs-checkbox-gap: 0}:host .ngs-tree-node-checkbox .ngs-checkbox-label{display:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { tabIndexInputBinding: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 class NestedTreeNode extends CdkNestedTreeNode {
+    _hostElementRef = inject(ElementRef);
+    _renderer = inject(Renderer2);
+    _appRef = inject(ApplicationRef);
+    _environmentInjector = inject(EnvironmentInjector);
+    _platformId = inject(PLATFORM_ID);
+    _checkbox;
+    _dataChangesSubscription;
+    _checkboxEnableHandle;
+    _registeredDataKey = NGS_TREE_NODE_VALUE_UNSET;
     node = input(undefined, { ...(ngDevMode ? { debugName: "node" } : /* istanbul ignore next */ {}), alias: 'ngsNestedTreeNode' });
+    value = input(NGS_TREE_NODE_VALUE_UNSET, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     tabIndexInput = input(0, { ...(ngDevMode ? { debugName: "tabIndexInput" } : /* istanbul ignore next */ {}), alias: 'tabIndex',
         transform: (value) => (value == null ? 0 : numberAttribute(value)) });
     constructor() {
         super();
+        const tree = this._tree;
+        this._checkbox = new TreeNodeCheckbox(this, tree, this._hostElementRef, this._renderer, this._appRef, this._environmentInjector, () => this.disabled());
+        this._dataChangesSubscription = this._dataChanges.subscribe(() => this._syncNodeState());
+        if (isPlatformBrowser(this._platformId)) {
+            this._checkboxEnableHandle = setTimeout(() => this._checkbox.enable());
+        }
         effect(() => {
             this.isDisabled = this.disabled();
         });
+        effect(() => {
+            tree.checkable();
+            tree._checkStateVersion();
+            this.disabled();
+            this._syncNodeDisabledRegistration();
+            this._checkbox.sync();
+        });
+        effect(() => {
+            this.value();
+            this._syncNodeState();
+        });
     }
     get tabIndex() {
         return this.isDisabled ? -1 : this.tabIndexInput();
     }
+    _handleNodeClick(event) {
+        this._focusItem?.();
+        this._selectNodeFromEvent(event);
+    }
+    _isSelectable() {
+        return this._tree.selectable() && !this.disabled();
+    }
+    _isSelected() {
+        const tree = this._tree;
+        return tree.selectable() && tree._isNodeSelected(this.data);
+    }
+    _getAriaSelected() {
+        return this._tree.selectable() ? this._isSelected() : null;
+    }
+    _isDraggable() {
+        return this._tree._canDragNode(this.data);
+    }
+    _isDropTarget() {
+        return this._tree._isNodeDropTarget(this.data);
+    }
+    _isDropTargetPosition(position) {
+        return this._tree._isNodeDropTargetPosition(this.data, position);
+    }
+    _getDraggableAttribute() {
+        return this._isDraggable() ? true : null;
+    }
+    _getAriaGrabbed() {
+        return this._tree.draggable() ? false : null;
+    }
+    _handleDragStart(event) {
+        this._tree._startNodeDrag(this.data, event);
+    }
+    _handleDragOver(event) {
+        this._tree._dragNodeOver(this.data, event);
+    }
+    _handleDragLeave(event) {
+        this._tree._dragNodeLeave(this.data, event);
+    }
+    _handleDrop(event) {
+        this._tree._dropNodeInto(this.data, event);
+    }
+    _handleDragEnd() {
+        this._tree._endNodeDrag();
+    }
+    _selectNodeFromEvent(event) {
+        if (!this._isSelectable() || this._isTreeControlClick(event)) {
+            return;
+        }
+        this._tree._selectNode(this.data);
+    }
+    _isTreeControlClick(event) {
+        return isTreeNodeControlClick(event, this._hostElementRef.nativeElement);
+    }
+    _syncNodeState() {
+        this._syncNodeValueRegistration();
+        this._syncNodeDisabledRegistration();
+        this._checkbox.sync();
+    }
+    _syncNodeValueRegistration() {
+        if (this.data === undefined) {
+            return;
+        }
+        const tree = this._tree;
+        const key = tree._getTreeNodeDataKey(this.data);
+        if (this._registeredDataKey !== NGS_TREE_NODE_VALUE_UNSET && !Object.is(this._registeredDataKey, key)) {
+            tree._unregisterNodeValueByDataKey(this._registeredDataKey);
+            tree._unregisterNodeDisabledByDataKey(this._registeredDataKey);
+        }
+        this._registeredDataKey = key;
+        if (this.value() === NGS_TREE_NODE_VALUE_UNSET) {
+            tree._unregisterNodeValueByDataKey(key);
+        }
+        else {
+            tree._registerNodeValue(this.data, this.value());
+        }
+    }
+    _syncNodeDisabledRegistration() {
+        if (this.data === undefined) {
+            return;
+        }
+        this._tree._registerNodeDisabled(this.data, this.disabled());
+    }
     ngOnInit() {
         super.ngOnInit();
+        this._syncNodeState();
     }
     ngAfterContentInit() {
         super.ngAfterContentInit();
     }
     ngOnDestroy() {
+        if (this._checkboxEnableHandle) {
+            clearTimeout(this._checkboxEnableHandle);
+        }
+        this._dataChangesSubscription?.unsubscribe();
+        if (this._registeredDataKey !== NGS_TREE_NODE_VALUE_UNSET) {
+            this._tree._unregisterNodeValueByDataKey(this._registeredDataKey);
+            this._tree._unregisterNodeDisabledByDataKey(this._registeredDataKey);
+        }
+        this._checkbox.destroy();
         super.ngOnDestroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NestedTreeNode, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: NestedTreeNode, isStandalone: true, selector: "ngs-nested-tree-node", inputs: { node: { classPropertyName: "node", publicName: "ngsNestedTreeNode", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tabIndexInput: { classPropertyName: "tabIndexInput", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activation: "activation", expandedChange: "expandedChange" }, host: { classAttribute: "ngs-nested-tree-node" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NestedTreeNode, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: NestedTreeNode, isStandalone: true, selector: "ngs-nested-tree-node", inputs: { node: { classPropertyName: "node", publicName: "ngsNestedTreeNode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tabIndexInput: { classPropertyName: "tabIndexInput", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activation: "activation", expandedChange: "expandedChange" }, host: { listeners: { "click": "_handleNodeClick($event)", "dragstart": "_handleDragStart($event)", "dragover": "_handleDragOver($event)", "dragleave": "_handleDragLeave($event)", "drop": "_handleDrop($event)", "dragend": "_handleDragEnd()" }, properties: { "class.ngs-tree-node-selectable": "_isSelectable()", "class.ngs-tree-node-selected": "_isSelected()", "class.ngs-tree-node-disabled": "disabled()", "class.ngs-tree-node-draggable": "_isDraggable()", "class.ngs-tree-node-drop-target": "_isDropTarget()", "class.ngs-tree-node-drop-before": "_isDropTargetPosition(\"before\")", "class.ngs-tree-node-drop-inside": "_isDropTargetPosition(\"inside\")", "class.ngs-tree-node-drop-after": "_isDropTargetPosition(\"after\")", "attr.draggable": "_getDraggableAttribute()", "attr.aria-selected": "_getAriaSelected()", "attr.aria-disabled": "disabled()", "attr.aria-grabbed": "_getAriaGrabbed()" }, classAttribute: "ngs-nested-tree-node" }, providers: [
             { provide: CdkNestedTreeNode, useExisting: NestedTreeNode },
             { provide: CdkTreeNode, useExisting: NestedTreeNode },
             { provide: CDK_TREE_NODE_OUTLET_NODE, useExisting: NestedTreeNode },
-        ], exportAs: ["ngsNestedTreeNode"], usesInheritance: true, ngImport: i0 });
+        ], exportAs: ["ngsNestedTreeNode"], usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{color:var(--ngs-tree-node-color);font-size:var(--ngs-tree-node-font-size);position:relative}:host.ngs-tree-node{display:flex;align-items:center;flex:1;gap:var(--ngs-tree-node-gap);padding:var(--ngs-tree-node-padding);word-wrap:break-word;min-height:var(--ngs-tree-node-min-height);box-sizing:border-box}:host.ngs-nested-tree-node{border-bottom-width:0}:host.ngs-tree-node-selectable{border-radius:var(--ngs-tree-node-radius);cursor:pointer}:host.ngs-tree-node-disabled{opacity:var(--ngs-tree-node-disabled-opacity);cursor:default}:host.ngs-tree-node-draggable{cursor:grab}:host.ngs-tree-node-draggable:active{cursor:grabbing}:host.ngs-tree-node-drop-inside{color:var(--ngs-tree-node-drop-target-color, var(--ngs-tree-node-active-color));background:var(--ngs-tree-node-drop-target-bg, var(--ngs-tree-node-active-bg));outline:var(--ngs-tree-node-drop-target-outline, 1px solid var(--ngs-color-primary));outline-offset:var(--ngs-tree-node-drop-target-outline-offset, -1px)}:host.ngs-tree-node-drop-before:before,:host.ngs-tree-node-drop-after:after{content:\"\";position:absolute;z-index:1;inset-inline:0;height:var(--ngs-tree-node-drop-line-size, 2px);background:var(--ngs-tree-node-drop-line-color, var(--ngs-color-primary));border-radius:var(--ngs-tree-node-drop-line-radius, 999px);pointer-events:none}:host.ngs-tree-node-drop-before:before{top:0}:host.ngs-tree-node-drop-after:after{bottom:0}:host.ngs-tree-node-selectable:not(.ngs-tree-node-selected,.ngs-tree-node-disabled):hover{color:var(--ngs-tree-node-hover-color);background:var(--ngs-tree-node-hover-bg)}:host.ngs-tree-node-selected:not(.ngs-tree-node-disabled){color:var(--ngs-tree-node-active-color);background:var(--ngs-tree-node-active-bg)}:host.ngs-tree-node-selectable>button:disabled{pointer-events:none}:host .ngs-tree-node-checkbox{display:inline-flex;align-items:center;justify-content:center;flex:none;margin-inline-end:var(--ngs-tree-node-checkbox-gap, calc(var(--spacing, .25rem) * 2))}:host .ngs-tree-node-checkbox ngs-checkbox{--ngs-checkbox-gap: 0}:host .ngs-tree-node-checkbox .ngs-checkbox-label{display:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NestedTreeNode, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ngs-nested-tree-node',
-                    exportAs: 'ngsNestedTreeNode',
-                    outputs: ['activation', 'expandedChange'],
-                    providers: [
+            type: Component,
+            args: [{ selector: 'ngs-nested-tree-node', exportAs: 'ngsNestedTreeNode', template: '<ng-content />', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, outputs: ['activation', 'expandedChange'], providers: [
                         { provide: CdkNestedTreeNode, useExisting: NestedTreeNode },
                         { provide: CdkTreeNode, useExisting: NestedTreeNode },
                         { provide: CDK_TREE_NODE_OUTLET_NODE, useExisting: NestedTreeNode },
-                    ],
-                    host: {
+                    ], host: {
                         'class': 'ngs-nested-tree-node',
-                    },
-                    standalone: true
-                }]
-        }], ctorParameters: () => [], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsNestedTreeNode", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tabIndexInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }] } });
+                        '[class.ngs-tree-node-selectable]': '_isSelectable()',
+                        '[class.ngs-tree-node-selected]': '_isSelected()',
+                        '[class.ngs-tree-node-disabled]': 'disabled()',
+                        '[class.ngs-tree-node-draggable]': '_isDraggable()',
+                        '[class.ngs-tree-node-drop-target]': '_isDropTarget()',
+                        '[class.ngs-tree-node-drop-before]': '_isDropTargetPosition("before")',
+                        '[class.ngs-tree-node-drop-inside]': '_isDropTargetPosition("inside")',
+                        '[class.ngs-tree-node-drop-after]': '_isDropTargetPosition("after")',
+                        '[attr.draggable]': '_getDraggableAttribute()',
+                        '[attr.aria-selected]': '_getAriaSelected()',
+                        '[attr.aria-disabled]': 'disabled()',
+                        '[attr.aria-grabbed]': '_getAriaGrabbed()',
+                        '(click)': '_handleNodeClick($event)',
+                        '(dragstart)': '_handleDragStart($event)',
+                        '(dragover)': '_handleDragOver($event)',
+                        '(dragleave)': '_handleDragLeave($event)',
+                        '(drop)': '_handleDrop($event)',
+                        '(dragend)': '_handleDragEnd()',
+                    }, styles: [":host{color:var(--ngs-tree-node-color);font-size:var(--ngs-tree-node-font-size);position:relative}:host.ngs-tree-node{display:flex;align-items:center;flex:1;gap:var(--ngs-tree-node-gap);padding:var(--ngs-tree-node-padding);word-wrap:break-word;min-height:var(--ngs-tree-node-min-height);box-sizing:border-box}:host.ngs-nested-tree-node{border-bottom-width:0}:host.ngs-tree-node-selectable{border-radius:var(--ngs-tree-node-radius);cursor:pointer}:host.ngs-tree-node-disabled{opacity:var(--ngs-tree-node-disabled-opacity);cursor:default}:host.ngs-tree-node-draggable{cursor:grab}:host.ngs-tree-node-draggable:active{cursor:grabbing}:host.ngs-tree-node-drop-inside{color:var(--ngs-tree-node-drop-target-color, var(--ngs-tree-node-active-color));background:var(--ngs-tree-node-drop-target-bg, var(--ngs-tree-node-active-bg));outline:var(--ngs-tree-node-drop-target-outline, 1px solid var(--ngs-color-primary));outline-offset:var(--ngs-tree-node-drop-target-outline-offset, -1px)}:host.ngs-tree-node-drop-before:before,:host.ngs-tree-node-drop-after:after{content:\"\";position:absolute;z-index:1;inset-inline:0;height:var(--ngs-tree-node-drop-line-size, 2px);background:var(--ngs-tree-node-drop-line-color, var(--ngs-color-primary));border-radius:var(--ngs-tree-node-drop-line-radius, 999px);pointer-events:none}:host.ngs-tree-node-drop-before:before{top:0}:host.ngs-tree-node-drop-after:after{bottom:0}:host.ngs-tree-node-selectable:not(.ngs-tree-node-selected,.ngs-tree-node-disabled):hover{color:var(--ngs-tree-node-hover-color);background:var(--ngs-tree-node-hover-bg)}:host.ngs-tree-node-selected:not(.ngs-tree-node-disabled){color:var(--ngs-tree-node-active-color);background:var(--ngs-tree-node-active-bg)}:host.ngs-tree-node-selectable>button:disabled{pointer-events:none}:host .ngs-tree-node-checkbox{display:inline-flex;align-items:center;justify-content:center;flex:none;margin-inline-end:var(--ngs-tree-node-checkbox-gap, calc(var(--spacing, .25rem) * 2))}:host .ngs-tree-node-checkbox ngs-checkbox{--ngs-checkbox-gap: 0}:host .ngs-tree-node-checkbox .ngs-checkbox-label{display:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsNestedTreeNode", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tabIndexInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }] } });
 
 class TreeNodePadding extends CdkTreeNodePadding {
     levelInput = input(0, { ...(ngDevMode ? { debugName: "levelInput" } : /* istanbul ignore next */ {}), alias: 'ngsTreeNodePadding',