@datagrok-libraries/dock-spawn-dg 0.0.1

package/lib/SplitterPanel.js

@@ -0,0 +1,195 @@
+import { SplitterBar } from "./SplitterBar.js";
+import { Utils } from "./Utils.js";
+/**
+ * A splitter panel manages the child containers inside it with splitter bars.
+ * It can be stacked horizontally or vertically
+ */
+export class SplitterPanel {
+    panelElement;
+    spiltterBars;
+    stackedVertical;
+    childContainers;
+    constructor(childContainers, stackedVertical) {
+        this.childContainers = childContainers;
+        this.stackedVertical = stackedVertical;
+        this.panelElement = document.createElement('div');
+        this.spiltterBars = [];
+        this._buildSplitterDOMAndAddElements();
+    }
+    _buildSplitterDOMAndAddElements() {
+        if (this.childContainers.length <= 1)
+            throw new Error('Splitter panel should contain atleast 2 panels');
+        this.spiltterBars = [];
+        let afterElement = null;
+        for (let i = 0; i < this.childContainers.length - 1; i++) {
+            let previousContainer = this.childContainers[i];
+            let nextContainer = this.childContainers[i + 1];
+            let splitterBar = new SplitterBar(previousContainer, nextContainer, this.stackedVertical);
+            this.spiltterBars.push(splitterBar);
+            // Add the container and split bar to the panel's base div element
+            if (!Array.from(this.panelElement.children).includes(previousContainer.containerElement))
+                this._insertContainerIntoPanel(previousContainer, afterElement);
+            this.panelElement.insertBefore(splitterBar.barElement, previousContainer.containerElement.nextSibling);
+            afterElement = splitterBar.barElement;
+        }
+        let last = this.childContainers.slice(-1)[0];
+        if (!Array.from(this.panelElement.children).includes(last.containerElement))
+            this._insertContainerIntoPanel(last, afterElement);
+    }
+    performLayout(children, relayoutEvenIfEqual) {
+        let containersEqual = Utils.arrayEqual(this.childContainers, children);
+        if (!containersEqual || relayoutEvenIfEqual) {
+            this.childContainers.forEach((container) => {
+                if (!children.some((item) => item == container)) {
+                    if (container.containerElement) {
+                        container.containerElement.classList.remove('splitter-container-vertical');
+                        container.containerElement.classList.remove('splitter-container-horizontal');
+                        Utils.removeNode(container.containerElement);
+                    }
+                }
+            });
+            this.spiltterBars.forEach((bar) => { Utils.removeNode(bar.barElement); });
+            // rebuild
+            this.childContainers = children;
+            this._buildSplitterDOMAndAddElements();
+        }
+    }
+    removeFromDOM() {
+        this.childContainers.forEach((container) => {
+            if (container.containerElement) {
+                container.containerElement.classList.remove('splitter-container-vertical');
+                container.containerElement.classList.remove('splitter-container-horizontal');
+                Utils.removeNode(container.containerElement);
+            }
+        });
+        this.spiltterBars.forEach((bar) => { Utils.removeNode(bar.barElement); });
+    }
+    destroy() {
+        this.removeFromDOM();
+        this.panelElement.parentNode.removeChild(this.panelElement);
+    }
+    _insertContainerIntoPanel(container, afterElement) {
+        if (!container) {
+            console.error('container is undefined');
+            return;
+        }
+        if (container.containerElement.parentNode != this.panelElement) {
+            Utils.removeNode(container.containerElement);
+            if (afterElement)
+                this.panelElement.insertBefore(container.containerElement, afterElement.nextSibling);
+            else {
+                if (this.panelElement.children.length > 0)
+                    this.panelElement.insertBefore(container.containerElement, this.panelElement.children[0]);
+                else
+                    this.panelElement.appendChild(container.containerElement);
+            }
+        }
+        container.containerElement.classList.add(this.stackedVertical ? 'splitter-container-vertical' : 'splitter-container-horizontal');
+    }
+    /**
+     * Sets the percentage of space the specified [container] takes in the split panel
+     * The percentage is specified in [ratio] and is between 0..1
+     */
+    setContainerRatio(container, ratio) {
+        let splitPanelSize = this.stackedVertical ? this.panelElement.clientHeight : this.panelElement.clientWidth;
+        let newContainerSize = splitPanelSize * ratio;
+        let barSize = this.stackedVertical ? this.spiltterBars[0].barElement.clientHeight : this.spiltterBars[0].barElement.clientWidth;
+        let otherPanelSizeQuota = splitPanelSize - newContainerSize - barSize * this.spiltterBars.length;
+        let otherPanelScaleMultipler = otherPanelSizeQuota / splitPanelSize;
+        for (let i = 0; i < this.childContainers.length; i++) {
+            let child = this.childContainers[i];
+            let size;
+            if (child !== container) {
+                size = this.stackedVertical ? child.containerElement.parentElement.clientHeight : child.containerElement.parentElement.clientWidth;
+                size *= otherPanelScaleMultipler;
+            }
+            else
+                size = newContainerSize;
+            if (this.stackedVertical)
+                child.resize(child.width, Math.floor(size));
+            else
+                child.resize(Math.floor(size), child.height);
+        }
+    }
+    getRatios() {
+        let barSize = this.stackedVertical ? this.spiltterBars[0].barElement.clientHeight : this.spiltterBars[0].barElement.clientWidth;
+        let splitPanelSize = (this.stackedVertical ? this.panelElement.clientHeight : this.panelElement.clientWidth) - barSize * this.spiltterBars.length;
+        let result = [];
+        for (let i = 0; i < this.childContainers.length; i++) {
+            let child = this.childContainers[i];
+            let sizeOld = this.stackedVertical ? child.containerElement.clientHeight : child.containerElement.clientWidth;
+            result.push(sizeOld / splitPanelSize);
+        }
+        return result;
+    }
+    setRatios(ratios) {
+        let barSize = this.stackedVertical ? this.spiltterBars[0].barElement.clientHeight : this.spiltterBars[0].barElement.clientWidth;
+        let splitPanelSize = (this.stackedVertical ? this.panelElement.clientHeight : this.panelElement.clientWidth) - barSize * this.spiltterBars.length;
+        for (let i = 0; i < this.childContainers.length; i++) {
+            let child = this.childContainers[i];
+            let size = splitPanelSize * ratios[i];
+            if (this.stackedVertical)
+                child.resize(child.width, Math.floor(size));
+            else
+                child.resize(Math.floor(size), child.height);
+        }
+    }
+    resize(width, height) {
+        if (this.childContainers.length <= 1)
+            return;
+        this.panelElement.style.width = width + 'px';
+        this.panelElement.style.height = height + 'px';
+        let i;
+        // Adjust the fixed dimension that is common to all (i.e. width, if stacked vertical; height, if stacked horizontally)
+        for (i = 0; i < this.childContainers.length; i++) {
+            let childContainer = this.childContainers[i];
+            if (this.stackedVertical)
+                childContainer.resize(width, !childContainer.height ? height : childContainer.height);
+            else
+                childContainer.resize(!childContainer.width ? width : childContainer.width, height);
+            if (i < this.spiltterBars.length) {
+                let splitBar = this.spiltterBars[i];
+                if (this.stackedVertical)
+                    splitBar.barElement.style.width = width + 'px';
+                else
+                    splitBar.barElement.style.height = height + 'px';
+            }
+        }
+        // Adjust the varying dimension
+        let totalChildPanelSize = 0;
+        // Find out how much space existing child containers take up (excluding the splitter bars)
+        this.childContainers.forEach((container) => {
+            let size = this.stackedVertical ?
+                container.height :
+                container.width;
+            totalChildPanelSize += size;
+        });
+        const barRect = this.spiltterBars[0].barElement.getBoundingClientRect();
+        // Get the thickness of the bar
+        let barSize = this.stackedVertical ? barRect.height : barRect.width;
+        // Find out how much space existing child containers will take after being resized (excluding the splitter bars)
+        let targetTotalChildPanelSize = this.stackedVertical ? height : width;
+        targetTotalChildPanelSize -= barSize * this.spiltterBars.length;
+        // Get the scale multiplier
+        totalChildPanelSize = Math.max(totalChildPanelSize, 1);
+        let scaleMultiplier = targetTotalChildPanelSize / totalChildPanelSize;
+        // Update the size with this multiplier
+        let updatedTotalChildPanelSize = 0;
+        for (i = 0; i < this.childContainers.length; i++) {
+            let child = this.childContainers[i];
+            if (child.containerElement.style.display == 'none')
+                child.containerElement.style.display = 'block';
+            let original = this.stackedVertical ? child.containerElement.clientHeight : child.containerElement.clientWidth;
+            let newSize = scaleMultiplier > 1 ? Math.floor(original * scaleMultiplier) : Math.ceil(original * scaleMultiplier);
+            updatedTotalChildPanelSize += newSize;
+            // If this is the last node, add any extra pixels to fix the rounding off errors and match the requested size
+            if (i === this.childContainers.length - 1)
+                newSize += targetTotalChildPanelSize - updatedTotalChildPanelSize;
+            // Set the size of the panel
+            if (this.stackedVertical)
+                child.resize(child.width, newSize);
+            else
+                child.resize(newSize, child.height);
+        }
+    }
+}

