@nuraly/lumenui 0.2.1 → 0.2.2

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

@@ -0,0 +1,202 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseTabsController } from './base.controller.js';
+/**
+ * Drag and drop controller manages drag and drop functionality for tabs components
+ * Handles all drag events and tab reordering
+ */
+export class TabsDragDropController extends BaseTabsController {
+    constructor(host) {
+        super(host);
+        this._host = host;
+        this.dragOverHandler = (event) => this.handleDragOver(event);
+    }
+    get host() {
+        return this._host;
+    }
+    hostConnected() {
+        super.hostConnected();
+        // Add global drag over listener
+        this._host.addEventListener('dragover', this.dragOverHandler);
+    }
+    hostDisconnected() {
+        super.hostDisconnected();
+        // Remove global drag over listener
+        this._host.removeEventListener('dragover', this.dragOverHandler);
+    }
+    /**
+     * Handle drag start event
+     * @param event - The drag event
+     */
+    handleDragStart(event) {
+        try {
+            if (!event.dataTransfer)
+                return;
+            const target = event.currentTarget;
+            const tabIndex = target.dataset.index || '';
+            if (!this.isValidTabIndex(Number.parseInt(tabIndex)))
+                return;
+            event.dataTransfer.setData('text/plain', tabIndex);
+            event.dataTransfer.effectAllowed = 'move';
+            target.classList.add('dragging-start');
+            // Dispatch drag start event
+            this.dispatchEvent(new CustomEvent('tabs-drag-start', {
+                detail: {
+                    tabIndex: Number.parseInt(tabIndex),
+                    tab: this.host.tabs[Number.parseInt(tabIndex)],
+                    timestamp: Date.now()
+                },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        catch (error) {
+            this.handleError(error, 'handleDragStart');
+        }
+    }
+    /**
+     * Handle drag over event
+     * @param event - The drag event
+     */
+    handleDragOver(event) {
+        try {
+            event.preventDefault();
+            if (event.dataTransfer) {
+                event.dataTransfer.dropEffect = 'move';
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'handleDragOver');
+        }
+    }
+    /**
+     * Handle drag enter event
+     * @param event - The drag event
+     */
+    handleDragEnter(event) {
+        try {
+            event.preventDefault();
+            const target = event.currentTarget;
+            if (target.contains(event.relatedTarget)) {
+                return;
+            }
+            target.classList.add('dragging');
+        }
+        catch (error) {
+            this.handleError(error, 'handleDragEnter');
+        }
+    }
+    /**
+     * Handle drag leave event
+     * @param event - The drag event
+     */
+    handleDragLeave(event) {
+        try {
+            event.preventDefault();
+            const target = event.currentTarget;
+            if (target.contains(event.relatedTarget)) {
+                return;
+            }
+            if (target.classList.contains('dragging')) {
+                target.classList.remove('dragging');
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'handleDragLeave');
+        }
+    }
+    /**
+     * Handle drop event
+     * @param event - The drag event
+     */
+    handleDrop(event) {
+        try {
+            event.preventDefault();
+            if (!event.dataTransfer)
+                return;
+            const target = event.currentTarget;
+            const sourceIndex = Number.parseInt(event.dataTransfer.getData('text/plain'));
+            const targetIndex = Number.parseInt(target.dataset.index || '0');
+            if (this.isValidTabReorder(sourceIndex, targetIndex)) {
+                this.performTabReorder(sourceIndex, targetIndex);
+            }
+            this.cleanupDragClasses();
+        }
+        catch (error) {
+            this.handleError(error, 'handleDrop');
+        }
+    }
+    /**
+     * Check if tab can be moved (drag and drop enabled)
+     */
+    canMoveTab() {
+        var _a, _b;
+        return (_b = (_a = this.host.editable) === null || _a === void 0 ? void 0 : _a.canMove) !== null && _b !== void 0 ? _b : false;
+    }
+    /**
+     * Validate if tab reorder is valid
+     */
+    isValidTabReorder(sourceIndex, targetIndex) {
+        return (sourceIndex !== targetIndex &&
+            this.isValidTabIndex(sourceIndex) &&
+            this.isValidTabIndex(targetIndex) &&
+            this.canMoveTab());
+    }
+    /**
+     * Perform tab reordering
+     */
+    performTabReorder(sourceIndex, targetIndex) {
+        try {
+            const sourceTab = this.host.tabs[sourceIndex];
+            const targetTab = this.host.tabs[targetIndex];
+            // Dispatch tab order change event
+            this.host.dispatchEventWithMetadata("nr-tab-order-change" /* TabEvent.TabOrderChange */, {
+                sourceIndex,
+                targetIndex,
+                sourceTab,
+                targetTab
+            });
+            // Dispatch drag drop complete event
+            this.dispatchEvent(new CustomEvent('tabs-drag-complete', {
+                detail: {
+                    sourceIndex,
+                    targetIndex,
+                    sourceTab,
+                    targetTab,
+                    timestamp: Date.now()
+                },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        catch (error) {
+            this.handleError(error, 'performTabReorder');
+        }
+    }
+    /**
+     * Clean up drag-related CSS classes
+     */
+    cleanupDragClasses() {
+        var _a, _b;
+        try {
+            const shadowRoot = this.host.shadowRoot;
+            if (shadowRoot) {
+                (_a = shadowRoot.querySelector('.dragging')) === null || _a === void 0 ? void 0 : _a.classList.remove('dragging');
+                (_b = shadowRoot.querySelector('.dragging-start')) === null || _b === void 0 ? void 0 : _b.classList.remove('dragging-start');
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'cleanupDragClasses');
+        }
+    }
+    /**
+     * Get draggable state for tab element
+     */
+    getDraggableState() {
+        return this.canMoveTab();
+    }
+}
+//# sourceMappingURL=dragdrop.controller.js.map

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

@@ -0,0 +1,100 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { TabsHost, BaseTabsController } from './base.controller.js';
+import { ReactiveControllerHost } from 'lit';
+import { TabEditable, TabItem } from '../tabs.types.js';
+/**
+ * Editable controller interface for tabs components
+ */
+export interface EditableController {
+    handleAddTab(): void;
+    handleRemoveTab(tabIndex: number): void;
+    handleEditTab(tabIndex: number, newLabel: string): void;
+    canAddTab(): boolean;
+    canDeleteTab(tab?: TabItem): boolean;
+    canEditTabTitle(tab?: TabItem): boolean;
+}
+/**
+ * Enhanced tabs host interface for editable functionality
+ */
+export interface TabsEditableHost extends TabsHost {
+    editable?: TabEditable;
+    dispatchEventWithMetadata(eventName: string, detail: any): void;
+}
+/**
+ * Editable controller manages editable functionality for tabs components
+ * Handles add, delete, and edit operations for tabs
+ */
+export declare class TabsEditableController extends BaseTabsController implements EditableController {
+    protected _host: TabsEditableHost & ReactiveControllerHost;
+    constructor(host: TabsEditableHost & ReactiveControllerHost);
+    get host(): TabsEditableHost & ReactiveControllerHost;
+    /**
+     * Handle adding a new tab
+     */
+    handleAddTab(): void;
+    /**
+     * Handle removing a tab
+     * @param tabIndex - Index of tab to remove
+     */
+    handleRemoveTab(tabIndex: number): void;
+    /**
+     * Handle editing a tab title
+     * @param tabIndex - Index of tab to edit
+     * @param newLabel - New label for the tab
+     */
+    handleEditTab(tabIndex: number, newLabel: string): void;
+    /**
+     * Check if user can add tabs
+     */
+    canAddTab(): boolean;
+    /**
+     * Check if user can delete a specific tab
+     * @param tab - Tab to check (optional, falls back to global setting)
+     */
+    canDeleteTab(tab?: TabItem): boolean;
+    /**
+     * Check if user can edit tab titles for a specific tab
+     * @param tab - Tab to check (optional, falls back to global setting)
+     */
+    canEditTabTitle(tab?: TabItem): boolean;
+    /**
+     * Check if tab can be moved (for drag and drop)
+     */
+    canMoveTab(): boolean;
+    /**
+     * Get editable state for a specific tab
+     * @param tab - Tab to check
+     */
+    getTabEditableState(tab: TabItem): {
+        canDelete: boolean;
+        canEdit: boolean;
+        canMove: boolean;
+    };
+    /**
+     * Validate if a tab label is valid
+     * @param label - Label to validate
+     */
+    private isValidTabLabel;
+    /**
+     * Get the contenteditable attribute value for tab text
+     * @param tab - Tab to check
+     */
+    getContentEditableAttribute(tab: TabItem): string | undefined;
+    /**
+     * Handle blur event for editable tab titles
+     * @param event - Blur event
+     * @param tabIndex - Index of the tab
+     */
+    handleTabTitleBlur(event: Event, tabIndex: number): void;
+    /**
+     * Handle keydown events for editable tab titles
+     * @param event - Keyboard event
+     * @param tabIndex - Index of the tab
+     */
+    handleTabTitleKeyDown(event: KeyboardEvent, tabIndex: number): void;
+}
+//# sourceMappingURL=editable.controller.d.ts.map

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