@basis-ng/primitives 0.0.1-alpha.136 → 0.0.1-alpha.138

package/fesm2022/basis-ng-primitives.mjs

@@ -3520,10 +3520,6 @@ class TreeNode {
      * Whether this node is expanded to show nested content.
      */
     expanded = model(false, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
-    /**
-     * Whether drag-and-drop is only enabled when this node is collapsed.
-     */
-    dragOnlyWhenCollapsed = input(false, ...(ngDevMode ? [{ debugName: "dragOnlyWhenCollapsed" }] : []));
     /**
      * Injected CDK drag instance for this node.
      */
@@ -3540,12 +3536,29 @@ class TreeNode {
      * Computed signal for node disabled state.
      */
     isNodeDisabled = computed(() => this.node.disabled, ...(ngDevMode ? [{ debugName: "isNodeDisabled" }] : []));
+    /**
+     * Internal state for dragOnlyWhenCollapsed from parent Tree.
+     */
+    _dragOnlyWhenCollapsed = false;
+    /**
+     * Track if any parent node is expanded (disables drag when dragOnlyWhenCollapsed is active).
+     */
+    _hasExpandedParent = false;
+    /**
+     * Computed to determine if drag handle should be hidden.
+     */
+    shouldHideDragHandle = computed(() => {
+        if (!this._dragOnlyWhenCollapsed)
+            return false;
+        // Hide if this node is expanded and has nested tree, or if any parent is expanded
+        return (this.hasNestedTree() && this.expanded()) || this._hasExpandedParent;
+    }, ...(ngDevMode ? [{ debugName: "shouldHideDragHandle" }] : []));
     /**
      * Emitted when a nested tree is closed.
      */
     closeEmitter = output();
     constructor() {
-        // Track expanded state changes for close events
+        // Track expanded state changes for close events and drag state
         let previousExpanded = this.expanded();
         effect(() => {
             const currentExpanded = this.expanded();
@@ -3553,19 +3566,47 @@ class TreeNode {
             if (previousExpanded && !currentExpanded && this.nestedTree()) {
                 this.closeEmitter.emit();
             }
-            previousExpanded = currentExpanded;
-        });
-        // Control drag based on expanded state and dragOnlyWhenCollapsed
-        effect(() => {
-            if (this.dragOnlyWhenCollapsed() && this.hasNestedTree()) {
-                this.node.disabled = this.expanded();
+            // Update drag state when dragOnlyWhenCollapsed is active
+            if (this._dragOnlyWhenCollapsed) {
+                this.updateDragState(currentExpanded, previousExpanded);
             }
+            previousExpanded = currentExpanded;
         });
     }
     ngOnInit() {
         // Static configuration - only needs to run once
         this.node.lockAxis = 'y';
     }
+    /**
+     * Update drag state based on expanded state and parent state.
+     */
+    updateDragState(isExpanded, wasExpanded) {
+        if (this.hasNestedTree()) {
+            this.handleNodeWithChildren(isExpanded, wasExpanded);
+        }
+        else {
+            this.handleLeafNode();
+        }
+    }
+    /**
+     * Handle drag state for nodes with children.
+     */
+    handleNodeWithChildren(isExpanded, wasExpanded) {
+        if (isExpanded) {
+            this.node.disabled = true;
+            this.nestedTree()?.disableDirectChildren();
+        }
+        else if (wasExpanded) {
+            this.node.disabled = false;
+            this.nestedTree()?.enableDirectChildren();
+        }
+    }
+    /**
+     * Handle drag state for leaf nodes (no children).
+     */
+    handleLeafNode() {
+        this.node.disabled = this._hasExpandedParent;
+    }
     /**
      * Enable or disable the underlying CDK drag for this node.
      * @param disabled - Whether the node should be disabled.
@@ -3573,6 +3614,31 @@ class TreeNode {
     handleNodeDisability(disabled) {
         this.node.disabled = disabled;
     }
+    /**
+     * Set drag only when collapsed mode from parent Tree.
+     * @param enabled - Whether drag should only work when collapsed.
+     */
+    setDragOnlyWhenCollapsed(enabled) {
+        this._dragOnlyWhenCollapsed = enabled;
+        // Apply immediately if node has nested tree and is expanded
+        if (enabled && this.hasNestedTree() && this.expanded()) {
+            this.node.disabled = true;
+            this.nestedTree()?.disableDirectChildren();
+        }
+    }
+    /**
+     * Set whether this node has an expanded parent.
+     * @param hasExpandedParent - Whether the direct parent is expanded.
+     */
+    setHasExpandedParent(hasExpandedParent) {
+        this._hasExpandedParent = hasExpandedParent;
+        if (!this._dragOnlyWhenCollapsed)
+            return;
+        // Update drag state based on parent state
+        if (!this.hasNestedTree() || !this.expanded()) {
+            this.node.disabled = hasExpandedParent;
+        }
+    }
     /**
      * Toggle the node expansion.
      */
@@ -3580,13 +3646,13 @@ class TreeNode {
         this.expanded.update((current) => !current);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeNode, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TreeNode, isStandalone: true, selector: "b-tree-node", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, dragOnlyWhenCollapsed: { classPropertyName: "dragOnlyWhenCollapsed", publicName: "dragOnlyWhenCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", closeEmitter: "closeEmitter" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TreeNode, isStandalone: true, selector: "b-tree-node", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", closeEmitter: "closeEmitter" }, providers: [
             provideIcons({
                 lucideGripVertical,
             }),
         ], queries: [{ propertyName: "nestedTree", first: true, predicate: Tree, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$3.CdkDrag, inputs: ["cdkDragDisabled", "disabled"] }], ngImport: i0, template: `
     <section>
-      @if (!isNodeDisabled()) {
+      @if (!isNodeDisabled() && !shouldHideDragHandle()) {
         <ng-icon name="lucideGripVertical" size="16" color="currentColor" cdkDragHandle />
       }
       <div
@@ -3629,7 +3695,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                     imports: [CdkDragHandle, NgIcon],
                     template: `
     <section>
-      @if (!isNodeDisabled()) {
+      @if (!isNodeDisabled() && !shouldHideDragHandle()) {
         <ng-icon name="lucideGripVertical" size="16" color="currentColor" cdkDragHandle />
       }
       <div
@@ -3676,7 +3742,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                         }),
                     ],
                 }]
-        }], ctorParameters: () => [], propDecorators: { expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], dragOnlyWhenCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragOnlyWhenCollapsed", required: false }] }], nestedTree: [{ type: i0.ContentChild, args: [i0.forwardRef(() => Tree), { isSignal: true }] }], closeEmitter: [{ type: i0.Output, args: ["closeEmitter"] }] } });
+        }], ctorParameters: () => [], propDecorators: { expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], nestedTree: [{ type: i0.ContentChild, args: [i0.forwardRef(() => Tree), { isSignal: true }] }], closeEmitter: [{ type: i0.Output, args: ["closeEmitter"] }] } });
 
 /**
  * Root container for a tree structure, enabling drag-and-drop and nested nodes.
@@ -3719,6 +3785,13 @@ class Tree {
                 node.handleNodeDisability(disabled);
             });
         });
+        // Propagate dragOnlyWhenCollapsed to nodes
+        effect(() => {
+            const dragOnlyCollapsed = this.dragOnlyWhenCollapsed();
+            this.nestedNodes().forEach((node) => {
+                node.setDragOnlyWhenCollapsed(dragOnlyCollapsed);
+            });
+        });
     }
     ngOnInit() {
         // Setup recursive close only once based on initial input value
@@ -3745,6 +3818,22 @@ class Tree {
             node.nestedTree()?.closeNestedNodes();
         });
     }
+    /**
+     * Disable drag for all direct children nodes.
+     */
+    disableDirectChildren() {
+        this.nestedNodes().forEach((node) => {
+            node.setHasExpandedParent(true);
+        });
+    }
+    /**
+     * Enable drag for all direct children nodes.
+     */
+    enableDirectChildren() {
+        this.nestedNodes().forEach((node) => {
+            node.setHasExpandedParent(false);
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: Tree, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.0", type: Tree, isStandalone: true, selector: "b-tree", inputs: { draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, closeRecursively: { classPropertyName: "closeRecursively", publicName: "closeRecursively", isSignal: true, isRequired: false, transformFunction: null }, dragOnlyWhenCollapsed: { classPropertyName: "dragOnlyWhenCollapsed", publicName: "dragOnlyWhenCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dropEmitter: "dropEmitter" }, host: { listeners: { "cdkDropListDropped": "dropEmitter.emit($event)" } }, queries: [{ propertyName: "nestedNodes", predicate: TreeNode, isSignal: true }], hostDirectives: [{ directive: i1$3.CdkDropList, inputs: ["id", "id", "cdkDropListConnectedTo", "connectedTo"], outputs: ["cdkDropListDropped", "cdkDropListDropped"] }, { directive: i1$3.CdkDropListGroup }], ngImport: i0, template: ` <ng-content /> `, isInline: true });
 }