@omegagrid/tabs 0.10.2 → 0.10.4

package/dist/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './tabs';
+export * from './tabContainer';
+export * from './tabSplitContainer';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/index.js

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

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './tabs';\nexport * from './tabContainer';\nexport * from './tabSplitContainer';"]}

package/dist/components/tabContainer.d.ts

@@ -0,0 +1,59 @@
+import { LitElement } from "lit";
+import { ContainerTabItem } from '../types';
+import { ComponentFactory, actions, Layout, ComponentId, DirectionalPosition, VerticalPosition } from "@omegagrid/core";
+import { TabEvent, Tabs, TabSize } from "./tabs";
+export type TabsActionArgs = {
+    index: number;
+};
+export declare class TabContainer extends LitElement implements Layout {
+    #private;
+    static dropPosition: DirectionalPosition;
+    static dragParent: TabContainer;
+    static dropTarget: TabContainer;
+    static styles: import("lit").CSSResult[];
+    set inactive(value: boolean);
+    get inactive(): boolean;
+    topLevelComponent: HTMLElement;
+    items: ContainerTabItem[];
+    closable: boolean;
+    createComponent: ComponentFactory;
+    tabs: Tabs;
+    actions: actions.Action[];
+    addButton: boolean;
+    scrollableTabs: boolean;
+    draggableTabs: boolean;
+    tabSize: TabSize;
+    private _selectedIndex;
+    get selectedIndex(): number;
+    set selectedIndex(value: number);
+    get selectedId(): ComponentId;
+    tabPosition: VerticalPosition;
+    cacheComponents: boolean;
+    container: HTMLDivElement;
+    overlay: HTMLDivElement;
+    readonly components: Map<ComponentId, HTMLElement>;
+    private currentComponent;
+    get component(): HTMLElement;
+    _firstLoad: boolean;
+    _itemMap: Map<ComponentId, ContainerTabItem>;
+    layout(): void;
+    updateTabs(): void;
+    getComponent(componentId: ComponentId): Promise<HTMLElement>;
+    loadComponent(id: ComponentId): Promise<void>;
+    refresh(): void;
+    _onSelect: () => void;
+    _onRemove: (e: TabEvent) => void;
+    open(item: ContainerTabItem, dispatchEvent?: boolean): void;
+    willUpdate(props: Map<PropertyKey, unknown>): void;
+    firstUpdated(): void;
+    positionOverlay(pos: DirectionalPosition): HTMLElement;
+    hideOverlay: () => void;
+    calculateOverlayPosition(x: number, y: number): DirectionalPosition;
+    _onDragover: (e: DragEvent) => void;
+    _onDrop: () => void;
+    _onDragStart: (_e: DragEvent) => void;
+    _onDragStop: () => void;
+    _onTabDrop: (e: DragEvent) => void;
+    render: () => import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=tabContainer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabContainer.d.ts","sourceRoot":"","sources":["../../src/components/tabContainer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAGvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAO,gBAAgB,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAC7H,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEjD,MAAM,MAAM,cAAc,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAA;CACb,CAAA;AAED,qBACa,YAAa,SAAQ,UAAW,YAAW,MAAM;;IAE7D,MAAM,CAAC,YAAY,EAAE,mBAAmB,CAAC;IACzC,MAAM,CAAC,UAAU,EAAE,YAAY,CAAC;IAChC,MAAM,CAAC,UAAU,EAAE,YAAY,CAAC;IAEhC,MAAM,CAAC,MAAM,4BAAW;IAGxB,IACI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAG1B;IACD,IAAI,QAAQ,IAJQ,OAAO,CAIa;IAGxC,iBAAiB,EAAE,WAAW,CAAC;IAG/B,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAG1B,QAAQ,UAAS;IAGjB,eAAe,EAAE,gBAAgB,CAAC;IAGlC,IAAI,EAAE,IAAI,CAAC;IAGX,OAAO,EAAE,OAAO,CAAC,MAAM,EAAE,CAAC;IAG1B,SAAS,UAAS;IAGlB,cAAc,UAAS;IAGvB,aAAa,UAAS;IAGtB,OAAO,EAAE,OAAO,CAAU;IAE1B,OAAO,CAAC,cAAc,CAAM;IAC5B,IACI,aAAa,IAAI,MAAM,CAA+B;IAC1D,IAAI,aAAa,CAAC,KAAK,EAAE,MAAM,EAK9B;IAED,IAAI,UAAU,IAAI,WAAW,CAE5B;IAGD,WAAW,EAAE,gBAAgB,CAAS;IAGtC,eAAe,UAAS;IAGxB,SAAS,EAAE,cAAc,CAAC;IAG1B,OAAO,EAAE,cAAc,CAAC;IAGxB,SAAgB,UAAU,gCAAuC;IACjE,OAAO,CAAC,gBAAgB,CAAc;IACtC,IAAI,SAAS,gBAAmC;IAEhD,UAAU,UAAQ;IAClB,QAAQ,qCAA0C;IAElD,MAAM;IAIN,UAAU;IAEJ,YAAY,CAAC,WAAW,EAAE,WAAW;IAarC,aAAa,CAAC,EAAE,EAAE,WAAW;IAqCnC,OAAO;IAMP,SAAS,aAAwB;IAEjC,SAAS,GAAI,GAAG,QAAQ,UAKtB;IAEF,IAAI,CAAC,IAAI,EAAE,gBAAgB,EAAE,aAAa,UAAO;IAYjD,UAAU,CAAC,KAAK,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAY3C,YAAY;IAIZ,eAAe,CAAC,GAAG,EAAE,mBAAmB;IAkBxC,WAAW,aAGV;IAED,wBAAwB,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM;IAQ7C,WAAW,GAAI,GAAG,SAAS,UAO1B;IAED,OAAO,aAIN;IAED,YAAY,GAAI,IAAI,SAAS,UAE5B;IAED,WAAW,aAEV;IAED,UAAU,GAAI,GAAG,SAAS,UAGzB;IAED,MAAM,6CAqCJ;CAEF"}

package/dist/components/tabContainer.js

@@ -0,0 +1,292 @@
+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 __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _TabContainer_inactive;
+var TabContainer_1;
+import { LitElement, html } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { style } from './tabContainer.style';
+import { dom } from "@omegagrid/core";
+import { Tabs } from "./tabs";
+let TabContainer = TabContainer_1 = class TabContainer extends LitElement {
+    constructor() {
+        super(...arguments);
+        _TabContainer_inactive.set(this, false);
+        this.closable = false;
+        this.addButton = false;
+        this.scrollableTabs = false;
+        this.draggableTabs = false;
+        this.tabSize = 'auto';
+        this._selectedIndex = -1;
+        this.tabPosition = 'top';
+        this.cacheComponents = false;
+        this.components = new Map();
+        this._firstLoad = true;
+        this._itemMap = new Map;
+        this._onSelect = () => this.refresh();
+        this._onRemove = (e) => {
+            this.components.delete(e.tab.id);
+            if (this.tabs.items?.length === 0) {
+                dom.showElement(this.tabs, 'flex');
+            }
+        };
+        this.hideOverlay = () => {
+            dom.hideElement(this.overlay);
+            this.tabs.hideOverlay();
+        };
+        this._onDragover = (e) => {
+            if (!TabContainer_1.dragParent || !Tabs.dragParent)
+                return;
+            if (TabContainer_1.dragParent.topLevelComponent != this.topLevelComponent && Tabs.dragParent.topLevelComponent != this.topLevelComponent)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            e.dataTransfer.dropEffect = 'move';
+            this.positionOverlay(this.calculateOverlayPosition(e.offsetX, e.offsetY));
+        };
+        this._onDrop = () => {
+            if (TabContainer_1.dragParent?.topLevelComponent != this.topLevelComponent && Tabs.dragParent?.topLevelComponent != this.topLevelComponent)
+                return;
+            TabContainer_1.dropTarget = this;
+            this.hideOverlay();
+        };
+        this._onDragStart = (_e) => {
+            TabContainer_1.dragParent = this;
+        };
+        this._onDragStop = () => {
+            TabContainer_1.dragParent = null;
+        };
+        this._onTabDrop = (e) => {
+            TabContainer_1.dragParent = null;
+            e.stopPropagation();
+        };
+        this.render = () => {
+            const tabs = html `
+			<og-tabs
+				class="${this.inactive ? 'inactive' : ''}"
+				style="${this.items?.length ? '' : 'display: none;'}"
+				?scrollable="${this.scrollableTabs}"
+				?draggable="${this.draggableTabs}"
+				.topLevelComponent="${this.topLevelComponent}"
+				.items="${this.items}"
+				.actions="${this.actions}"
+				.selectedIndex="${this.selectedIndex}"
+				.position="${this.tabPosition}"
+				.tabSize="${this.tabSize}"
+				?closable="${this.closable}"
+				?addButton="${this.addButton}"
+				@tab.select="${this._onSelect}"
+				@tab.remove="${this._onRemove}"
+				@dragstart="${this._onDragStart}"
+				@dragstop="${this._onDragStop}"
+				@drop="${this._onTabDrop}">
+			</og-tabs>
+		`;
+            const container = html `
+			<div
+				id="container"
+				@drop="${this._onDrop}"
+				@dragover="${this._onDragover}"
+				@dragleave="${() => this.hideOverlay()}">
+			</div>
+		`;
+            return html `
+			${this.tabPosition == 'top' ? tabs : container}
+			${this.tabPosition == 'bottom' ? tabs : container}
+			<div id="overlay" style="display: none"></div>
+		`;
+        };
+    }
+    set inactive(value) {
+        __classPrivateFieldSet(this, _TabContainer_inactive, value, "f");
+        if (this.tabs)
+            this.tabs.classList.toggle('inactive', value);
+    }
+    get inactive() { return __classPrivateFieldGet(this, _TabContainer_inactive, "f"); }
+    get selectedIndex() { return this._selectedIndex; }
+    set selectedIndex(value) {
+        if (value != this._selectedIndex) {
+            this.requestUpdate('selectedIndex', this._selectedIndex);
+            this._selectedIndex = value;
+        }
+    }
+    get selectedId() {
+        return this.tabs?.selectedItem?.id;
+    }
+    get component() { return this.currentComponent; }
+    layout() {
+        if (this.currentComponent?.layout)
+            this.currentComponent.layout();
+    }
+    updateTabs() { this.tabs.requestUpdate(); }
+    async getComponent(componentId) {
+        if (!this.createComponent)
+            return null;
+        const cacheComponent = this.cacheComponents || this._itemMap?.get(componentId)?.preventDisconnect;
+        if (!cacheComponent || !this.components.has(componentId)) {
+            const component = await this.createComponent(componentId);
+            component.dataset.preventDisconnect = this._itemMap?.get(componentId)?.preventDisconnect ? '1' : '0';
+            if (!cacheComponent)
+                return component;
+            this.components.set(componentId, component);
+        }
+        return this.components.get(componentId);
+    }
+    async loadComponent(id) {
+        if (id != null) {
+            const prevComponent = this.currentComponent;
+            this.currentComponent = await this.getComponent(id);
+            if (prevComponent) {
+                const preventDisconnect = prevComponent?.dataset?.preventDisconnect === '1';
+                if (preventDisconnect) {
+                    dom.hideElement(prevComponent);
+                }
+                else {
+                    prevComponent.remove();
+                }
+            }
+            if (this.currentComponent) {
+                if (this.currentComponent.parentElement !== this.container) {
+                    dom.appendElement(this.container, this.currentComponent);
+                }
+                dom.showElement(this.currentComponent);
+            }
+            if (this._firstLoad) {
+                this._firstLoad = false;
+                this.dispatchEvent(new Event('load'));
+            }
+        }
+        else {
+            dom.empty(this.container);
+            this.currentComponent = null;
+        }
+        if (this._firstLoad) {
+            this._firstLoad = false;
+            this.layout();
+        }
+    }
+    refresh() {
+        const id = this.tabs?.selectedItem?.id;
+        this._selectedIndex = this.tabs?.selectedIndex ?? -1;
+        if (id != null)
+            this.loadComponent(this.tabs.selectedItem?.id);
+    }
+    open(item, dispatchEvent = true) {
+        const tabIndex = this.tabs.getIndexById(item.id);
+        if (tabIndex > -1) {
+            this.tabs.selectTab(tabIndex, dispatchEvent);
+        }
+        else {
+            this.tabs.addTab(item);
+            this.tabs.selectTabById(item.id, dispatchEvent);
+        }
+        dom.showElement(this.tabs, 'flex');
+    }
+    willUpdate(props) {
+        if (!this.topLevelComponent)
+            this.topLevelComponent = this;
+        this.selectedIndex = this.items?.length > 0
+            ? Math.max(0, Math.min(this.selectedIndex ?? -1, this.items.length - 1))
+            : -1;
+        if (props.has('items')) {
+            this._firstLoad = true;
+            this._itemMap = new Map(this.items.map(item => [item.id, item]));
+        }
+    }
+    firstUpdated() {
+        if (this.selectedIndex > -1)
+            this.open(this.items[this.selectedIndex]);
+    }
+    positionOverlay(pos) {
+        TabContainer_1.dropPosition = pos;
+        this.tabs.hideOverlay();
+        if (pos == null) {
+            this.tabs.positionOverlay(this.tabs.empty);
+            return dom.hideElement(this.overlay);
+        }
+        dom.showElement(this.overlay);
+        dom.setPosition(this.overlay, {
+            t: (pos == 'bottom' ? this.container.clientHeight / 2 : 0) + this.container.offsetTop,
+            l: pos == 'right' ? this.container.clientWidth / 2 : 0,
+            b: pos == 'top' ? this.container.clientHeight / 2 : 0,
+            r: pos == 'left' ? this.container.clientWidth / 2 : 0,
+        });
+    }
+    calculateOverlayPosition(x, y) {
+        const [w, h] = [this.container.clientWidth, this.container.clientHeight];
+        const margin = 0.3;
+        if (x > w * margin && x < w - (w * margin) && y > h * margin && y < h - (h * margin))
+            return null;
+        const [q1, q2] = [w / h > x / y, w / h > x / (h - y)];
+        return (q1 ? (q2 ? 'left' : 'bottom') : (q2 ? 'top' : 'right'));
+    }
+};
+_TabContainer_inactive = new WeakMap();
+TabContainer.styles = [style];
+__decorate([
+    property({ type: Boolean, noAccessor: true })
+], TabContainer.prototype, "inactive", null);
+__decorate([
+    property({ type: Object })
+], TabContainer.prototype, "topLevelComponent", void 0);
+__decorate([
+    property({ type: Array })
+], TabContainer.prototype, "items", void 0);
+__decorate([
+    property({ type: Boolean })
+], TabContainer.prototype, "closable", void 0);
+__decorate([
+    property({ type: Object })
+], TabContainer.prototype, "createComponent", void 0);
+__decorate([
+    query('og-tabs')
+], TabContainer.prototype, "tabs", void 0);
+__decorate([
+    property({ type: Array })
+], TabContainer.prototype, "actions", void 0);
+__decorate([
+    property({ type: Boolean })
+], TabContainer.prototype, "addButton", void 0);
+__decorate([
+    property({ type: Boolean })
+], TabContainer.prototype, "scrollableTabs", void 0);
+__decorate([
+    property({ type: Boolean })
+], TabContainer.prototype, "draggableTabs", void 0);
+__decorate([
+    property({ type: String })
+], TabContainer.prototype, "tabSize", void 0);
+__decorate([
+    property({ type: Number, reflect: true, noAccessor: true })
+], TabContainer.prototype, "selectedIndex", null);
+__decorate([
+    property({ type: String, reflect: true })
+], TabContainer.prototype, "tabPosition", void 0);
+__decorate([
+    property({ type: Boolean })
+], TabContainer.prototype, "cacheComponents", void 0);
+__decorate([
+    query('#container')
+], TabContainer.prototype, "container", void 0);
+__decorate([
+    query('#overlay')
+], TabContainer.prototype, "overlay", void 0);
+TabContainer = TabContainer_1 = __decorate([
+    customElement('og-tabcontainer')
+], TabContainer);
+export { TabContainer };
+//# sourceMappingURL=tabContainer.js.map

package/dist/components/tabContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabContainer.js","sourceRoot":"","sources":["../../src/components/tabContainer.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from \"lit\";\nimport { customElement, property, query } from \"lit/decorators.js\";\nimport { style } from './tabContainer.style';\nimport { ContainerTabItem } from '../types';\nimport { dom, ComponentFactory, actions, Layout, ComponentId, DirectionalPosition, VerticalPosition } from \"@omegagrid/core\";\nimport { TabEvent, Tabs, TabSize } from \"./tabs\";\n\nexport type TabsActionArgs = {\n\tindex: number\n}\n\n@customElement('og-tabcontainer')\nexport class TabContainer extends LitElement implements Layout {\n\n\tstatic dropPosition: DirectionalPosition;\n\tstatic dragParent: TabContainer;\n\tstatic dropTarget: TabContainer;\n\n\tstatic styles = [style];\n\n\t#inactive = false;\n\t@property({type: Boolean, noAccessor: true})\n\tset inactive(value: boolean) {\n\t\tthis.#inactive = value;\n\t\tif (this.tabs) this.tabs.classList.toggle('inactive', value);\n\t}\n\tget inactive() { return this.#inactive }\n\n\t@property({type: Object})\n\ttopLevelComponent: HTMLElement;\n\n\t@property({type: Array})\n\titems: ContainerTabItem[];\n\n\t@property({type: Boolean})\n\tclosable = false;\n\n\t@property({type: Object})\n\tcreateComponent: ComponentFactory;\n\n\t@query('og-tabs')\n\ttabs: Tabs;\n\n\t@property({type: Array})\n\tactions: actions.Action[];\n\n\t@property({type: Boolean})\n\taddButton = false;\n\n\t@property({type: Boolean})\n\tscrollableTabs = false;\n\n\t@property({type: Boolean})\n\tdraggableTabs = false;\n\n\t@property({type: String})\n\ttabSize: TabSize = 'auto';\n\n\tprivate _selectedIndex = -1;\n\t@property({type: Number, reflect: true, noAccessor: true})\n\tget selectedIndex(): number { return this._selectedIndex }\n\tset selectedIndex(value: number) {\n\t\tif (value != this._selectedIndex) {\n\t\t\tthis.requestUpdate('selectedIndex', this._selectedIndex);\n\t\t\tthis._selectedIndex = value;\n\t\t}\n\t}\n\n\tget selectedId(): ComponentId {\n\t\treturn this.tabs?.selectedItem?.id;\n\t}\n\n\t@property({type: String, reflect: true})\n\ttabPosition: VerticalPosition = 'top';\n\n\t@property({type: Boolean})\n\tcacheComponents = false;\n\n\t@query('#container')\n\tcontainer: HTMLDivElement;\n\n\t@query('#overlay')\n\toverlay: HTMLDivElement;\n\n\n\tpublic readonly components = new Map<ComponentId, HTMLElement>();\n\tprivate currentComponent: HTMLElement;\n\tget component() { return this.currentComponent }\n\n\t_firstLoad = true;\n\t_itemMap = new Map<ComponentId, ContainerTabItem>;\n\n\tlayout() {\n\t\tif ((this.currentComponent as Layout)?.layout) (this.currentComponent as Layout).layout();\n\t}\n\n\tupdateTabs() { this.tabs.requestUpdate() }\n\n\tasync getComponent(componentId: ComponentId) {\n\t\tif (!this.createComponent) return null;\n\n\t\tconst cacheComponent = this.cacheComponents || this._itemMap?.get(componentId)?.preventDisconnect;\n\t\tif (!cacheComponent || !this.components.has(componentId)) {\n\t\t\tconst component = await this.createComponent(componentId);\n\t\t\tcomponent.dataset.preventDisconnect = this._itemMap?.get(componentId)?.preventDisconnect ? '1' : '0';\n\t\t\tif (!cacheComponent) return component;\n\t\t\tthis.components.set(componentId, component);\n\t\t}\n\t\treturn this.components.get(componentId);\n\t}\n\n\tasync loadComponent(id: ComponentId) {\n\t\tif (id != null) {\n\t\t\tconst prevComponent = this.currentComponent;\n\t\t\tthis.currentComponent = await this.getComponent(id);\n\n\t\t\tif (prevComponent) {\n\t\t\t\tconst preventDisconnect = prevComponent?.dataset?.preventDisconnect === '1';\n\n\t\t\t\tif (preventDisconnect) {\n\t\t\t\t\tdom.hideElement(prevComponent);\n\t\t\t\t} else {\n\t\t\t\t\tprevComponent.remove();\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (this.currentComponent) {\n\t\t\t\tif (this.currentComponent.parentElement !== this.container) {\n\t\t\t\t\tdom.appendElement(this.container, this.currentComponent);\n\t\t\t\t}\n\t\t\t\tdom.showElement(this.currentComponent);\n\t\t\t}\n\n\t\t\tif (this._firstLoad) {\n\t\t\t\tthis._firstLoad = false;\n\t\t\t\tthis.dispatchEvent(new Event('load'));\n\t\t\t}\n\t\t} else {\n\t\t\tdom.empty(this.container);\n\t\t\tthis.currentComponent = null;\n\t\t}\n\n\t\tif (this._firstLoad) {\n\t\t\tthis._firstLoad = false;\n\t\t\tthis.layout();\n\t\t}\n\t}\n\n\trefresh() {\n\t\tconst id = this.tabs?.selectedItem?.id;\n\t\tthis._selectedIndex = this.tabs?.selectedIndex ?? -1;\n\t\tif (id != null)\tthis.loadComponent(this.tabs.selectedItem?.id);\n\t}\n\n\t_onSelect = () => this.refresh();\n\n\t_onRemove = (e: TabEvent) => {\n\t\tthis.components.delete(e.tab.id);\n\t\tif (this.tabs.items?.length === 0) {\n\t\t\tdom.showElement(this.tabs, 'flex');\n\t\t}\n\t};\n\n\topen(item: ContainerTabItem, dispatchEvent = true) {\n\t\tconst tabIndex = this.tabs.getIndexById(item.id);\n\t\tif (tabIndex > -1) {\n\t\t\tthis.tabs.selectTab(tabIndex, dispatchEvent);\n\t\t} else {\n\t\t\tthis.tabs.addTab(item);\n\t\t\tthis.tabs.selectTabById(item.id, dispatchEvent);\n\t\t}\n\n\t\tdom.showElement(this.tabs, 'flex');\n\t}\n\n\twillUpdate(props: Map<PropertyKey, unknown>) {\n\t\tif (!this.topLevelComponent) this.topLevelComponent = this;\n\t\tthis.selectedIndex = this.items?.length > 0\n\t\t\t? Math.max(0, Math.min(this.selectedIndex ?? -1, this.items.length - 1))\n\t\t\t: -1;\n\n\t\tif (props.has('items')) {\n\t\t\tthis._firstLoad = true;\n\t\t\tthis._itemMap = new Map(this.items.map(item => [item.id, item]));\n\t\t}\n\t}\n\n\tfirstUpdated() {\n\t\tif (this.selectedIndex > -1) this.open(this.items[this.selectedIndex]);\n\t}\n\n\tpositionOverlay(pos: DirectionalPosition) {\n\t\tTabContainer.dropPosition = pos;\n\n\t\tthis.tabs.hideOverlay();\n\t\tif (pos == null) {\n\t\t\tthis.tabs.positionOverlay(this.tabs.empty);\n\t\t\treturn dom.hideElement(this.overlay);\n\t\t}\n\n\t\tdom.showElement(this.overlay);\n\t\tdom.setPosition(this.overlay, {\n\t\t\tt: (pos == 'bottom' ? this.container.clientHeight / 2 : 0) + this.container.offsetTop,\n\t\t\tl: pos == 'right' ? this.container.clientWidth / 2 : 0,\n\t\t\tb: pos == 'top' ? this.container.clientHeight / 2 : 0,\n\t\t\tr: pos == 'left' ? this.container.clientWidth / 2 : 0,\n\t\t});\n\t}\n\n\thideOverlay = () => {\n\t\tdom.hideElement(this.overlay);\n\t\tthis.tabs.hideOverlay();\n\t}\n\n\tcalculateOverlayPosition(x: number, y: number) {\n\t\tconst [w, h] = [this.container.clientWidth, this.container.clientHeight];\n\t\tconst margin = 0.3;\n\t\tif (x > w * margin && x < w - (w * margin) && y > h * margin && y < h - (h * margin)) return null;\n\t\tconst [q1, q2] = [w / h > x / y, w / h > x / (h - y)];\n\t\treturn (q1 ? (q2 ? 'left' : 'bottom') : (q2 ? 'top' : 'right')) as DirectionalPosition;\n\t}\n\n\t_onDragover = (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\te.preventDefault();\n\t\te.stopPropagation();\n\t\te.dataTransfer.dropEffect = 'move';\n\t\tthis.positionOverlay(this.calculateOverlayPosition(e.offsetX, e.offsetY));\n\t}\n\n\t_onDrop = () => {\n\t\tif (TabContainer.dragParent?.topLevelComponent != this.topLevelComponent && Tabs.dragParent?.topLevelComponent != this.topLevelComponent) return;\n\t\tTabContainer.dropTarget = this;\n\t\tthis.hideOverlay();\n\t}\n\n\t_onDragStart = (_e: DragEvent) => {\n\t\tTabContainer.dragParent = this;\n\t}\n\n\t_onDragStop = () => {\n\t\tTabContainer.dragParent = null;\n\t}\n\n\t_onTabDrop = (e: DragEvent) => {\n\t\tTabContainer.dragParent = null;\n\t\te.stopPropagation();\n\t}\n\n\trender = () => {\n\t\tconst tabs = html`\n\t\t\t<og-tabs\n\t\t\t\tclass=\"${this.inactive ? 'inactive' : ''}\"\n\t\t\t\tstyle=\"${this.items?.length ? '' : 'display: none;'}\"\n\t\t\t\t?scrollable=\"${this.scrollableTabs}\"\n\t\t\t\t?draggable=\"${this.draggableTabs}\"\n\t\t\t\t.topLevelComponent=\"${this.topLevelComponent}\"\n\t\t\t\t.items=\"${this.items}\"\n\t\t\t\t.actions=\"${this.actions}\"\n\t\t\t\t.selectedIndex=\"${this.selectedIndex}\"\n\t\t\t\t.position=\"${this.tabPosition}\"\n\t\t\t\t.tabSize=\"${this.tabSize}\"\n\t\t\t\t?closable=\"${this.closable}\"\n\t\t\t\t?addButton=\"${this.addButton}\"\n\t\t\t\t@tab.select=\"${this._onSelect}\"\n\t\t\t\t@tab.remove=\"${this._onRemove}\"\n\t\t\t\t@dragstart=\"${this._onDragStart}\"\n\t\t\t\t@dragstop=\"${this._onDragStop}\"\n\t\t\t\t@drop=\"${this._onTabDrop}\">\n\t\t\t</og-tabs>\n\t\t`;\n\n\t\tconst container = html`\n\t\t\t<div\n\t\t\t\tid=\"container\"\n\t\t\t\t@drop=\"${this._onDrop}\"\n\t\t\t\t@dragover=\"${this._onDragover}\"\n\t\t\t\t@dragleave=\"${() => this.hideOverlay()}\">\n\t\t\t</div>\n\t\t`;\n\n\t\treturn html`\n\t\t\t${this.tabPosition == 'top' ? tabs : container}\n\t\t\t${this.tabPosition == 'bottom' ? tabs : container}\n\t\t\t<div id=\"overlay\" style=\"display: none\"></div>\n\t\t`\n\t};\n\n}\n"]}

