@basis-ng/primitives 0.0.1-alpha.141 → 0.0.1-alpha.143

package/fesm2022/basis-ng-primitives.mjs

@@ -3,7 +3,7 @@ import { input, output, Component, inject, ElementRef, signal, model, computed,
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideX, lucideChevronRight, lucideChevronLeft, lucideLoaderCircle, lucideLoader, lucideGripVertical } from '@ng-icons/lucide';
 import { GridCellWidget, Grid, GridRow, GridCell } from '@angular/aria/grid';
-import { ActiveDescendantKeyManager, CdkTrapFocus } from '@angular/cdk/a11y';
+import { ActiveDescendantKeyManager, CdkTrapFocus, FocusMonitor } from '@angular/cdk/a11y';
 import * as i1 from '@angular/cdk/listbox';
 import { CdkOption, CdkListbox } from '@angular/cdk/listbox';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
@@ -13,7 +13,9 @@ import * as i1$1 from '@angular/cdk/menu';
 import { CdkMenu, CdkMenuGroup, CdkMenuItem, CdkMenuItemCheckbox, CdkMenuItemRadio, CdkMenuTrigger } from '@angular/cdk/menu';
 import * as i1$2 from '@angular/cdk/overlay';
 import { CdkConnectedOverlay, ScrollStrategyOptions, CdkOverlayOrigin, Overlay as Overlay$1 } from '@angular/cdk/overlay';
-import * as i1$3 from '@angular/cdk/drag-drop';
+import * as i1$3 from '@angular/aria/tabs';
+import { TabList, Tabs as Tabs$1, Tab as Tab$1 } from '@angular/aria/tabs';
+import * as i1$4 from '@angular/cdk/drag-drop';
 import { CdkDrag, CdkDragHandle, CdkDropList, CdkDropListGroup } from '@angular/cdk/drag-drop';
 import { HttpClient } from '@angular/common/http';
 import { isPlatformBrowser } from '@angular/common';
