@nuralyui/tabs 0.0.13 → 0.0.16

package/tabs.component.js

@@ -1,232 +1,299 @@
+/**
+ * @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;
 };
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { LitElement, html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
-import { styles } from './tabs.style.js';
+import { html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { NOTHING_STRING, TabEvent, TabOrientation, TabsAlign } from './tabs.constant.js';
+import { styles } from './tabs.style.js';
+import { EMPTY_STRING, DEFAULT_ACTIVE_TAB } from './tabs.types.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+// Import icon component
+import '../icon/icon.component.js';
+// Import controllers
+import { TabsKeyboardController, TabsDragDropController, TabsEditableController, TabsEventController } from './controllers/index.js';
 /**
- * `hy-tabs` is a LitElement that provides a customizable tabs.
- * @customElement 'hy-tabs'
+ * Versatile tabs component with support for multiple orientations, editable tabs, and drag & drop.
+ *
+ * @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>
+ * ```
  *
- * Attributes
- * @attr activeTab
- * @attr orientation
- * @attr tabsAlign
- * @attr editable
- * Events
- * @fires tabEdited - Indicates when tab edited
- * @fires removeTab - Indicates when tab removed
- * @fires addTab - Indicates when tab added
+ * @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
+ *
+ * @slot default - Tab content
  */
-export class TabsComponent extends LitElement {
+let NrTabsElement = class NrTabsElement extends NuralyUIBaseMixin(LitElement) {
     constructor() {
-        super();
-        this.activeTab = 0;
-        this.orientation = TabOrientation.Horizontal;
+        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) */
+        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'];
+        // 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);
+    }
+    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;
     }
     render() {
         return html `
       <div
         class=${classMap({
             'tabs-container': true,
-            'vertical-align': this.orientation === TabOrientation.Vertical,
-            'horizontal-align': this.orientation === TabOrientation.Horizontal,
-            'right-align': this.tabsAlign === TabsAlign.Right,
-            'left-align': this.tabsAlign === TabsAlign.Left,
-            'center-align': this.tabsAlign === TabsAlign.Center,
+            '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 */,
         })}
+        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 === TabOrientation.Vertical ? 'column' : 'row'}"
+          style="flex-direction: ${this.orientation === "vertical" /* TabOrientation.Vertical */ ? 'column' : 'row'}"
         >
           <div></div>
-
           ${this.renderTabs()}
           <div></div>
         </div>
-        <div class="tab-content">${this.renderActiveTab()}</div>
+        <div class="tab-content" role="tabpanel">
+          ${this.renderActiveTab()}
+        </div>
       </div>
     `;
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.observeChildrenChanges();
-        this.addEventListener('dragover', this.handleDragOver);
-    }
     observeChildrenChanges() {
         const mutationObserver = new MutationObserver(() => {
-            // this.requestUpdate();
+            // Handle dynamic tab changes if needed
+            this.requestUpdate();
         });
         mutationObserver.observe(this, { childList: true });
     }
