@omegagrid/tabs 0.10.2 → 0.10.4

package/dist/components/tabSplitContainer.js

@@ -0,0 +1,291 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var TabSplitContainer_1;
+import { LitElement, html, css } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { dom } from "@omegagrid/core";
+import { TabContainer } from "./tabContainer";
+import { Tabs } from "./tabs";
+import { TabSplitContainerModel } from "../model";
+let TabSplitContainer = TabSplitContainer_1 = class TabSplitContainer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.addButton = false;
+        this.closable = false;
+        this.singleActive = false;
+        this.tabPosition = 'top';
+        this.scrollableTabs = false;
+        this.tabContainers = new Set();
+        this.loadState = 0;
+        this._createTabContainer = (containerIndex) => {
+            const component = dom.createElement('og-tabcontainer');
+            component.draggableTabs = true;
+            component.inactive = this.singleActive;
+            component.index = containerIndex;
+            component.parentContainer = this;
+            component.tabPosition = this.tabPosition;
+            this.model.items = this.model.items ?? [];
+            component.closable = this.closable;
+            component.addButton = this.addButton;
+            component.scrollableTabs = this.scrollableTabs;
+            component.style.height = '100%';
+            const item = this.model.items[containerIndex];
+            component.items = item?.tabs ?? [];
+            component.selectedIndex = item.selectedIndex;
+            component.topLevelComponent = this.topLevelComponent;
+            //component.actions = [{key: 'split', icon: 'table-columns'}];
+            // component.addEventListener('tabs.action.split', (e) => {
+            // 	e.stopPropagation();
+            // 	const newItem: TabSplitContainerItem = {size: null, tabs: []};
+            // 	this.model.items.splice(containerIndex + 1, 0, newItem);
+            // 	this.model.items.forEach(item => item.size = null);
+            // 	this.requestUpdate();
+            // });
+            component.addEventListener('tab.remove', () => {
+                if (component.tabs.items.length == 0) {
+                    if (this.model.items.length > 1)
+                        this.model.items.splice(containerIndex, 1);
+                    this.model.items.forEach(item => item.size = null);
+                    this.requestUpdate();
+                }
+                this.removeEmptyContainers();
+            });
+            component.addEventListener('tab.move', () => {
+                this.removeEmptyContainers();
+            });
+            component.addEventListener('tab.select', (e) => {
+                if (e.tabs.topLevelComponent == this.topLevelComponent && item) {
+                    item.selectedIndex = e.tabs.selectedIndex;
+                    if (this.singleActive) {
+                        this._activeTabContainer = component;
+                        this._activeTab = e.tab;
+                        this.updateActiveTab();
+                    }
+                }
+            });
+            component.createComponent = this.createComponent;
+            return component;
+        };
+        this._createSplitContainer = (containerIndex) => {
+            const component = dom.createElement('og-tabsplitcontainer');
+            component.style.height = '100%';
+            component.addButton = this.addButton;
+            component.scrollableTabs = this.scrollableTabs;
+            component.tabPosition = this.tabPosition;
+            component.model = this.model.items[containerIndex].container;
+            component.createComponent = this.createComponent;
+            component.topLevelComponent = this.topLevelComponent;
+            component.closable = this.closable;
+            component.singleActive = this.singleActive;
+            return component;
+        };
+        this._createSplitContainerComponent = (id) => new Promise((resolve, reject) => {
+            const containerIndex = id;
+            const container = this.model.items ? this.model.items[containerIndex] : null;
+            if (container) {
+                const containerComponent = container.container
+                    ? this._createSplitContainer(containerIndex)
+                    : this._createTabContainer(containerIndex);
+                containerComponent.addEventListener('load', () => {
+                    this.loadState++;
+                    if (this.loadState == this.splitContainer.items.length)
+                        this.dispatchEvent(new Event('load'));
+                });
+                this.tabContainers.add(containerComponent);
+                resolve(containerComponent);
+            }
+            else {
+                reject();
+            }
+        });
+        this._onDrop = (e) => {
+            if (!TabContainer.dragParent && !Tabs.dragParent)
+                return;
+            if (TabContainer.dragParent.topLevelComponent != this.topLevelComponent && Tabs.dragParent.topLevelComponent != this.topLevelComponent)
+                return;
+            e.stopImmediatePropagation();
+            const tabContainer1 = TabContainer.dragParent;
+            const tabContainer2 = TabContainer.dropTarget;
+            TabContainer.dragParent = null;
+            TabContainer.dropTarget = null;
+            if (!tabContainer1 || !tabContainer2) {
+                if (tabContainer1 && tabContainer1.parentContainer.model.items[tabContainer1.index].tabs.length == 0) {
+                    tabContainer1.parentContainer.model.items.splice(tabContainer1.index, 1);
+                }
+                tabContainer1.parentContainer.splitContainer.requestUpdate();
+                return;
+            }
+            const tab = tabContainer1.tabs.removeTab(Tabs.dragIndex, false);
+            const dropOrientation = TabContainer.dropPosition
+                ? ['left', 'right'].includes(TabContainer.dropPosition) ? 'horizontal' : 'vertical'
+                : null;
+            const parentContainer2 = tabContainer2?.parentContainer;
+            if (parentContainer2) {
+                if (dropOrientation == null) {
+                    const item = parentContainer2.model.items[tabContainer2.index];
+                    item.tabs.push(tab);
+                }
+                else if (dropOrientation == parentContainer2.model.orientation) {
+                    parentContainer2.model.items.splice(tabContainer2.index + (['right', 'bottom'].includes(TabContainer.dropPosition) ? 1 : 0), 0, { tabs: [tab] });
+                }
+                else {
+                    const item = parentContainer2.model.items[tabContainer2.index];
+                    item.container = new TabSplitContainerModel({
+                        orientation: dropOrientation,
+                        items: [{
+                                tabs: item.tabs
+                            }, {
+                                tabs: [tab]
+                            }]
+                    });
+                }
+                parentContainer2.splitContainer.resetContainerSizes();
+                parentContainer2.splitContainer.items = parentContainer2.model.items;
+                // parentContainer2.splitContainer.requestUpdate();
+            }
+            const parentContainer1 = tabContainer1?.parentContainer;
+            if (parentContainer1) {
+                for (let i = parentContainer1.model.items.length - 1; i >= 0; i--) {
+                    const item = parentContainer1.model.items[i];
+                    if ((!item.tabs || item.tabs.length == 0) && !item.container) {
+                        parentContainer1.model.items.splice(i, 1);
+                    }
+                }
+                parentContainer1.splitContainer.resetContainerSizes();
+                parentContainer1.splitContainer.requestUpdate();
+            }
+        };
+        this.render = () => this.model ? html `
+		<og-splitcontainer
+			orientation=${this.model?.orientation}
+			.items="${this.model.items ?? []}"
+			.createComponent="${this._createSplitContainerComponent}"
+			@drop="${this._onDrop}">
+		</og-splitcontainer>
+	` : '';
+    }
+    get activeTabContainer() { return this._activeTabContainer; }
+    get activeTab() { return this._activeTab; }
+    walk(cb) {
+        this.tabContainers.forEach(container => {
+            if (container instanceof TabSplitContainer_1)
+                container.walk(cb);
+            else {
+                const res = cb(this, container);
+                if (res === false)
+                    return;
+            }
+        });
+    }
+    willUpdate() {
+        if (!this.topLevelComponent)
+            this.topLevelComponent = this;
+        if (this.model && !this.model.orientation)
+            this.model.orientation = 'horizontal';
+    }
+    updateTabs() { this.tabContainers.forEach(tabContainer => tabContainer.updateTabs()); }
+    updateTab(id, tab) {
+        this.walk((_splitContainer, tabContainer) => {
+            const tabIndex = tabContainer.items.findIndex(item => item.id == id);
+            const currentTab = tabContainer.tabs.items[tabIndex];
+            if (currentTab) {
+                Object.assign(currentTab, tab);
+                if (tabContainer.selectedIndex == tabIndex && id != tab.id) {
+                    // component is visible and id has changed
+                    this.updateTabs();
+                    tabContainer.loadComponent(currentTab.id);
+                    tabContainer.components.delete(id);
+                    this.updateActiveTab();
+                }
+                return false;
+            }
+        });
+    }
+    async removeEmptyContainers() {
+        if (this.model.clean()) {
+            this.requestUpdate();
+            await this.updateComplete;
+            this.layout();
+        }
+    }
+    updateActiveTab() {
+        if (!this.singleActive)
+            return;
+        this.topLevelComponent.walk((_splitContainer, tabContainer) => {
+            tabContainer.inactive = tabContainer != this.activeTabContainer;
+        });
+    }
+    activate(id) {
+        this.open({ id });
+    }
+    open(item, containerIndex = 0) {
+        let container = this.splitContainer.getContainerComponent(containerIndex);
+        let model = this.model;
+        // prevent opening the same tab twice
+        this.walk((splitContainer, tabContainer) => {
+            for (let i = 0; i < tabContainer.items.length; i++) {
+                const tabItem = tabContainer.items[i];
+                if (tabItem.id == item.id) {
+                    container = tabContainer;
+                    model = splitContainer.model;
+                    container.selectedIndex = i;
+                    containerIndex = container.index;
+                    return false;
+                }
+            }
+        });
+        container.open(item);
+        if (model.items[containerIndex]) {
+            model.items[containerIndex].tabs = container.items;
+        }
+    }
+    layout() {
+        this.splitContainer?.layout();
+    }
+};
+TabSplitContainer.styles = css `
+		:host {
+			display: block;
+		}
+
+		og-splitcontainer {
+			height: 100%;
+		}
+	`;
+__decorate([
+    property({ type: Object })
+], TabSplitContainer.prototype, "topLevelComponent", void 0);
+__decorate([
+    property({ type: Object })
+], TabSplitContainer.prototype, "model", void 0);
+__decorate([
+    property({ type: Boolean })
+], TabSplitContainer.prototype, "addButton", void 0);
+__decorate([
+    property({ type: Boolean })
+], TabSplitContainer.prototype, "closable", void 0);
+__decorate([
+    property({ type: Boolean })
+], TabSplitContainer.prototype, "singleActive", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TabSplitContainer.prototype, "tabPosition", void 0);
+__decorate([
+    property({ type: Boolean })
+], TabSplitContainer.prototype, "scrollableTabs", void 0);
+__decorate([
+    property({ type: Object })
+], TabSplitContainer.prototype, "createComponent", void 0);
+__decorate([
+    query('og-splitcontainer')
+], TabSplitContainer.prototype, "splitContainer", void 0);
+TabSplitContainer = TabSplitContainer_1 = __decorate([
+    customElement('og-tabsplitcontainer')
+    // @stylable({vars: ['tab-*']})
+], TabSplitContainer);
+export { TabSplitContainer };
+//# sourceMappingURL=tabSplitContainer.js.map