package/lib/TabHandle.d.ts

@@ -0,0 +1,56 @@
+import { TabPage } from './TabPage.js';
+import { UndockInitiator } from './UndockInitiator.js';
+import { EventHandler } from './EventHandler.js';
+import { DockNode } from './DockNode.js';
+/**
+ * A tab handle represents the tab button on the tab strip
+ */
+export declare class TabHandle {
+    parent: TabPage;
+    elementBase: HTMLDivElement;
+    elementText: HTMLDivElement;
+    elementCloseButton: HTMLDivElement;
+    undockInitiator: UndockInitiator;
+    mouseDownHandler: EventHandler;
+    touchDownHandler: EventHandler;
+    closeButtonHandler: EventHandler;
+    closeButtonTouchHandler: EventHandler;
+    auxClickHandler: EventHandler;
+    contextMenuHandler: EventHandler;
+    mouseMoveHandler: EventHandler;
+    touchMoveHandler: EventHandler;
+    mouseUpHandler: EventHandler;
+    touchUpHandler: EventHandler;
+    stargDragPosition: any;
+    dragged: boolean;
+    eventListeners: any[];
+    undockListener: {
+        onDockEnabled: (e: any) => void;
+        onHideCloseButton: (e: any) => void;
+    };
+    prev: number;
+    current: number;
+    direction: number;
+    _ctxMenu: HTMLDivElement;
+    _windowsContextMenuCloseBound: any;
+    constructor(parent: TabPage);
+    addListener(listener: any): void;
+    removeListener(listener: any): void;
+    undockEnabled(state: boolean): void;
+    static createContextMenuContentCallback: (tabHandle: TabHandle, documentMangerNodes: DockNode[]) => Node[];
+    oncontextMenuClicked(e: MouseEvent): void;
+    closeContextMenu(): void;
+    windowsContextMenuClose(e: Event): void;
+    onMouseDown(e: any): void;
+    onMouseUp(e: any): void;
+    moveTabEvent(that: any, state: any): void;
+    onMouseMove(e: any): void;
+    hideCloseButton(state: any): void;
+    updateTitle(): void;
+    destroy(): void;
+    _performUndock(e: any, dragOffset: any): import("./Dialog.js").Dialog;
+    onCloseButtonClicked(e: any): void;
+    setSelected(isSelected: boolean): void;
+    setActive(isActive: boolean): void;
+}
+//# sourceMappingURL=TabHandle.d.ts.map

