@nuraly/lumenui 0.1.0 → 0.2.2

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