@basis-ng/primitives 0.0.1-alpha.142 → 0.0.1-alpha.144

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';
@@ -3253,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.
@@ -3299,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 }] }] } });
@@ -3322,7 +3322,7 @@ class Tab {
     /**
      * Parent tabs container.
      */
-    tabs = inject(Tabs);
+    tabsContainer = inject(Tabs);
     /**
      * Host element reference.
      */
@@ -3331,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: "button[b-tab], [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',
+                    selector: 'button[b-tab], [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()',
                     },
                 }]
@@ -3607,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 />
@@ -3792,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,