@basis-ng/primitives 0.0.1-alpha.28 → 0.0.1-alpha.29

package/core/components/tabs/tab.component.d.ts

@@ -0,0 +1,11 @@
+import { CdkOption } from '@angular/cdk/listbox';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/cdk/listbox";
+export declare class TabComponent {
+    /**
+     * Reference to the injected CDK Option instance.
+     */
+    cdkOption: CdkOption<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TabComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TabComponent, "b-tab", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.CdkOption; inputs: { "cdkOption": "value"; }; outputs: {}; }]>;
+}

package/core/components/tabs/tabs.component.d.ts

@@ -1,60 +1,29 @@
-import { Tab } from './components/tab/tab.component';
+import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
+import { CdkListbox } from '@angular/cdk/listbox';
+import { OnInit } from '@angular/core';
+import { TabComponent } from './tab.component';
 import * as i0 from "@angular/core";
-export declare class Tabs {
-    readonly tabs: import("@angular/core").Signal<readonly Tab[]>;
-    readonly selectedIndex: import("@angular/core").WritableSignal<number>;
-    readonly selectedValue: import("@angular/core").ModelSignal<string | null>;
-    readonly highlightedIndex: import("@angular/core").WritableSignal<number>;
-    changesEmitter: import("@angular/core").OutputEmitterRef<string>;
-    lastSelectedValue: string | null;
-    constructor();
+import * as i1 from "@angular/cdk/listbox";
+export declare class TabsComponent implements OnInit {
     /**
-     * Handle the selection of a tab.
+     * Reference to the injected CDK Listbox instance.
      */
-    handleTabSelection(): void;
+    cdkListbox: CdkListbox<any>;
     /**
-     * Select a tab.
-     * @param {Tab} tab - The tab to select.
-     * @param {number} index - The index of the tab.
+     * Collection of child options within the listbox.
      */
-    selectTab(tab: Tab, index: number): void;
+    readonly tabs: import("@angular/core").Signal<readonly TabComponent[]>;
     /**
-     * Highlight a tab.
-     * @param {number} index - The index of the tab to highlight.
+     * Collection of cdk options within the listbox.
      */
-    highlightTab(index: number): void;
+    readonly cdkOptions: import("@angular/core").Signal<import("@angular/cdk/listbox").CdkOption<any>[]>;
     /**
-     * Handle the states of the tabs.
+     * Key manager for handling keyboard navigation and active descendant management.
      */
-    handleTabStates(): void;
-    /**
-     * Handle the external selected value.
-     */
-    handleExternalSelectedValue(): void;
-    /**
-     * Scroll to the selected tab.
-     */
-    handleScrollToSelectedTab(): void;
-    /**
-     * Handle keyboard events for navigation and selection.
-     * @param {KeyboardEvent} event - The keyboard event.
-     */
-    handleKeyboard(event: KeyboardEvent): void;
-    /**
-     * Focus on the next or previous tab.
-     * @param {'next' | 'previous'} direction - The direction to move the focus.
-     */
-    focusOption(direction: 'next' | 'previous'): void;
-    /**
-     * Select the currently focused tab.
-     */
-    selectFocusedTab(): void;
-    /**
-     * Scroll to a specific tab.
-     * @param {number} index - The index of the tab to scroll to.
-     * @param {string} behavior - The scroll behavior ('instant' or 'smooth').
-     */
-    scrollToTab(index: number, behavior: string): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<Tabs, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<Tabs, "b-tabs", never, { "selectedValue": { "alias": "selectedValue"; "required": false; "isSignal": true; }; }, { "selectedValue": "selectedValueChange"; "changesEmitter": "changesEmitter"; }, ["tabs"], ["*"], true, never>;
+    readonly listKeyManager: import("@angular/core").Signal<ActiveDescendantKeyManager<import("@angular/cdk/listbox").CdkOption<any>>>;
+    previousTab(): void;
+    nextTab(): void;
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TabsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TabsComponent, "b-tabs", never, {}, {}, ["tabs"], ["*"], true, [{ directive: typeof i1.CdkListbox; inputs: { "cdkListboxValue": "value"; }; outputs: { "cdkListboxValueChange": "cdkListboxValueChange"; }; }]>;
 }

package/fesm2022/basis-ng-primitives.mjs

@@ -8,11 +8,11 @@ import { icons, createElement } from 'lucide';
 import * as i1$1 from '@angular/cdk/overlay';
 import { CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { NgStyle, NgClass, CommonModule } from '@angular/common';
+import { ActiveDescendantKeyManager, CdkTrapFocus } from '@angular/cdk/a11y';
 import * as i1$2 from '@angular/cdk/drag-drop';
 import { CdkDrag, CdkDragHandle, CdkDropList, CdkDropListGroup } from '@angular/cdk/drag-drop';
 import * as i1$3 from '@angular/cdk/menu';
 import { CdkMenu, CdkMenuItem, CdkMenuGroup, CdkMenuItemCheckbox, CdkMenuItemRadio, CdkMenuTrigger } from '@angular/cdk/menu';
-import { ActiveDescendantKeyManager, CdkTrapFocus } from '@angular/cdk/a11y';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 
 class ThemeService {
@@ -1011,192 +1011,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
             args: [{ selector: 'b-row-item', imports: [NgStyle], template: "<div [ngStyle]=\"style()\" class=\"row-item-container\">\r\n  <ng-content />\r\n</div>\r\n" }]
         }] });
 