package/lib/TabHandle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabHandle.d.ts","sourceRoot":"","sources":["../src/TabHandle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,cAAc,CAAC;AAErC,OAAO,EAAC,eAAe,EAAC,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAC,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAG/C,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AAGvC;;GAEG;AACH,qBAAa,SAAS;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,cAAc,CAAC;IAC5B,WAAW,EAAE,cAAc,CAAC;IAC5B,kBAAkB,EAAE,cAAc,CAAC;IACnC,eAAe,EAAE,eAAe,CAAC;IACjC,gBAAgB,EAAE,YAAY,CAAC;IAC/B,gBAAgB,EAAE,YAAY,CAAC;IAC/B,kBAAkB,EAAE,YAAY,CAAC;IACjC,uBAAuB,EAAE,YAAY,CAAC;IACtC,eAAe,EAAE,YAAY,CAAC;IAC9B,kBAAkB,EAAE,YAAY,CAAC;IACjC,gBAAgB,EAAE,YAAY,CAAC;IAC/B,gBAAgB,EAAE,YAAY,CAAC;IAC/B,cAAc,EAAE,YAAY,CAAC;IAC7B,cAAc,EAAE,YAAY,CAAC;IAC7B,iBAAiB,EAAE,GAAG,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,EAAE,GAAG,EAAE,CAAC;IACtB,cAAc,EAAE;QAAE,aAAa,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;QAAC,iBAAiB,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;KAAE,CAAC;IAE1F,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,cAAc,CAAC;IACzB,6BAA6B,EAAE,GAAG,CAAC;gBAEvB,MAAM,EAAE,OAAO;IA+C3B,WAAW,CAAC,QAAQ,KAAA;IAIpB,cAAc,CAAC,QAAQ,KAAA;IAIvB,aAAa,CAAC,KAAK,EAAE,OAAO;IAI5B,MAAM,CAAC,gCAAgC,cAAe,SAAS,uBAAuB,QAAQ,EAAE,KAAG,IAAI,EAAE,CA2CvG;IAEF,oBAAoB,CAAC,CAAC,EAAE,UAAU;IAwBlC,gBAAgB;IAQhB,uBAAuB,CAAC,CAAC,EAAE,KAAK;IAUhC,WAAW,CAAC,CAAC,KAAA;IA4Bb,SAAS,CAAC,CAAC,KAAA;IAmBX,YAAY,CAAC,IAAI,KAAA,EAAE,KAAK,KAAA;IAOxB,WAAW,CAAC,CAAC,KAAA;IAoBb,eAAe,CAAC,KAAK,KAAA;IAIrB,WAAW;IAQX,OAAO;IAqCP,cAAc,CAAC,CAAC,KAAA,EAAE,UAAU,KAAA;IAS5B,oBAAoB,CAAC,CAAC,KAAA;IAYtB,WAAW,CAAC,UAAU,EAAE,OAAO;IAS/B,SAAS,CAAC,QAAQ,EAAE,OAAO;CAQ5B"}

