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

package/fesm2022/basis-ng-primitives.mjs

@@ -3519,7 +3519,11 @@ class TreeNode {
     /**
      * Whether this node is expanded to show nested content.
      */
-    extended = model(false, ...(ngDevMode ? [{ debugName: "extended" }] : []));
+    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.
      */
@@ -3541,11 +3545,21 @@ class TreeNode {
      */
     closeEmitter = output();
     constructor() {
-        // Emit close event when collapsing - this needs to be reactive
+        // Track expanded state changes for close events
+        let previousExpanded = this.expanded();
         effect(() => {
-            if (!this.extended() && this.nestedTree()) {
+            const currentExpanded = this.expanded();
+            // Emit close event when collapsing
+            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();
+            }
         });
     }
     ngOnInit() {
@@ -3559,25 +3573,14 @@ class TreeNode {
     handleNodeDisability(disabled) {
         this.node.disabled = disabled;
     }
-    /**
-     * Set initial expansion state for the node.
-     * @param expanded - Whether the node should be initially expanded.
-     */
-    setInitialExpansion(expanded) {
-        if (this.hasNestedTree()) {
-            this.extended.set(expanded);
-            // Propagate to nested tree if it exists
-            this.nestedTree()?.setNodesExpansion(expanded);
-        }
-    }
     /**
      * Toggle the node expansion.
      */
     toggleExtension() {
-        this.extended.update((current) => !current);
+        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: { extended: { classPropertyName: "extended", publicName: "extended", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { extended: "extendedChange", 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 }, dragOnlyWhenCollapsed: { classPropertyName: "dragOnlyWhenCollapsed", publicName: "dragOnlyWhenCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", closeEmitter: "closeEmitter" }, providers: [
             provideIcons({
                 lucideGripVertical,
             }),
@@ -3612,7 +3615,7 @@ class TreeNode {
         </svg>
       }
     </section>
-    @if (hasNestedTree() && extended()) {
+    @if (hasNestedTree() && expanded()) {
       <div class="nested">
         <ng-content select="b-tree" />
       </div>
@@ -3655,7 +3658,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
         </svg>
       }
     </section>
-    @if (hasNestedTree() && extended()) {
+    @if (hasNestedTree() && expanded()) {
       <div class="nested">
         <ng-content select="b-tree" />
       </div>
@@ -3673,7 +3676,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                         }),
                     ],
                 }]
-        }], ctorParameters: () => [], propDecorators: { extended: [{ type: i0.Input, args: [{ isSignal: true, alias: "extended", required: false }] }, { type: i0.Output, args: ["extendedChange"] }], 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"] }], 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"] }] } });
 
 /**
  * Root container for a tree structure, enabling drag-and-drop and nested nodes.
@@ -3696,9 +3699,9 @@ class Tree {
      */
     closeRecursively = input(false, ...(ngDevMode ? [{ debugName: "closeRecursively" }] : []));
     /**
-     * Whether nodes should be expanded by default on initialization.
+     * Whether drag-and-drop is only enabled when nodes are collapsed.
      */
-    defaultExpanded = input(false, ...(ngDevMode ? [{ debugName: "defaultExpanded" }] : []));
+    dragOnlyWhenCollapsed = input(false, ...(ngDevMode ? [{ debugName: "dragOnlyWhenCollapsed" }] : []));
     /**
      * Computed signal indicating if the tree is disabled (inverse of draggable).
      */
@@ -3716,13 +3719,6 @@ class Tree {
                 node.handleNodeDisability(disabled);
             });
         });
-        // Reactively expand nodes - needs to react to defaultExpanded changes
-        effect(() => {
-            const shouldExpand = this.defaultExpanded();
-            this.nestedNodes().forEach((node) => {
-                node.setInitialExpansion(shouldExpand);
-            });
-        });
     }
     ngOnInit() {
         // Setup recursive close only once based on initial input value
@@ -3745,21 +3741,12 @@ class Tree {
      */
     closeNestedNodes() {
         this.nestedNodes().forEach((node) => {
-            node.extended.set(false);
+            node.expanded.set(false);
             node.nestedTree()?.closeNestedNodes();
         });
     }
-    /**
-     * Set expansion state for all nodes recursively.
-     * @param expanded - Whether nodes should be expanded.
-     */
-    setNodesExpansion(expanded) {
-        this.nestedNodes().forEach((node) => {
-            node.setInitialExpansion(expanded);
-        });
-    }
     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 }, defaultExpanded: { classPropertyName: "defaultExpanded", publicName: "defaultExpanded", 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 });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: Tree, decorators: [{
             type: Component,
@@ -3778,7 +3765,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                         CdkDropListGroup,
                     ],
                 }]
-        }], ctorParameters: () => [], propDecorators: { draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], nestedNodes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TreeNode), { isSignal: true }] }], closeRecursively: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeRecursively", required: false }] }], defaultExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultExpanded", required: false }] }], dropEmitter: [{ type: i0.Output, args: ["dropEmitter"] }] } });
+        }], ctorParameters: () => [], propDecorators: { draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], nestedNodes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TreeNode), { isSignal: true }] }], closeRecursively: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeRecursively", required: false }] }], dragOnlyWhenCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragOnlyWhenCollapsed", required: false }] }], dropEmitter: [{ type: i0.Output, args: ["dropEmitter"] }] } });
 
 /**
  * Directive that registers and controls a dialog template instance.