-class Tab {
-    el;
-    value = input.required();
-    disabled = input(false);
-    selected = signal(false);
-    highlighted = signal(false);
-    selectEmitter = output();
-    constructor(el) {
-        this.el = el;
-    }
-    /**
-     * Emit the select event when the tab is selected.
-     */
-    onSelect() {
-        this.selectEmitter.emit(this);
-    }
+class TabComponent {
     /**
-     * Highlight the tab on mouse enter if it is not disabled and not in keyboard-active mode.
+     * Reference to the injected CDK Option instance.
      */
-    onMouseEnter() {
-        if (!this.disabled() &&
-            !this.el.nativeElement.parentElement.parentElement.classList.contains('keyboard-active')) {
-            this.highlighted.set(true);
-        }
-    }
-    /**
-     * Remove the highlight from the tab on mouse leave if it is not disabled and not in keyboard-active mode.
-     */
-    onMouseLeave() {
-        if (!this.disabled() &&
-            !this.el.nativeElement.parentElement.parentElement.classList.contains('keyboard-active')) {
-            this.highlighted.set(false);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Tab, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: Tab, isStandalone: true, selector: "b-tab", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectEmitter: "selectEmitter" }, ngImport: i0, template: "<span\r\n  tabindex=\"0\"\r\n  (click)=\"onSelect()\"\r\n  (keydown.enter)=\"onSelect()\"\r\n  (mouseenter)=\"onMouseEnter()\"\r\n  (mouseleave)=\"onMouseLeave()\"\r\n  [ngClass]=\"{ selected: selected(), highlighted: highlighted() }\">\r\n  <ng-content\r\n/></span>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    cdkOption = inject(CdkOption);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TabComponent, isStandalone: true, selector: "b-tab", hostDirectives: [{ directive: i1.CdkOption, inputs: ["cdkOption", "value"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Tab, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'b-tab', imports: [NgClass], template: "<span\r\n  tabindex=\"0\"\r\n  (click)=\"onSelect()\"\r\n  (keydown.enter)=\"onSelect()\"\r\n  (mouseenter)=\"onMouseEnter()\"\r\n  (mouseleave)=\"onMouseLeave()\"\r\n  [ngClass]=\"{ selected: selected(), highlighted: highlighted() }\">\r\n  <ng-content\r\n/></span>\r\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+            args: [{
+                    selector: 'b-tab',
+                    imports: [],
+                    template: `<ng-content />`,
+                    hostDirectives: [
+                        {
+                            directive: CdkOption,
+                            inputs: ['cdkOption: value'],
+                        },
+                    ],
+                }]
+        }] });
 