-    handleDragStart(event) {
-        event.dataTransfer.setData('text/plain', event.currentTarget.dataset.index);
-        event.dataTransfer.effectAllowed = 'move';
-        event.target.closest('.tab-label').classList.add('dragging-start');
-    }
-    handleDragOver(event) {
-        event.preventDefault();
-        event.dataTransfer.dropEffect = 'move';
-    }
-    handleDragEnter(event) {
-        event.preventDefault();
-        if (event.currentTarget.contains(event.relatedTarget)) {
-            return;
+    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;
         }
-        event.currentTarget.classList.add('dragging');
-    }
-    handleDragLeave(event) {
-        event.preventDefault();
-        if (event.currentTarget.contains(event.relatedTarget)) {
-            return;
-        }
-        if (event.currentTarget.classList.contains('dragging')) {
-            event.currentTarget.classList.remove('dragging');
-        }
-    }
-    handleDrop(event) {
-        var _a, _b;
-        event.preventDefault();
-        const sourceIndex = event.dataTransfer.getData('text/plain');
-        const targetIndex = event.currentTarget.dataset.index;
-        if (sourceIndex !== targetIndex) {
-            const tabs = Array.from(this.children || []);
-            const sourceTab = tabs[sourceIndex];
-            const targetTab = tabs[targetIndex];
-            this.dispatchEvent(new CustomEvent(TabEvent.tabOrderChange, {
-                detail: { sourceTab, targetTab, sourceIndex: parseInt(sourceIndex), targetIndex: parseInt(targetIndex) },
-            }));
-        }
-        (_a = this.shadowRoot.querySelector('.dragging')) === null || _a === void 0 ? void 0 : _a.classList.remove('dragging');
-        event.target.classList.remove('dragging');
-        (_b = this.shadowRoot.querySelector('.dragging-start')) === null || _b === void 0 ? void 0 : _b.classList.remove('dragging-start');
-    }
-    renderDeleteIcon(tab) {
-        var _a;
-        // if the tab does not gave edibale propetry and canDeleteTab is true
-        // then render the delete icon
-        if (!tab.editable && ((_a = this.editable) === null || _a === void 0 ? void 0 : _a.canDeleteTab)) {
-            return html `<hy-icon
-      @mousedown=${() => {
-                this.dispatchEvent(new CustomEvent(TabEvent.removeTab, {
-                    detail: { index: tab.index },
-                }));
-            }}
-      name="window-close"
-      class="close-icon"
-    ></hy-icon>`;
-        }
-        return nothing;
+        return html `
+      <nr-icon
+        name="window-close"
+        class="close-icon"
+        @mousedown=${(e) => {
+            e.stopPropagation();
+            this.editableController.handleRemoveTab(tabIndex);
+        }}
+      ></nr-icon>
+    `;
     }
     renderTabs() {
-        var _a, _b, _c, _d, _e, _f;
         const tabs = [];
-        const children = this.tabs || [];
-        for (let tabIndex = 0; tabIndex < children.length; tabIndex++) {
-            const tab = html `
+        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=${(_a = this.editable) === null || _a === void 0 ? void 0 : _a.canMove}
-          @dragenter=${this.handleDragEnter}
-          @dragleave=${this.handleDragLeave}
-          @dragstart=${(e) => this.handleDragStart(e)}
-          @drop=${(event) => this.handleDrop(event)}
-          class=${tabIndex === this.activeTab ? 'tab-label active' : 'tab-label'}
-          @mousedown=${(e) => this.setActiveTab(tabIndex, children[tabIndex], e)}
+          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,
+                '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)}
         >
-          <hy-label
-            contenteditable=${((_b = this.editable) === null || _b === void 0 ? void 0 : _b.canEditTabTitle) ? true : nothing}
-            @blur=${(event) => {
-                var _a;
-                this.dispatchEvent(new CustomEvent(TabEvent.tabEdited, {
-                    detail: {
-                        tab: {
-                            label: (_a = event.target) === null || _a === void 0 ? void 0 : _a.textContent,
-                            index: tabIndex,
-                        },
-                    },
-                }));
-            }}
-            >${children[tabIndex].label}</hy-label
-          >
-          ${((_d = (_c = children[tabIndex].editable) === null || _c === void 0 ? void 0 : _c.canDeleteTab) !== null && _d !== void 0 ? _d : (_e = this.editable) === null || _e === void 0 ? void 0 : _e.canDeleteTab)
-                ? html `<hy-icon
-                @mousedown=${() => {
-                    this.dispatchEvent(new CustomEvent(TabEvent.removeTab, {
-                        detail: { index: tabIndex },
-                    }));
-                }}
-                name="window-close"
-                class="close-icon"
-              ></hy-icon>`
-                : NOTHING_STRING}
+          ${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>
+          
+          ${this.renderDeleteIcon(tab, tabIndex)}
         </div>
       `;
-            tabs.push(tab);
+            tabs.push(tabElement);
         }
-        if ((_f = this.editable) === null || _f === void 0 ? void 0 : _f.canAddTab) {
-            const tab = html `
+        // 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.dispatchEvent(new CustomEvent(TabEvent.addTab));
+                this.editableController.handleAddTab();
+            }}
+          @keydown=${(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.editableController.handleAddTab();
+                }
             }}
         >
-          <hy-icon name="plus" class="add-tab-icon"></hy-icon>
+          ${this.isComponentAvailable('nr-icon')
+                ? html `<nr-icon name="plus" class="add-tab-icon"></nr-icon>`
+                : html `<span>+</span>`}
         </div>
       `;
-            tabs.push(tab);
+            tabs.push(addTabElement);
         }
         return tabs;
     }
     updated(changedProperties) {
         super.updated(changedProperties);
-        if (!this.tabs[this.activeTab]) {
-            if (!this.tabs[this.activeTab - 1]) {
-                this.activeTab++;
-            }
-            else {
-                this.activeTab--;
-            }
+        // 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() {
-        const children = this.tabs ? [...this.tabs] : [];
-        if (children.length > 0 && this.activeTab >= 0 && this.activeTab < children.length) {
-            return html `${children[this.activeTab].content}`;
+        if (this.tabs.length === 0 || this.activeTab < 0 || this.activeTab >= this.tabs.length) {
+            return nothing;
         }
-        return html `${NOTHING_STRING}`;
+        const activeTab = this.tabs[this.activeTab];
+        return html `${activeTab.content || nothing}`;
     }
-    setActiveTab(index, _element, event) {
-        event.preventDefault();
+    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;
-        this.dispatchEvent(new CustomEvent(TabEvent.tabTilteClick, {
-            detail: { 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
+            });
+        }
     }
-}
-TabsComponent.styles = styles;
+};
+NrTabsElement.styles = styles;
 __decorate([
     property({ type: Number })
-], TabsComponent.prototype, "activeTab", void 0);
+], NrTabsElement.prototype, "activeTab", void 0);
 __decorate([
     property({ type: String })
-], TabsComponent.prototype, "orientation", void 0);
+], NrTabsElement.prototype, "orientation", void 0);
 __decorate([
     property({ type: String })
-], TabsComponent.prototype, "tabsAlign", void 0);
+], 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 })
-], TabsComponent.prototype, "editable", void 0);
+], NrTabsElement.prototype, "editable", void 0);
 __decorate([
     property({ type: Array })
-], TabsComponent.prototype, "tabs", void 0);
-customElements.define('hy-tabs', TabsComponent);
+], 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);
+NrTabsElement = __decorate([
+    customElement('nr-tabs')
+], NrTabsElement);
+export { NrTabsElement };
 //# sourceMappingURL=tabs.component.js.map