package/dist/components/tabSplitContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabSplitContainer.js","sourceRoot":"","sources":["../../src/components/tabSplitContainer.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from \"lit\";\nimport { customElement, property, query } from \"lit/decorators.js\";\nimport { TabItem } from '../types';\nimport { dom, ComponentFactory, SplitContainer, Layout, ComponentId, Orientation, VerticalPosition } from \"@omegagrid/core\";\nimport { TabContainer } from \"./tabContainer\";\nimport { TabEvent, Tabs } from \"./tabs\";\nimport { TabSplitContainerModel } from \"../model\";\n\ntype TabSplitContainerTabContainer = TabContainer & {\n\tindex: number,\n\tparentContainer: TabSplitContainer\n};\n\n@customElement('og-tabsplitcontainer')\n// @stylable({vars: ['tab-*']})\nexport class TabSplitContainer extends LitElement implements Layout {\n\n\tstatic styles = css`\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\n\t\tog-splitcontainer {\n\t\t\theight: 100%;\n\t\t}\n\t`;\n\n\t@property({type: Object})\n\ttopLevelComponent: HTMLElement;\n\n\t@property({type: Object})\n\tmodel: TabSplitContainerModel;\n\n\t@property({type: Boolean})\n\taddButton = false;\n\n\t@property({type: Boolean})\n\tclosable = false;\n\n\t@property({type: Boolean})\n\tsingleActive = false;\n\t\n\t@property({type: String, reflect: true})\n\ttabPosition: VerticalPosition = 'top';\n\n\t@property({type: Boolean})\n\tscrollableTabs = false;\n\n\t@property({type: Object})\n\tcreateComponent: ComponentFactory;\n\n\t@query('og-splitcontainer')\n\tsplitContainer: SplitContainer;\n\n\ttabContainers = new Set<TabSplitContainerTabContainer|TabSplitContainer>();\n\t\n\tprivate _activeTabContainer: TabContainer;\n\tget activeTabContainer() { return this._activeTabContainer }\n\t\n\tprivate _activeTab: TabItem;\n\tget activeTab() { return this._activeTab }\n\n\tprivate loadState = 0;\n\n\twalk(cb: (splitContainer: TabSplitContainer, tabContainer: TabSplitContainerTabContainer) => boolean|void) {\n\t\tthis.tabContainers.forEach(container => {\n\t\t\tif (container instanceof TabSplitContainer) container.walk(cb);\n\t\t\telse {\n\t\t\t\tconst res = cb(this, container);\n\t\t\t\tif (res === false) return;\n\t\t\t}\n\t\t});\n\t}\n\t\n\twillUpdate() {\n\t\tif (!this.topLevelComponent) this.topLevelComponent = this;\n\t\tif (this.model && !this.model.orientation) this.model.orientation = 'horizontal';\n\t}\n\n\tupdateTabs() { this.tabContainers.forEach(tabContainer => tabContainer.updateTabs()) }\n\n\tupdateTab(id: ComponentId, tab: Partial<TabItem>) {\n\t\tthis.walk((_splitContainer, tabContainer) => {\n\t\t\tconst tabIndex = tabContainer.items.findIndex(item => item.id == id);\n\t\t\tconst currentTab = tabContainer.tabs.items[tabIndex];\n\t\t\tif (currentTab) {\n\t\t\t\tObject.assign(currentTab, tab);\n\t\t\t\tif (tabContainer.selectedIndex == tabIndex && id != tab.id) {\n\t\t\t\t\t// component is visible and id has changed\n\t\t\t\t\tthis.updateTabs();\n\t\t\t\t\ttabContainer.loadComponent(currentTab.id);\n\t\t\t\t\ttabContainer.components.delete(id);\n\t\t\t\t\tthis.updateActiveTab();\n\t\t\t\t}\n\t\t\t\treturn false;\n\t\t\t}\n\t\t});\n\t}\n\n\tasync removeEmptyContainers() {\n\t\tif (this.model.clean()) {\n\t\t\tthis.requestUpdate();\n\t\t\tawait this.updateComplete;\n\t\t\tthis.layout();\n\t\t}\n\t}\n\n\tupdateActiveTab() {\n\t\tif (!this.singleActive) return;\n\t\t(this.topLevelComponent as TabSplitContainer).walk((_splitContainer, tabContainer) => {\n\t\t\ttabContainer.inactive = tabContainer != this.activeTabContainer;\n\t\t});\n\t}\n\n\t_createTabContainer = (containerIndex: number) => {\n\t\tconst component = dom.createElement<TabSplitContainerTabContainer>('og-tabcontainer');\n\t\tcomponent.draggableTabs = true;\n\t\tcomponent.inactive = this.singleActive;\n\t\tcomponent.index = containerIndex;\n\t\tcomponent.parentContainer = this;\n\t\tcomponent.tabPosition = this.tabPosition;\n\t\tthis.model.items = this.model.items ?? [];\n\t\tcomponent.closable = this.closable;\n\t\tcomponent.addButton = this.addButton;\n\t\tcomponent.scrollableTabs = this.scrollableTabs;\n\t\tcomponent.style.height = '100%';\n\t\tconst item = this.model.items[containerIndex];\n\t\tcomponent.items = item?.tabs ?? [];\n\t\tcomponent.selectedIndex = item.selectedIndex;\n\t\tcomponent.topLevelComponent = this.topLevelComponent;\n\t\t\n\t\t//component.actions = [{key: 'split', icon: 'table-columns'}];\n\n\t\t// component.addEventListener('tabs.action.split', (e) => {\n\t\t// \te.stopPropagation();\n\t\t// \tconst newItem: TabSplitContainerItem = {size: null, tabs: []};\n\t\t// \tthis.model.items.splice(containerIndex + 1, 0, newItem);\n\t\t// \tthis.model.items.forEach(item => item.size = null);\n\t\t// \tthis.requestUpdate();\n\t\t// });\n\n\t\tcomponent.addEventListener('tab.remove', () => {\n\t\t\tif (component.tabs.items.length == 0) {\n\t\t\t\tif (this.model.items.length > 1) this.model.items.splice(containerIndex, 1);\n\t\t\t\tthis.model.items.forEach(item => item.size = null);\n\t\t\t\tthis.requestUpdate();\n\t\t\t}\n\t\t\tthis.removeEmptyContainers();\n\t\t});\n\n\t\tcomponent.addEventListener('tab.move', () => {\n\t\t\tthis.removeEmptyContainers();\n\t\t});\n\n\t\tcomponent.addEventListener('tab.select', (e: TabEvent) => {\n\t\t\tif (e.tabs.topLevelComponent == this.topLevelComponent && item) {\n\t\t\t\titem.selectedIndex = e.tabs.selectedIndex;\n\t\t\t\tif (this.singleActive) {\n\t\t\t\t\tthis._activeTabContainer = component;\n\t\t\t\t\tthis._activeTab = e.tab;\n\t\t\t\t\tthis.updateActiveTab();\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n\t\tcomponent.createComponent = this.createComponent;\n\t\treturn component;\n\t};\n\n\t_createSplitContainer = (containerIndex: number) => {\n\t\tconst component = dom.createElement<TabSplitContainer>('og-tabsplitcontainer');\n\t\tcomponent.style.height = '100%';\n\t\tcomponent.addButton = this.addButton;\n\t\tcomponent.scrollableTabs = this.scrollableTabs;\n\t\tcomponent.tabPosition = this.tabPosition;\n\t\tcomponent.model = this.model.items[containerIndex].container as TabSplitContainerModel;\n\t\tcomponent.createComponent = this.createComponent;\n\t\tcomponent.topLevelComponent = this.topLevelComponent;\n\t\tcomponent.closable = this.closable;\n\t\tcomponent.singleActive = this.singleActive;\n\t\treturn component;\n\t};\n\t\n\t_createSplitContainerComponent = (id: ComponentId) => new Promise<TabContainer|TabSplitContainer>((resolve, reject) => {\n\t\tconst containerIndex = id as number;\n\t\tconst container = this.model.items ? this.model.items[containerIndex] : null;\n\t\tif (container) {\n\t\t\tconst containerComponent = container.container\n\t\t\t\t? this._createSplitContainer(containerIndex)\n\t\t\t\t: this._createTabContainer(containerIndex);\n\t\t\tcontainerComponent.addEventListener('load', () => {\n\t\t\t\tthis.loadState++;\n\t\t\t\tif (this.loadState == this.splitContainer.items.length) this.dispatchEvent(new Event('load'));\n\t\t\t});\n\t\t\tthis.tabContainers.add(containerComponent);\n\t\t\tresolve(containerComponent);\n\t\t} else {\n\t\t\treject();\n\t\t}\n\t});\n\n\t_onDrop = (e: DragEvent) => {\n\t\tif (!TabContainer.dragParent && !Tabs.dragParent) return;\n\t\tif (TabContainer.dragParent.topLevelComponent != this.topLevelComponent && Tabs.dragParent.topLevelComponent != this.topLevelComponent) return;\n\t\t\n\t\te.stopImmediatePropagation();\n\t\tconst tabContainer1 = TabContainer.dragParent as TabSplitContainerTabContainer;\n\t\tconst tabContainer2 = TabContainer.dropTarget as TabSplitContainerTabContainer;\n\t\t\n\t\tTabContainer.dragParent = null;\n\t\tTabContainer.dropTarget = null;\n\t\t\n\t\tif (!tabContainer1 || !tabContainer2) {\n\t\t\tif (tabContainer1 && tabContainer1.parentContainer.model.items[tabContainer1.index].tabs.length == 0) {\n\t\t\t\ttabContainer1.parentContainer.model.items.splice(tabContainer1.index, 1);\n\t\t\t}\n\t\t\ttabContainer1.parentContainer.splitContainer.requestUpdate();\n\t\t\treturn;\n\t\t}\n\t\t\n\t\tconst tab = tabContainer1.tabs.removeTab(Tabs.dragIndex, false);\n\t\tconst dropOrientation: Orientation = TabContainer.dropPosition \n\t\t\t? ['left', 'right'].includes(TabContainer.dropPosition) ? 'horizontal' : 'vertical'\n\t\t\t: null;\n\n\t\tconst parentContainer2 = tabContainer2?.parentContainer;\n\t\tif (parentContainer2) {\n\t\t\tif (dropOrientation == null) {\n\t\t\t\tconst item = parentContainer2.model.items[tabContainer2.index];\n\t\t\t\titem.tabs.push(tab);\n\t\t\t} else if (dropOrientation == parentContainer2.model.orientation) {\n\t\t\t\tparentContainer2.model.items.splice(\n\t\t\t\t\ttabContainer2.index + (['right', 'bottom'].includes(TabContainer.dropPosition) ? 1 : 0), 0, {tabs: [tab]}\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tconst item = parentContainer2.model.items[tabContainer2.index];\n\t\t\t\titem.container = new TabSplitContainerModel({\n\t\t\t\t\torientation: dropOrientation,\n\t\t\t\t\titems: [{\n\t\t\t\t\t\ttabs: item.tabs\n\t\t\t\t\t}, {\n\t\t\t\t\t\ttabs: [tab]\n\t\t\t\t\t}]\n\t\t\t\t});\n\t\t\t}\n\t\t\tparentContainer2.splitContainer.resetContainerSizes();\n\t\t\tparentContainer2.splitContainer.items = parentContainer2.model.items;\n\t\t\t// parentContainer2.splitContainer.requestUpdate();\n\t\t}\n\n\t\tconst parentContainer1 = tabContainer1?.parentContainer;\n\t\tif (parentContainer1) {\n\t\t\tfor (let i = parentContainer1.model.items.length - 1; i >= 0; i--) {\n\t\t\t\tconst item = parentContainer1.model.items[i];\n\t\t\t\tif ((!item.tabs || item.tabs.length == 0) && !item.container) {\n\t\t\t\t\tparentContainer1.model.items.splice(i, 1);\n\t\t\t\t}\n\t\t\t}\n\t\t\tparentContainer1.splitContainer.resetContainerSizes();\n\t\t\tparentContainer1.splitContainer.requestUpdate();\n\t\t}\n\t}\n\n\tactivate(id: ComponentId) {\n\t\tthis.open({ id });\n\t}\n\n\topen(item: TabItem, containerIndex = 0) {\n\t\tlet container = this.splitContainer.getContainerComponent(containerIndex) as TabSplitContainerTabContainer;\n\t\tlet model = this.model;\n\n\t\t// prevent opening the same tab twice\n\t\tthis.walk((splitContainer, tabContainer) => {\n\t\t\tfor (let i = 0; i < tabContainer.items.length; i++) {\n\t\t\t\tconst tabItem = tabContainer.items[i];\n\t\t\t\tif (tabItem.id == item.id) {\n\t\t\t\t\tcontainer = tabContainer;\n\t\t\t\t\tmodel = splitContainer.model;\n\t\t\t\t\tcontainer.selectedIndex = i;\n\t\t\t\t\tcontainerIndex = container.index;\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n\t\tcontainer.open(item);\n\t\tif (model.items[containerIndex]) {\n\t\t\tmodel.items[containerIndex].tabs = container.items;\n\t\t}\n\t}\n\n\trender = () => this.model ? html`\n\t\t<og-splitcontainer\n\t\t\torientation=${this.model?.orientation}\n\t\t\t.items=\"${this.model.items ?? []}\"\n\t\t\t.createComponent=\"${this._createSplitContainerComponent}\"\n\t\t\t@drop=\"${this._onDrop}\">\n\t\t</og-splitcontainer>\n\t` : '';\n\n\tlayout() {\n\t\tthis.splitContainer?.layout();\n\t}\n\n}"]}

