@nuraly/lumenui 0.2.1 → 0.3.2

package/dist/src/components/tabs/controllers/event.controller.js

@@ -0,0 +1,239 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseTabsController } from './base.controller.js';
+/**
+ * Event controller manages event handling and dispatching for tabs components
+ * Handles click, focus, blur, and custom event dispatching
+ */
+export class TabsEventController extends BaseTabsController {
+    constructor(host) {
+        super(host);
+        this._host = host;
+    }
+    get host() {
+        return this._host;
+    }
+    /**
+     * Handle tab click events
+     * @param tabIndex - Index of clicked tab
+     * @param event - Click event
+     */
+    handleTabClick(tabIndex, event) {
+        try {
+            if (!this.isValidTabIndex(tabIndex)) {
+                console.warn(`[TabsEventController] Invalid tab index: ${tabIndex}`);
+                return;
+            }
+            const tab = this.host.tabs[tabIndex];
+            // Check if tab is disabled
+            if (tab.disabled) {
+                event.preventDefault();
+                return;
+            }
+            // Prevent default if needed
+            event.preventDefault();
+            // Set active tab
+            this.host.setActiveTab(tabIndex, event);
+            // Dispatch click event
+            this.host.dispatchEventWithMetadata("nr-tab-click" /* TabEvent.TabClick */, {
+                index: tabIndex,
+                tab,
+                originalEvent: event
+            });
+            // Dispatch generic tab interaction event
+            this.dispatchTabEvent('tabs-interaction', {
+                type: 'click',
+                tabIndex,
+                tab,
+                timestamp: Date.now(),
+                modifierKeys: {
+                    ctrl: event.ctrlKey,
+                    shift: event.shiftKey,
+                    alt: event.altKey,
+                    meta: event.metaKey
+                }
+            });
+        }
+        catch (error) {
+            this.handleError(error, 'handleTabClick');
+        }
+    }
+    /**
+     * Handle tab focus events
+     * @param tabIndex - Index of focused tab
+     * @param event - Focus event
+     */
+    handleTabFocus(tabIndex, event) {
+        try {
+            if (!this.isValidTabIndex(tabIndex)) {
+                return;
+            }
+            const tab = this.host.tabs[tabIndex];
+            // Dispatch focus event
+            this.dispatchTabEvent('tabs-focus', {
+                tabIndex,
+                tab,
+                timestamp: Date.now(),
+                originalEvent: event
+            });
+        }
+        catch (error) {
+            this.handleError(error, 'handleTabFocus');
+        }
+    }
+    /**
+     * Handle tab blur events
+     * @param tabIndex - Index of blurred tab
+     * @param event - Blur event
+     */
+    handleTabBlur(tabIndex, event) {
+        try {
+            if (!this.isValidTabIndex(tabIndex)) {
+                return;
+            }
+            const tab = this.host.tabs[tabIndex];
+            // Dispatch blur event
+            this.dispatchTabEvent('tabs-blur', {
+                tabIndex,
+                tab,
+                timestamp: Date.now(),
+                originalEvent: event
+            });
+        }
+        catch (error) {
+            this.handleError(error, 'handleTabBlur');
+        }
+    }
+    /**
+     * Dispatch custom tab events
+     * @param eventName - Name of the event
+     * @param detail - Event detail data
+     */
+    dispatchTabEvent(eventName, detail) {
+        try {
+            this.dispatchEvent(new CustomEvent(eventName, {
+                detail,
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        catch (error) {
+            this.handleError(error, 'dispatchTabEvent');
+        }
+    }
+    /**
+     * Handle tab change events (when active tab changes)
+     * @param newTabIndex - New active tab index
+     * @param previousTabIndex - Previous active tab index
+     * @param event - Original event that triggered the change
+     */
+    handleTabChange(newTabIndex, previousTabIndex, event) {
+        try {
+            if (!this.isValidTabIndex(newTabIndex)) {
+                console.warn(`[TabsEventController] Invalid new tab index: ${newTabIndex}`);
+                return;
+            }
+            const newTab = this.host.tabs[newTabIndex];
+            const previousTab = this.isValidTabIndex(previousTabIndex) ? this.host.tabs[previousTabIndex] : null;
+            // Dispatch tab change event
+            this.dispatchTabEvent('tabs-change', {
+                newTabIndex,
+                previousTabIndex,
+                newTab,
+                previousTab,
+                timestamp: Date.now(),
+                originalEvent: event
+            });
+        }
+        catch (error) {
+            this.handleError(error, 'handleTabChange');
+        }
+    }
+    /**
+     * Handle tab activation events (for keyboard and programmatic activation)
+     * @param tabIndex - Index of activated tab
+     * @param activationType - Type of activation (click, keyboard, programmatic)
+     * @param event - Original event
+     */
+    handleTabActivation(tabIndex, activationType, event) {
+        try {
+            if (!this.isValidTabIndex(tabIndex)) {
+                return;
+            }
+            const tab = this.host.tabs[tabIndex];
+            // Dispatch activation event
+            this.dispatchTabEvent('tabs-activation', {
+                tabIndex,
+                tab,
+                activationType,
+                timestamp: Date.now(),
+                originalEvent: event
+            });
+        }
+        catch (error) {
+            this.handleError(error, 'handleTabActivation');
+        }
+    }
+    /**
+     * Handle tab hover events
+     * @param tabIndex - Index of hovered tab
+     * @param event - Mouse event
+     * @param isEnter - Whether mouse is entering (true) or leaving (false)
+     */
+    handleTabHover(tabIndex, event, isEnter) {
+        try {
+            if (!this.isValidTabIndex(tabIndex)) {
+                return;
+            }
+            const tab = this.host.tabs[tabIndex];
+            // Dispatch hover event
+            this.dispatchTabEvent(isEnter ? 'tabs-hover-enter' : 'tabs-hover-leave', {
+                tabIndex,
+                tab,
+                timestamp: Date.now(),
+                originalEvent: event
+            });
+        }
+        catch (error) {
+            this.handleError(error, 'handleTabHover');
+        }
+    }
+    /**
+     * Get event listeners for a tab element
+     * @param tabIndex - Index of the tab
+     */
+    getTabEventListeners(tabIndex) {
+        return {
+            click: (event) => this.handleTabClick(tabIndex, event),
+            focus: (event) => this.handleTabFocus(tabIndex, event),
+            blur: (event) => this.handleTabBlur(tabIndex, event),
+            mouseenter: (event) => this.handleTabHover(tabIndex, event, true),
+            mouseleave: (event) => this.handleTabHover(tabIndex, event, false)
+        };
+    }
+    /**
+     * Validate if tab can be activated
+     * @param tab - Tab to validate
+     */
+    canActivateTab(tab) {
+        return !tab.disabled;
+    }
+    /**
+     * Get tab interaction state
+     * @param tabIndex - Index of tab
+     */
+    getTabInteractionState(tabIndex) {
+        var _a;
+        const tab = this.host.tabs[tabIndex];
+        const isActive = tabIndex === this.host.activeTab;
+        return {
+            isActive,
+            isDisabled: (_a = tab.disabled) !== null && _a !== void 0 ? _a : false,
+            canActivate: this.canActivateTab(tab)
+        };
+    }
+}
+//# sourceMappingURL=event.controller.js.map

package/dist/src/components/tabs/controllers/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { BaseTabsController, type TabsHost, type TabsBaseController, type ErrorHandler } from './base.controller.js';
+export { TabsKeyboardController, type KeyboardController, type TabsKeyboardHost } from './keyboard.controller.js';
+export { TabsDragDropController, type DragDropController, type TabsDragDropHost } from './dragdrop.controller.js';
+export { TabsEditableController, type EditableController, type TabsEditableHost } from './editable.controller.js';
+export { TabsEventController, type EventController, type TabsEventHost } from './event.controller.js';
+export { TabsPopOutController, type TabsPopOutHost } from './popout.controller.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/tabs/controllers/index.js

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+// Base controller exports
+export { BaseTabsController } from './base.controller.js';
+// Keyboard controller exports
+export { TabsKeyboardController } from './keyboard.controller.js';
+// Drag and drop controller exports
+export { TabsDragDropController } from './dragdrop.controller.js';
+// Editable controller exports
+export { TabsEditableController } from './editable.controller.js';
+// Event controller exports
+export { TabsEventController } from './event.controller.js';
+// Pop-out controller exports
+export { TabsPopOutController } from './popout.controller.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/tabs/controllers/keyboard.controller.d.ts

@@ -0,0 +1,85 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { TabsHost, BaseTabsController } from './base.controller.js';
+import { ReactiveControllerHost } from 'lit';
+/**
+ * Keyboard controller interface for tabs components
+ */
+export interface KeyboardController {
+    handleKeyDown(event: KeyboardEvent): void;
+    handleTabKeyDown(event: KeyboardEvent, tabIndex: number): void;
+    isActivationKey(event: KeyboardEvent): boolean;
+    isArrowKey(event: KeyboardEvent): boolean;
+}
+/**
+ * Enhanced tabs host interface for keyboard functionality
+ */
+export interface TabsKeyboardHost extends TabsHost {
+    orientation: string;
+    setActiveTab(index: number, event?: Event): void;
+}
+/**
+ * Keyboard controller manages keyboard navigation for tabs components
+ * Handles Tab/Shift+Tab, Arrow keys, Enter/Space activation following ARIA best practices
+ */
+export declare class TabsKeyboardController extends BaseTabsController implements KeyboardController {
+    protected _host: TabsKeyboardHost & ReactiveControllerHost;
+    private keyboardHandler;
+    constructor(host: TabsKeyboardHost & ReactiveControllerHost);
+    get host(): TabsKeyboardHost & ReactiveControllerHost;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * Handle keyboard events for tabs navigation
+     * @param event - The keyboard event
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    /**
+     * Handle keyboard events for specific tab
+     * @param event - The keyboard event
+     * @param tabIndex - The tab index
+     */
+    handleTabKeyDown(event: KeyboardEvent, tabIndex: number): void;
+    /**
+     * Check if key is activation key (Enter or Space)
+     * @param event - The keyboard event
+     */
+    isActivationKey(event: KeyboardEvent): boolean;
+    /**
+     * Check if key is arrow key
+     * @param event - The keyboard event
+     */
+    isArrowKey(event: KeyboardEvent): boolean;
+    /**
+     * Activate tab and dispatch events
+     */
+    private activateTab;
+    /**
+     * Navigate to previous enabled tab
+     */
+    private navigateToPreviousTab;
+    /**
+     * Navigate to next enabled tab
+     */
+    private navigateToNextTab;
+    /**
+     * Navigate to first enabled tab
+     */
+    private navigateToFirstTab;
+    /**
+     * Navigate to last enabled tab
+     */
+    private navigateToLastTab;
+    /**
+     * Focus specific tab element
+     */
+    private focusTab;
+    /**
+     * Get indices of enabled tabs
+     */
+    private getEnabledTabIndices;
+}
+//# sourceMappingURL=keyboard.controller.d.ts.map

package/dist/src/components/tabs/controllers/keyboard.controller.js

@@ -0,0 +1,233 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseTabsController } from './base.controller.js';
+/**
+ * Keyboard controller manages keyboard navigation for tabs components
+ * Handles Tab/Shift+Tab, Arrow keys, Enter/Space activation following ARIA best practices
+ */
+export class TabsKeyboardController extends BaseTabsController {
+    constructor(host) {
+        super(host);
+        this._host = host;
+        this.keyboardHandler = (event) => this.handleKeyDown(event);
+    }
+    get host() {
+        return this._host;
+    }
+    hostConnected() {
+        super.hostConnected();
+        // Add global keyboard listeners
+        this._host.addEventListener('keydown', this.keyboardHandler);
+    }
+    hostDisconnected() {
+        super.hostDisconnected();
+        // Remove global keyboard listeners
+        this._host.removeEventListener('keydown', this.keyboardHandler);
+    }
+    /**
+     * Handle keyboard events for tabs navigation
+     * @param event - The keyboard event
+     */
+    handleKeyDown(event) {
+        try {
+            if (this.host.disabled)
+                return;
+            const target = event.target;
+            const tabElement = target.closest('.tab-label');
+            if (!tabElement)
+                return;
+            const tabIndex = Number.parseInt(tabElement.getAttribute('data-index') || '0');
+            if (!this.isValidTabIndex(tabIndex))
+                return;
+            this.handleTabKeyDown(event, tabIndex);
+        }
+        catch (error) {
+            this.handleError(error, 'handleKeyDown');
+        }
+    }
+    /**
+     * Handle keyboard events for specific tab
+     * @param event - The keyboard event
+     * @param tabIndex - The tab index
+     */
+    handleTabKeyDown(event, tabIndex) {
+        try {
+            const isHorizontal = this.host.orientation !== 'vertical';
+            switch (event.key) {
+                case 'Enter':
+                case ' ':
+                    event.preventDefault();
+                    this.activateTab(tabIndex, event);
+                    break;
+                case 'ArrowLeft':
+                    if (isHorizontal) {
+                        event.preventDefault();
+                        this.navigateToPreviousTab(tabIndex);
+                    }
+                    break;
+                case 'ArrowRight':
+                    if (isHorizontal) {
+                        event.preventDefault();
+                        this.navigateToNextTab(tabIndex);
+                    }
+                    break;
+                case 'ArrowUp':
+                    if (!isHorizontal) {
+                        event.preventDefault();
+                        this.navigateToPreviousTab(tabIndex);
+                    }
+                    break;
+                case 'ArrowDown':
+                    if (!isHorizontal) {
+                        event.preventDefault();
+                        this.navigateToNextTab(tabIndex);
+                    }
+                    break;
+                case 'Home':
+                    event.preventDefault();
+                    this.navigateToFirstTab();
+                    break;
+                case 'End':
+                    event.preventDefault();
+                    this.navigateToLastTab();
+                    break;
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'handleTabKeyDown');
+        }
+    }
+    /**
+     * Check if key is activation key (Enter or Space)
+     * @param event - The keyboard event
+     */
+    isActivationKey(event) {
+        return event.key === 'Enter' || event.key === ' ';
+    }
+    /**
+     * Check if key is arrow key
+     * @param event - The keyboard event
+     */
+    isArrowKey(event) {
+        return ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key);
+    }
+    /**
+     * Activate tab and dispatch events
+     */
+    activateTab(tabIndex, event) {
+        try {
+            this.host.setActiveTab(tabIndex, event);
+            // Dispatch keyboard activation event
+            this.dispatchEvent(new CustomEvent('tabs-keyboard-activation', {
+                detail: {
+                    tabIndex,
+                    tab: this.host.tabs[tabIndex],
+                    key: event.key,
+                    timestamp: Date.now()
+                },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        catch (error) {
+            this.handleError(error, 'activateTab');
+        }
+    }
+    /**
+     * Navigate to previous enabled tab
+     */
+    navigateToPreviousTab(currentIndex) {
+        try {
+            const enabledTabs = this.getEnabledTabIndices();
+            const currentIndexInEnabled = enabledTabs.indexOf(currentIndex);
+            if (currentIndexInEnabled > 0) {
+                const previousIndex = enabledTabs[currentIndexInEnabled - 1];
+                this.focusTab(previousIndex);
+            }
+            else if (enabledTabs.length > 0) {
+                // Wrap to last enabled tab
+                const lastIndex = enabledTabs[enabledTabs.length - 1];
+                this.focusTab(lastIndex);
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'navigateToPreviousTab');
+        }
+    }
+    /**
+     * Navigate to next enabled tab
+     */
+    navigateToNextTab(currentIndex) {
+        try {
+            const enabledTabs = this.getEnabledTabIndices();
+            const currentIndexInEnabled = enabledTabs.indexOf(currentIndex);
+            if (currentIndexInEnabled < enabledTabs.length - 1) {
+                const nextIndex = enabledTabs[currentIndexInEnabled + 1];
+                this.focusTab(nextIndex);
+            }
+            else if (enabledTabs.length > 0) {
+                // Wrap to first enabled tab
+                const firstIndex = enabledTabs[0];
+                this.focusTab(firstIndex);
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'navigateToNextTab');
+        }
+    }
+    /**
+     * Navigate to first enabled tab
+     */
+    navigateToFirstTab() {
+        try {
+            const enabledTabs = this.getEnabledTabIndices();
+            if (enabledTabs.length > 0) {
+                this.focusTab(enabledTabs[0]);
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'navigateToFirstTab');
+        }
+    }
+    /**
+     * Navigate to last enabled tab
+     */
+    navigateToLastTab() {
+        try {
+            const enabledTabs = this.getEnabledTabIndices();
+            if (enabledTabs.length > 0) {
+                this.focusTab(enabledTabs[enabledTabs.length - 1]);
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'navigateToLastTab');
+        }
+    }
+    /**
+     * Focus specific tab element
+     */
+    focusTab(tabIndex) {
+        try {
+            const tabElement = this.getTabElement(tabIndex);
+            if (tabElement) {
+                tabElement.focus();
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'focusTab');
+        }
+    }
+    /**
+     * Get indices of enabled tabs
+     */
+    getEnabledTabIndices() {
+        return this.host.tabs
+            .map((tab, index) => ({ tab, index }))
+            .filter(({ tab }) => !tab.disabled)
+            .map(({ index }) => index);
+    }
+}
+//# sourceMappingURL=keyboard.controller.js.map

package/dist/src/components/tabs/controllers/popout.controller.d.ts

@@ -0,0 +1,96 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { TabItem, TabPopOutConfig, PoppedOutTab, TabsPanelConfig } from '../tabs.types.js';
+/**
+ * Host interface for tabs pop-out controller
+ */
+export interface TabsPopOutHost extends ReactiveControllerHost {
+    /** Tab items array */
+    tabs: TabItem[];
+    /** Pop-out configuration */
+    popOut?: TabPopOutConfig;
+    /** Panel configuration for making tabs pannable */
+    panelConfig?: TabsPanelConfig;
+    /** Method to dispatch custom events */
+    dispatchEventWithMetadata(eventName: string, detail: any): void;
+    /** Method to check if a component is available */
+    isComponentAvailable(componentName: string): boolean;
+    /** Method to request update */
+    requestUpdate(): void;
+}
+/**
+ * Controller for managing tab pop-out functionality
+ */
+export declare class TabsPopOutController implements ReactiveController {
+    private host;
+    private poppedOutTabs;
+    private popOutIdCounter;
+    constructor(host: TabsPopOutHost);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * Initialize pop-out states for all tabs
+     */
+    private initializeTabStates;
+    /**
+     * Check if pop-out functionality is enabled
+     */
+    isPopOutEnabled(): boolean;
+    /**
+     * Check if a specific tab can be popped out
+     */
+    canPopOut(tab: TabItem): boolean;
+    /**
+     * Check if a specific tab can be popped back in
+     */
+    canPopIn(tab: TabItem): boolean;
+    /**
+     * Generate unique pop-out ID
+     */
+    private generatePopOutId;
+    /**
+     * Pop out a tab to a window panel
+     */
+    popOutTab(tabIndex: number): Promise<void>;
+    /**
+     * Pop a tab back into the tabs container
+     */
+    popInTab(popOutId: string): Promise<void>;
+    /**
+     * Create window panel for popped-out tab
+     */
+    private createWindowPanel;
+    /**
+     * Destroy window panel
+     */
+    private destroyWindowPanel;
+    /**
+     * Clean up all popped-out tabs
+     */
+    private cleanupPoppedOutTabs;
+    /**
+     * Get all currently popped-out tabs
+     */
+    getPoppedOutTabs(): PoppedOutTab[];
+    /**
+     * Check if any tabs are currently popped out
+     */
+    hasPopppedOutTabs(): boolean;
+    /**
+     * Handle tab removal - clean up if tab is popped out
+     */
+    handleTabRemoval(tabIndex: number): void;
+    /**
+     * Public method to be called from tab component
+     */
+    handlePopOutRequest(tabIndex: number): Promise<void>;
+    /**
+     * Public method to be called from panel or placeholder
+     */
+    handlePopInRequest(popOutId: string): Promise<void>;
+}
+//# sourceMappingURL=popout.controller.d.ts.map