package/lib/TabHandle.js

@@ -0,0 +1,292 @@
+import { PanelContainer } from './PanelContainer.js';
+import { UndockInitiator } from './UndockInitiator.js';
+import { EventHandler } from './EventHandler.js';
+import { Utils } from './Utils.js';
+import { PanelType } from './enums/PanelType.js';
+import { Localizer } from './i18n/Localizer.js';
+/**
+ * A tab handle represents the tab button on the tab strip
+ */
+export class TabHandle {
+    parent;
+    elementBase;
+    elementText;
+    elementCloseButton;
+    undockInitiator;
+    mouseDownHandler;
+    touchDownHandler;
+    closeButtonHandler;
+    closeButtonTouchHandler;
+    auxClickHandler;
+    contextMenuHandler;
+    mouseMoveHandler;
+    touchMoveHandler;
+    mouseUpHandler;
+    touchUpHandler;
+    stargDragPosition;
+    dragged;
+    eventListeners;
+    undockListener;
+    prev;
+    current;
+    direction;
+    _ctxMenu;
+    _windowsContextMenuCloseBound;
+    constructor(parent) {
+        this.parent = parent;
+        const undockHandler = this._performUndock.bind(this);
+        this.elementBase = document.createElement('div');
+        this.elementText = document.createElement('div');
+        this.elementCloseButton = document.createElement('div');
+        this.elementBase.classList.add('dockspan-tab-handle');
+        this.elementBase.classList.add('disable-selection'); // Disable text selection
+        this.elementText.classList.add('dockspan-tab-handle-text');
+        this.elementCloseButton.classList.add('dockspan-tab-handle-close-button');
+        this.elementBase.appendChild(this.elementText);
+        if (this.parent.host.displayCloseButton)
+            this.elementBase.appendChild(this.elementCloseButton);
+        if (this.parent.container._hideCloseButton || this.parent.container._grayOut)
+            this.elementCloseButton.style.display = 'none';
+        this.parent.host.tabListElement.appendChild(this.elementBase);
+        const panel = parent.container;
+        const title = panel.getRawTitle();
+        this.undockListener = {
+            onDockEnabled: (e) => { this.undockEnabled(e.state); },
+            onHideCloseButton: (e) => { this.hideCloseButton(e.state); },
+        };
+        this.eventListeners = [];
+        panel.addListener(this.undockListener);
+        this.elementText.innerHTML = title;
+        this.elementText.setAttribute('dock-spawn-title', this.elementText.innerText);
+        //this._bringToFront(this.elementBase);
+        this.undockInitiator = new UndockInitiator(this.elementBase, undockHandler);
+        this.undockInitiator.enabled = true;
+        this.mouseDownHandler = new EventHandler(this.elementBase, 'mousedown', this.onMouseDown.bind(this));
+        this.touchDownHandler = new EventHandler(this.elementBase, 'touchstart', this.onMouseDown.bind(this), { passive: false });
+        this.closeButtonHandler = new EventHandler(this.elementCloseButton, 'click', this.onCloseButtonClicked.bind(this));
+        this.closeButtonTouchHandler = new EventHandler(this.elementCloseButton, 'touchstart', this.onCloseButtonClicked.bind(this));
+        this.auxClickHandler = new EventHandler(this.elementBase, 'auxclick', this.onCloseButtonClicked.bind(this));
+        if (panel.panelType == PanelType.document)
+            this.contextMenuHandler = new EventHandler(this.elementBase, 'contextmenu', this.oncontextMenuClicked.bind(this));
+        this.windowsContextMenuClose = this.windowsContextMenuClose.bind(this);
+        //this.zIndexCounter = parent.host.dockManager.zIndexTabHandle;
+    }
+    addListener(listener) {
+        this.eventListeners.push(listener);
+    }
+    removeListener(listener) {
+        this.eventListeners.splice(this.eventListeners.indexOf(listener), 1);
+    }
+    undockEnabled(state) {
+        this.undockInitiator.enabled = state;
+    }
+    static createContextMenuContentCallback = (tabHandle, documentMangerNodes) => {
+        const result = [];
+        const btnCloseAll = document.createElement('div');
+        btnCloseAll.innerText = Localizer.getString('CloseAll');
+        result.push(btnCloseAll);
+        btnCloseAll.onclick = () => {
+            const length = documentMangerNodes.length;
+            for (let i = length - 1; i >= 0; i--) {
+                const panel = documentMangerNodes[i].container;
+                if (panel.panelType == PanelType.document)
+                    panel.close();
+            }
+            tabHandle.closeContextMenu();
+        };
+        const btnCloseAllButThis = document.createElement('div');
+        btnCloseAllButThis.innerText = Localizer.getString('CloseAllButThis');
+        result.push(btnCloseAllButThis);
+        btnCloseAllButThis.onclick = () => {
+            const length = documentMangerNodes.length;
+            for (let i = length - 1; i >= 0; i--) {
+                const panel = documentMangerNodes[i].container;
+                if (tabHandle.parent.container != panel && panel.panelType == PanelType.document)
+                    panel.close();
+            }
+            tabHandle.closeContextMenu();
+        };
+        if (tabHandle.parent.container.dockManager.config.enableBrowserWindows) {
+            const btnNewBrowserWindow = document.createElement('div');
+            btnNewBrowserWindow.innerText = Localizer.getString('NewBrowserWindow');
+            result.push(btnNewBrowserWindow);
+            btnNewBrowserWindow.onclick = () => {
+                tabHandle.parent.container.undockToBrowserDialog();
+                tabHandle.closeContextMenu();
+            };
+        }
+        return result;
+    };
+    oncontextMenuClicked(e) {
+        e.preventDefault();
+        if (!this._ctxMenu && TabHandle.createContextMenuContentCallback) {
+            const menuItems = TabHandle.createContextMenuContentCallback(this, this.parent.container.dockManager.context.model.documentManagerNode.children);
+            if (menuItems.length == 0)
+                return;
+            this._ctxMenu = document.createElement('div');
+            this._ctxMenu.className = 'dockspab-tab-handle-context-menu';
+            this._ctxMenu.append(...menuItems);
+            this._ctxMenu.style.left = e.pageX + 'px';
+            this._ctxMenu.style.top = e.pageY + 'px';
+            document.body.appendChild(this._ctxMenu);
+            window.addEventListener('mouseup', this.windowsContextMenuClose);
+        }
+        else
+            this.closeContextMenu();
+    }
+    closeContextMenu() {
+        if (this._ctxMenu) {
+            document.body.removeChild(this._ctxMenu);
+            delete this._ctxMenu;
+            window.removeEventListener('mouseup', this.windowsContextMenuClose);
+        }
+    }
+    windowsContextMenuClose(e) {
+        const cp = e.composedPath();
+        for (const i in cp) {
+            const el = cp[i];
+            if (el == this._ctxMenu)
+                return;
+        }
+        this.closeContextMenu();
+    }
+    onMouseDown(e) {
+        e.preventDefault();
+        this.parent.onSelected();
+        if (this.mouseMoveHandler) {
+            this.mouseMoveHandler.cancel();
+            delete this.mouseMoveHandler;
+        }
+        if (this.touchMoveHandler) {
+            this.touchMoveHandler.cancel();
+            delete this.touchMoveHandler;
+        }
+        if (this.mouseUpHandler) {
+            this.mouseUpHandler.cancel();
+            delete this.mouseUpHandler;
+        }
+        if (this.touchUpHandler) {
+            this.touchUpHandler.cancel();
+            delete this.touchUpHandler;
+        }
+        this.stargDragPosition = e.clientX;
+        this.mouseMoveHandler = new EventHandler(window, 'mousemove', this.onMouseMove.bind(this));
+        this.touchMoveHandler = new EventHandler(window, 'touchmove', this.onMouseMove.bind(this), { passive: false });
+        this.mouseUpHandler = new EventHandler(window, 'mouseup', this.onMouseUp.bind(this));
+        this.touchUpHandler = new EventHandler(window, 'touchend', this.onMouseUp.bind(this));
+    }
+    onMouseUp(e) {
+        if (this.elementBase)
+            this.elementBase.classList.remove('dockspan-tab-handle-dragged');
+        this.dragged = false;
+        if (this.mouseMoveHandler)
+            this.mouseMoveHandler.cancel();
+        if (this.touchMoveHandler)
+            this.touchMoveHandler.cancel();
+        if (this.mouseUpHandler)
+            this.mouseUpHandler.cancel();
+        if (this.touchUpHandler)
+            this.touchUpHandler.cancel();
+        delete this.mouseMoveHandler;
+        delete this.touchMoveHandler;
+        delete this.mouseUpHandler;
+        delete this.touchUpHandler;
+    }
+    moveTabEvent(that, state) {
+        that.eventListeners.forEach((listener) => {
+            if (listener.onMoveTab)
+                listener.onMoveTab({ self: that, state: state });
+        });
+    }
+    onMouseMove(e) {
+        e.preventDefault();
+        if (Math.abs(this.stargDragPosition - e.clientX) < 10)
+            return;
+        if (this.elementBase != null) { //Todo: because of this is null, we need to drag 2 times, needs fix
+            this.elementBase.classList.add('dockspan-tab-handle-dragged');
+            this.dragged = true;
+            this.prev = this.current;
+            this.current = e.clientX;
+            this.direction = this.current - this.prev;
+            const tabRect = this.elementBase.getBoundingClientRect();
+            const event = this.direction < 0 ?
+                { state: 'left', bound: tabRect.left, rect: tabRect } :
+                { state: 'right', bound: tabRect.right, rect: tabRect };
+            if ((e.clientX < tabRect.left && this.direction < 0) || (e.clientX > tabRect.left + tabRect.width && this.direction > 0))
+                this.moveTabEvent(this, event.state);
+        }
+    }
+    hideCloseButton(state) {
+        this.elementCloseButton.style.display = state ? 'none' : 'block';
+    }
+    updateTitle() {
+        if (this.parent.container instanceof PanelContainer) {
+            const panel = this.parent.container;
+            const title = panel.getRawTitle();
+            this.elementText.innerHTML = title;
+        }
+    }
+    destroy() {
+        const panel = this.parent.container;
+        panel.removeListener(this.undockListener);
+        this.mouseDownHandler.cancel();
+        this.touchDownHandler.cancel();
+        this.closeButtonHandler.cancel();
+        this.closeButtonTouchHandler.cancel();
+        this.auxClickHandler.cancel();
+        if (this.mouseMoveHandler)
+            this.mouseMoveHandler.cancel();
+        if (this.touchMoveHandler)
+            this.touchMoveHandler.cancel();
+        if (this.mouseUpHandler)
+            this.mouseUpHandler.cancel();
+        if (this.touchUpHandler)
+            this.touchUpHandler.cancel();
+        if (this.contextMenuHandler)
+            this.contextMenuHandler.cancel();
+        if (this.elementBase) {
+            Utils.removeNode(this.elementBase);
+            delete this.elementBase;
+        }
+        if (this.elementCloseButton) {
+            Utils.removeNode(this.elementCloseButton);
+            delete this.elementCloseButton;
+        }
+    }
+    _performUndock(e, dragOffset) {
+        if (this.parent.container.containerType === 'panel') {
+            this.undockInitiator.enabled = false;
+            const panel = this.parent.container;
+            return panel.performUndockToDialog(e, dragOffset);
+        }
+        else
+            return null;
+    }
+    onCloseButtonClicked(e) {
+        if (this.elementCloseButton.style.display !== 'none') {
+            if (e.button !== 2) {
+                // If the page contains a panel element, undock it and destroy it
+                if (this.parent.container.containerType === 'panel') {
+                    const panel = this.parent.container;
+                    panel.close();
+                }
+            }
+        }
+    }
+    setSelected(isSelected) {
+        if (isSelected)
+            this.elementBase.classList.add('dockspan-tab-handle-selected');
+        else {
+            this.elementBase.classList.remove('dockspan-tab-handle-selected');
+            this.elementBase.classList.remove('dockspan-tab-handle-active');
+        }
+    }
+    setActive(isActive) {
+        if (this.elementBase) {
+            if (isActive)
+                this.elementBase.classList.add('dockspan-tab-handle-active');
+            else
+                this.elementBase.classList.remove('dockspan-tab-handle-active');
+        }
+    }
+}

