@nuralyui/tabs 0.0.16 → 0.0.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundle.js +38 -340
- package/package.json +1 -1
- package/tabs.component.d.ts +0 -1
- package/tabs.component.js +0 -2
- package/tabs.component.js.map +1 -1
package/package.json
CHANGED
package/tabs.component.d.ts
CHANGED
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { LitElement, PropertyValueMap } from 'lit';
|
|
7
7
|
import { TabOrientation, TabsAlign, TabSize, TabType, TabEditable, TabItem } from './tabs.types.js';
|
|
8
|
-
import '../icon/icon.component.js';
|
|
9
8
|
import { type TabsKeyboardHost, type TabsDragDropHost, type TabsEditableHost, type TabsEventHost } from './controllers/index.js';
|
|
10
9
|
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;
|
|
11
10
|
/**
|
package/tabs.component.js
CHANGED
|
@@ -15,8 +15,6 @@ import { classMap } from 'lit/directives/class-map.js';
|
|
|
15
15
|
import { styles } from './tabs.style.js';
|
|
16
16
|
import { EMPTY_STRING, DEFAULT_ACTIVE_TAB } from './tabs.types.js';
|
|
17
17
|
import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
|
|
18
|
-
// Import icon component
|
|
19
|
-
import '../icon/icon.component.js';
|
|
20
18
|
// Import controllers
|
|
21
19
|
import { TabsKeyboardController, TabsDragDropController, TabsEditableController, TabsEventController } from './controllers/index.js';
|
|
22
20
|
/**
|
package/tabs.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.component.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAoB,MAAM,KAAK,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EASL,YAAY,EACZ,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D,wBAAwB;AACxB,OAAO,2BAA2B,CAAC;AAEnC,qBAAqB;AACrB,OAAO,EACL,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,mBAAmB,EAKpB,MAAM,wBAAwB,CAAC;AAEhC;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAAhE;;QAOE,iCAAiC;QAEjC,cAAS,GAAG,kBAAkB,CAAC;QAE/B,6CAA6C;QAE7C,gBAAW,gDAA6C;QAExD,0CAA0C;QAE1C,UAAK,+BAA6B;QAElC,sCAAsC;QAEtC,YAAO,iCAA2B;QAElC,uBAAuB;QAEvB,YAAO,mCAA4B;QAMnC,yBAAyB;QAEzB,SAAI,GAAc,EAAE,CAAC;QAErB,gCAAgC;QAEhC,aAAQ,GAAG,IAAI,CAAC;QAEhB,8CAA8C;QAE9C,2BAAsB,GAAG,KAAK,CAAC;QAE/B,+CAA+C;QAE/C,kBAAa,GAAG,YAAY,CAAC;QAEpB,uBAAkB,GAAG,CAAC,SAAS,CAAC,CAAC;QAE1C,6EAA6E;QACrE,uBAAkB,GAAG,IAAI,sBAAsB,CAAC,IAAI,CAAC,CAAC;QACtD,uBAAkB,GAAG,IAAI,sBAAsB,CAAC,IAAI,CAAC,CAAC;QACtD,uBAAkB,GAAG,IAAI,sBAAsB,CAAC,IAAI,CAAC,CAAC;QACtD,oBAAe,GAAG,IAAI,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAmN1D,CAAC;IAjNU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAE9B,4DAA4D;QAC5D,KAAK,IAAI,CAAC,kBAAkB,CAAC;QAC7B,KAAK,IAAI,CAAC,kBAAkB,CAAC;QAC7B,KAAK,IAAI,CAAC,kBAAkB,CAAC;QAC7B,KAAK,IAAI,CAAC,eAAe,CAAC;IAC5B,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC;YACf,gBAAgB,EAAE,IAAI;YACtB,gBAAgB,EAAE,IAAI,CAAC,WAAW,6CAA4B;YAC9D,kBAAkB,EAAE,IAAI,CAAC,WAAW,iDAA8B;YAClE,aAAa,EAAE,IAAI,CAAC,KAAK,kCAAoB;YAC7C,YAAY,EAAE,IAAI,CAAC,KAAK,gCAAmB;YAC3C,cAAc,EAAE,IAAI,CAAC,KAAK,oCAAqB;SAChD,CAAC;;sBAEY,IAAI,CAAC,aAAa,IAAI,OAAO;sBAC7B,IAAI,CAAC,YAAY;qBAClB,IAAI,CAAC,OAAO;qBACZ,IAAI,CAAC,OAAO;;;;mCAIE,IAAI,CAAC,WAAW,6CAA4B,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK;;;YAGtF,IAAI,CAAC,UAAU,EAAE;;;;YAIjB,IAAI,CAAC,eAAe,EAAE;;;KAG7B,CAAC;IACJ,CAAC;IAEO,sBAAsB;QAC5B,MAAM,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YACjD,uCAAuC;YACvC,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC,CAAC,CAAC;QAEH,gBAAgB,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IACtD,CAAC;IAEO,gBAAgB,CAAC,GAAY,EAAE,QAAgB;QACrD,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,YAAY,CAAC,GAAG,CAAC;YAAE,OAAO,OAAO,CAAC;QAE/D,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,SAAS,CAAC,EAAE;YACzC,OAAO,CAAC,IAAI,CAAC,sEAAsE,CAAC,CAAC;YACrF,OAAO,OAAO,CAAC;SAChB;QAED,OAAO,IAAI,CAAA;;;;qBAIM,CAAC,CAAa,EAAE,EAAE;YAC7B,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,IAAI,CAAC,kBAAkB,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;QACpD,CAAC;;KAEJ,CAAC;IACJ,CAAC;IAEO,UAAU;QAChB,MAAM,IAAI,GAAG,EAAE,CAAC;QAEhB,KAAK,IAAI,QAAQ,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,QAAQ,EAAE,EAAE;YAC9D,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAChC,MAAM,QAAQ,GAAG,QAAQ,KAAK,IAAI,CAAC,SAAS,CAAC;YAE7C,2CAA2C;YAC3C,MAAM,UAAU,GAAG,QAAQ,KAAK,CAAC,CAAC;YAClC,MAAM,SAAS,GAAG,QAAQ,KAAK,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;YACpD,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC;YAC3C,MAAM,WAAW,GAAG,CAAC,UAAU,IAAI,CAAC,SAAS,IAAI,CAAC,WAAW,CAAC;YAE9D,MAAM,UAAU,GAAG,IAAI,CAAA;;uBAEN,QAAQ;sBACT,IAAI,CAAC,kBAAkB,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;uBAC7D,CAAC,CAAY,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,eAAe,CAAC,CAAC,CAAC;uBAC5D,CAAC,CAAY,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,eAAe,CAAC,CAAC,CAAC;uBAC5D,CAAC,CAAY,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,eAAe,CAAC,CAAC,CAAC;kBACjE,CAAC,CAAY,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC,CAAC,CAAC;kBACvD,QAAQ,CAAC;gBACf,WAAW,EAAE,IAAI;gBACjB,QAAQ,EAAE,QAAQ;gBAClB,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ;gBAC1B,WAAW,EAAE,UAAU,IAAI,IAAI,CAAC,WAAW,iDAA8B;gBACzE,YAAY,EAAE,WAAW,IAAI,IAAI,CAAC,WAAW,iDAA8B;gBAC3E,UAAU,EAAE,SAAS,IAAI,IAAI,CAAC,WAAW,iDAA8B;gBACvE,YAAY,EAAE,WAAW,IAAI,IAAI,CAAC,WAAW,iDAA8B;aAC5E,CAAC;;0BAEc,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;0BAC3B,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;qBACpC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI;mBACvB,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC,CAAC;;YAE1E,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,oBAAoB,CAAC,SAAS,CAAC;gBAChD,CAAC,CAAC,IAAI,CAAA,iBAAiB,GAAG,CAAC,IAAI,8BAA8B;gBAC7D,CAAC,CAAC,OAAO;;;kCAGa,IAAI,CAAC,kBAAkB,CAAC,2BAA2B,CAAC,GAAG,CAAC,IAAI,OAAO;wBAC7E,CAAC,KAAY,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,kBAAkB,CAAC,KAAK,EAAE,QAAQ,CAAC;2BAC1E,CAAC,KAAoB,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,qBAAqB,CAAC,KAAK,EAAE,QAAQ,CAAC;aACtG,GAAG,CAAC,KAAK;;YAEV,IAAI,CAAC,gBAAgB,CAAC,GAAG,EAAE,QAAQ,CAAC;;OAEzC,CAAC;YACF,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SACvB;QAED,iBAAiB;QACjB,IAAI,IAAI,CAAC,kBAAkB,CAAC,SAAS,EAAE,EAAE;YACvC,MAAM,aAAa,GAAG,IAAI,CAAA;;;;;;uBAMT,GAAG,EAAE;gBAChB,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE,CAAC;YACzC,CAAC;qBACU,CAAC,CAAgB,EAAE,EAAE;gBAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;oBACtC,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE,CAAC;iBACxC;YACH,CAAC;;YAEC,IAAI,CAAC,oBAAoB,CAAC,SAAS,CAAC;gBACpC,CAAC,CAAC,IAAI,CAAA,sDAAsD;gBAC5D,CAAC,CAAC,IAAI,CAAA,gBAAgB;;OAE3B,CAAC;YACF,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SAC1B;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAEQ,OAAO,CAAC,iBAAoE;QACnF,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAEjC,4BAA4B;QAC5B,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YACtC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;SACpD;aAAM,IAAI,IAAI,CAAC,SAAS,GAAG,CAAC,EAAE;YAC7B,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;SACpB;IACH,CAAC;IAEO,eAAe;QACrB,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YACtF,OAAO,OAAO,CAAC;SAChB;QAED,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC5C,OAAO,IAAI,CAAA,GAAG,SAAS,CAAC,OAAO,IAAI,OAAO,EAAE,CAAC;IAC/C,CAAC;IAED,YAAY,CAAC,KAAa,EAAE,KAAa;;QACvC,mDAAmD;QACnD,IAAI,KAAK,YAAY,UAAU,EAAE;YAC/B,0EAA0E;YAC1E,uEAAuE;YACvE,MAAM,OAAO,GAAG,MAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,OAAO,mCAAI,KAAK,CAAC;YAChD,IAAI,CAAC,OAAO,EAAE;gBACZ,KAAK,CAAC,cAAc,EAAE,CAAC;aACxB;SACF;QAED,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE;YACvE,OAAO;SACR;QAED,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC;QACrC,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAE7B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QAEvB,kBAAkB;QAClB,IAAI,CAAC,yBAAyB,yCAAoB;YAChD,KAAK;YACL,GAAG;YACH,aAAa;SACS,CAAC,CAAC;QAE1B,IAAI,aAAa,KAAK,KAAK,EAAE;YAC3B,IAAI,CAAC,yBAAyB,2CAAqB;gBACjD,KAAK;gBACL,GAAG;gBACH,aAAa;aACS,CAAC,CAAC;SAC3B;IACH,CAAC;CACF,CAAA;AAnQiB,oBAAM,GAAG,MAAO,CAAA;AAIhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACI;AAI/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAC6B;AAIxD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACO;AAIlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC;8CACZ;AAIlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC;8CACX;AAInC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACJ;AAIvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;2CACL;AAIrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACZ;AAIhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6DACG;AAI/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDACE;AA7ClB,aAAa;IADzB,aAAa,CAAC,SAAS,CAAC;GACZ,aAAa,CAwQzB;SAxQY,aAAa","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"]}
|
|
1
|
+
{"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 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"]}
|