@nuralyui/tabs 0.0.1

package/demo/tabs-demo.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import '../tabs.component';
+import '../../icon';
+import '../../../helpers/ThemeHandler';
+export declare class ElMeenuElement extends LitElement {
+    float: string;
+    editableTabs: {
+        label: string;
+        content: import("lit").TemplateResult<1>;
+    }[];
+    editableActiveTab: number;
+    orientation: string;
+    editableConfig: {
+        canDeleteTab: boolean;
+        canEditTabTitle: boolean;
+        canAddTab: boolean;
+        canMove: boolean;
+    };
+    swapElements(arr: any, index1: any, index2: any): any;
+    protected render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'hy-tabs-demo': ElMeenuElement;
+    }
+}
+//# sourceMappingURL=tabs-demo.d.ts.map

package/demo/tabs-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-demo.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/demo/tabs-demo.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,OAAO,EAAC,UAAU,EAAO,MAAM,KAAK,CAAC;AAGrC,OAAO,mBAAmB,CAAC;AAE3B,OAAO,YAAY,CAAC;AACpB,OAAO,+BAA+B,CAAC;AAEvC,qBACa,cAAe,SAAQ,UAAU;IAE5C,KAAK,SAAU;IAGf,YAAY;;;QAaV;IAGF,iBAAiB,SAAK;IAGtB,WAAW,SAAgB;IAG3B,cAAc;;;;;MAKZ;IAEF,YAAY,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG;cAO5B,MAAM;CAiM1B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,cAAc,CAAC;KAChC;CACF"}

package/demo/tabs-demo.js

@@ -0,0 +1,263 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * @license
+ * Copyright 2023 Google 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;
+};
+import { LitElement, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import '../tabs.component';
+import '../../icon';
+import '../../../helpers/ThemeHandler';
+let ElMeenuElement = class ElMeenuElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.float = 'left';
+        this.editableTabs = [
+            {
+                label: 'Tab 1',
+                content: html `Content for Tab 1`,
+            },
+            {
+                label: 'Tab 2',
+                content: html `Content for Tab 2`,
+            },
+            {
+                label: 'Tab 3',
+                content: html `Content for Tab 3`,
+            },
+        ];
+        this.editableActiveTab = 0;
+        this.orientation = 'horizontal';
+        this.editableConfig = {
+            canDeleteTab: false,
+            canEditTabTitle: false,
+            canAddTab: true,
+            canMove: true,
+        };
+    }
+    swapElements(arr, index1, index2) {
+        const temp = arr[index1];
+        arr[index1] = arr[index2];
+        arr[index2] = temp;
+        return arr;
+    }
+    render() {
+        var _a, _b;
+        return html `
+    <theme-handler>
+      <hy-tabs>
+        <div label="Tab 1">Content for Tab 1</div>
+        <div label="Tab 2">Content for Tab 2</div>
+        <div label="Tab 3">Content for Tab 3</div>
+      </hy-tabs>
+      <br />
+      <button
+        @click=${() => {
+            var _a;
+            this.editableConfig.canDeleteTab = !((_a = this.editableConfig) === null || _a === void 0 ? void 0 : _a.canDeleteTab);
+            this.requestUpdate();
+            this.editableConfig = Object.assign({}, this.editableConfig);
+        }}
+      >
+        ${((_a = this.editableConfig) === null || _a === void 0 ? void 0 : _a.canDeleteTab) ? 'Disable delete' : 'Enable delete'} mode
+      </button>
+      <button
+        @click=${() => {
+            var _a;
+            this.editableConfig.canEditTabTitle = !((_a = this.editableConfig) === null || _a === void 0 ? void 0 : _a.canEditTabTitle);
+            this.requestUpdate();
+            this.editableConfig = Object.assign({}, this.editableConfig);
+        }}
+      >
+        ${((_b = this.editableConfig) === null || _b === void 0 ? void 0 : _b.canEditTabTitle) ? 'Disable edition' : 'Enable edition'} mode
+      </button>
+      <button
+        @click=${() => {
+            this.orientation = this.orientation === 'vertical' ? 'horizontal' : 'vertical';
+        }}
+      >
+        ${this.orientation == 'vertical' ? 'vertical' : 'horizontal'} mode
+      </button>
+      <br />
+      <hy-tabs
+        .tabs=${this.editableTabs}
+        .orientation=${this.orientation}
+        @tabOrderChange=${(e) => {
+            this.editableTabs = this.swapElements(this.editableTabs, e.detail.sourceIndex, e.detail.targetIndex);
+            this.editableTabs = [...this.editableTabs];
+        }}
+        activeTab=${this.editableActiveTab}
+        .editable=${Object.assign({}, this.editableConfig)}
+        @addTab=${() => {
+            this.editableTabs.push({
+                label: 'Tab ' + (this.editableTabs.length + 1),
+                content: html `Content for Tab ${this.editableTabs.length + 1}`,
+            });
+            this.editableTabs = [...this.editableTabs];
+            this.editableActiveTab = this.editableTabs.length - 1;
+        }}
+        @removeTab=${(e) => {
+            this.editableTabs.splice(e.detail.index, 1);
+            this.editableTabs = [...this.editableTabs];
+        }}
+        @tabEdited=${(e) => {
+            const { tab } = e.detail;
+            this.editableTabs[tab.index] = Object.assign(Object.assign({}, this.editableTabs[tab.index]), { label: tab.label });
+        }}
+      >
+        ${this.editableTabs.map((tab) => {
+            return html `<div label=${tab.label}>${tab.content}</div>`;
+        })}
+      </hy-tabs>
+      <br />
+      <br />
+      <hy-tabs
+        activeTab=${this.editableActiveTab}
+        .editable=${{
+            //canEditTabTitle: true,
+            canAddTab: true,
+            canMove: true,
+        }}
+        @tabEdited=${(e) => {
+            console.log('tab', e.detail.tab);
+        }}
+        @addTab=${() => {
+            this.editableTabs.push({
+                label: 'Tab ' + (this.editableTabs.length + 1),
+                content: html `Content for Tab ${this.editableTabs.length + 1}`,
+            });
+            this.editableTabs = [...this.editableTabs];
+            this.editableActiveTab = this.editableTabs.length - 1;
+        }}
+        @removeTab=${(e) => {
+            this.editableTabs.splice(e.detail.index, 1);
+        }}
+      >
+        ${this.editableTabs.map((tab) => {
+            return html `<div label=${tab.label}>${tab.content}</div>`;
+        })}
+      </hy-tabs>
+      <br />
+      <br />
+      <br />
+      <hy-tabs
+        activeTab=${this.editableActiveTab}
+        .editable=${{
+            canAddTab: true,
+        }}
+        @tabEdited=${(e) => {
+            console.log('tab', e.detail.tab);
+        }}
+        @addTab=${() => {
+            this.editableTabs.push({
+                label: 'Tab ' + (this.editableTabs.length + 1),
+                content: html `Content for Tab ${this.editableTabs.length + 1}`,
+            });
+            this.editableTabs = [...this.editableTabs];
+            this.editableActiveTab = this.editableTabs.length - 1;
+        }}
+        @removeTab=${(e) => {
+            console.log(e);
+            this.editableTabs.splice(e.detail.index, 1);
+            this.editableTabs = [...this.editableTabs];
+        }}
+      >
+        ${this.editableTabs.map((tab) => {
+            return html `<div label=${tab.label}>${tab.content}</div>`;
+        })}
+      </hy-tabs>
+      <br />
+      <br />
+      <br />
+      <hy-tabs
+        activeTab=${this.editableActiveTab}
+        .editable=${{
+            canDeleteTab: true,
+        }}
+        @tabEdited=${(e) => {
+            console.log('tab', e.detail.tab);
+        }}
+        @addTab=${() => {
+            this.editableTabs.push({
+                label: 'Tab ' + (this.editableTabs.length + 1),
+                content: html `Content for Tab ${this.editableTabs.length + 1}`,
+            });
+            this.editableTabs = [...this.editableTabs];
+            this.editableActiveTab = this.editableTabs.length - 1;
+        }}
+        @removeTab=${(e) => {
+            this.editableTabs.splice(e.detail.index, 1);
+        }}
+      >
+        ${this.editableTabs.map((tab) => {
+            return html `<div label=${tab.label}>${tab.content}</div>`;
+        })}
+      </hy-tabs>
+      <br />
+      <br />
+      <hy-tabs>
+        <div label="Tab 1">Content for Tab 1</div>
+        <div label="Tab 2">Content for Tab 2</div>
+        <div label="Tab 3">Content for Tab 3</div>
+      </hy-tabs>
+      <br />
+      <br />
+      <br />
+      <hy-tabs orientation="vertical">
+        <div label="Tab 1">Content for Tab 1</div>
+        <div label="Tab 2">Content for Tab 2</div>
+        <div label="Tab 3">Content for Tab 3</div>
+      </hy-tabs>
+      <br />
+      <br />
+      <hy-tabs orientation="vertical" tabsAlign="right">
+        <div label="Tab 1">Content for Tab 1</div>
+        <div label="Tab 2">Content for Tab 2</div>
+        <div label="Tab 3">Content for Tab 3</div>
+      </hy-tabs>
+      <br />
+      <br />
+      <hy-tabs tabsAlign="center">
+        <div label="Tab 1">Content for Tab 1</div>
+        <div label="Tab 2">Content for Tab 2</div>
+        <div label="Tab 3">Content for Tab 3</div>
+      </hy-tabs>
+      <br />
+      <br />
+      <hy-tabs tabsAlign="right">
+        <div label="Tab 1">Content for Tab 1</div>
+        <div label="Tab 2">Content for Tab 2</div>
+        <div label="Tab 3">Content for Tab 3</div>
+      </hy-tabs>
+      </theme-handler>
+    `;
+    }
+};
+__decorate([
+    state()
+], ElMeenuElement.prototype, "float", void 0);
+__decorate([
+    state()
+], ElMeenuElement.prototype, "editableTabs", void 0);
+__decorate([
+    state()
+], ElMeenuElement.prototype, "editableActiveTab", void 0);
+__decorate([
+    state()
+], ElMeenuElement.prototype, "orientation", void 0);
+__decorate([
+    state()
+], ElMeenuElement.prototype, "editableConfig", void 0);
+ElMeenuElement = __decorate([
+    customElement('hy-tabs-demo')
+], ElMeenuElement);
+export { ElMeenuElement };
+//# sourceMappingURL=tabs-demo.js.map