@@ -800,22 +802,14 @@ class Checkbox {
      */
     size = model('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     /**
-     * Disabled flag coming from template bindings.
+     * Whether the checkbox is disabled. Automatically bound by Signal Forms.
      */
-    disabledBinding = input(false, { ...(ngDevMode ? { debugName: "disabledBinding" } : {}), transform: booleanAttribute });
-    /**
-     * Disabled flag controlled by Angular forms APIs.
-     */
-    disabledFromControl = signal(false, ...(ngDevMode ? [{ debugName: "disabledFromControl" }] : []));
-    /**
-     * Combined disabled state exposed to the template bindings.
-     */
-    isDisabled = computed(() => this.disabledBinding() || this.disabledFromControl(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
     /**
      * Toggle the checkbox when the user clicks on it.
      */
     onToggle() {
-        if (this.isDisabled()) {
+        if (this.disabled()) {
             return;
         }
         const newValue = !this.value();
@@ -826,17 +820,10 @@ class Checkbox {
      * Prevent the page from scrolling when pressing the space key.
      */
     suppressSpace(event) {
-        if (!this.isDisabled()) {
+        if (!this.disabled()) {
             event.preventDefault();
         }
     }
-    /**
-     * Toggle disabled state on the checkbox.
-     * @param isDisabled - Whether the control is disabled.
-     */
-    setDisabledState(isDisabled) {
-        this.disabledFromControl.set(isDisabled);
-    }
     /**
      * Update the current value (FormValueControl API).
      * @param value - New boolean value to apply.
@@ -846,7 +833,7 @@ class Checkbox {
         this.valueChange.emit(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: Checkbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: Checkbox, isStandalone: true, selector: "button[b-checkbox]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabledBinding: { classPropertyName: "disabledBinding", publicName: "disabledBinding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", size: "sizeChange" }, host: { attributes: { "type": "\"button\"" }, listeners: { "click": "onToggle()", "keydown.space": "suppressSpace($event)" }, properties: { "attr.role": "\"checkbox\"", "attr.aria-checked": "value()", "attr.data-state": "value() ? \"checked\" : \"unchecked\"", "attr.aria-disabled": "isDisabled()", "disabled": "isDisabled()", "attr.data-disabled": "isDisabled() ? \"\" : null", "class.b-size-sm": "size() === \"sm\"", "class.b-size-md": "size() === \"md\"", "class.b-size-lg": "size() === \"lg\"" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: Checkbox, isStandalone: true, selector: "button[b-checkbox]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", size: "sizeChange" }, host: { attributes: { "type": "\"button\"" }, listeners: { "click": "onToggle()", "keydown.space": "suppressSpace($event)" }, properties: { "attr.role": "\"checkbox\"", "attr.aria-checked": "value()", "attr.data-state": "value() ? \"checked\" : \"unchecked\"", "attr.aria-disabled": "disabled()", "disabled": "disabled()", "attr.data-disabled": "disabled() ? \"\" : null", "class.b-size-sm": "size() === \"sm\"", "class.b-size-md": "size() === \"md\"", "class.b-size-lg": "size() === \"lg\"" } }, ngImport: i0, template: `
     <span class="b-checkbox-indicator" aria-hidden="true">
       @if (value()) {
         <svg
@@ -894,9 +881,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         '[attr.role]': '"checkbox"',
                         '[attr.aria-checked]': 'value()',
                         '[attr.data-state]': 'value() ? "checked" : "unchecked"',
-                        '[attr.aria-disabled]': 'isDisabled()',
-                        '[disabled]': 'isDisabled()',
-                        '[attr.data-disabled]': 'isDisabled() ? "" : null',
+                        '[attr.aria-disabled]': 'disabled()',
+                        '[disabled]': 'disabled()',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
                         '[class.b-size-sm]': 'size() === "sm"',
                         '[class.b-size-md]': 'size() === "md"',
                         '[class.b-size-lg]': 'size() === "lg"',
@@ -905,7 +892,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                     },
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], disabledBinding: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledBinding", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 /**
  * Presents a list of selectable command options and manages keyboard navigation.
@@ -2933,6 +2920,8 @@ class Select {
     selectContent = contentChild(SelectContent, ...(ngDevMode ? [{ debugName: "selectContent" }] : []));
     /** Function to display the selected value(s). */
     displayWith = input.required(...(ngDevMode ? [{ debugName: "displayWith" }] : []));
+    /** Whether the select is disabled. Automatically bound by Signal Forms. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
     /** Current value array for the select. */
     value = model([], ...(ngDevMode ? [{ debugName: "value" }] : []));
     /** Emitted when the value changes. */
@@ -2940,6 +2929,7 @@ class Select {
     constructor() {
         effect(() => this.updateDisplayedValue());
         effect(() => this.handleContentValueChanges());
+        effect(() => this.selectTrigger()?.disabled.set(this.disabled()));
     }
     ngOnInit() {
         this.setupTriggerEvents();
@@ -3014,13 +3004,6 @@ class Select {
             overlay.closeOverlay();
         });
     }
-    /**
-     * Toggle disabled state on the select trigger.
-     * @param isDisabled - Whether the control is disabled.
-     */
-    setDisabledState(isDisabled) {
-        this.selectTrigger()?.disabled.set(isDisabled);
-    }
     /**
      * Update the current value.
      * @param value - New value array to apply.
@@ -3030,7 +3013,7 @@ class Select {
         this.valueChange.emit(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: Select, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: Select, isStandalone: true, selector: "b-select", inputs: { displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange" }, queries: [{ propertyName: "overlay", first: true, predicate: ConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "selectTrigger", first: true, predicate: SelectTrigger, descendants: true, isSignal: true }, { propertyName: "selectValue", first: true, predicate: SelectValue, descendants: true, isSignal: true }, { propertyName: "selectContent", first: true, predicate: SelectContent, descendants: true, isSignal: true }], ngImport: i0, template: ` <ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: Select, isStandalone: true, selector: "b-select", inputs: { displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange" }, queries: [{ propertyName: "overlay", first: true, predicate: ConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "selectTrigger", first: true, predicate: SelectTrigger, descendants: true, isSignal: true }, { propertyName: "selectValue", first: true, predicate: SelectValue, descendants: true, isSignal: true }, { propertyName: "selectContent", first: true, predicate: SelectContent, descendants: true, isSignal: true }], ngImport: i0, template: ` <ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: Select, decorators: [{
             type: Component,
@@ -3039,7 +3022,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                     template: ` <ng-content />`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: () => [], propDecorators: { overlay: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ConnectedOverlay), { isSignal: true }] }], selectTrigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectTrigger), { isSignal: true }] }], selectValue: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectValue), { isSignal: true }] }], selectContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectContent), { isSignal: true }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { overlay: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ConnectedOverlay), { isSignal: true }] }], selectTrigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectTrigger), { isSignal: true }] }], selectValue: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectValue), { isSignal: true }] }], selectContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectContent), { isSignal: true }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 /**
  * Directive to automatically focus the select filter input when it is initialized.
@@ -3272,43 +3255,32 @@ class Tabs {
      * Query list of Tab child components.
      */
     tabs = contentChildren(Tab, ...(ngDevMode ? [{ debugName: "tabs" }] : []));
-    /**
-     * Computed index of currently active tab.
-     */
-    activeIndex = computed(() => {
-        const currentValue = this.value()[0];
-        return this.tabs().findIndex((tab) => tab.value() === currentValue);
-    }, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
+    tabList = inject(TabList);
     constructor() {
-        // Sync tab selection with child tabs
+        // Sync external model selection changes back to the underlying aria TabList
         effect(() => {
             const selectedValues = this.value();
-            this.tabs().forEach((tab) => {
-                tab.setSelected(selectedValues.includes(tab.value()));
-            });
+            if (selectedValues.length > 0) {
+                this.tabList.selectedTab.set(selectedValues[0]);
+            }
+            else {
+                this.tabList.selectedTab.set(undefined);
+            }
         });
     }
-    /**
-     * Move highlight to the previous tab.
-     */
-    previousTab() {
-        const currentIndex = this.activeIndex();
-        const tabs = this.tabs();
-        if (tabs.length === 0)
-            return;
-        const newIndex = currentIndex <= 0 ? tabs.length - 1 : currentIndex - 1;
-        this.selectTab(tabs[newIndex].value());
-    }
-    /**
-     * Move highlight to the next tab.
-     */
-    nextTab() {
-        const currentIndex = this.activeIndex();
-        const tabs = this.tabs();
-        if (tabs.length === 0)
-            return;
-        const newIndex = currentIndex >= tabs.length - 1 ? 0 : currentIndex + 1;
-        this.selectTab(tabs[newIndex].value());
+    onSelectionChange(selectedValue) {
+        if (selectedValue !== undefined) {
+            if (this.value()[0] !== selectedValue) {
+                this.value.set([selectedValue]);
+                this.valueChange.emit([selectedValue]);
+                // If a tab is selected via keyboard logic in "follow" mode, trigger an actual click
+                // so that potential bindings like [routerLink] embedded in the tabs still activate naturally.
+                const tab = this.tabs().find((t) => t.value() === selectedValue);
+                if (tab?.el.nativeElement) {
+                    tab.el.nativeElement.click();
+                }
+            }
+        }
     }
     /**
      * Select a tab by its value.
@@ -3318,18 +3290,27 @@ class Tabs {
         this.valueChange.emit([tabValue]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: Tabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: Tabs, isStandalone: true, selector: "b-tabs", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange" }, host: { listeners: { "keydown.arrowLeft": "previousTab()", "keydown.arrowRight": "nextTab()" }, properties: { "attr.role": "\"tablist\"" } }, queries: [{ propertyName: "tabs", predicate: Tab, isSignal: true }], ngImport: i0, template: ` <ng-content /> `, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: Tabs, isStandalone: true, selector: "b-tabs", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange" }, host: { attributes: { "selectionMode": "follow" }, listeners: { "selectedTabChange": "onSelectionChange($event)" } }, queries: [{ propertyName: "tabs", predicate: Tab, isSignal: true }], hostDirectives: [{ directive: i1$3.Tabs }, { directive: i1$3.TabList, inputs: ["selectionMode", "selectionMode", "selectedTab", "selectedTab"], outputs: ["selectedTabChange", "selectedTabChange"] }], ngImport: i0, template: ` <ng-content /> `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: Tabs, decorators: [{
             type: Component,
             args: [{
                     selector: 'b-tabs',
                     imports: [],
+                    hostDirectives: [
+                        {
+                            directive: Tabs$1,
+                        },
+                        {
+                            directive: TabList,
+                            inputs: ['selectionMode', 'selectedTab'],
+                            outputs: ['selectedTabChange'],
+                        },
+                    ],
                     template: ` <ng-content /> `,
                     host: {
-                        '[attr.role]': '"tablist"',
-                        '(keydown.arrowLeft)': 'previousTab()',
-                        '(keydown.arrowRight)': 'nextTab()',
+                        selectionMode: 'follow',
+                        '(selectedTabChange)': 'onSelectionChange($event)',
                     },
                 }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => Tab), { isSignal: true }] }] } });
@@ -3341,7 +3322,7 @@ class Tab {
     /**
      * Parent tabs container.
      */
-    tabs = inject(Tabs);
+    tabsContainer = inject(Tabs);
     /**
      * Host element reference.
      */
@@ -3350,47 +3331,39 @@ class Tab {
      * Unique value identifying this tab.
      */
     value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
-    /**
-     * Internal signal tracking selection state.
-     */
-    selected = signal(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
-    /**
-     * Whether this tab is currently selected.
-     */
-    isSelected = computed(() => this.selected(), ...(ngDevMode ? [{ debugName: "isSelected" }] : []));
+    focusMonitor = inject(FocusMonitor);
     constructor() {
-        // Focus this tab when it becomes selected
-        effect(() => {
-            if (this.isSelected()) {
-                this.el.nativeElement.focus();
-            }
-        });
+        this.focusMonitor.monitor(this.el);
+    }
+    ngOnDestroy() {
+        this.focusMonitor.stopMonitoring(this.el);
     }
     /**
-     * Set the selected state of this tab.
+     * Whether this tab is currently selected.
      */
-    setSelected(selected) {
-        this.selected.set(selected);
-    }
+    isSelected = computed(() => this.value() === this.tabsContainer.value()[0], ...(ngDevMode ? [{ debugName: "isSelected" }] : []));
     /**
      * Handle click events to select this tab.
      */
     onClick() {
-        this.tabs.selectTab(this.value());
+        this.tabsContainer.selectTab(this.value());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: Tab, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: Tab, isStandalone: true, selector: "b-tab", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "attr.role": "\"tab\"", "attr.aria-selected": "isSelected()", "attr.tabindex": "isSelected() ? 0 : -1" } }, ngImport: i0, template: ` <ng-content /> `, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: Tab, isStandalone: true, selector: "b-tab", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "onClick()" } }, hostDirectives: [{ directive: i1$3.Tab, inputs: ["value", "value"] }], ngImport: i0, template: ` <ng-content /> `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: Tab, decorators: [{
             type: Component,
             args: [{
                     selector: 'b-tab',
                     imports: [],
+                    hostDirectives: [
+                        {
+                            directive: Tab$1,
+                            inputs: ['value'],
+                        },
+                    ],
                     template: ` <ng-content /> `,
                     host: {
-                        '[attr.role]': '"tab"',
-                        '[attr.aria-selected]': 'isSelected()',
-                        '[attr.tabindex]': 'isSelected() ? 0 : -1',
                         '(click)': 'onClick()',
                     },
                 }]
@@ -3626,7 +3599,7 @@ class TreeNode {
             provideIcons({
                 lucideGripVertical,
             }),
-        ], queries: [{ propertyName: "nestedTree", first: true, predicate: Tree, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$3.CdkDrag, inputs: ["cdkDragDisabled", "disabled"] }], ngImport: i0, template: `
+        ], queries: [{ propertyName: "nestedTree", first: true, predicate: Tree, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$4.CdkDrag, inputs: ["cdkDragDisabled", "disabled"] }], ngImport: i0, template: `
     <section>
       @if (!isNodeDisabled() && !shouldHideDragHandle()) {
         <ng-icon name="lucideGripVertical" size="16" color="currentColor" cdkDragHandle />
@@ -3811,7 +3784,7 @@ class Tree {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: Tree, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", 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$4.CdkDropList, inputs: ["id", "id", "cdkDropListConnectedTo", "connectedTo"], outputs: ["cdkDropListDropped", "cdkDropListDropped"] }, { directive: i1$4.CdkDropListGroup }], ngImport: i0, template: ` <ng-content /> `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: Tree, decorators: [{
             type: Component,