package/dist/components/tabs.d.ts

@@ -0,0 +1,66 @@
+import { LitElement } from "lit";
+import { TabItem } from '../types';
+import { ListSelectEvent, Menu, actions, ComponentId, VerticalPosition, HorizontalPosition } from "@omegagrid/core";
+import { TabContainer } from "./tabContainer";
+export declare class TabEvent extends Event {
+    index: number;
+    tabs: Tabs;
+    tab: TabItem;
+    uiEvent: UIEvent;
+    constructor(type: string, args: Partial<TabEvent>);
+}
+export type TabSize = 'auto' | 'stretch' | string | number;
+export declare class Tabs extends LitElement {
+    static styles: import("lit").CSSResult[];
+    static dragParent: Tabs;
+    static dragIndex: number;
+    static dragTarget: Tabs;
+    static dropIndex: number;
+    topLevelComponent: HTMLElement;
+    items: TabItem[];
+    closable: boolean;
+    draggable: boolean;
+    scrollable: boolean;
+    addButton: boolean;
+    selectedIndex: number;
+    actions: actions.Action[];
+    position: VerticalPosition;
+    tabSize: TabSize;
+    tabAlign: HorizontalPosition;
+    empty: HTMLDivElement;
+    marker: HTMLDivElement;
+    overlay: HTMLDivElement;
+    tabs: HTMLDivElement[];
+    parentContainer: TabContainer;
+    menuRef: import("lit-html/directives/ref").Ref<Menu>;
+    get menu(): Menu;
+    private _contextMenuTabIndex;
+    private _contextMenuItems;
+    get selectedItem(): TabItem;
+    get selectedTab(): HTMLDivElement;
+    get container(): TabContainer;
+    updated(): Promise<void>;
+    positionOverlay(target?: HTMLElement): HTMLElement;
+    hideOverlay: () => HTMLElement;
+    selectTab(index: number, dispatchEvent?: boolean): void;
+    getIndexById(id: ComponentId): number;
+    selectTabById(id: ComponentId, dispatchEvent?: boolean): void;
+    addTab(item: TabItem, index?: number): void;
+    removeTab(index: number, dispatchEvent?: boolean): TabItem;
+    _onDragover(e: DragEvent, index: number): void;
+    _onDragStart(_e: DragEvent, index: number): void;
+    _onDragStop(): void;
+    _onDrop(): void;
+    moveTab(fromIndex: number, toIndex: number, dispatchEvent?: boolean): void;
+    _onMenuItemSelect(e: ListSelectEvent): void;
+    _onCrossClick(e: MouseEvent, index: number): void;
+    _onContextMenu(e: MouseEvent, index: number): void;
+    _onActionClick(action: actions.Action): void;
+    disconnectedCallback(): void;
+    _onContainerDragover(e: DragEvent): void;
+    getTabSize: (index: number) => string;
+    animateMarker(): void;
+    renderTabs: () => Generator<unknown, void, unknown>;
+    render: () => import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=tabs.d.ts.map

package/dist/components/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,OAAO,EAAO,eAAe,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAY,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEnI,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAI9C,qBAAa,QAAS,SAAQ,KAAK;IAElC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,IAAI,CAAC;IACX,GAAG,EAAE,OAAO,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;gBAEL,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC,QAAQ,CAAC;CAIjD;AAED,MAAM,MAAM,OAAO,GAAG,MAAM,GAAC,SAAS,GAAC,MAAM,GAAC,MAAM,CAAC;AAWrD,qBACa,IAAK,SAAQ,UAAU;IAEnC,MAAM,CAAC,MAAM,4BAAW;IAExB,MAAM,CAAC,UAAU,EAAE,IAAI,CAAC;IACxB,MAAM,CAAC,SAAS,SAAM;IACtB,MAAM,CAAC,UAAU,EAAE,IAAI,CAAC;IACxB,MAAM,CAAC,SAAS,SAAM;IAGtB,iBAAiB,EAAE,WAAW,CAAC;IAG/B,KAAK,EAAE,OAAO,EAAE,CAAC;IAGjB,QAAQ,UAAS;IAGjB,SAAS,UAAS;IAGlB,UAAU,UAAS;IAGnB,SAAS,UAAS;IAGlB,aAAa,SAAM;IAGnB,OAAO,EAAE,OAAO,CAAC,MAAM,EAAE,CAAC;IAG1B,QAAQ,EAAE,gBAAgB,CAAS;IAGnC,OAAO,EAAE,OAAO,CAAU;IAG1B,QAAQ,EAAE,kBAAkB,CAAU;IAGtC,KAAK,EAAE,cAAc,CAAC;IAGtB,MAAM,EAAE,cAAc,CAAC;IAGvB,OAAO,EAAE,cAAc,CAAC;IAGxB,IAAI,EAAE,cAAc,EAAE,CAAC;IAEvB,eAAe,EAAE,YAAY,CAAC;IAE9B,OAAO,8CAAqB;IAE5B,IAAI,IAAI,SAAgC;IAExC,OAAO,CAAC,oBAAoB,CAAM;IAClC,OAAO,CAAC,iBAAiB,CAAkB;IAE3C,IAAI,YAAY,YAA4C;IAC5D,IAAI,WAAW,mBAA6C;IAE5D,IAAI,SAAS,IACsC,YAAY,CAC9D;IAEK,OAAO;IAOb,eAAe,CAAC,MAAM,CAAC,EAAE,WAAW;IASpC,WAAW,oBAAuC;IAElD,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,aAAa,UAAQ;IAS9C,YAAY,CAAC,EAAE,EAAE,WAAW;IAI5B,aAAa,CAAC,EAAE,EAAE,WAAW,EAAE,aAAa,UAAQ;IAKpD,MAAM,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,SAAyB;IAMpD,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,aAAa,UAAQ;IAiB9C,WAAW,CAAC,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM;IAUvC,YAAY,CAAC,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM;IAOzC,WAAW;IAIX,OAAO;IAeP,OAAO,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,UAAQ;IAQjE,iBAAiB,CAAC,CAAC,EAAE,eAAe;IAyBpC,aAAa,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM;IAK1C,cAAc,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM;IAO3C,cAAc,CAAC,MAAM,EAAE,OAAO,CAAC,MAAM;IAIrC,oBAAoB;IAIpB,oBAAoB,CAAC,CAAC,EAAE,SAAS;IAMjC,UAAU,GAAI,OAAO,MAAM,YAK1B;IAED,aAAa;IAab,UAAU,0CAoCR;IAEF,MAAM,6CA8CJ;CAEF"}