npm - @nuralyui/tabs - Versions diffs - 0.0.6 → 0.0.7 - Mend

@nuralyui/tabs 0.0.6 → 0.0.7

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.

Files changed (3) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@nuralyui/tabs",
-    "version": "0.0.6",
+    "version": "0.0.7",
     "description": "",
     "main": "index.js",
     "type": "module",

package/tabs.component.js CHANGED Viewed

@@ -116,7 +116,7 @@ export class TabsComponent extends LitElement {
         // then render the delete icon
         if (!tab.editable && ((_a = this.editable) === null || _a === void 0 ? void 0 : _a.canDeleteTab)) {
             return html `<hy-icon
-      @click=${() => {
+      @mousedown=${() => {
                 this.dispatchEvent(new CustomEvent(TabEvent.removeTab, {
                     detail: { index: tab.index },
                 }));
@@ -160,7 +160,7 @@ export class TabsComponent extends LitElement {
           >
           ${((_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
-                @click=${() => {
+                @mousedown=${() => {
                     this.dispatchEvent(new CustomEvent(TabEvent.removeTab, {
                         detail: { index: tabIndex },
                     }));
@@ -177,7 +177,7 @@ export class TabsComponent extends LitElement {
             const tab = html `
         <div
           class="tab-label add-tab-label"
-          @click=${() => {
+          @mousedown=${() => {
                 this.dispatchEvent(new CustomEvent(TabEvent.addTab));
             }}
         >

package/tabs.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs.component.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.component.ts"],"names":[],"mappings":"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","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//todo: make this use peer dependency\nimport \"../label/label.component.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 @click=${() => {\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 @click=${() => {\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 @click=${() => {\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"]}
1	+ {"version":3,"file":"tabs.component.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.component.ts"],"names":[],"mappings":";;;;;;AAAA,uDAAuD;AACvD,OAAO,EAAC,UAAU,EAAoB,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAChE,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,MAAM,EAAC,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAE,cAAc,EAAe,QAAQ,EAAE,cAAc,EAAE,SAAS,EAAC,MAAM,oBAAoB,CAAC;AACrG,qCAAqC;AACrC,OAAO,6BAA6B,CAAC;AACrC;;;;;;;;;;;;;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;YACjD,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,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//todo: make this use peer dependency\nimport \"../label/label.component.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"]}