@nuraly/lumenui 0.1.0

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

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export * from './tabs.component.js';
+export * from './tabs.types.js';
+export { NrTabsElement as TabsComponent } from './tabs.component.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export * from './tabs.component.js';
+export * from './tabs.types.js';
+// For backward compatibility - will be removed in next major version
+export { NrTabsElement as TabsComponent } from './tabs.component.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/tabs/react.d.ts

@@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { NrTabsElement } from './tabs.component.js';
+/**
+ * React wrapper for the nr-tabs component.
+ *
+ * @example
+ * ```jsx
+ * import { NrTabs } from '@nuralyui/tabs/react';
+ *
+ * const tabs = [
+ *   { label: 'Tab 1', content: <div>Content 1</div> },
+ *   { label: 'Tab 2', content: <div>Content 2</div> }
+ * ];
+ *
+ * function MyComponent() {
+ *   return (
+ *     <NrTabs
+ *       tabs={tabs}
+ *       activeTab={0}
+ *       orientation="horizontal"
+ *       onNrTabClick={(e) => console.log('Tab clicked:', e.detail)}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare const NrTabs: import("@lit-labs/react").ReactWebComponent<NrTabsElement, {
+    onNrTabClick: string;
+    onNrTabChange: string;
+    onNrTabAdd: string;
+    onNrTabRemove: string;
+    onNrTabEdit: string;
+    onNrTabOrderChange: string;
+}>;
+/**
+ * @deprecated Use NrTabs instead. Will be removed in next major version.
+ */
+export declare const HyTabsComponent: import("@lit-labs/react").ReactWebComponent<NrTabsElement, {
+    onNrTabClick: string;
+    onNrTabChange: string;
+    onNrTabAdd: string;
+    onNrTabRemove: string;
+    onNrTabEdit: string;
+    onNrTabOrderChange: string;
+}>;
+//# sourceMappingURL=react.d.ts.map

package/dist/src/components/tabs/react.js

@@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { NrTabsElement } from './tabs.component.js';
+/**
+ * React wrapper for the nr-tabs component.
+ *
+ * @example
+ * ```jsx
+ * import { NrTabs } from '@nuralyui/tabs/react';
+ *
+ * const tabs = [
+ *   { label: 'Tab 1', content: <div>Content 1</div> },
+ *   { label: 'Tab 2', content: <div>Content 2</div> }
+ * ];
+ *
+ * function MyComponent() {
+ *   return (
+ *     <NrTabs
+ *       tabs={tabs}
+ *       activeTab={0}
+ *       orientation="horizontal"
+ *       onNrTabClick={(e) => console.log('Tab clicked:', e.detail)}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export const NrTabs = createComponent({
+    tagName: 'nr-tabs',
+    elementClass: NrTabsElement,
+    react: React,
+    events: {
+        onNrTabClick: 'nr-tab-click',
+        onNrTabChange: 'nr-tab-change',
+        onNrTabAdd: 'nr-tab-add',
+        onNrTabRemove: 'nr-tab-remove',
+        onNrTabEdit: 'nr-tab-edit',
+        onNrTabOrderChange: 'nr-tab-order-change',
+    },
+});
+/**
+ * @deprecated Use NrTabs instead. Will be removed in next major version.
+ */
+export const HyTabsComponent = NrTabs;
+//# sourceMappingURL=react.js.map

package/dist/src/components/tabs/tabs.component.d.ts