package/demo/tabs-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-demo.js","sourceRoot":"","sources":["../../../../src/components/tabs/demo/tabs-demo.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport {LitElement, html} from 'lit';\nimport {customElement, state} from 'lit/decorators.js';\n\nimport '../tabs.component';\n\nimport '../../icon';\nimport '../../../helpers/ThemeHandler';\n\n@customElement('hy-tabs-demo')\nexport class ElMeenuElement extends LitElement {\n  @state()\n  float = 'left';\n\n  @state()\n  editableTabs = [\n    {\n      label: 'Tab 1',\n      content: html`Content for Tab 1`,\n    },\n    {\n      label: 'Tab 2',\n      content: html`Content for Tab 2`,\n    },\n    {\n      label: 'Tab 3',\n      content: html`Content for Tab 3`,\n    },\n  ];\n\n  @state()\n  editableActiveTab = 0;\n\n  @state()\n  orientation = 'horizontal';\n\n  @state()\n  editableConfig = {\n    canDeleteTab: false,\n    canEditTabTitle: false,\n    canAddTab: true,\n    canMove: true,\n  };\n\n  swapElements(arr: any, index1: any, index2: any) {\n    const temp = arr[index1];\n    arr[index1] = arr[index2];\n    arr[index2] = temp;\n    return arr;\n  }\n\n  protected override render() {\n    return html`\n    <theme-handler>\n      <hy-tabs>\n        <div label=\"Tab 1\">Content for Tab 1</div>\n        <div label=\"Tab 2\">Content for Tab 2</div>\n        <div label=\"Tab 3\">Content for Tab 3</div>\n      </hy-tabs>\n      <br />\n      <button\n        @click=${() => {\n          this.editableConfig.canDeleteTab = !this.editableConfig?.canDeleteTab;\n          this.requestUpdate();\n          this.editableConfig = {...this.editableConfig};\n        }}\n      >\n        ${this.editableConfig?.canDeleteTab ? 'Disable delete' : 'Enable delete'} mode\n      </button>\n      <button\n        @click=${() => {\n          this.editableConfig.canEditTabTitle = !this.editableConfig?.canEditTabTitle;\n          this.requestUpdate();\n          this.editableConfig = {...this.editableConfig};\n        }}\n      >\n        ${this.editableConfig?.canEditTabTitle ? 'Disable edition' : 'Enable edition'} mode\n      </button>\n      <button\n        @click=${() => {\n          this.orientation = this.orientation === 'vertical' ? 'horizontal' : 'vertical';\n        }}\n      >\n        ${this.orientation == 'vertical' ? 'vertical' : 'horizontal'} mode\n      </button>\n      <br />\n      <hy-tabs\n        .tabs=${this.editableTabs}\n        .orientation=${this.orientation}\n        @tabOrderChange=${(e: any) => {\n          this.editableTabs = this.swapElements(this.editableTabs, e.detail.sourceIndex, e.detail.targetIndex);\n          this.editableTabs = [...this.editableTabs];\n        }}\n        activeTab=${this.editableActiveTab}\n        .editable=${{\n          ...this.editableConfig,\n        }}\n        @addTab=${() => {\n          this.editableTabs.push({\n            label: 'Tab ' + (this.editableTabs.length + 1),\n            content: html`Content for Tab ${this.editableTabs.length + 1}`,\n          });\n          this.editableTabs = [...this.editableTabs];\n          this.editableActiveTab = this.editableTabs.length - 1;\n        }}\n        @removeTab=${(e: any) => {\n          this.editableTabs.splice(e.detail.index, 1);\n          this.editableTabs = [...this.editableTabs];\n        }}\n        @tabEdited=${(e: any) => {\n          const {tab} = e.detail;\n          this.editableTabs[tab.index] = {\n            ...this.editableTabs[tab.index],\n            label: tab.label,\n          };\n        }}\n      >\n        ${this.editableTabs.map((tab: any) => {\n          return html`<div label=${tab.label}>${tab.content}</div>`;\n        })}\n      </hy-tabs>\n      <br />\n      <br />\n      <hy-tabs\n        activeTab=${this.editableActiveTab}\n        .editable=${{\n          //canEditTabTitle: true,\n          canAddTab: true,\n          canMove: true,\n        }}\n        @tabEdited=${(e: CustomEvent) => {\n          console.log('tab', e.detail.tab);\n        }}\n        @addTab=${() => {\n          this.editableTabs.push({\n            label: 'Tab ' + (this.editableTabs.length + 1),\n            content: html`Content for Tab ${this.editableTabs.length + 1}`,\n          });\n          this.editableTabs = [...this.editableTabs];\n          this.editableActiveTab = this.editableTabs.length - 1;\n        }}\n        @removeTab=${(e: any) => {\n          this.editableTabs.splice(e.detail.index, 1);\n        }}\n      >\n        ${this.editableTabs.map((tab: any) => {\n          return html`<div label=${tab.label}>${tab.content}</div>`;\n        })}\n      </hy-tabs>\n      <br />\n      <br />\n      <br />\n      <hy-tabs\n        activeTab=${this.editableActiveTab}\n        .editable=${{\n          canAddTab: true,\n        }}\n        @tabEdited=${(e: CustomEvent) => {\n          console.log('tab', e.detail.tab);\n        }}\n        @addTab=${() => {\n          this.editableTabs.push({\n            label: 'Tab ' + (this.editableTabs.length + 1),\n            content: html`Content for Tab ${this.editableTabs.length + 1}`,\n          });\n          this.editableTabs = [...this.editableTabs];\n          this.editableActiveTab = this.editableTabs.length - 1;\n        }}\n        @removeTab=${(e: any) => {\n          console.log(e);\n          this.editableTabs.splice(e.detail.index, 1);\n          this.editableTabs = [...this.editableTabs];\n        }}\n      >\n        ${this.editableTabs.map((tab: any) => {\n          return html`<div label=${tab.label}>${tab.content}</div>`;\n        })}\n      </hy-tabs>\n      <br />\n      <br />\n      <br />\n      <hy-tabs\n        activeTab=${this.editableActiveTab}\n        .editable=${{\n          canDeleteTab: true,\n        }}\n        @tabEdited=${(e: CustomEvent) => {\n          console.log('tab', e.detail.tab);\n        }}\n        @addTab=${() => {\n          this.editableTabs.push({\n            label: 'Tab ' + (this.editableTabs.length + 1),\n            content: html`Content for Tab ${this.editableTabs.length + 1}`,\n          });\n          this.editableTabs = [...this.editableTabs];\n          this.editableActiveTab = this.editableTabs.length - 1;\n        }}\n        @removeTab=${(e: any) => {\n          this.editableTabs.splice(e.detail.index, 1);\n        }}\n      >\n        ${this.editableTabs.map((tab: any) => {\n          return html`<div label=${tab.label}>${tab.content}</div>`;\n        })}\n      </hy-tabs>\n      <br />\n      <br />\n      <hy-tabs>\n        <div label=\"Tab 1\">Content for Tab 1</div>\n        <div label=\"Tab 2\">Content for Tab 2</div>\n        <div label=\"Tab 3\">Content for Tab 3</div>\n      </hy-tabs>\n      <br />\n      <br />\n      <br />\n      <hy-tabs orientation=\"vertical\">\n        <div label=\"Tab 1\">Content for Tab 1</div>\n        <div label=\"Tab 2\">Content for Tab 2</div>\n        <div label=\"Tab 3\">Content for Tab 3</div>\n      </hy-tabs>\n      <br />\n      <br />\n      <hy-tabs orientation=\"vertical\" tabsAlign=\"right\">\n        <div label=\"Tab 1\">Content for Tab 1</div>\n        <div label=\"Tab 2\">Content for Tab 2</div>\n        <div label=\"Tab 3\">Content for Tab 3</div>\n      </hy-tabs>\n      <br />\n      <br />\n      <hy-tabs tabsAlign=\"center\">\n        <div label=\"Tab 1\">Content for Tab 1</div>\n        <div label=\"Tab 2\">Content for Tab 2</div>\n        <div label=\"Tab 3\">Content for Tab 3</div>\n      </hy-tabs>\n      <br />\n      <br />\n      <hy-tabs tabsAlign=\"right\">\n        <div label=\"Tab 1\">Content for Tab 1</div>\n        <div label=\"Tab 2\">Content for Tab 2</div>\n        <div label=\"Tab 3\">Content for Tab 3</div>\n      </hy-tabs>\n      </theme-handler>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hy-tabs-demo': ElMeenuElement;\n  }\n}\n"]}

package/index.d.ts

@@ -0,0 +1,2 @@
+export * from './tabs.component.js';
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}

package/index.js

@@ -0,0 +1,2 @@
+export * from './tabs.component.js';
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/tabs/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './tabs.component.js';\n"]}

package/package.json

@@ -0,0 +1,15 @@
+{
+    "name": "@nuralyui/tabs",
+    "version": "0.0.1",
+    "description": "",
+    "main": "index.js",
+    "type": "module",
+    "dependencies": {
+        "dayjs": "^1.11.7"
+    },
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "author": "Labidi Aymen",
+    "license": "ISC"
+}

package/react.d.ts

@@ -0,0 +1,9 @@
+import { TabsComponent } from './tabs.component.js';
+export declare const HyTabsComponent: import("@lit-labs/react").ReactWebComponent<TabsComponent, {
+    removeTab: string;
+    tabEdited: string;
+    tabTilteClick: string;
+    tabOrderChange: string;
+    addTab: string;
+}>;
+//# sourceMappingURL=react.d.ts.map

package/react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/react.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAClD,eAAO,MAAM,eAAe;;;;;;EAW1B,CAAC"}

package/react.js

@@ -0,0 +1,16 @@
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { TabsComponent } from './tabs.component.js';
+export const HyTabsComponent = createComponent({
+    tagName: 'hy-tabs',
+    elementClass: TabsComponent,
+    react: React,
+    events: {
+        removeTab: 'removeTab',
+        tabEdited: 'tabEdited',
+        tabTilteClick: 'tabTilteClick',
+        tabOrderChange: 'tabOrderChange',
+        addTab: 'addTab',
+    },
+});
+//# sourceMappingURL=react.js.map

package/react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/tabs/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAChD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAClD,MAAM,CAAC,MAAM,eAAe,GAAG,eAAe,CAAC;IAC7C,OAAO,EAAE,SAAS;IAClB,YAAY,EAAE,aAAa;IAC3B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,SAAS,EAAE,WAAW;QACtB,SAAS,EAAE,WAAW;QACtB,aAAa,EAAE,eAAe;QAC9B,cAAc,EAAE,gBAAgB;QAChC,MAAM,EAAE,QAAQ;KACjB;CACF,CAAC,CAAC","sourcesContent":["import {createComponent} from '@lit-labs/react';\nimport * as React from 'react';\nimport {TabsComponent} from './tabs.component.js';\nexport const HyTabsComponent = createComponent({\n  tagName: 'hy-tabs',\n  elementClass: TabsComponent,\n  react: React,\n  events: {\n    removeTab: 'removeTab',\n    tabEdited: 'tabEdited',\n    tabTilteClick: 'tabTilteClick',\n    tabOrderChange: 'tabOrderChange',\n    addTab: 'addTab',\n  },\n});\n"]}

package/tabs.component.d.ts

@@ -0,0 +1,39 @@
+import { LitElement, PropertyValueMap, nothing } from 'lit';
+import { TabEditable, TabOrientation, TabsAlign } from './tabs.constant.js';
+/**
+ * `hy-tabs` is a LitElement that provides a customizable tabs.
+ * @customElement 'hy-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
+ */
+export declare class TabsComponent extends LitElement {
+    activeTab: number;
+    orientation: TabOrientation;
+    tabsAlign: TabsAlign;
+    editable: TabEditable;
+    tabs: any[];
+    static styles: import("lit").CSSResult;
+    constructor();
+    render(): import("lit").TemplateResult<1>;
+    connectedCallback(): void;
+    private observeChildrenChanges;
+    private handleDragStart;
+    private handleDragOver;
+    private handleDragEnter;
+    private handleDragLeave;
+    private handleDrop;
+    renderDeleteIcon(tab: any): typeof nothing | import("lit").TemplateResult<1>;
+    private renderTabs;
+    updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    private renderActiveTab;
+    private setActiveTab;
+}
+//# sourceMappingURL=tabs.component.d.ts.map

package/tabs.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.component.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,UAAU,EAAE,gBAAgB,EAAQ,OAAO,EAAC,MAAM,KAAK,CAAC;AAIhE,OAAO,EAAkB,WAAW,EAAY,cAAc,EAAE,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAErG;;;;;;;;;;;;;GAaG;AACH,qBAAa,aAAc,SAAQ,UAAU;IAE3C,SAAS,EAAG,MAAM,CAAC;IAGnB,WAAW,EAAG,cAAc,CAAC;IAG7B,SAAS,EAAG,SAAS,CAAC;IAGtB,QAAQ,EAAG,WAAW,CAAC;IAGvB,IAAI,EAAG,GAAG,EAAE,CAAC;IAEb,OAAgB,MAAM,0BAAU;;IAQvB,MAAM;IAyBN,iBAAiB;IAM1B,OAAO,CAAC,sBAAsB;IAQ9B,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,UAAU;IAmBlB,gBAAgB,CAAC,GAAG,EAAE,GAAG;IAoBzB,OAAO,CAAC,UAAU;IAgET,OAAO,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAWrF,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,YAAY;CASrB"}

package/tabs.component.js

@@ -0,0 +1,234 @@
+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 { classMap } from 'lit/directives/class-map.js';
+import { NOTHING_STRING, TabEvent, TabOrientation, TabsAlign } from './tabs.constant.js';
+/**
+ * `hy-tabs` is a LitElement that provides a customizable tabs.
+ * @customElement 'hy-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
+ */
+export class TabsComponent extends LitElement {
+    constructor() {
+        super();
+        this.activeTab = 0;
+        this.orientation = TabOrientation.Horizontal;
+    }
+    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,
+        })}
+      >
+        <div
+          class="tab-labels"
+          style="flex-direction: ${this.orientation === TabOrientation.Vertical ? 'column' : 'row'}"
+        >
+          <div></div>
+
+          ${this.renderTabs()}
+          <div></div>
+        </div>
+        <div class="tab-content">${this.renderActiveTab()}</div>
+      </div>
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.observeChildrenChanges();
+        this.addEventListener('dragover', this.handleDragOver);
+    }
+    observeChildrenChanges() {
+        const mutationObserver = new MutationObserver(() => {
+            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;
+        }
+        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
+      @click=${() => {
+                this.dispatchEvent(new CustomEvent(TabEvent.removeTab, {
+                    detail: { index: tab.index },
+                }));
+            }}
+      name="window-close"
+      class="close-icon"
+    ></hy-icon>`;
+        }
+        return nothing;
+    }
+    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 `
+        <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'}
+          @click=${(e) => this.setActiveTab(tabIndex, children[tabIndex], e)}
+        >
+          <span
+            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}</span
+          >
+          ${((_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=${() => {
+                    this.dispatchEvent(new CustomEvent(TabEvent.removeTab, {
+                        detail: { index: tabIndex },
+                    }));
+                }}
+                name="window-close"
+                class="close-icon"
+              ></hy-icon>`
+                : NOTHING_STRING}
+        </div>
+      `;
+            tabs.push(tab);
+        }
+        if ((_f = this.editable) === null || _f === void 0 ? void 0 : _f.canAddTab) {
+            const tab = html `
+        <div
+          class="tab-label add-tab-label"
+          @click=${() => {
+                this.dispatchEvent(new CustomEvent(TabEvent.addTab));
+            }}
+        >
+          <hy-icon name="plus" class="add-tab-icon"></hy-icon>
+        </div>
+      `;
+            tabs.push(tab);
+        }
+        return tabs;
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (!this.tabs[this.activeTab]) {
+            if (!this.tabs[this.activeTab - 1]) {
+                this.activeTab++;
+            }
+            else {
+                this.activeTab--;
+            }
+        }
+    }
+    renderActiveTab() {
+        const children = this.tabs ? [...this.tabs] : [];
+        if (children.length > 0 && this.activeTab >= 0 && this.activeTab < children.length) {
+            return html `${children[this.activeTab].content}`;
+        }
+        return html `${NOTHING_STRING}`;
+    }
+    setActiveTab(index, _element, event) {
+        event.preventDefault();
+        this.activeTab = index;
+        /*element?.dispatchEvent(
+          new CustomEvent(TabEvent.tabTilteClick, {
+            detail: event,
+          })
+        );*/
+    }
+}
+TabsComponent.styles = styles;
+__decorate([
+    property({ type: Number })
+], TabsComponent.prototype, "activeTab", void 0);
+__decorate([
+    property({ type: String })
+], TabsComponent.prototype, "orientation", void 0);
+__decorate([
+    property({ type: String })
+], TabsComponent.prototype, "tabsAlign", void 0);
+__decorate([
+    property({ type: Object })
+], TabsComponent.prototype, "editable", void 0);
+__decorate([
+    property({ type: Array })
+], TabsComponent.prototype, "tabs", void 0);
+customElements.define('hy-tabs', TabsComponent);
+//# sourceMappingURL=tabs.component.js.map

package/tabs.component.js.map

@@ -0,0 +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\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          @click=${(e: Event) => this.setActiveTab(tabIndex, children[tabIndex], e)}\n        >\n          <span\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}</span\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    /*element?.dispatchEvent(\n      new CustomEvent(TabEvent.tabTilteClick, {\n        detail: event,\n      })\n    );*/\n  }\n}\n\ncustomElements.define('hy-tabs', TabsComponent);\n"]}

package/tabs.constant.d.ts

@@ -0,0 +1,26 @@
+export declare type TabEditable = {
+    canDeleteTab: boolean;
+    canEditTabTitle: boolean;
+    canAddTab: boolean;
+    canMove: boolean;
+};
+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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.constant.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.constant.ts"],"names":[],"mappings":"AAAA,oBAAY,WAAW,GAAG;IACxB,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,oBAAY,cAAc;IACxB,UAAU,eAAe;IACzB,QAAQ,aAAa;CACtB;AACD,oBAAY,SAAS;IACnB,KAAK,UAAQ;IACb,IAAI,SAAQ;IACZ,MAAM,WAAU;CACjB;AAED,oBAAY,QAAQ;IAClB,SAAS,cAAc;IACvB,SAAS,cAAc;IACvB,aAAa,kBAAkB;IAC/B,cAAc,mBAAmB;IACjC,MAAM,WAAW;CAClB;AAED,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,eAAO,MAAM,YAAY,KAAK,CAAC;AAE/B,eAAO,MAAM,gBAAgB,UAAU,CAAC"}

package/tabs.constant.js

@@ -0,0 +1,23 @@
+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';
+//# sourceMappingURL=tabs.constant.js.map

package/tabs.constant.js.map

@@ -0,0 +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"]}

package/tabs.style.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=tabs.style.d.ts.map

package/tabs.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.style.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA6LlB,CAAC"}

package/tabs.style.js

@@ -0,0 +1,192 @@
+import { css } from 'lit';
+export const styles = css `
+  :host{
+    display: block;
+    height: 100%;
+  }
+   .tabs-container{
+    background-color:var(--hybrid-tabs-container-background-color);
+    height: 100%;
+   }
+  .tab-labels,
+  .tabs-container {
+    display: flex;
+  }
+
+  .tabs-container {
+    box-shadow: var(--hybrid-tabs-container-box-shadow);
+  }
+
+  .dragging-start {
+    border: var(--hybrid-tabs-dragging-start-border);
+  }
+  .dragging-enter {
+    background-color: var(--hybrid-tabs-dragging-enter-background-color);
+  }
+  .vertical-align > .tab-content {
+    border: var(--hybrid-tabs-va-enter-border);
+    border-left: var(--hybrid-tabs-va-enter-border-left);
+  }
+  .vertical-align.right-align > .tab-content {
+    border: var(--hybrid-tabs-va-ra-border);
+    border-right: var(--hybrid-tabs-va-ra-border-right);
+  }
+
+  .tab-label {
+    cursor: var(--hybrid-tabs-label-cursor);
+    padding: var(--hybrid-tabs-label-padding);
+    border-bottom: var(--hybrid-tabs-label-border-bottom);
+    transition: var(--hybrid-tabs-label-transition);
+    user-select: var(--hybrid-tabs-label-user-select);
+    color:var(--hybrid-tabs-label-color);
+  }
+
+  .tab-label:hover {
+    color: var(--hybrid-tabs-label-hover-color);
+  }
+
+  .tab-label.active {
+    color: var(--hybrid-tabs-label-active-hover-color);
+  }
+
+  .tab-content {
+    padding: var(--hybrid-tabs-content-padding);
+    flex-grow: 1;
+    background-color: var(--hybrid-tabs-content-background-color);
+    border-top: var(--hybrid-tabs-content-border-top);
+    max-height:85vh;
+    overflow-y:auto;
+    overflow-x:hidden;
+  }
+  .right-align > .tab-labels {
+    flex-direction: var(--hybrid-tabs-right-align-labels-flex-direction);
+    align-self: var(--hybrid-tabs-right-align-labels-align-self);
+  }
+
+  .center-align > .tab-labels {
+    align-self: var(--hybrid-tabs-center-align-labels-align-self);
+  }
+  .vertical-align {
+    flex-direction: var(--hybrid-tabs-vertical-align-flex-direction);
+  }
+  .horizontal-align {
+    flex-direction: var(--hybrid-tabs-halign-flex-direction);
+  }
+
+  .vertical-align.right-align {
+    flex-direction: var(--hybrid-tabs-valign-right-align-flex-direction);
+  }
+
+  .tab-label:hover,
+  .tab-label.active {
+    border-bottom: var(--hybrid-tabs-label-active-border-bottom);
+    border-color: var(--hybrid-tabs-label-active-border-color);
+  }
+
+  .tab-label.active {
+    color: var(--hybrid-tabs-label-active-hover-color);
+  }
+
+  .vertical-align .tab-label {
+    border: var(--hybrid-tabs-vertical-align-label-border);
+    border-right: var(--hybrid-tabs-vertical-align-label-border-right);
+  }
+
+  .vertical-align.right-align .tab-label {
+    border: var(--hybrid-tabs-valign-ralign-label-border);
+    border-left: var(--hybrid-tabs-valign-ralign-label-border-left);
+  }
+
+  .vertical-align .tab-label:hover,
+  .vertical-align .tab-label.active {
+    border: var(--hybrid-tabs-vertical-align-label-border-active);
+    border-right: var(--hybrid-tabs-vertical-align-label-border-right-active);
+    border-color: var(--hybrid-tabs-vertical-align-label-border-color-active);
+  }
+  .vertical-align.right-align .tab-label:hover,
+  .vertical-align.right-align .tab-label.active {
+    border: var(--hybrid-tabs-valign-ralign-label-border-active);
+    border-left: var(--hybrid-tabs-valign-ralign-label-border-left-active);
+    border-color: var(--hybrid-tabs-valign-ralign-label-border-color-active);
+  }
+
+  .close-icon {
+    font-size: var(--hybrid-tabs-add-icon-font-size);
+    vertical-align: -webkit-baseline-middle;
+    margin-left: var(--hybrid-tabs-add-icon-margin-left);
+  }
+
+  .add-tab-label {
+    font-size: var(--hybrid-tabs-add-label-font-size);
+    text-align: var(--hybrid-tabs-add-label-text-align);
+  }
+  .dragging {
+    border: var(--hybrid-tabs-dragging-border) !important;
+    opacity: 0.8;
+    color: #464646 !important;
+  }
+  .tab-label.active {
+    color: var(--hybrid-tabs-label-active);
+    font-weight: bold;
+  } 
+  .add-tab-icon{
+    --hybrid-icon-color:var(--hybrid-tabs-add-icon-color);
+  }
+  :host{
+    --hybrid-tabs-container-background-color:#ffffff;
+    --hybrid-tabs-container-box-shadow:none;
+    --hybrid-tabs-dragging-start-border:1px dashed black;
+    --hybrid-tabs-dragging-enter-background-color:#1661b1;
+    --hybrid-tabs-va-enter-border: none;
+    --hybrid-tabs-va-enter-border-left: 1px solid #ccc;
+    --hybrid-tabs-va-ra-border:none;
+    --hybrid-tabs-va-ra-border-right:1px solid #ccc;
+    --hybrid-tabs-label-cursor:pointer;
+    --hybrid-tabs-label-padding: 7px 7px 5px 7px;
+    --hybrid-tabs-label-border-bottom: 2px solid transparent;
+    --hybrid-tabs-label-transition: border-color 0.1s ease;
+    --hybrid-tabs-label-user-select: none;
+    --hybrid-tabs-label-hover-color: #1661b1;
+    --hybrid-tabs-label-active-hover-color:#006afe;
+    --hybrid-tabs-content-padding:10px;
+    --hybrid-tabs-content-background-color: #fff;
+    --hybrid-tabs-content-border-top: 1px solid #ccc;
+    --hybrid-tabs-right-align-labels-flex-direction:row-reverse;
+    --hybrid-tabs-right-align-labels-align-self: end;
+    --hybrid-tabs-center-align-labels-align-self:center;
+    --hybrid-tabs-vertical-align-flex-direction:row;
+    --hybrid-tabs-halign-flex-direction:column;
+    --hybrid-tabs-valign-right-align-flex-direction:row-reverse;
+    --hybrid-tabs-label-active-border-bottom:2px solid transparent;
+    --hybrid-tabs-label-active-border-color: rgb(0, 106, 254);
+    --hybrid-tabs-label-active-hover-color: #006afe;
+    --hybrid-tabs-vertical-align-label-border: #006afe;
+    --hybrid-tabs-vertical-align-label-border-right: 2px solid transparent;
+    --hybrid-tabs-valign-ralign-label-border: none;
+    --hybrid-tabs-valign-ralign-label-border-left: 2px solid transparent;
+    --hybrid-tabs-vertical-align-label-border-active: none;
+    --hybrid-tabs-vertical-align-label-border-right-active: 2px solid transparent;
+    --hybrid-tabs-vertical-align-label-border-color-active: rgb(0, 106, 254);
+    --hybrid-tabs-valign-ralign-label-border-active: none;
+    --hybrid-tabs-valign-ralign-label-border-left-active: 2px solid transparent;
+    --hybrid-tabs-valign-ralign-label-border-color-active: rgb(0, 106, 254);
+    --hybrid-tabs-add-icon-font-size: 13px;
+    --hybrid-tabs-add-icon-margin-left: 5px;
+    --hybrid-tabs-add-label-font-size: 13px;
+    --hybrid-tabs-add-label-text-align: center;
+    --hybrid-tabs-dragging-border: 1px dashed gray;
+    --hybrid-tabs-label-active: #000000;
+    --hybrid-tabs-label-color:gray;
+    --hybrid-tabs-add-icon-color: #000000;
+  }
+  @media (prefers-color-scheme: dark) {
+    :host{
+      --hybrid-tabs-container-background-color: #000000;
+      --hybrid-tabs-content-background-color: #2d2d2d;
+      --hybrid-tabs-label-hover-color: #aaa;
+      --hybrid-tabs-label-active:#ffffff;   
+      --hybrid-tabs-add-icon-color: #ffffff;
+    }
+  }
+`;
+//# sourceMappingURL=tabs.style.js.map

package/tabs.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.style.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6LxB,CAAC","sourcesContent":["import {css} from 'lit';\n\nexport const styles = css`\n  :host{\n    display: block;\n    height: 100%;\n  }\n   .tabs-container{\n    background-color:var(--hybrid-tabs-container-background-color);\n    height: 100%;\n   }\n  .tab-labels,\n  .tabs-container {\n    display: flex;\n  }\n\n  .tabs-container {\n    box-shadow: var(--hybrid-tabs-container-box-shadow);\n  }\n\n  .dragging-start {\n    border: var(--hybrid-tabs-dragging-start-border);\n  }\n  .dragging-enter {\n    background-color: var(--hybrid-tabs-dragging-enter-background-color);\n  }\n  .vertical-align > .tab-content {\n    border: var(--hybrid-tabs-va-enter-border);\n    border-left: var(--hybrid-tabs-va-enter-border-left);\n  }\n  .vertical-align.right-align > .tab-content {\n    border: var(--hybrid-tabs-va-ra-border);\n    border-right: var(--hybrid-tabs-va-ra-border-right);\n  }\n\n  .tab-label {\n    cursor: var(--hybrid-tabs-label-cursor);\n    padding: var(--hybrid-tabs-label-padding);\n    border-bottom: var(--hybrid-tabs-label-border-bottom);\n    transition: var(--hybrid-tabs-label-transition);\n    user-select: var(--hybrid-tabs-label-user-select);\n    color:var(--hybrid-tabs-label-color);\n  }\n\n  .tab-label:hover {\n    color: var(--hybrid-tabs-label-hover-color);\n  }\n\n  .tab-label.active {\n    color: var(--hybrid-tabs-label-active-hover-color);\n  }\n\n  .tab-content {\n    padding: var(--hybrid-tabs-content-padding);\n    flex-grow: 1;\n    background-color: var(--hybrid-tabs-content-background-color);\n    border-top: var(--hybrid-tabs-content-border-top);\n    max-height:85vh;\n    overflow-y:auto;\n    overflow-x:hidden;\n  }\n  .right-align > .tab-labels {\n    flex-direction: var(--hybrid-tabs-right-align-labels-flex-direction);\n    align-self: var(--hybrid-tabs-right-align-labels-align-self);\n  }\n\n  .center-align > .tab-labels {\n    align-self: var(--hybrid-tabs-center-align-labels-align-self);\n  }\n  .vertical-align {\n    flex-direction: var(--hybrid-tabs-vertical-align-flex-direction);\n  }\n  .horizontal-align {\n    flex-direction: var(--hybrid-tabs-halign-flex-direction);\n  }\n\n  .vertical-align.right-align {\n    flex-direction: var(--hybrid-tabs-valign-right-align-flex-direction);\n  }\n\n  .tab-label:hover,\n  .tab-label.active {\n    border-bottom: var(--hybrid-tabs-label-active-border-bottom);\n    border-color: var(--hybrid-tabs-label-active-border-color);\n  }\n\n  .tab-label.active {\n    color: var(--hybrid-tabs-label-active-hover-color);\n  }\n\n  .vertical-align .tab-label {\n    border: var(--hybrid-tabs-vertical-align-label-border);\n    border-right: var(--hybrid-tabs-vertical-align-label-border-right);\n  }\n\n  .vertical-align.right-align .tab-label {\n    border: var(--hybrid-tabs-valign-ralign-label-border);\n    border-left: var(--hybrid-tabs-valign-ralign-label-border-left);\n  }\n\n  .vertical-align .tab-label:hover,\n  .vertical-align .tab-label.active {\n    border: var(--hybrid-tabs-vertical-align-label-border-active);\n    border-right: var(--hybrid-tabs-vertical-align-label-border-right-active);\n    border-color: var(--hybrid-tabs-vertical-align-label-border-color-active);\n  }\n  .vertical-align.right-align .tab-label:hover,\n  .vertical-align.right-align .tab-label.active {\n    border: var(--hybrid-tabs-valign-ralign-label-border-active);\n    border-left: var(--hybrid-tabs-valign-ralign-label-border-left-active);\n    border-color: var(--hybrid-tabs-valign-ralign-label-border-color-active);\n  }\n\n  .close-icon {\n    font-size: var(--hybrid-tabs-add-icon-font-size);\n    vertical-align: -webkit-baseline-middle;\n    margin-left: var(--hybrid-tabs-add-icon-margin-left);\n  }\n\n  .add-tab-label {\n    font-size: var(--hybrid-tabs-add-label-font-size);\n    text-align: var(--hybrid-tabs-add-label-text-align);\n  }\n  .dragging {\n    border: var(--hybrid-tabs-dragging-border) !important;\n    opacity: 0.8;\n    color: #464646 !important;\n  }\n  .tab-label.active {\n    color: var(--hybrid-tabs-label-active);\n    font-weight: bold;\n  } \n  .add-tab-icon{\n    --hybrid-icon-color:var(--hybrid-tabs-add-icon-color);\n  }\n  :host{\n    --hybrid-tabs-container-background-color:#ffffff;\n    --hybrid-tabs-container-box-shadow:none;\n    --hybrid-tabs-dragging-start-border:1px dashed black;\n    --hybrid-tabs-dragging-enter-background-color:#1661b1;\n    --hybrid-tabs-va-enter-border: none;\n    --hybrid-tabs-va-enter-border-left: 1px solid #ccc;\n    --hybrid-tabs-va-ra-border:none;\n    --hybrid-tabs-va-ra-border-right:1px solid #ccc;\n    --hybrid-tabs-label-cursor:pointer;\n    --hybrid-tabs-label-padding: 7px 7px 5px 7px;\n    --hybrid-tabs-label-border-bottom: 2px solid transparent;\n    --hybrid-tabs-label-transition: border-color 0.1s ease;\n    --hybrid-tabs-label-user-select: none;\n    --hybrid-tabs-label-hover-color: #1661b1;\n    --hybrid-tabs-label-active-hover-color:#006afe;\n    --hybrid-tabs-content-padding:10px;\n    --hybrid-tabs-content-background-color: #fff;\n    --hybrid-tabs-content-border-top: 1px solid #ccc;\n    --hybrid-tabs-right-align-labels-flex-direction:row-reverse;\n    --hybrid-tabs-right-align-labels-align-self: end;\n    --hybrid-tabs-center-align-labels-align-self:center;\n    --hybrid-tabs-vertical-align-flex-direction:row;\n    --hybrid-tabs-halign-flex-direction:column;\n    --hybrid-tabs-valign-right-align-flex-direction:row-reverse;\n    --hybrid-tabs-label-active-border-bottom:2px solid transparent;\n    --hybrid-tabs-label-active-border-color: rgb(0, 106, 254);\n    --hybrid-tabs-label-active-hover-color: #006afe;\n    --hybrid-tabs-vertical-align-label-border: #006afe;\n    --hybrid-tabs-vertical-align-label-border-right: 2px solid transparent;\n    --hybrid-tabs-valign-ralign-label-border: none;\n    --hybrid-tabs-valign-ralign-label-border-left: 2px solid transparent;\n    --hybrid-tabs-vertical-align-label-border-active: none;\n    --hybrid-tabs-vertical-align-label-border-right-active: 2px solid transparent;\n    --hybrid-tabs-vertical-align-label-border-color-active: rgb(0, 106, 254);\n    --hybrid-tabs-valign-ralign-label-border-active: none;\n    --hybrid-tabs-valign-ralign-label-border-left-active: 2px solid transparent;\n    --hybrid-tabs-valign-ralign-label-border-color-active: rgb(0, 106, 254);\n    --hybrid-tabs-add-icon-font-size: 13px;\n    --hybrid-tabs-add-icon-margin-left: 5px;\n    --hybrid-tabs-add-label-font-size: 13px;\n    --hybrid-tabs-add-label-text-align: center;\n    --hybrid-tabs-dragging-border: 1px dashed gray;\n    --hybrid-tabs-label-active: #000000;\n    --hybrid-tabs-label-color:gray;\n    --hybrid-tabs-add-icon-color: #000000;\n  }\n  @media (prefers-color-scheme: dark) {\n    :host{\n      --hybrid-tabs-container-background-color: #000000;\n      --hybrid-tabs-content-background-color: #2d2d2d;\n      --hybrid-tabs-label-hover-color: #aaa;\n      --hybrid-tabs-label-active:#ffffff;   \n      --hybrid-tabs-add-icon-color: #ffffff;\n    }\n  }\n`;\n"]}

package/templates/add-tab.template.d.ts

@@ -0,0 +1,2 @@
+export declare const addTabTemplate: (handlers: any) => import("lit").TemplateResult<1>;
+//# sourceMappingURL=add-tab.template.d.ts.map

package/templates/add-tab.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-tab.template.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/templates/add-tab.template.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,cAAc,aAAc,GAAG,oCAS3C,CAAC"}

package/templates/add-tab.template.js

@@ -0,0 +1,13 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { html } from 'lit';
+export const addTabTemplate = (handlers) => {
+    return html ` <div
+    class="tab-label add-tab-label"
+    @click=${() => {
+        handlers.clickHandler();
+    }}
+  >
+    <hy-icon name="plus"></hy-icon>
+  </div>`;
+};
+//# sourceMappingURL=add-tab.template.js.map

package/templates/add-tab.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-tab.template.js","sourceRoot":"","sources":["../../../../src/components/tabs/templates/add-tab.template.ts"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,QAAa,EAAE,EAAE;IAC9C,OAAO,IAAI,CAAA;;aAEA,GAAG,EAAE;QACZ,QAAQ,CAAC,YAAY,EAAE,CAAC;IAC1B,CAAC;;;SAGI,CAAC;AACV,CAAC,CAAC","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {html} from 'lit';\n\nexport const addTabTemplate = (handlers: any) => {\n  return html` <div\n    class=\"tab-label add-tab-label\"\n    @click=${() => {\n      handlers.clickHandler();\n    }}\n  >\n    <hy-icon name=\"plus\"></hy-icon>\n  </div>`;\n};\n"]}