package/dist/components/tabContainer.style.d.ts

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

package/dist/components/tabContainer.style.d.ts.map

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

package/dist/components/tabContainer.style.js

@@ -0,0 +1,30 @@
+import { css } from "lit";
+export const style = css `
+	* {
+		box-sizing: border-box;
+	}
+
+	:host {
+		display: flex;
+		flex-direction: column;
+		position: relative;
+	}
+	
+	og-tabs {
+		flex: 0;
+	}
+	
+	#container {
+		flex: 1;
+		position: relative;
+		overflow: hidden;
+		background: var(--og-background-color-2);
+	}
+
+	#overlay {
+		background-color: var(--og-accent-color);
+		opacity: 0.5;
+		pointer-events: none;
+	}
+`;
+//# sourceMappingURL=tabContainer.style.js.map

package/dist/components/tabContainer.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabContainer.style.js","sourceRoot":"","sources":["../../src/components/tabContainer.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BvB,CAAC","sourcesContent":["import { css } from \"lit\";\n\nexport const style = css`\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\n\t:host {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tposition: relative;\n\t}\n\t\n\tog-tabs {\n\t\tflex: 0;\n\t}\n\t\n\t#container {\n\t\tflex: 1;\n\t\tposition: relative;\n\t\toverflow: hidden;\n\t\tbackground: var(--og-background-color-2);\n\t}\n\n\t#overlay {\n\t\tbackground-color: var(--og-accent-color);\n\t\topacity: 0.5;\n\t\tpointer-events: none;\n\t}\n`;"]}