@@ -0,0 +1,100 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement, PropertyValueMap } from 'lit';
+import { TabOrientation, TabsAlign, TabSize, TabType, TabEditable, TabsPanelConfig, TabPopOutConfig, TabItem } from './tabs.types.js';
+import '../panel/index.js';
+import { type TabsKeyboardHost, type TabsDragDropHost, type TabsEditableHost, type TabsEventHost, type TabsPopOutHost } from './controllers/index.js';
+declare const NrTabsElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
+/**
+ * Versatile tabs component with support for multiple orientations, editable tabs, drag & drop, and optional panel wrapper.
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage -->
+ * <nr-tabs .tabs=${tabs} activeTab="0"></nr-tabs>
+ *
+ * <!-- With editing capabilities -->
+ * <nr-tabs .tabs=${tabs} .editable=${{canAddTab: true, canDeleteTab: true}}></nr-tabs>
+ *
+ * <!-- Vertical orientation -->
+ * <nr-tabs .tabs=${tabs} orientation="vertical" align="left"></nr-tabs>
+ *
+ * <!-- Stretch tabs to fill full width with equal sizes -->
+ * <nr-tabs .tabs=${tabs} align="stretch"></nr-tabs>
+ *
+ * <!-- Pannable tabs (disabled by default) -->
+ * <nr-tabs .tabs=${tabs} .panelConfig=${{enabled: true, resizable: true, title: "My Tabs"}}></nr-tabs>
+ * ```
+ *
+ * @fires nr-tab-click - Tab clicked
+ * @fires nr-tab-change - Active tab changed
+ * @fires nr-tab-add - New tab requested
+ * @fires nr-tab-remove - Tab removal requested
+ * @fires nr-tab-edit - Tab edited
+ * @fires nr-tab-order-change - Tab order changed via drag & drop
+ * @fires nr-tabs-panel-close - Panel closed (when pannable)
+ * @fires nr-tabs-panel-minimize - Panel minimized (when pannable)
+ * @fires nr-tabs-panel-resize - Panel resized (when pannable)
+ *
+ * @slot default - Tab content
+ */
+export declare class NrTabsElement extends NrTabsElement_base implements TabsKeyboardHost, TabsDragDropHost, TabsEditableHost, TabsEventHost, TabsPopOutHost {
+    static styles: import("lit").CSSResult;
+    /** Currently active tab index */
+    activeTab: number;
+    /** Tab orientation (horizontal, vertical) */
+    orientation: TabOrientation;
+    /** Tab alignment (left, center, right, stretch) */
+    align: TabsAlign;
+    /** Tab size (small, medium, large) */
+    tabSize: TabSize;
+    /** Tab type/variant */
+    variant: TabType;
+    /** Editable configuration */
+    editable?: TabEditable;
+    /** Array of tab items */
+    tabs: TabItem[];
+    /** Whether tabs are animated */
+    animated: boolean;
+    /** Whether to destroy inactive tab content */
+    destroyInactiveTabPane: boolean;
+    /** Custom aria-label for the tabs container */
+    tabsAriaLabel: string;
+    /** Panel configuration for making tabs pannable */
+    panelConfig?: TabsPanelConfig;
+    /** Pop-out configuration for making tabs pop-outable */
+    popOut?: TabPopOutConfig;
+    requiredComponents: string[];
+    private keyboardController;
+    private dragDropController;
+    private editableController;
+    private eventController;
+    private popOutController;
+    connectedCallback(): void;
+    render(): any;
+    private renderTabsContent;
+    private renderWithPanel;
+    private observeChildrenChanges;
+    private renderDeleteIcon;
+    private renderPopOutIcon;
+    private renderTabs;
+    updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    private renderActiveTab;
+    setActiveTab(index: number, event?: Event): void;
+    private handlePanelClose;
+    private handlePanelMinimize;
+    private handlePanelResize;
+    /**
+     * Public method to pop in a tab from placeholder
+     */
+    popInTab(popOutId: string): Promise<void>;
+    /**
+     * Public method to pop out a tab
+     */
+    popOutTab(tabIndex: number): Promise<void>;
+}
+export {};
+//# sourceMappingURL=tabs.component.d.ts.map

package/dist/src/components/tabs/tabs.component.js

