@nuraly/lumenui 0.1.0 → 0.2.2

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

@@ -0,0 +1,242 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseTabsController } from './base.controller.js';
+/**
+ * Editable controller manages editable functionality for tabs components
+ * Handles add, delete, and edit operations for tabs
+ */
+export class TabsEditableController extends BaseTabsController {
+    constructor(host) {
+        super(host);
+        this._host = host;
+    }
+    get host() {
+        return this._host;
+    }
+    /**
+     * Handle adding a new tab
+     */
+    handleAddTab() {
+        try {
+            if (!this.canAddTab()) {
+                console.warn('[TabsEditableController] Cannot add tab - permission denied');
+                return;
+            }
+            // Dispatch add tab event
+            this.host.dispatchEventWithMetadata("nr-tab-add" /* TabEvent.TabAdd */, {});
+            // Dispatch editable action event
+            this.dispatchEvent(new CustomEvent('tabs-add-tab', {
+                detail: {
+                    timestamp: Date.now(),
+                    totalTabs: this.host.tabs.length
+                },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        catch (error) {
+            this.handleError(error, 'handleAddTab');
+        }
+    }
+    /**
+     * Handle removing a tab
+     * @param tabIndex - Index of tab to remove
+     */
+    handleRemoveTab(tabIndex) {
+        try {
+            if (!this.isValidTabIndex(tabIndex)) {
+                console.warn(`[TabsEditableController] Invalid tab index: ${tabIndex}`);
+                return;
+            }
+            const tab = this.host.tabs[tabIndex];
+            if (!this.canDeleteTab(tab)) {
+                console.warn('[TabsEditableController] Cannot delete tab - permission denied');
+                return;
+            }
+            // Dispatch remove tab event
+            this.host.dispatchEventWithMetadata("nr-tab-remove" /* TabEvent.TabRemove */, {
+                index: tabIndex,
+                tab
+            });
+            // Dispatch editable action event
+            this.dispatchEvent(new CustomEvent('tabs-remove-tab', {
+                detail: {
+                    tabIndex,
+                    tab,
+                    timestamp: Date.now(),
+                    remainingTabs: this.host.tabs.length - 1
+                },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        catch (error) {
+            this.handleError(error, 'handleRemoveTab');
+        }
+    }
+    /**
+     * Handle editing a tab title
+     * @param tabIndex - Index of tab to edit
+     * @param newLabel - New label for the tab
+     */
+    handleEditTab(tabIndex, newLabel) {
+        try {
+            if (!this.isValidTabIndex(tabIndex)) {
+                console.warn(`[TabsEditableController] Invalid tab index: ${tabIndex}`);
+                return;
+            }
+            const tab = this.host.tabs[tabIndex];
+            const oldLabel = tab.label;
+            if (!this.canEditTabTitle(tab)) {
+                console.warn('[TabsEditableController] Cannot edit tab title - permission denied');
+                return;
+            }
+            if (newLabel.trim() === oldLabel.trim()) {
+                return; // No change
+            }
+            // Validate new label
+            if (!this.isValidTabLabel(newLabel)) {
+                console.warn('[TabsEditableController] Invalid tab label provided');
+                return;
+            }
+            // Dispatch edit tab event
+            this.host.dispatchEventWithMetadata("nr-tab-edit" /* TabEvent.TabEdit */, {
+                index: tabIndex,
+                tab: Object.assign(Object.assign({}, tab), { label: newLabel.trim() }),
+                oldLabel,
+                newLabel: newLabel.trim()
+            });
+            // Dispatch editable action event
+            this.dispatchEvent(new CustomEvent('tabs-edit-tab', {
+                detail: {
+                    tabIndex,
+                    tab,
+                    oldLabel,
+                    newLabel: newLabel.trim(),
+                    timestamp: Date.now()
+                },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        catch (error) {
+            this.handleError(error, 'handleEditTab');
+        }
+    }
+    /**
+     * Check if user can add tabs
+     */
+    canAddTab() {
+        var _a, _b;
+        return (_b = (_a = this.host.editable) === null || _a === void 0 ? void 0 : _a.canAddTab) !== null && _b !== void 0 ? _b : false;
+    }
+    /**
+     * Check if user can delete a specific tab
+     * @param tab - Tab to check (optional, falls back to global setting)
+     */
+    canDeleteTab(tab) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (tab) {
+            return (_e = (_c = (_a = tab.closable) !== null && _a !== void 0 ? _a : (_b = tab.editable) === null || _b === void 0 ? void 0 : _b.canDeleteTab) !== null && _c !== void 0 ? _c : (_d = this.host.editable) === null || _d === void 0 ? void 0 : _d.canDeleteTab) !== null && _e !== void 0 ? _e : false;
+        }
+        return (_g = (_f = this.host.editable) === null || _f === void 0 ? void 0 : _f.canDeleteTab) !== null && _g !== void 0 ? _g : false;
+    }
+    /**
+     * Check if user can edit tab titles for a specific tab
+     * @param tab - Tab to check (optional, falls back to global setting)
+     */
+    canEditTabTitle(tab) {
+        var _a, _b, _c, _d, _e, _f;
+        if (tab) {
+            return (_d = (_b = (_a = tab.editable) === null || _a === void 0 ? void 0 : _a.canEditTabTitle) !== null && _b !== void 0 ? _b : (_c = this.host.editable) === null || _c === void 0 ? void 0 : _c.canEditTabTitle) !== null && _d !== void 0 ? _d : false;
+        }
+        return (_f = (_e = this.host.editable) === null || _e === void 0 ? void 0 : _e.canEditTabTitle) !== null && _f !== void 0 ? _f : false;
+    }
+    /**
+     * Check if tab can be moved (for drag and drop)
+     */
+    canMoveTab() {
+        var _a, _b;
+        return (_b = (_a = this.host.editable) === null || _a === void 0 ? void 0 : _a.canMove) !== null && _b !== void 0 ? _b : false;
+    }
+    /**
+     * Get editable state for a specific tab
+     * @param tab - Tab to check
+     */
+    getTabEditableState(tab) {
+        return {
+            canDelete: this.canDeleteTab(tab),
+            canEdit: this.canEditTabTitle(tab),
+            canMove: this.canMoveTab()
+        };
+    }
+    /**
+     * Validate if a tab label is valid
+     * @param label - Label to validate
+     */
+    isValidTabLabel(label) {
+        return (typeof label === 'string' &&
+            label.trim().length > 0 &&
+            label.trim().length <= 100 // Reasonable max length
+        );
+    }
+    /**
+     * Get the contenteditable attribute value for tab text
+     * @param tab - Tab to check
+     */
+    getContentEditableAttribute(tab) {
+        return this.canEditTabTitle(tab) ? 'true' : undefined;
+    }
+    /**
+     * Handle blur event for editable tab titles
+     * @param event - Blur event
+     * @param tabIndex - Index of the tab
+     */
+    handleTabTitleBlur(event, tabIndex) {
+        var _a;
+        try {
+            const target = event.target;
+            const newLabel = ((_a = target.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+            if (newLabel) {
+                this.handleEditTab(tabIndex, newLabel);
+            }
+            else {
+                // Reset to original label if empty
+                const tab = this.host.tabs[tabIndex];
+                target.textContent = tab.label;
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'handleTabTitleBlur');
+        }
+    }
+    /**
+     * Handle keydown events for editable tab titles
+     * @param event - Keyboard event
+     * @param tabIndex - Index of the tab
+     */
+    handleTabTitleKeyDown(event, tabIndex) {
+        try {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                const target = event.target;
+                target.blur(); // This will trigger the blur handler
+            }
+            else if (event.key === 'Escape') {
+                event.preventDefault();
+                // Reset to original label
+                const tab = this.host.tabs[tabIndex];
+                const target = event.target;
+                target.textContent = tab.label;
+                target.blur();
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'handleTabTitleKeyDown');
+        }
+    }
+}
+//# sourceMappingURL=editable.controller.js.map

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

@@ -0,0 +1,104 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { TabsHost, BaseTabsController } from './base.controller.js';
+import { ReactiveControllerHost } from 'lit';
+import { TabItem } from '../tabs.types.js';
+/**
+ * Event controller interface for tabs components
+ */
+export interface EventController {
+    handleTabClick(tabIndex: number, event: MouseEvent): void;
+    handleTabFocus(tabIndex: number, event: FocusEvent): void;
+    handleTabBlur(tabIndex: number, event: FocusEvent): void;
+    dispatchTabEvent(eventName: string, detail: any): void;
+}
+/**
+ * Enhanced tabs host interface for event functionality
+ */
+export interface TabsEventHost extends TabsHost {
+    dispatchEventWithMetadata(eventName: string, detail: any): void;
+    setActiveTab(index: number, event?: Event): void;
+}
+/**
+ * Event controller manages event handling and dispatching for tabs components
+ * Handles click, focus, blur, and custom event dispatching
+ */
+export declare class TabsEventController extends BaseTabsController implements EventController {
+    protected _host: TabsEventHost & ReactiveControllerHost;
+    constructor(host: TabsEventHost & ReactiveControllerHost);
+    get host(): TabsEventHost & ReactiveControllerHost;
+    /**
+     * Handle tab click events
+     * @param tabIndex - Index of clicked tab
+     * @param event - Click event
+     */
+    handleTabClick(tabIndex: number, event: MouseEvent): void;
+    /**
+     * Handle tab focus events
+     * @param tabIndex - Index of focused tab
+     * @param event - Focus event
+     */
+    handleTabFocus(tabIndex: number, event: FocusEvent): void;
+    /**
+     * Handle tab blur events
+     * @param tabIndex - Index of blurred tab
+     * @param event - Blur event
+     */
+    handleTabBlur(tabIndex: number, event: FocusEvent): void;
+    /**
+     * Dispatch custom tab events
+     * @param eventName - Name of the event
+     * @param detail - Event detail data
+     */
+    dispatchTabEvent(eventName: string, detail: any): void;
+    /**
+     * 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: number, previousTabIndex: number, event?: Event): void;
+    /**
+     * 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: number, activationType: 'click' | 'keyboard' | 'programmatic', event?: Event): void;
+    /**
+     * 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: number, event: MouseEvent, isEnter: boolean): void;
+    /**
+     * Get event listeners for a tab element
+     * @param tabIndex - Index of the tab
+     */
+    getTabEventListeners(tabIndex: number): {
+        click: (event: MouseEvent) => void;
+        focus: (event: FocusEvent) => void;
+        blur: (event: FocusEvent) => void;
+        mouseenter: (event: MouseEvent) => void;
+        mouseleave: (event: MouseEvent) => void;
+    };
+    /**
+     * Validate if tab can be activated
+     * @param tab - Tab to validate
+     */
+    canActivateTab(tab: TabItem): boolean;
+    /**
+     * Get tab interaction state
+     * @param tabIndex - Index of tab
+     */
+    getTabInteractionState(tabIndex: number): {
+        isActive: boolean;
+        isDisabled: boolean;
+        canActivate: boolean;
+    };
+}
+//# sourceMappingURL=event.controller.d.ts.map

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