package/lib/TabHost.d.ts

@@ -0,0 +1,47 @@
+import { TabPage } from "./TabPage.js";
+import { TabHostDirection } from "./enums/TabHostDirection.js";
+import { TabHandle } from "./TabHandle.js";
+import { IDockContainer } from "./interfaces/IDockContainer.js";
+import { DockManager } from "./DockManager.js";
+import { EventHandler } from './EventHandler.js';
+/**
+ * Tab Host control contains tabs known as TabPages.
+ * The tab strip can be aligned in different orientations
+ */
+export declare class TabHost {
+    displayCloseButton: boolean;
+    dockManager: DockManager;
+    tabStripDirection: TabHostDirection;
+    hostElement: HTMLDivElement;
+    tabListElement: HTMLDivElement;
+    separatorElement: HTMLDivElement;
+    contentElement: HTMLDivElement;
+    createTabPage: (tabHost: TabHost, container: IDockContainer) => any;
+    tabHandleListener: {
+        onMoveTab: (e: any) => void;
+    };
+    eventListeners: any[];
+    pages: TabPage[];
+    activeTab: TabPage;
+    _resizeRequested: boolean;
+    mouseDownHandler: EventHandler;
+    focusHandler: EventHandler;
+    constructor(dockManager: DockManager, tabStripDirection: TabHostDirection, displayCloseButton?: boolean);
+    onFocus(): void;
+    setActive(isActive: boolean): void;
+    onMousedown(): void;
+    onMoveTab(e: any): void;
+    performTabsLayout(indexes: number[]): void;
+    getActiveTab(): TabPage;
+    addListener(listener: any): void;
+    removeListener(listener: any): void;
+    change(host: TabHost, handle: TabHandle, state: any, index: any): void;
+    _createDefaultTabPage(tabHost: TabHost, container: IDockContainer): TabPage;
+    setActiveTab(container: IDockContainer): void;
+    resize(width: number, height: number): void;
+    resizeTabListElement(width: number, height?: number): void;
+    performLayout(children: IDockContainer[]): void;
+    _setTabHandlesVisible(visible: boolean): void;
+    onTabPageSelected(page: TabPage, active: boolean): void;
+}
+//# sourceMappingURL=TabHost.d.ts.map