@@ -0,0 +1,461 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styles } from './tabs.style.js';
+import { EMPTY_STRING, DEFAULT_ACTIVE_TAB } from './tabs.types.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+// Import panel component
+import '../panel/index.js';
+import { PanelMode } from '../panel/panel.types.js';
+// Import controllers
+import { TabsKeyboardController, TabsDragDropController, TabsEditableController, TabsEventController, TabsPopOutController } from './controllers/index.js';
+/**
+ * Versatile tabs component with support for multiple orientations, editable tabs, drag & drop, and optional panel wrapper.
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage -->
+ * <nr-tabs .tabs=${tabs} activeTab="0"></nr-tabs>
+ *
+ * <!-- With editing capabilities -->
+ * <nr-tabs .tabs=${tabs} .editable=${{canAddTab: true, canDeleteTab: true}}></nr-tabs>
+ *
+ * <!-- Vertical orientation -->
+ * <nr-tabs .tabs=${tabs} orientation="vertical" align="left"></nr-tabs>
+ *
+ * <!-- Stretch tabs to fill full width with equal sizes -->
+ * <nr-tabs .tabs=${tabs} align="stretch"></nr-tabs>
+ *
+ * <!-- Pannable tabs (disabled by default) -->
+ * <nr-tabs .tabs=${tabs} .panelConfig=${{enabled: true, resizable: true, title: "My Tabs"}}></nr-tabs>
+ * ```
+ *
+ * @fires nr-tab-click - Tab clicked
+ * @fires nr-tab-change - Active tab changed
+ * @fires nr-tab-add - New tab requested
+ * @fires nr-tab-remove - Tab removal requested
+ * @fires nr-tab-edit - Tab edited
+ * @fires nr-tab-order-change - Tab order changed via drag & drop
+ * @fires nr-tabs-panel-close - Panel closed (when pannable)
+ * @fires nr-tabs-panel-minimize - Panel minimized (when pannable)
+ * @fires nr-tabs-panel-resize - Panel resized (when pannable)
+ *
+ * @slot default - Tab content
+ */
+let NrTabsElement = class NrTabsElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /** Currently active tab index */
+        this.activeTab = DEFAULT_ACTIVE_TAB;
+        /** Tab orientation (horizontal, vertical) */
+        this.orientation = "horizontal" /* TabOrientation.Horizontal */;
+        /** Tab alignment (left, center, right, stretch) */
+        this.align = "left" /* TabsAlign.Left */;
+        /** Tab size (small, medium, large) */
+        this.tabSize = "medium" /* TabSize.Medium */;
+        /** Tab type/variant */
+        this.variant = "default" /* TabType.Default */;
+        /** Array of tab items */
+        this.tabs = [];
+        /** Whether tabs are animated */
+        this.animated = true;
+        /** Whether to destroy inactive tab content */
+        this.destroyInactiveTabPane = false;
+        /** Custom aria-label for the tabs container */
+        this.tabsAriaLabel = EMPTY_STRING;
+        this.requiredComponents = ['nr-icon', 'nr-panel'];
+        // Controllers - automatically connected via Lit's reactive controller system
+        this.keyboardController = new TabsKeyboardController(this);
+        this.dragDropController = new TabsDragDropController(this);
+        this.editableController = new TabsEditableController(this);
+        this.eventController = new TabsEventController(this);
+        this.popOutController = new TabsPopOutController(this);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.validateDependencies();
+        this.observeChildrenChanges();
+        // Ensure controllers are properly referenced for TypeScript
+        void this.keyboardController;
+        void this.dragDropController;
+        void this.editableController;
+        void this.eventController;
+        void this.popOutController;
+    }
+    render() {
+        var _a;
+        // If all tabs are popped out (no visible tabs), hide completely
+        if (this.tabs.length === 0) {
+            return nothing;
+        }
+        const tabsContent = this.renderTabsContent();
+        // Only wrap with panel if explicitly enabled
+        if ((_a = this.panelConfig) === null || _a === void 0 ? void 0 : _a.enabled) {
+            return this.renderWithPanel(tabsContent);
+        }
+        // Default: return just the tabs content
+        return tabsContent;
+    }
+    renderTabsContent() {
+        // Check if all tabs are popped out (no visible tabs)
+        const hasVisibleTabs = this.tabs.length > 0;
+        return html `
+      <div
+        class=${classMap({
+            'tabs-container': true,
+            'no-visible-tabs': !hasVisibleTabs,
+            'vertical-align': this.orientation === "vertical" /* TabOrientation.Vertical */,
+            'horizontal-align': this.orientation === "horizontal" /* TabOrientation.Horizontal */,
+            'right-align': this.align === "right" /* TabsAlign.Right */,
+            'left-align': this.align === "left" /* TabsAlign.Left */,
+            'center-align': this.align === "center" /* TabsAlign.Center */,
+            'stretch-align': this.align === "stretch" /* TabsAlign.Stretch */,
+        })}
+        role="tablist"
+        aria-label="${this.tabsAriaLabel || nothing}"
+        data-theme="${this.currentTheme}"
+        data-size="${this.tabSize}"
+        data-type="${this.variant}"
+      >
+        <div
+          class="tab-labels"
+          style="flex-direction: ${this.orientation === "vertical" /* TabOrientation.Vertical */ ? 'column' : 'row'}"
+        >
+          <div></div>
+          ${this.renderTabs()}
+          <div></div>
+        </div>
+        <div class="tab-content" part="tab-content" role="tabpanel">
+          ${this.renderActiveTab()}
+        </div>
+      </div>
+    `;
+    }
+    renderWithPanel(tabsContent) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        if (!this.isComponentAvailable('nr-panel')) {
+            console.warn('[nr-tabs] Panel component not available. Rendering without panel.');
+            return tabsContent;
+        }
+        // Only pass width/height if explicitly set, otherwise let panel size naturally
+        const panelProps = {
+            mode: ((_a = this.panelConfig) === null || _a === void 0 ? void 0 : _a.mode) || PanelMode.Embedded,
+            size: ((_b = this.panelConfig) === null || _b === void 0 ? void 0 : _b.size) || this.tabSize, // Use tabs size if panel size not specified
+            resizable: (_d = (_c = this.panelConfig) === null || _c === void 0 ? void 0 : _c.resizable) !== null && _d !== void 0 ? _d : true,
+            draggable: (_f = (_e = this.panelConfig) === null || _e === void 0 ? void 0 : _e.draggable) !== null && _f !== void 0 ? _f : true,
+            closable: (_h = (_g = this.panelConfig) === null || _g === void 0 ? void 0 : _g.closable) !== null && _h !== void 0 ? _h : false,
+            minimizable: (_k = (_j = this.panelConfig) === null || _j === void 0 ? void 0 : _j.minimizable) !== null && _k !== void 0 ? _k : true,
+            title: ((_l = this.panelConfig) === null || _l === void 0 ? void 0 : _l.title) || 'Tabs',
+            icon: ((_m = this.panelConfig) === null || _m === void 0 ? void 0 : _m.icon) || ''
+        };
+        // Only set dimensions if explicitly provided
+        if ((_o = this.panelConfig) === null || _o === void 0 ? void 0 : _o.width) {
+            panelProps.width = this.panelConfig.width;
+        }
+        if ((_p = this.panelConfig) === null || _p === void 0 ? void 0 : _p.height) {
+            panelProps.height = this.panelConfig.height;
+        }
+        return html `
+      <nr-panel
+        class="tabs-panel-wrapper"
+        .mode=${panelProps.mode}
+        .size=${panelProps.size}
+        .resizable=${panelProps.resizable}
+        .draggable=${panelProps.draggable}
+        .closable=${panelProps.closable}
+        .minimizable=${panelProps.minimizable}
+        .title=${panelProps.title}
+        .icon=${panelProps.icon}
+        .width=${panelProps.width || ''}
+        .height=${panelProps.height || ''}
+        @panel-close=${this.handlePanelClose}
+        @panel-minimize=${this.handlePanelMinimize}
+        @panel-resize=${this.handlePanelResize}
+        style="
+          ${((_q = this.panelConfig) === null || _q === void 0 ? void 0 : _q.mode) === PanelMode.Embedded ?
+            'width: 100% !important; height: auto !important; min-height: 0;' :
+            ''}
+          ${!panelProps.width && ((_r = this.panelConfig) === null || _r === void 0 ? void 0 : _r.mode) !== PanelMode.Embedded ? 'width: auto;' : ''}
+          ${!panelProps.height && ((_s = this.panelConfig) === null || _s === void 0 ? void 0 : _s.mode) !== PanelMode.Embedded ? 'height: auto;' : ''}
+        "
+      >
+        ${tabsContent}
+      </nr-panel>
+    `;
+    }
+    observeChildrenChanges() {
+        const mutationObserver = new MutationObserver(() => {
+            // Handle dynamic tab changes if needed
+            this.requestUpdate();
+        });
+        mutationObserver.observe(this, { childList: true });
+    }
+    renderDeleteIcon(tab, tabIndex) {
+        if (!this.editableController.canDeleteTab(tab))
+            return nothing;
+        if (!this.isComponentAvailable('nr-icon')) {
+            console.warn('[nr-tabs] Icon component not available. Delete icon will not render.');
+            return nothing;
+        }
+        return html `
+      <nr-icon
+        name="x"
+        size="small"
+        class="close-icon"
+        @mousedown=${(e) => {
+            e.stopPropagation();
+            this.editableController.handleRemoveTab(tabIndex);
+        }}
+      ></nr-icon>
+    `;
+    }
+    renderPopOutIcon(tab, tabIndex) {
+        if (!this.popOutController.canPopOut(tab))
+            return nothing;
+        if (!this.isComponentAvailable('nr-icon')) {
+            console.warn('[nr-tabs] Icon component not available. Pop-out icon will not render.');
+            return nothing;
+        }
+        const isPlaceholder = tab.popOutState === "placeholder" /* TabPopOutState.Placeholder */;
+        const iconName = isPlaceholder ? 'window-maximize' : 'maximize';
+        const title = isPlaceholder ? 'Pop back in' : 'Pop out to window';
+        return html `
+      <nr-icon
+        name="${iconName}"
+        class="pop-out-icon"
+        title="${title}"
+        @mousedown=${(e) => {
+            e.stopPropagation();
+            if (isPlaceholder) {
+                // Find the pop-out ID from placeholder content
+                const placeholderContent = tab.content;
+                const matches = placeholderContent.match(/data-pop-out-id="([^"]+)"/);
+                if (matches) {
+                    this.popOutController.handlePopInRequest(matches[1]);
+                }
+            }
+            else {
+                this.popOutController.handlePopOutRequest(tabIndex);
+            }
+        }}
+      ></nr-icon>
+    `;
+    }
+    renderTabs() {
+        const tabs = [];
+        for (let tabIndex = 0; tabIndex < this.tabs.length; tabIndex++) {
+            const tab = this.tabs[tabIndex];
+            const isActive = tabIndex === this.activeTab;
+            // Determine tab position for border radius
+            const isFirstTab = tabIndex === 0;
+            const isLastTab = tabIndex === this.tabs.length - 1;
+            const isSingleTab = this.tabs.length === 1;
+            const isMiddleTab = !isFirstTab && !isLastTab && !isSingleTab;
+            const tabElement = html `
+        <div
+          data-index=${tabIndex}
+          draggable=${this.dragDropController.getDraggableState() ? 'true' : 'false'}
+          @dragenter=${(e) => this.dragDropController.handleDragEnter(e)}
+          @dragleave=${(e) => this.dragDropController.handleDragLeave(e)}
+          @dragstart=${(e) => this.dragDropController.handleDragStart(e)}
+          @drop=${(e) => this.dragDropController.handleDrop(e)}
+          class=${classMap({
+                'tab-label': true,
+                'active': isActive,
+                'disabled': !!tab.disabled,
+                'tab-placeholder-state': tab.popOutState === "placeholder" /* TabPopOutState.Placeholder */,
+                'first-tab': isFirstTab && this.orientation === "horizontal" /* TabOrientation.Horizontal */,
+                'middle-tab': isMiddleTab && this.orientation === "horizontal" /* TabOrientation.Horizontal */,
+                'last-tab': isLastTab && this.orientation === "horizontal" /* TabOrientation.Horizontal */,
+                'single-tab': isSingleTab && this.orientation === "horizontal" /* TabOrientation.Horizontal */
+            })}
+          role="tab"
+          aria-selected=${isActive ? 'true' : 'false'}
+          aria-disabled=${tab.disabled ? 'true' : 'false'}
+          tabindex=${isActive ? '0' : '-1'}
+          @click=${(e) => this.eventController.handleTabClick(tabIndex, e)}
+        >
+          ${tab.icon && this.isComponentAvailable('nr-icon')
+                ? html `<nr-icon name=${tab.icon} class="tab-icon"></nr-icon>`
+                : nothing}
+          
+          <span class="tab-text" 
+                contenteditable=${this.editableController.getContentEditableAttribute(tab) || nothing}
+                @blur=${(event) => this.editableController.handleTabTitleBlur(event, tabIndex)}
+                @keydown=${(event) => this.editableController.handleTabTitleKeyDown(event, tabIndex)}
+          >${tab.label}</span>
+          
+          <div class="tab-actions">
+            ${this.renderPopOutIcon(tab, tabIndex)}
+            ${this.renderDeleteIcon(tab, tabIndex)}
+          </div>
+        </div>
+      `;
+            tabs.push(tabElement);
+        }
+        // Add tab button
+        if (this.editableController.canAddTab()) {
+            const addTabElement = html `
+        <div
+          class="tab-label add-tab-label"
+          role="button"
+          aria-label="Add new tab"
+          tabindex="0"
+          @mousedown=${() => {
+                this.editableController.handleAddTab();
+            }}
+          @keydown=${(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.editableController.handleAddTab();
+                }
+            }}
+        >
+          ${this.isComponentAvailable('nr-icon')
+                ? html `<nr-icon name="plus" class="add-tab-icon"></nr-icon>`
+                : html `<span>+</span>`}
+        </div>
+      `;
+            tabs.push(addTabElement);
+        }
+        return tabs;
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        // Validate active tab index
+        if (this.activeTab >= this.tabs.length) {
+            this.activeTab = Math.max(0, this.tabs.length - 1);
+        }
+        else if (this.activeTab < 0) {
+            this.activeTab = 0;
+        }
+    }
+    renderActiveTab() {
+        if (this.tabs.length === 0 || this.activeTab < 0 || this.activeTab >= this.tabs.length) {
+            return nothing;
+        }
+        const activeTab = this.tabs[this.activeTab];
+        return html `${activeTab.content || nothing}`;
+    }
+    setActiveTab(index, event) {
+        var _a, _b;
+        // Handle MouseEvent specifically for drag behavior
+        if (event instanceof MouseEvent) {
+            // For click events when drag is enabled, we don't need to prevent default
+            // as the drag operation should take precedence over click for dragging
+            const canMove = (_b = (_a = this.editable) === null || _a === void 0 ? void 0 : _a.canMove) !== null && _b !== void 0 ? _b : false;
+            if (!canMove) {
+                event.preventDefault();
+            }
+        }
+        if (index < 0 || index >= this.tabs.length || this.tabs[index].disabled) {
+            return;
+        }
+        const previousIndex = this.activeTab;
+        const tab = this.tabs[index];
+        this.activeTab = index;
+        // Dispatch events
+        this.dispatchEventWithMetadata("nr-tab-click" /* TabEvent.TabClick */, {
+            index,
+            tab,
+            previousIndex
+        });
+        if (previousIndex !== index) {
+            this.dispatchEventWithMetadata("nr-tab-change" /* TabEvent.TabChange */, {
+                index,
+                tab,
+                previousIndex
+            });
+        }
+    }
+    handlePanelClose() {
+        this.dispatchEvent(new CustomEvent('nr-tabs-panel-close', { bubbles: true }));
+    }
+    handlePanelMinimize() {
+        this.dispatchEvent(new CustomEvent('nr-tabs-panel-minimize', { bubbles: true }));
+    }
+    handlePanelResize(event) {
+        this.dispatchEvent(new CustomEvent('nr-tabs-panel-resize', {
+            bubbles: true,
+            detail: event.detail
+        }));
+    }
+    /**
+     * Public method to pop in a tab from placeholder
+     */
+    popInTab(popOutId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.popOutController.handlePopInRequest(popOutId);
+        });
+    }
+    /**
+     * Public method to pop out a tab
+     */
+    popOutTab(tabIndex) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.popOutController.handlePopOutRequest(tabIndex);
+        });
+    }
+};
+NrTabsElement.styles = styles;
+__decorate([
+    property({ type: Number })
+], NrTabsElement.prototype, "activeTab", void 0);
+__decorate([
+    property({ type: String })
+], NrTabsElement.prototype, "orientation", void 0);
+__decorate([
+    property({ type: String })
+], NrTabsElement.prototype, "align", void 0);
+__decorate([
+    property({ type: String, attribute: 'size' })
+], NrTabsElement.prototype, "tabSize", void 0);
+__decorate([
+    property({ type: String, attribute: 'type' })
+], NrTabsElement.prototype, "variant", void 0);
+__decorate([
+    property({ type: Object })
+], NrTabsElement.prototype, "editable", void 0);
+__decorate([
+    property({ type: Array })
+], NrTabsElement.prototype, "tabs", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrTabsElement.prototype, "animated", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrTabsElement.prototype, "destroyInactiveTabPane", void 0);
+__decorate([
+    property({ type: String })
+], NrTabsElement.prototype, "tabsAriaLabel", void 0);
+__decorate([
+    property({ type: Object })
+], NrTabsElement.prototype, "panelConfig", void 0);
+__decorate([
+    property({ type: Object })
+], NrTabsElement.prototype, "popOut", void 0);
+NrTabsElement = __decorate([
+    customElement('nr-tabs')
+], NrTabsElement);
+export { NrTabsElement };
+//# sourceMappingURL=tabs.component.js.map