package/dist/components/tabSplitContainer.d.ts

@@ -0,0 +1,43 @@
+import { LitElement } from "lit";
+import { TabItem } from '../types';
+import { ComponentFactory, SplitContainer, Layout, ComponentId, VerticalPosition } from "@omegagrid/core";
+import { TabContainer } from "./tabContainer";
+import { TabSplitContainerModel } from "../model";
+type TabSplitContainerTabContainer = TabContainer & {
+    index: number;
+    parentContainer: TabSplitContainer;
+};
+export declare class TabSplitContainer extends LitElement implements Layout {
+    static styles: import("lit").CSSResult;
+    topLevelComponent: HTMLElement;
+    model: TabSplitContainerModel;
+    addButton: boolean;
+    closable: boolean;
+    singleActive: boolean;
+    tabPosition: VerticalPosition;
+    scrollableTabs: boolean;
+    createComponent: ComponentFactory;
+    splitContainer: SplitContainer;
+    tabContainers: Set<TabSplitContainer | TabSplitContainerTabContainer>;
+    private _activeTabContainer;
+    get activeTabContainer(): TabContainer;
+    private _activeTab;
+    get activeTab(): TabItem;
+    private loadState;
+    walk(cb: (splitContainer: TabSplitContainer, tabContainer: TabSplitContainerTabContainer) => boolean | void): void;
+    willUpdate(): void;
+    updateTabs(): void;
+    updateTab(id: ComponentId, tab: Partial<TabItem>): void;
+    removeEmptyContainers(): Promise<void>;
+    updateActiveTab(): void;
+    _createTabContainer: (containerIndex: number) => TabSplitContainerTabContainer;
+    _createSplitContainer: (containerIndex: number) => TabSplitContainer;
+    _createSplitContainerComponent: (id: ComponentId) => Promise<TabContainer | TabSplitContainer>;
+    _onDrop: (e: DragEvent) => void;
+    activate(id: ComponentId): void;
+    open(item: TabItem, containerIndex?: number): void;
+    render: () => "" | import("lit-html").TemplateResult<1>;
+    layout(): void;
+}
+export {};
+//# sourceMappingURL=tabSplitContainer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabSplitContainer.d.ts","sourceRoot":"","sources":["../../src/components/tabSplitContainer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,OAAO,EAAO,gBAAgB,EAAE,cAAc,EAAE,MAAM,EAAE,WAAW,EAAe,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAC5H,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAElD,KAAK,6BAA6B,GAAG,YAAY,GAAG;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,iBAAiB,CAAA;CAClC,CAAC;AAEF,qBAEa,iBAAkB,SAAQ,UAAW,YAAW,MAAM;IAElE,MAAM,CAAC,MAAM,0BAQX;IAGF,iBAAiB,EAAE,WAAW,CAAC;IAG/B,KAAK,EAAE,sBAAsB,CAAC;IAG9B,SAAS,UAAS;IAGlB,QAAQ,UAAS;IAGjB,YAAY,UAAS;IAGrB,WAAW,EAAE,gBAAgB,CAAS;IAGtC,cAAc,UAAS;IAGvB,eAAe,EAAE,gBAAgB,CAAC;IAGlC,cAAc,EAAE,cAAc,CAAC;IAE/B,aAAa,yDAA8D;IAE3E,OAAO,CAAC,mBAAmB,CAAe;IAC1C,IAAI,kBAAkB,iBAAsC;IAE5D,OAAO,CAAC,UAAU,CAAU;IAC5B,IAAI,SAAS,YAA6B;IAE1C,OAAO,CAAC,SAAS,CAAK;IAEtB,IAAI,CAAC,EAAE,EAAE,CAAC,cAAc,EAAE,iBAAiB,EAAE,YAAY,EAAE,6BAA6B,KAAK,OAAO,GAAC,IAAI;IAUzG,UAAU;IAKV,UAAU;IAEV,SAAS,CAAC,EAAE,EAAE,WAAW,EAAE,GAAG,EAAE,OAAO,CAAC,OAAO,CAAC;IAkB1C,qBAAqB;IAQ3B,eAAe;IAOf,mBAAmB,GAAI,gBAAgB,MAAM,mCAqD3C;IAEF,qBAAqB,GAAI,gBAAgB,MAAM,uBAY7C;IAEF,8BAA8B,GAAI,IAAI,WAAW,+CAgB9C;IAEH,OAAO,GAAI,GAAG,SAAS,UA4DtB;IAED,QAAQ,CAAC,EAAE,EAAE,WAAW;IAIxB,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,cAAc,SAAI;IAwBtC,MAAM,kDAOC;IAEP,MAAM;CAIN"}