-class Tabs {
-    tabs = contentChildren(Tab);
-    selectedIndex = signal(-1);
-    selectedValue = model(null);
-    highlightedIndex = signal(-1);
-    changesEmitter = output();
-    lastSelectedValue = null;
-    constructor() {
-        effect(() => {
-            this.handleTabSelection();
-            this.handleExternalSelectedValue();
-            this.handleScrollToSelectedTab();
-        });
-    }
-    /**
-     * Handle the selection of a tab.
-     */
-    handleTabSelection() {
-        this.tabs().forEach((tab, index) => {
-            tab.selectEmitter.subscribe(tabEmitted => {
-                this.selectTab(tabEmitted, index);
-                this.highlightTab(index);
-                this.handleTabStates();
-                this.changesEmitter.emit(tab.value());
-            });
-        });
-    }
-    /**
-     * Select a tab.
-     * @param {Tab} tab - The tab to select.
-     * @param {number} index - The index of the tab.
-     */
-    selectTab(tab, index) {
-        this.selectedValue.set(tab.value());
-        this.lastSelectedValue = tab.value();
-        this.selectedIndex.set(index);
-    }
+class TabsComponent {
     /**
-     * Highlight a tab.
-     * @param {number} index - The index of the tab to highlight.
-     */
-    highlightTab(index) {
-        this.highlightedIndex.set(index);
-    }
-    /**
-     * Handle the states of the tabs.
+     * Reference to the injected CDK Listbox instance.
      */
-    handleTabStates() {
-        this.tabs().forEach((tab, index) => {
-            tab.selected.set(index === this.selectedIndex());
-            tab.highlighted.set(index === this.highlightedIndex());
-        });
-    }
+    cdkListbox = inject(CdkListbox);
     /**
-     * Handle the external selected value.
+     * Collection of child options within the listbox.
      */
-    handleExternalSelectedValue() {
-        if (this.lastSelectedValue !== this.selectedValue()) {
-            const selectedOptionIndex = this.tabs().findIndex(tab => tab.value() === this.selectedValue());
-            if (selectedOptionIndex !== -1) {
-                this.selectTab(this.tabs()[selectedOptionIndex], selectedOptionIndex);
-                this.highlightTab(selectedOptionIndex);
-                this.handleTabStates();
-            }
-        }
-    }
+    tabs = contentChildren(TabComponent);
     /**
-     * Scroll to the selected tab.
+     * Collection of cdk options within the listbox.
      */
-    handleScrollToSelectedTab() {
-        if (this.selectedIndex() !== -1) {
-            this.scrollToTab(this.selectedIndex(), 'smooth');
-        }
-    }
-    /**
-     * Handle keyboard events for navigation and selection.
-     * @param {KeyboardEvent} event - The keyboard event.
-     */
-    handleKeyboard(event) {
-        switch (event.key) {
-            case 'ArrowRight':
-                event.preventDefault();
-                this.focusOption('next');
-                break;
-            case 'ArrowLeft':
-                event.preventDefault();
-                this.focusOption('previous');
-                break;
-            case 'Enter':
-                event.preventDefault();
-                this.selectFocusedTab();
-                break;
-        }
-    }
+    cdkOptions = computed(() => this.tabs().map(tab => tab.cdkOption));
     /**
-     * Focus on the next or previous tab.
-     * @param {'next' | 'previous'} direction - The direction to move the focus.
+     * Key manager for handling keyboard navigation and active descendant management.
      */
-    focusOption(direction) {
-        let index = this.highlightedIndex();
-        const increment = direction === 'next' ? 1 : -1;
-        index += increment;
-        while (index >= 0 &&
-            index < this.tabs().length &&
-            this.tabs()[index].disabled()) {
-            index += increment;
-        }
-        if (index >= 0 && index < this.tabs().length) {
-            this.highlightTab(index);
-            this.handleTabStates();
-            this.scrollToTab(this.highlightedIndex(), 'smooth');
-        }
+    listKeyManager = computed(() => new ActiveDescendantKeyManager(this.cdkOptions())
+        .withWrap()
+        .withHorizontalOrientation('ltr'));
+    previousTab() {
+        this.listKeyManager().setPreviousItemActive();
+        this.cdkListbox.value = this.listKeyManager().activeItem?.value;
     }
-    /**
-     * Select the currently focused tab.
-     */
-    selectFocusedTab() {
-        this.selectTab(this.tabs()[this.highlightedIndex()], this.highlightedIndex());
-        this.handleTabStates();
+    nextTab() {
+        this.listKeyManager().setNextItemActive();
+        this.cdkListbox.value = this.listKeyManager().activeItem?.value;
     }
-    /**
-     * Scroll to a specific tab.
-     * @param {number} index - The index of the tab to scroll to.
-     * @param {string} behavior - The scroll behavior ('instant' or 'smooth').
-     */
-    scrollToTab(index, behavior) {
-        const tabsElements = this.tabs();
-        if (tabsElements[index].el.nativeElement) {
-            tabsElements[index].el.nativeElement.scrollIntoView({
-                block: 'nearest',
-                behavior: behavior,
-            });
-        }
+    ngOnInit() {
+        this.cdkListbox.useActiveDescendant = true;
+        this.cdkListbox.orientation = 'horizontal';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Tabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", type: Tabs, isStandalone: true, selector: "b-tabs", inputs: { selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedValue: "selectedValueChange", changesEmitter: "changesEmitter" }, host: { listeners: { "keydown": "handleKeyboard($event)" } }, queries: [{ propertyName: "tabs", predicate: Tab, isSignal: true }], ngImport: i0, template: "<div class=\"tabs\" [tabIndex]=\"0\">\r\n  <ng-content />\r\n</div>\r\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", type: TabsComponent, isStandalone: true, selector: "b-tabs", host: { listeners: { "cdkListboxValueChange": "selectOption($event.value)", "keydown.arrowLeft": "previousTab()", "keydown.arrowRight": "nextTab()" } }, queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }], hostDirectives: [{ directive: i1.CdkListbox, inputs: ["cdkListboxValue", "value"], outputs: ["cdkListboxValueChange", "cdkListboxValueChange"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Tabs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'b-tabs', template: "<div class=\"tabs\" [tabIndex]=\"0\">\r\n  <ng-content />\r\n</div>\r\n" }]
-        }], ctorParameters: () => [], propDecorators: { handleKeyboard: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }] } });
+            args: [{
+                    selector: 'b-tabs',
+                    imports: [],
+                    template: `<ng-content />`,
+                    hostDirectives: [
+                        {
+                            directive: CdkListbox,
+                            inputs: ['cdkListboxValue: value'],
+                            outputs: ['cdkListboxValueChange'],
+                        },
+                    ],
+                    host: {
+                        '(cdkListboxValueChange)': 'selectOption($event.value)',
+                        '(keydown.arrowLeft)': 'previousTab()',
+                        '(keydown.arrowRight)': 'nextTab()',
+                    },
+                }]
+        }] });
 
 class InViewportService {
     elements = signal({});
@@ -3056,5 +2947,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { Alert, AttachedBox, Badge, BottomSheet, Button, ButtonGroup, Checkbox, ColorPicker, ComboboxComponent, CommandComponent, CommandOptionsComponent, Icon, InViewportDirective, InViewportService, Input, InputGroup, LazyContentDirective, Menu, MenuGroupComponent, MenuItemCheckboxComponent, MenuItemComponent, MenuItemRadioComponent, MenuLabel, MenuTrigger, OptionComponent, OverlayDirective, OverlayTriggerDirective, Range, ResponsiveService, Row, RowItem, SelectComponent, SelectOptionsComponent, SideSheet, Spinner, Switch, Tab, Table, Tabs, Textarea, ThemeService, TooltipComponent, Tree, TreeNode };
+export { Alert, AttachedBox, Badge, BottomSheet, Button, ButtonGroup, Checkbox, ColorPicker, ComboboxComponent, CommandComponent, CommandOptionsComponent, Icon, InViewportDirective, InViewportService, Input, InputGroup, LazyContentDirective, Menu, MenuGroupComponent, MenuItemCheckboxComponent, MenuItemComponent, MenuItemRadioComponent, MenuLabel, MenuTrigger, OptionComponent, OverlayDirective, OverlayTriggerDirective, Range, ResponsiveService, Row, RowItem, SelectComponent, SelectOptionsComponent, SideSheet, Spinner, Switch, TabComponent, Table, TabsComponent, Textarea, ThemeService, TooltipComponent, Tree, TreeNode };
 //# sourceMappingURL=basis-ng-primitives.mjs.map