package/lib/TabHost.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabHost.d.ts","sourceRoot":"","sources":["../src/TabHost.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD;;;GAGG;AACH,qBAAa,OAAO;IAChB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,WAAW,EAAE,WAAW,CAAC;IACzB,iBAAiB,EAAE,gBAAgB,CAAC;IACpC,WAAW,EAAE,cAAc,CAAC;IAC5B,cAAc,EAAE,cAAc,CAAC;IAC/B,gBAAgB,EAAE,cAAc,CAAC;IACjC,cAAc,EAAE,cAAc,CAAC;IAC/B,aAAa,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,KAAK,GAAG,CAAC;IACpE,iBAAiB,EAAE;QAAE,SAAS,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;KAAE,CAAC;IACpD,cAAc,EAAE,GAAG,EAAE,CAAC;IACtB,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,EAAE,YAAY,CAAC;IAC/B,YAAY,EAAE,YAAY,CAAC;gBAEf,WAAW,EAAE,WAAW,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,kBAAkB,CAAC,EAAE,OAAO;IAiDvG,OAAO;IAKP,SAAS,CAAC,QAAQ,EAAE,OAAO;IAW3B,WAAW;IAKX,SAAS,CAAC,CAAC,KAAA;IAKX,iBAAiB,CAAC,OAAO,EAAE,MAAM,EAAE;IAmBnC,YAAY;IAIZ,WAAW,CAAC,QAAQ,KAAA;IAIpB,cAAc,CAAC,QAAQ,KAAA;IAIvB,MAAM,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,KAAA,EAAE,KAAK,KAAA;IAQrD,qBAAqB,CAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc;IAIjE,YAAY,CAAC,SAAS,EAAE,cAAc;IAatC,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;IAgBpC,oBAAoB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM;IAsBnD,aAAa,CAAC,QAAQ,EAAE,cAAc,EAAE;IAkDxC,qBAAqB,CAAC,OAAO,EAAE,OAAO;IAUtC,iBAAiB,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO;CAOnD"}