package/tabs.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.component.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.component.ts"],"names":[],"mappings":";;;;;;AAAA,uDAAuD;AACvD,OAAO,EAAE,UAAU,EAAoB,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,cAAc,EAAe,QAAQ,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACtG;;;;;;;;;;;;;GAaG;AACH,MAAM,OAAO,aAAc,SAAQ,UAAU;IAkB3C;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;QACnB,IAAI,CAAC,WAAW,GAAG,cAAc,CAAC,UAAU,CAAC;IAC/C,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC;YACf,gBAAgB,EAAE,IAAI;YACtB,gBAAgB,EAAE,IAAI,CAAC,WAAW,KAAK,cAAc,CAAC,QAAQ;YAC9D,kBAAkB,EAAE,IAAI,CAAC,WAAW,KAAK,cAAc,CAAC,UAAU;YAClE,aAAa,EAAE,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,KAAK;YACjD,YAAY,EAAE,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,IAAI;YAC/C,cAAc,EAAE,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,MAAM;SACpD,CAAC;;;;mCAIyB,IAAI,CAAC,WAAW,KAAK,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAE,KAAa;;;;YAI/F,IAAI,CAAC,UAAU,EAAE;;;mCAGM,IAAI,CAAC,eAAe,EAAE;;KAEpD,CAAC;IACJ,CAAC;IACQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC9B,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IACzD,CAAC;IAEO,sBAAsB;QAC5B,MAAM,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YAClD,wBAAwB;QACzB,CAAC,CAAC,CAAC;QAEH,gBAAgB,CAAC,OAAO,CAAC,IAAI,EAAE,EAAC,SAAS,EAAE,IAAI,EAAC,CAAC,CAAC;IACpD,CAAC;IAEO,eAAe,CAAC,KAAU;QAChC,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,YAAY,EAAE,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAC5E,KAAK,CAAC,YAAY,CAAC,aAAa,GAAG,MAAM,CAAC;QAC1C,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACrE,CAAC;IAEO,cAAc,CAAC,KAAU;QAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,YAAY,CAAC,UAAU,GAAG,MAAM,CAAC;IACzC,CAAC;IAEO,eAAe,CAAC,KAAU;QAChC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,EAAE;YACrD,OAAO;SACR;QACD,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;IAChD,CAAC;IAEO,eAAe,CAAC,KAAU;QAChC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,EAAE;YACrD,OAAO;SACR;QACD,IAAI,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;YACtD,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;SAClD;IACH,CAAC;IAEO,UAAU,CAAC,KAAU;;QAC3B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,MAAM,WAAW,GAAG,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAC7D,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC;QACtD,IAAI,WAAW,KAAK,WAAW,EAAE;YAC/B,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC;YAC7C,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC;YACpC,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC;YACpC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,CAAC,cAAc,EAAE;gBACvC,MAAM,EAAE,EAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,CAAC,WAAW,CAAC,EAAE,WAAW,EAAE,QAAQ,CAAC,WAAW,CAAC,EAAC;aACvG,CAAC,CACH,CAAC;SACH;QACD,MAAA,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,WAAW,CAAC,0CAAE,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QAC1E,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QAC1C,MAAA,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,iBAAiB,CAAC,0CAAE,SAAS,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;IACxF,CAAC;IAED,gBAAgB,CAAC,GAAQ;;QACvB,qEAAqE;QACrE,8BAA8B;QAC9B,IAAG,CAAC,GAAG,CAAC,QAAQ,KAAI,MAAA,IAAI,CAAC,QAAQ,0CAAE,YAAY,CAAA,EAAC;YAC9C,OAAO,IAAI,CAAA;mBACE,GAAG,EAAE;gBAChB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,CAAC,SAAS,EAAE;oBAClC,MAAM,EAAE,EAAC,KAAK,EAAE,GAAG,CAAC,KAAK,EAAC;iBAC3B,CAAC,CACH,CAAC;YACJ,CAAC;;;gBAGS,CACX;SACF;QACD,OAAO,OAAO,CAAC;IAEf,CAAC;IACO,UAAU;;QAChB,MAAM,IAAI,GAAG,EAAE,CAAC;QAChB,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC;QACjC,KAAK,IAAI,QAAQ,GAAG,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC,MAAM,EAAE,QAAQ,EAAE,EAAE;YAC7D,MAAM,GAAG,GAAG,IAAI,CAAA;;uBAEC,QAAQ;sBACT,MAAA,IAAI,CAAC,QAAQ,0CAAE,OAAO;uBACrB,IAAI,CAAC,eAAe;uBACpB,IAAI,CAAC,eAAe;uBACpB,CAAC,CAAM,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;kBACxC,CAAC,KAAY,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;kBACxC,QAAQ,KAAK,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,WAAW;uBACzD,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;;;8BAGzD,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,eAAe,EAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO;oBACzD,CAAC,KAAY,EAAE,EAAE;;gBACvB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,CAAC,SAAS,EAAE;oBAClC,MAAM,EAAE;wBACN,GAAG,EAAE;4BACH,KAAK,EAAE,MAAC,KAAK,CAAC,MAAsB,0CAAE,WAAW;4BACjD,KAAK,EAAE,QAAQ;yBAChB;qBACF;iBACF,CAAC,CACH,CAAC;YACJ,CAAC;eACE,QAAQ,CAAC,QAAQ,CAAC,CAAC,KAAK;;YAE3B,CAAA,MAAA,MAAA,QAAQ,CAAC,QAAQ,CAAC,CAAC,QAAQ,0CAAE,YAAY,mCAAI,MAAA,IAAI,CAAC,QAAQ,0CAAE,YAAY;gBACxE,CAAC,CAAC,IAAI,CAAA;6BACW,GAAG,EAAE;oBAChB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,CAAC,SAAS,EAAE;wBAClC,MAAM,EAAE,EAAC,KAAK,EAAE,QAAQ,EAAC;qBAC1B,CAAC,CACH,CAAC;gBACJ,CAAC;;;0BAGS;gBACd,CAAC,CAAC,cAAc;;OAErB,CAAC;YACF,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;SAChB;QACD,IAAI,MAAA,IAAI,CAAC,QAAQ,0CAAE,SAAS,EAAE;YAC5B,MAAM,GAAG,GAAG,IAAI,CAAA;;;uBAGC,GAAG,EAAE;gBAChB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;YACvD,CAAC;;;;OAIJ,CAAC;YACF,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;SAChB;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAEQ,OAAO,CAAC,iBAAoE;QACnF,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;YAC9B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,EAAE;gBAClC,IAAI,CAAC,SAAS,EAAE,CAAC;aAClB;iBAAM;gBACL,IAAI,CAAC,SAAS,EAAE,CAAC;aAClB;SACF;IACH,CAAC;IAEO,eAAe;QACrB,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QACjD,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,MAAM,EAAE;YAClF,OAAO,IAAI,CAAA,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO,EAAE,CAAC;SAClD;QACD,OAAO,IAAI,CAAA,GAAG,cAAc,EAAE,CAAC;IACjC,CAAC;IAEO,YAAY,CAAC,KAAa,EAAE,QAAiB,EAAE,KAAY;QACjE,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,CAAC,aAAa,EAAE;YACtC,MAAM,EAAE,EAAC,KAAK,EAAC;SAChB,CAAC,CACH,CAAC;IACJ,CAAC;;AA9Me,oBAAM,GAAG,MAAM,CAAC;AAdhC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;gDACN;AAGnB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;kDACI;AAG7B;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;gDACH;AAGtB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;+CACF;AAGvB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,KAAK,EAAC,CAAC;2CACX;AAmNf,cAAc,CAAC,MAAM,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { LitElement, PropertyValueMap, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styles } from './tabs.style.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { NOTHING_STRING, TabEditable, TabEvent, TabOrientation, TabsAlign } from './tabs.constant.js';\n/**\n * `hy-tabs` is a LitElement that provides a customizable tabs.\n * @customElement 'hy-tabs'\n *\n * Attributes\n * @attr activeTab\n * @attr orientation\n * @attr tabsAlign\n * @attr editable\n * Events\n * @fires tabEdited - Indicates when tab edited\n * @fires removeTab - Indicates when tab removed\n * @fires addTab - Indicates when tab added\n */\nexport class TabsComponent extends LitElement {\n  @property({type: Number})\n  activeTab!: number;\n\n  @property({type: String})\n  orientation!: TabOrientation;\n\n  @property({type: String})\n  tabsAlign!: TabsAlign;\n\n  @property({type: Object})\n  editable!: TabEditable;\n\n  @property({type: Array})\n  tabs!: any[];\n\n  static override styles = styles;\n\n  constructor() {\n    super();\n    this.activeTab = 0;\n    this.orientation = TabOrientation.Horizontal;\n  }\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          'tabs-container': true,\n          'vertical-align': this.orientation === TabOrientation.Vertical,\n          'horizontal-align': this.orientation === TabOrientation.Horizontal,\n          'right-align': this.tabsAlign === TabsAlign.Right,\n          'left-align': this.tabsAlign === TabsAlign.Left,\n          'center-align': this.tabsAlign === TabsAlign.Center,\n        })}\n      >\n        <div\n          class=\"tab-labels\"\n          style=\"flex-direction: ${this.orientation === TabOrientation.Vertical ? 'column' : ('row' as any)}\"\n        >\n          <div></div>\n\n          ${this.renderTabs()}\n          <div></div>\n        </div>\n        <div class=\"tab-content\">${this.renderActiveTab()}</div>\n      </div>\n    `;\n  }\n  override connectedCallback() {\n    super.connectedCallback();\n    this.observeChildrenChanges();\n    this.addEventListener('dragover', this.handleDragOver);\n  }\n\n  private observeChildrenChanges() {\n    const mutationObserver = new MutationObserver(() => {\n     // this.requestUpdate();\n    });\n\n    mutationObserver.observe(this, {childList: true});\n  }\n\n  private handleDragStart(event: any) {\n    event.dataTransfer.setData('text/plain', event.currentTarget.dataset.index);\n    event.dataTransfer.effectAllowed = 'move';\n    event.target.closest('.tab-label').classList.add('dragging-start');\n  }\n\n  private handleDragOver(event: any) {\n    event.preventDefault();\n    event.dataTransfer.dropEffect = 'move';\n  }\n\n  private handleDragEnter(event: any) {\n    event.preventDefault();\n    if (event.currentTarget.contains(event.relatedTarget)) {\n      return;\n    }\n    event.currentTarget.classList.add('dragging');\n  }\n\n  private handleDragLeave(event: any) {\n    event.preventDefault();\n    if (event.currentTarget.contains(event.relatedTarget)) {\n      return;\n    }\n    if (event.currentTarget.classList.contains('dragging')) {\n      event.currentTarget.classList.remove('dragging');\n    }\n  }\n\n  private handleDrop(event: any) {\n    event.preventDefault();\n    const sourceIndex = event.dataTransfer.getData('text/plain');\n    const targetIndex = event.currentTarget.dataset.index;\n    if (sourceIndex !== targetIndex) {\n      const tabs = Array.from(this.children || []);\n      const sourceTab = tabs[sourceIndex];\n      const targetTab = tabs[targetIndex];\n      this.dispatchEvent(\n        new CustomEvent(TabEvent.tabOrderChange, {\n          detail: {sourceTab, targetTab, sourceIndex: parseInt(sourceIndex), targetIndex: parseInt(targetIndex)},\n        })\n      );\n    }\n    this.shadowRoot!.querySelector('.dragging')?.classList.remove('dragging');\n    event.target.classList.remove('dragging');\n    this.shadowRoot!.querySelector('.dragging-start')?.classList.remove('dragging-start');\n  }\n\n  renderDeleteIcon(tab :any){\n    // if the tab does not gave edibale propetry and canDeleteTab is true\n    // then render the delete icon\n    if(!tab.editable && this.editable?.canDeleteTab){\n      return html`<hy-icon\n      @mousedown=${() => {\n        this.dispatchEvent(\n          new CustomEvent(TabEvent.removeTab, {\n            detail: {index: tab.index},\n          })\n        );\n      }}\n      name=\"window-close\"\n      class=\"close-icon\"\n    ></hy-icon>`\n    ;\n  }\n  return nothing;\n\n  }\n  private renderTabs() {\n    const tabs = [];\n    const children = this.tabs || [];\n    for (let tabIndex = 0; tabIndex < children.length; tabIndex++) {\n      const tab = html`\n        <div\n          data-index=${tabIndex}\n          draggable=${this.editable?.canMove}\n          @dragenter=${this.handleDragEnter}\n          @dragleave=${this.handleDragLeave}\n          @dragstart=${(e: any) => this.handleDragStart(e)}\n          @drop=${(event: Event) => this.handleDrop(event)}\n          class=${tabIndex === this.activeTab ? 'tab-label active' : 'tab-label'}\n          @mousedown=${(e: Event) => this.setActiveTab(tabIndex, children[tabIndex], e)}\n        >\n          <hy-label\n            contenteditable=${this.editable?.canEditTabTitle ? true : nothing}\n            @blur=${(event: Event) => {\n              this.dispatchEvent(\n                new CustomEvent(TabEvent.tabEdited, {\n                  detail: {\n                    tab: {\n                      label: (event.target as HTMLElement)?.textContent,\n                      index: tabIndex,\n                    },\n                  },\n                })\n              );\n            }}\n            >${children[tabIndex].label}</hy-label\n          >\n          ${children[tabIndex].editable?.canDeleteTab ?? this.editable?.canDeleteTab\n            ? html`<hy-icon\n                @mousedown=${() => {\n                  this.dispatchEvent(\n                    new CustomEvent(TabEvent.removeTab, {\n                      detail: {index: tabIndex},\n                    })\n                  );\n                }}\n                name=\"window-close\"\n                class=\"close-icon\"\n              ></hy-icon>`\n            : NOTHING_STRING}\n        </div>\n      `;\n      tabs.push(tab);\n    }\n    if (this.editable?.canAddTab) {\n      const tab = html`\n        <div\n          class=\"tab-label add-tab-label\"\n          @mousedown=${() => {\n            this.dispatchEvent(new CustomEvent(TabEvent.addTab));\n          }}\n        >\n          <hy-icon name=\"plus\" class=\"add-tab-icon\"></hy-icon>\n        </div>\n      `;\n      tabs.push(tab);\n    }\n    return tabs;\n  }\n\n  override updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>) {\n    super.updated(changedProperties);\n    if (!this.tabs[this.activeTab]) {\n      if (!this.tabs[this.activeTab - 1]) {\n        this.activeTab++;\n      } else {\n        this.activeTab--;\n      }\n    }\n  }\n\n  private renderActiveTab() {\n    const children = this.tabs ? [...this.tabs] : [];\n    if (children.length > 0 && this.activeTab >= 0 && this.activeTab < children.length) {\n      return html`${children[this.activeTab].content}`;\n    }\n    return html`${NOTHING_STRING}`;\n  }\n\n  private setActiveTab(index: number, _element: Element, event: Event) {\n    event.preventDefault();\n    this.activeTab = index;\n    this.dispatchEvent(\n      new CustomEvent(TabEvent.tabTilteClick, {\n        detail: {index},\n      })\n    );\n  }\n}\n\ncustomElements.define('hy-tabs', TabsComponent);\n"]}
+{"version":3,"file":"tabs.component.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement, nothing, PropertyValueMap } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './tabs.style.js';\nimport {\n  TabOrientation,\n  TabsAlign,\n  TabSize,\n  TabType,\n  TabEditable,\n  TabEvent,\n  TabItem,\n  TabClickEventDetail,\n  EMPTY_STRING,\n  DEFAULT_ACTIVE_TAB\n} from './tabs.types.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\n\n// Import icon component\nimport '../icon/icon.component.js';\n\n// Import controllers\nimport {\n  TabsKeyboardController,\n  TabsDragDropController,\n  TabsEditableController,\n  TabsEventController,\n  type TabsKeyboardHost,\n  type TabsDragDropHost,\n  type TabsEditableHost,\n  type TabsEventHost\n} from './controllers/index.js';\n\n/**\n * Versatile tabs component with support for multiple orientations, editable tabs, and drag & drop.\n * \n * @example\n * ```html\n * <!-- Basic usage -->\n * <nr-tabs .tabs=${tabs} activeTab=\"0\"></nr-tabs>\n * \n * <!-- With editing capabilities -->\n * <nr-tabs .tabs=${tabs} .editable=${{canAddTab: true, canDeleteTab: true}}></nr-tabs>\n * \n * <!-- Vertical orientation -->\n * <nr-tabs .tabs=${tabs} orientation=\"vertical\" align=\"left\"></nr-tabs>\n * ```\n * \n * @fires nr-tab-click - Tab clicked\n * @fires nr-tab-change - Active tab changed\n * @fires nr-tab-add - New tab requested\n * @fires nr-tab-remove - Tab removal requested\n * @fires nr-tab-edit - Tab edited\n * @fires nr-tab-order-change - Tab order changed via drag & drop\n * \n * @slot default - Tab content\n */\n@customElement('nr-tabs')\nexport class NrTabsElement extends NuralyUIBaseMixin(LitElement) implements \n  TabsKeyboardHost,\n  TabsDragDropHost,\n  TabsEditableHost,\n  TabsEventHost {\n  static override styles = styles;\n  \n  /** Currently active tab index */\n  @property({ type: Number })\n  activeTab = DEFAULT_ACTIVE_TAB;\n\n  /** Tab orientation (horizontal, vertical) */\n  @property({ type: String })\n  orientation: TabOrientation = TabOrientation.Horizontal;\n\n  /** Tab alignment (left, center, right) */\n  @property({ type: String })\n  align: TabsAlign = TabsAlign.Left;\n\n  /** Tab size (small, medium, large) */\n  @property({ type: String, attribute: 'size' })\n  tabSize: TabSize = TabSize.Medium;\n\n  /** Tab type/variant */\n  @property({ type: String, attribute: 'type' })\n  variant: TabType = TabType.Default;\n\n  /** Editable configuration */\n  @property({ type: Object })\n  editable?: TabEditable;\n\n  /** Array of tab items */\n  @property({ type: Array })\n  tabs: TabItem[] = [];\n\n  /** Whether tabs are animated */\n  @property({ type: Boolean })\n  animated = true;\n\n  /** Whether to destroy inactive tab content */\n  @property({ type: Boolean })\n  destroyInactiveTabPane = false;\n\n  /** Custom aria-label for the tabs container */\n  @property({ type: String })\n  tabsAriaLabel = EMPTY_STRING;\n\n  override requiredComponents = ['nr-icon'];\n\n  // Controllers - automatically connected via Lit's reactive controller system\n  private keyboardController = new TabsKeyboardController(this);\n  private dragDropController = new TabsDragDropController(this);\n  private editableController = new TabsEditableController(this);\n  private eventController = new TabsEventController(this);\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.validateDependencies();\n    this.observeChildrenChanges();\n    \n    // Ensure controllers are properly referenced for TypeScript\n    void this.keyboardController;\n    void this.dragDropController;\n    void this.editableController;\n    void this.eventController;\n  }\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          'tabs-container': true,\n          'vertical-align': this.orientation === TabOrientation.Vertical,\n          'horizontal-align': this.orientation === TabOrientation.Horizontal,\n          'right-align': this.align === TabsAlign.Right,\n          'left-align': this.align === TabsAlign.Left,\n          'center-align': this.align === TabsAlign.Center,\n        })}\n        role=\"tablist\"\n        aria-label=\"${this.tabsAriaLabel || nothing}\"\n        data-theme=\"${this.currentTheme}\"\n        data-size=\"${this.tabSize}\"\n        data-type=\"${this.variant}\"\n      >\n        <div\n          class=\"tab-labels\"\n          style=\"flex-direction: ${this.orientation === TabOrientation.Vertical ? 'column' : 'row'}\"\n        >\n          <div></div>\n          ${this.renderTabs()}\n          <div></div>\n        </div>\n        <div class=\"tab-content\" role=\"tabpanel\">\n          ${this.renderActiveTab()}\n        </div>\n      </div>\n    `;\n  }\n\n  private observeChildrenChanges() {\n    const mutationObserver = new MutationObserver(() => {\n      // Handle dynamic tab changes if needed\n      this.requestUpdate();\n    });\n\n    mutationObserver.observe(this, { childList: true });\n  }\n\n  private renderDeleteIcon(tab: TabItem, tabIndex: number) {\n    if (!this.editableController.canDeleteTab(tab)) return nothing;\n\n    if (!this.isComponentAvailable('nr-icon')) {\n      console.warn('[nr-tabs] Icon component not available. Delete icon will not render.');\n      return nothing;\n    }\n\n    return html`\n      <nr-icon\n        name=\"window-close\"\n        class=\"close-icon\"\n        @mousedown=${(e: MouseEvent) => {\n          e.stopPropagation();\n          this.editableController.handleRemoveTab(tabIndex);\n        }}\n      ></nr-icon>\n    `;\n  }\n\n  private renderTabs() {\n    const tabs = [];\n    \n    for (let tabIndex = 0; tabIndex < this.tabs.length; tabIndex++) {\n      const tab = this.tabs[tabIndex];\n      const isActive = tabIndex === this.activeTab;\n      \n      // Determine tab position for border radius\n      const isFirstTab = tabIndex === 0;\n      const isLastTab = tabIndex === this.tabs.length - 1;\n      const isSingleTab = this.tabs.length === 1;\n      const isMiddleTab = !isFirstTab && !isLastTab && !isSingleTab;\n      \n      const tabElement = html`\n        <div\n          data-index=${tabIndex}\n          draggable=${this.dragDropController.getDraggableState() ? 'true' : 'false'}\n          @dragenter=${(e: DragEvent) => this.dragDropController.handleDragEnter(e)}\n          @dragleave=${(e: DragEvent) => this.dragDropController.handleDragLeave(e)}\n          @dragstart=${(e: DragEvent) => this.dragDropController.handleDragStart(e)}\n          @drop=${(e: DragEvent) => this.dragDropController.handleDrop(e)}\n          class=${classMap({\n            'tab-label': true,\n            'active': isActive,\n            'disabled': !!tab.disabled,\n            'first-tab': isFirstTab && this.orientation === TabOrientation.Horizontal,\n            'middle-tab': isMiddleTab && this.orientation === TabOrientation.Horizontal,\n            'last-tab': isLastTab && this.orientation === TabOrientation.Horizontal,\n            'single-tab': isSingleTab && this.orientation === TabOrientation.Horizontal\n          })}\n          role=\"tab\"\n          aria-selected=${isActive ? 'true' : 'false'}\n          aria-disabled=${tab.disabled ? 'true' : 'false'}\n          tabindex=${isActive ? '0' : '-1'}\n          @click=${(e: MouseEvent) => this.eventController.handleTabClick(tabIndex, e)}\n        >\n          ${tab.icon && this.isComponentAvailable('nr-icon') \n            ? html`<nr-icon name=${tab.icon} class=\"tab-icon\"></nr-icon>` \n            : nothing}\n          \n          <span class=\"tab-text\" \n                contenteditable=${this.editableController.getContentEditableAttribute(tab) || nothing}\n                @blur=${(event: Event) => this.editableController.handleTabTitleBlur(event, tabIndex)}\n                @keydown=${(event: KeyboardEvent) => this.editableController.handleTabTitleKeyDown(event, tabIndex)}\n          >${tab.label}</span>\n          \n          ${this.renderDeleteIcon(tab, tabIndex)}\n        </div>\n      `;\n      tabs.push(tabElement);\n    }\n\n    // Add tab button\n    if (this.editableController.canAddTab()) {\n      const addTabElement = html`\n        <div\n          class=\"tab-label add-tab-label\"\n          role=\"button\"\n          aria-label=\"Add new tab\"\n          tabindex=\"0\"\n          @mousedown=${() => {\n            this.editableController.handleAddTab();\n          }}\n          @keydown=${(e: KeyboardEvent) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault();\n              this.editableController.handleAddTab();\n            }\n          }}\n        >\n          ${this.isComponentAvailable('nr-icon') \n            ? html`<nr-icon name=\"plus\" class=\"add-tab-icon\"></nr-icon>`\n            : html`<span>+</span>`}\n        </div>\n      `;\n      tabs.push(addTabElement);\n    }\n\n    return tabs;\n  }\n\n  override updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>) {\n    super.updated(changedProperties);\n    \n    // Validate active tab index\n    if (this.activeTab >= this.tabs.length) {\n      this.activeTab = Math.max(0, this.tabs.length - 1);\n    } else if (this.activeTab < 0) {\n      this.activeTab = 0;\n    }\n  }\n\n  private renderActiveTab() {\n    if (this.tabs.length === 0 || this.activeTab < 0 || this.activeTab >= this.tabs.length) {\n      return nothing;\n    }\n\n    const activeTab = this.tabs[this.activeTab];\n    return html`${activeTab.content || nothing}`;\n  }\n\n  setActiveTab(index: number, event?: Event) {\n    // Handle MouseEvent specifically for drag behavior\n    if (event instanceof MouseEvent) {\n      // For click events when drag is enabled, we don't need to prevent default\n      // as the drag operation should take precedence over click for dragging\n      const canMove = this.editable?.canMove ?? false;\n      if (!canMove) {\n        event.preventDefault();\n      }\n    }\n    \n    if (index < 0 || index >= this.tabs.length || this.tabs[index].disabled) {\n      return;\n    }\n\n    const previousIndex = this.activeTab;\n    const tab = this.tabs[index];\n    \n    this.activeTab = index;\n    \n    // Dispatch events\n    this.dispatchEventWithMetadata(TabEvent.TabClick, {\n      index,\n      tab,\n      previousIndex\n    } as TabClickEventDetail);\n    \n    if (previousIndex !== index) {\n      this.dispatchEventWithMetadata(TabEvent.TabChange, {\n        index,\n        tab,\n        previousIndex\n      } as TabClickEventDetail);\n    }\n  }\n}\n"]}

package/tabs.constant.d.ts

@@ -1,26 +1,20 @@
-export declare type TabEditable = {
-    canDeleteTab: boolean;
-    canEditTabTitle: boolean;
-    canAddTab: boolean;
-    canMove: boolean;
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ *
+ * @deprecated This file is deprecated. Please import types from './tabs.types.js' instead.
+ * This file will be removed in the next major version.
+ */
+export { TabOrientation, TabsAlign, TabEditable, TabEvent, EMPTY_STRING, NOTHING_STRING, LABEL_ATTRIBUTES } from './tabs.types.js';
+/**
+ * @deprecated Use TabEvent from tabs.types.js instead
+ */
+export declare const TabEvent_DEPRECATED: {
+    readonly removeTab: "removeTab";
+    readonly tabEdited: "tabEdited";
+    readonly tabTilteClick: "tabTilteClick";
+    readonly tabOrderChange: "tabOrderChange";
+    readonly addTab: "addTab";
 };
-export declare enum TabOrientation {
-    Horizontal = "horizontal",
-    Vertical = "vertical"
-}
-export declare enum TabsAlign {
-    Right = "right",
-    Left = "left",
-    Center = "center"
-}
-export declare enum TabEvent {
-    removeTab = "removeTab",
-    tabEdited = "tabEdited",
-    tabTilteClick = "tabTilteClick",
-    tabOrderChange = "tabOrderChange",
-    addTab = "addTab"
-}
-export declare const NOTHING_STRING = "";
-export declare const EMPTY_STRING = "";
-export declare const LABEL_ATTRIBUTES = "label";
 //# sourceMappingURL=tabs.constant.d.ts.map

package/tabs.constant.js

@@ -1,23 +1,21 @@
-export var TabOrientation;
-(function (TabOrientation) {
-    TabOrientation["Horizontal"] = "horizontal";
-    TabOrientation["Vertical"] = "vertical";
-})(TabOrientation || (TabOrientation = {}));
-export var TabsAlign;
-(function (TabsAlign) {
-    TabsAlign["Right"] = "right";
-    TabsAlign["Left"] = "left";
-    TabsAlign["Center"] = "center";
-})(TabsAlign || (TabsAlign = {}));
-export var TabEvent;
-(function (TabEvent) {
-    TabEvent["removeTab"] = "removeTab";
-    TabEvent["tabEdited"] = "tabEdited";
-    TabEvent["tabTilteClick"] = "tabTilteClick";
-    TabEvent["tabOrderChange"] = "tabOrderChange";
-    TabEvent["addTab"] = "addTab";
-})(TabEvent || (TabEvent = {}));
-export const NOTHING_STRING = '';
-export const EMPTY_STRING = '';
-export const LABEL_ATTRIBUTES = 'label';
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ *
+ * @deprecated This file is deprecated. Please import types from './tabs.types.js' instead.
+ * This file will be removed in the next major version.
+ */
+// Re-export from the new types file for backward compatibility
+export { EMPTY_STRING, NOTHING_STRING, LABEL_ATTRIBUTES } from './tabs.types.js';
+/**
+ * @deprecated Use TabEvent from tabs.types.js instead
+ */
+export const TabEvent_DEPRECATED = {
+    removeTab: 'removeTab',
+    tabEdited: 'tabEdited',
+    tabTilteClick: 'tabTilteClick',
+    tabOrderChange: 'tabOrderChange',
+    addTab: 'addTab',
+};
 //# sourceMappingURL=tabs.constant.js.map

package/tabs.constant.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.constant.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.constant.ts"],"names":[],"mappings":"AAOA,MAAM,CAAN,IAAY,cAGX;AAHD,WAAY,cAAc;IACxB,2CAAyB,CAAA;IACzB,uCAAqB,CAAA;AACvB,CAAC,EAHW,cAAc,KAAd,cAAc,QAGzB;AACD,MAAM,CAAN,IAAY,SAIX;AAJD,WAAY,SAAS;IACnB,4BAAa,CAAA;IACb,0BAAY,CAAA;IACZ,8BAAgB,CAAA;AAClB,CAAC,EAJW,SAAS,KAAT,SAAS,QAIpB;AAED,MAAM,CAAN,IAAY,QAMX;AAND,WAAY,QAAQ;IAClB,mCAAuB,CAAA;IACvB,mCAAuB,CAAA;IACvB,2CAA+B,CAAA;IAC/B,6CAAiC,CAAA;IACjC,6BAAiB,CAAA;AACnB,CAAC,EANW,QAAQ,KAAR,QAAQ,QAMnB;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,EAAE,CAAC;AACjC,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC;AAE/B,MAAM,CAAC,MAAM,gBAAgB,GAAG,OAAO,CAAC","sourcesContent":["export type TabEditable = {\n  canDeleteTab: boolean;\n  canEditTabTitle: boolean;\n  canAddTab: boolean;\n  canMove: boolean;\n};\n\nexport enum TabOrientation {\n  Horizontal = 'horizontal',\n  Vertical = 'vertical',\n}\nexport enum TabsAlign{\n  Right='right',\n  Left ='left',\n  Center ='center'\n}\n\nexport enum TabEvent {\n  removeTab = 'removeTab',\n  tabEdited = 'tabEdited',\n  tabTilteClick = 'tabTilteClick',\n  tabOrderChange = 'tabOrderChange',\n  addTab = 'addTab',\n}\n\nexport const NOTHING_STRING = '';\nexport const EMPTY_STRING = '';\n\nexport const LABEL_ATTRIBUTES = 'label';\n"]}
+{"version":3,"file":"tabs.constant.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.constant.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,+DAA+D;AAC/D,OAAO,EAKL,YAAY,EACZ,cAAc,EACd,gBAAgB,EACjB,MAAM,iBAAiB,CAAC;AAEzB;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,SAAS,EAAE,WAAW;IACtB,SAAS,EAAE,WAAW;IACtB,aAAa,EAAE,eAAe;IAC9B,cAAc,EAAE,gBAAgB;IAChC,MAAM,EAAE,QAAQ;CACR,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n * \n * @deprecated This file is deprecated. Please import types from './tabs.types.js' instead.\n * This file will be removed in the next major version.\n */\n\n// Re-export from the new types file for backward compatibility\nexport {\n  TabOrientation,\n  TabsAlign,\n  TabEditable,\n  TabEvent,\n  EMPTY_STRING,\n  NOTHING_STRING,\n  LABEL_ATTRIBUTES\n} from './tabs.types.js';\n\n/**\n * @deprecated Use TabEvent from tabs.types.js instead\n */\nexport const TabEvent_DEPRECATED = {\n  removeTab: 'removeTab',\n  tabEdited: 'tabEdited',\n  tabTilteClick: 'tabTilteClick',\n  tabOrderChange: 'tabOrderChange',\n  addTab: 'addTab',\n} as const;\n"]}