@datagrok-libraries/dock-spawn-dg 0.0.2 → 0.0.3

package/src/PanelContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelContainer.d.ts","sourceRoot":"","sources":["PanelContainer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAC;AAC7E,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAIpC;;GAEG;AACH,qBAAa,cAAe,YAAW,sBAAsB;IAClD,2BAA2B,EAAE,CAAC,cAAc,EAAE,cAAc,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAEzF,cAAc,EAAE,CAAC,cAAc,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxE,YAAY,EAAE,cAAc,CAAC;IAC7B,YAAY,EAAE,cAAc,CAAC;IAC7B,gBAAgB,EAAE,cAAc,CAAC;IACjC,kBAAkB,EAAE,cAAc,CAAC;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,KAAK,CAAC;IACb,cAAc,EAAE,WAAW,GAAG;QAAE,aAAa,CAAC,EAAE,GAAG,CAAC;QAAC,wBAAwB,EAAE,cAAc,CAAA;KAAE,CAAC;IAChG,OAAO,CAAC,uBAAuB,CAAc;IAC7C,uBAAuB,EAAE,WAAW,CAAC;IACrC,qBAAqB,EAAE,WAAW,CAAC;IACnC,WAAW,EAAE,WAAW,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,aAAa,CAAC;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,wBAAwB,EAAE,MAAM,CAAC;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,GAAG,EAAE,CAAC;IACtB,eAAe,EAAE,eAAe,CAAC;IACjC,kBAAkB,EAAE,cAAc,CAAC;IACnC,yBAAyB,EAAE,YAAY,CAAC;IACxC,yBAAyB,EAAE,YAAY,CAAC;IACxC,gBAAgB,EAAE,YAAY,CAAC;IAC/B,gBAAgB,EAAE,YAAY,CAAC;IAC/B,SAAS,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0BAA0B,UAAS;IACnC,kBAAkB,EAAE,YAAY,CAAC;IAEjC,cAAc,CAAC,EAAE,KAAK,CAAC;IAEvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,QAAQ,EAAE,cAAc,CAAC;IACzB,QAAQ,EAAE,cAAc,CAAC;gBAEb,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,SAAS,EAAE,eAAe,CAAC,EAAE,OAAO,EAAE,SAAS,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM;IAiDxK,WAAW;IA+DX,MAAM,CAAC,gCAAgC,mBAAoB,cAAc,KAAG,IAAI,EAAE,CAejF;IAED,oBAAoB,CAAC,CAAC,EAAE,UAAU;IAsBlC,gBAAgB;IAQhB,uBAAuB,CAAC,CAAC,EAAE,KAAK;IAUhC,SAAS,CAAC,KAAK,EAAE,OAAO;IAUxB,WAAW,CAAC,QAAQ,KAAA;IAIpB,cAAc,CAAC,QAAQ,KAAA;IAIvB,IAAI,cAAc,IAAI,MAAM,CAE3B;IACD,IAAI,cAAc,CAAC,KAAK,EAAE,MAAM,EAI/B;WAEY,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW;IAoBlE,SAAS,CAAC,KAAK,EAAE,MAAM;IAcvB,SAAS,CAAC,KAAK,EAAE,MAAM;IAYvB,cAAc;IAGd,IAAI,gBAAgB,mBAEnB;IAED,OAAO,CAAC,IAAI,EAAE,OAAO;IAyBrB,WAAW;IAIX,eAAe,CAAC,KAAK,EAAE,OAAO;IAU9B,OAAO;IAwBP;;OAEG;IACH,qBAAqB,CAAC,CAAC,KAAA,EAAE,UAAU,EAAE,KAAK;IAQ1C;;MAEE;IACF,OAAO,CAAC,YAAY;IASpB;;;OAGG;IACH,aAAa;IAKb,iBAAiB;IAOjB,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAKtB;IAED,IAAI,MAAM,IAAI,MAAM,CAEnB;IACD,IAAI,MAAM,CAAC,KAAK,EAAE,MAAM,EAKvB;IAED,IAAI,sBAAsB,IAAI,WAAW,CAQxC;IAED,OAAO,CAAC,WAAW;IAOnB,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;IAmBpC,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;IAsBjD,iBAAiB,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM;IAMtC,UAAU,CAAC,SAAS,EAAE,OAAO;IAI7B,QAAQ,CAAC,KAAK,EAAE,MAAM;IAOtB,YAAY,CAAC,IAAI,EAAE,MAAM;IAOzB,aAAa,CAAC,OAAO,EAAE,OAAO;IAY9B,oBAAoB,CAAC,iBAAiB,EAAE,MAAM;IAI9C,YAAY;IAQZ,WAAW;IAIX,aAAa,CAAC,QAAQ,EAAE,cAAc,EAAE,EAAE,mBAAmB,EAAE,OAAO;IAGtE,oBAAoB,CAAC,CAAC,EAAE,KAAK;IAM7B,qBAAqB;IAoBf,KAAK;YAIG,aAAa;CAkC9B"}

package/{lib → src}/PanelContainer.js

@@ -1,53 +1,25 @@
-import { Utils } from './Utils.js';
-import { UndockInitiator } from './UndockInitiator.js';
-import { ContainerType } from './ContainerType.js';
-import { EventHandler } from './EventHandler.js';
-import { PanelType } from './enums/PanelType.js';
-import { Localizer } from './i18n/Localizer.js';
-import { moveElementToNewBrowserWindow } from './BrowserDialogHelper.js';
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Utils } from "./Utils";
+import { UndockInitiator } from "./UndockInitiator";
+import { ContainerType } from "./ContainerType";
+import { EventHandler } from "./EventHandler";
+import { PanelType } from "./enums/PanelType";
+import { Localizer } from "./i18n/Localizer";
+import { moveElementToNewBrowserWindow } from "./BrowserDialogHelper";
 /**
  * This dock container wraps the specified element on a panel frame with a title bar and close button
  */
 export class PanelContainer {
-    closePanelContainerCallback;
-    onTitleChanged;
-    elementPanel;
-    elementTitle;
-    elementTitleText;
-    elementContentHost;
-    name;
-    state;
-    elementContent;
-    _resolvedElementContent;
-    elementContentContainer;
-    elementContentWrapper;
-    dockManager;
-    title;
-    containerType;
-    icon;
-    hasChanges;
-    minimumAllowedChildNodes;
-    isDialog;
-    eventListeners;
-    undockInitiator;
-    elementButtonClose;
-    closeButtonClickedHandler;
-    closeButtonTouchedHandler;
-    mouseDownHandler;
-    touchDownHandler;
-    panelType;
-    tabPage;
-    undockedToNewBrowserWindow = false;
-    contextMenuHandler;
-    lastDialogSize;
-    _floatingDialog;
-    _canUndock;
-    _cachedWidth;
-    _cachedHeight;
-    _hideCloseButton;
-    _grayOut;
-    _ctxMenu;
-    constructor(elementContent, dockManager, title, panelType, hideCloseButton, panelIcon) {
+    constructor(elementContent, dockManager, title, panelType, hideCloseButton, panelIcon, zIndex) {
+        this.undockedToNewBrowserWindow = false;
         if (!title)
             title = Localizer.getString('DefaultPanelName');
         if (!panelType)
@@ -66,15 +38,16 @@ export class PanelContainer {
         this.elementContentContainer._panel = this;
         this.elementContentContainer.addEventListener('pointerdown', (e) => {
             try {
-                if (this.isDialog)
+                if (this.isDialog) {
                     this._floatingDialog.bringToFront();
+                }
                 else {
                     if (this.tabPage)
                         this.tabPage.setSelected(true, true);
                 }
                 this.dockManager.activePanel = this;
             }
-            catch { }
+            catch (_a) { }
         }, { passive: true });
         this.elementContentContainer.appendChild(elementContent);
         dockManager.config.dialogRootElement.appendChild(this.elementContentContainer);
@@ -82,6 +55,7 @@ export class PanelContainer {
         this.title = title;
         this.containerType = ContainerType.panel;
         this.icon = panelIcon;
+        this.zIndex = zIndex;
         this.minimumAllowedChildNodes = 0;
         this._floatingDialog = undefined;
         this.isDialog = false;
@@ -92,6 +66,7 @@ export class PanelContainer {
         this._initialize();
     }
     _initialize() {
+        var _a;
         this.name = Utils.getNextId('panel_');
         this.elementPanel = document.createElement('div');
         this.elementPanel.tabIndex = 0;
@@ -112,10 +87,10 @@ export class PanelContainer {
         this.elementTitleText.classList.add('panel-titlebar-text');
         this.elementContentHost.classList.add('panel-content');
         // set the size of the dialog elements based on the panel's size
-        const panelWidth = this.elementContentContainer.clientWidth;
-        const panelHeight = this.elementContentContainer.clientHeight;
-        const titleHeight = this.elementTitle.clientHeight;
-        this.elementContentWrapper = document.createElement('div');
+        let panelWidth = this.elementContentContainer.clientWidth;
+        let panelHeight = this.elementContentContainer.clientHeight;
+        let titleHeight = this.elementTitle.clientHeight;
+        this.elementContentWrapper = document.createElement("div");
         this.elementContentWrapper.classList.add('panel-content-wrapper');
         this._setPanelDimensions(panelWidth, panelHeight + titleHeight);
         if (!this._hideCloseButton) {
@@ -127,7 +102,7 @@ export class PanelContainer {
         Utils.removeNode(this.elementContentWrapper);
         this.elementContentHost.appendChild(this.elementContentWrapper);
         // Extract the title from the content element's attribute
-        const contentTitle = this.elementContent.dataset.panelCaption;
+        let contentTitle = this.elementContent.dataset.panelCaption;
         if (contentTitle)
             this.title = contentTitle;
         this._updateTitle();
@@ -136,38 +111,29 @@ export class PanelContainer {
         this.mouseDownHandler = new EventHandler(this.elementPanel, 'mousedown', this.onMouseDown.bind(this));
         this.touchDownHandler = new EventHandler(this.elementPanel, 'touchstart', this.onMouseDown.bind(this), { passive: true });
         this._resolvedElementContent = this.elementContent;
-        if (this.elementContent instanceof HTMLSlotElement)
-            this._resolvedElementContent = this.elementContent.assignedElements()?.[0];
-    }
-    static createContextMenuContentCallback = (panelContainer) => {
-        const result = [];
-        if (panelContainer.dockManager.config.enableBrowserWindows) {
-            const btnNewBrowserWindow = document.createElement('div');
-            btnNewBrowserWindow.innerText = Localizer.getString('NewBrowserWindow');
-            result.push(btnNewBrowserWindow);
-            btnNewBrowserWindow.onclick = () => {
-                panelContainer.undockToBrowserDialog();
-                panelContainer.closeContextMenu();
-            };
+        if (this.elementContent instanceof HTMLSlotElement) {
+            this._resolvedElementContent = (_a = this.elementContent.assignedElements()) === null || _a === void 0 ? void 0 : _a[0];
         }
-        return result;
-    };
+        this.elementContent.parentElement.style.zIndex = this.zIndex;
+    }
     oncontextMenuClicked(e) {
         e.preventDefault();
         if (!this._ctxMenu && PanelContainer.createContextMenuContentCallback) {
             const menuItems = PanelContainer.createContextMenuContentCallback(this);
-            if (menuItems.length == 0)
+            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';
+            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
+        else {
             this.closeContextMenu();
+        }
     }
     closeContextMenu() {
         if (this._ctxMenu) {
@@ -177,9 +143,9 @@ export class PanelContainer {
         }
     }
     windowsContextMenuClose(e) {
-        const cp = e.composedPath();
-        for (const i in cp) {
-            const el = cp[i];
+        let cp = e.composedPath();
+        for (let i in cp) {
+            let el = cp[i];
             if (el == this._ctxMenu)
                 return;
         }
@@ -189,8 +155,9 @@ export class PanelContainer {
         this._canUndock = state;
         this.undockInitiator.enabled = state;
         this.eventListeners.forEach((listener) => {
-            if (listener.onDockEnabled)
+            if (listener.onDockEnabled) {
                 listener.onDockEnabled({ self: this, state: state });
+            }
         });
     }
     addListener(listener) {
@@ -204,29 +171,33 @@ export class PanelContainer {
     }
     set floatingDialog(value) {
         this._floatingDialog = value;
-        const canUndock = (this._floatingDialog === undefined);
+        let canUndock = (this._floatingDialog === undefined);
         this.undockInitiator.enabled = canUndock;
     }
-    static async loadFromState(state, dockManager) {
-        let elementContent;
-        let title;
-        if (!dockManager.getElementCallback) {
-            const elementName = state.element;
-            elementContent = document.getElementById(elementName);
-        }
-        else {
-            const res = await dockManager.getElementCallback(state);
-            elementContent = res.element;
-            title = res.title;
-        }
-        if (elementContent === null)
-            return null;
-        const ret = new PanelContainer(elementContent, dockManager, title);
-        ret.loadState(state);
-        return ret;
+    static loadFromState(state, dockManager) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let elementContent;
+            let title;
+            if (!dockManager.getElementCallback) {
+                let elementName = state.element;
+                elementContent = document.getElementById(elementName);
+            }
+            else {
+                let res = yield dockManager.getElementCallback(state);
+                elementContent = res.element;
+                title = res.title;
+            }
+            if (elementContent === null) {
+                return null;
+            }
+            let ret = new PanelContainer(elementContent, dockManager, title, state.panelType, state.hideCloseButton, state.panelIcon, state.zIndex);
+            ret.loadState(state);
+            return ret;
+        });
     }
     saveState(state) {
         state.panelIcon = this.icon;
+        state.zIndex = this.zIndex;
         state.element = this.elementContent.tagName === 'SLOT' ?
             //@ts-ignore
             this.elementContent.assignedElements()[0].getAttribute('dock-spawn-title') :
@@ -245,6 +216,7 @@ export class PanelContainer {
         this.hideCloseButton(state.hideCloseButton);
         this.panelType = state.panelType;
         this.icon = state.panelIcon;
+        this.zIndex = state.zIndex;
         this._updateTitle();
     }
     setActiveChild( /*child*/) {
@@ -257,12 +229,12 @@ export class PanelContainer {
             this.elementContentWrapper.removeChild(this._grayOut);
             this.elementButtonClose.style.display = this._hideCloseButton ? 'none' : 'block';
             this._grayOut = null;
-            if (!this._hideCloseButton) {
+            if (!this._hideCloseButton)
                 this.eventListeners.forEach((listener) => {
-                    if (listener.onHideCloseButton)
+                    if (listener.onHideCloseButton) {
                         listener.onHideCloseButton({ self: this, state: this._hideCloseButton });
+                    }
                 });
-            }
         }
         else if (show && !this._grayOut) {
             this._grayOut = document.createElement('div');
@@ -270,8 +242,9 @@ export class PanelContainer {
             this.elementButtonClose.style.display = 'none';
             this.elementContentWrapper.appendChild(this._grayOut);
             this.eventListeners.forEach((listener) => {
-                if (listener.onHideCloseButton)
+                if (listener.onHideCloseButton) {
                     listener.onHideCloseButton({ self: this, state: true });
+                }
             });
         }
     }
@@ -282,8 +255,9 @@ export class PanelContainer {
         this._hideCloseButton = state;
         this.elementButtonClose.style.display = state ? 'none' : 'block';
         this.eventListeners.forEach((listener) => {
-            if (listener.onHideCloseButton)
+            if (listener.onHideCloseButton) {
                 listener.onHideCloseButton({ self: this, state: state });
+            }
         });
     }
     destroy() {
@@ -295,8 +269,9 @@ export class PanelContainer {
             this.touchDownHandler.cancel();
             delete this.touchDownHandler;
         }
-        if (this.contextMenuHandler)
+        if (this.contextMenuHandler) {
             this.contextMenuHandler.cancel();
+        }
         Utils.removeNode(this.elementPanel);
         if (this.closeButtonClickedHandler) {
             this.closeButtonClickedHandler.cancel();
@@ -308,30 +283,30 @@ export class PanelContainer {
         }
     }
     /**
-       * Undocks the panel and and converts it to a dialog box
-       */
+     * Undocks the panel and and converts it to a dialog box
+     */
     performUndockToDialog(e, dragOffset) {
         this.isDialog = true;
         this.undockInitiator.enabled = false;
-        this.elementContentWrapper.style.display = 'block';
-        this.elementPanel.style.position = '';
+        this.elementContentWrapper.style.display = "block";
+        this.elementPanel.style.position = "";
         return this.dockManager.requestUndockToDialog(this, e, dragOffset);
     }
     /**
-      * Closes the panel
-      */
+    * Closes the panel
+    */
     performClose() {
         this.isDialog = true;
         this.undockInitiator.enabled = false;
-        this.elementContentWrapper.style.display = 'block';
+        this.elementContentWrapper.style.display = "block";
         this.elementContentContainer.style.display = 'none';
-        this.elementPanel.style.position = '';
+        this.elementPanel.style.position = "";
         this.dockManager.requestClose(this);
     }
     /**
-       * Undocks the container and from the layout hierarchy
-       * The container would be removed from the DOM
-       */
+     * Undocks the container and from the layout hierarchy
+     * The container would be removed from the DOM
+     */
     performUndock() {
         this.undockInitiator.enabled = false;
         this.dockManager.requestUndock(this);
@@ -362,11 +337,13 @@ export class PanelContainer {
         }
     }
     get resolvedElementContent() {
+        var _a;
         if (this._resolvedElementContent)
             return this._resolvedElementContent;
         this._resolvedElementContent = this.elementContent;
-        if (this.elementContent instanceof HTMLSlotElement)
-            this._resolvedElementContent = this.elementContent.assignedElements()?.[0];
+        if (this.elementContent instanceof HTMLSlotElement) {
+            this._resolvedElementContent = (_a = this.elementContent.assignedElements()) === null || _a === void 0 ? void 0 : _a[0];
+        }
         return this._resolvedElementContent;
     }
     panelDocked() {
@@ -391,7 +368,7 @@ export class PanelContainer {
                 this.elementContent.resizeHandler(width, height - this.elementTitle.clientHeight);
         }
         catch (err) {
-            console.log('error calling resizeHandler:', err, ' elt:', this.elementContent);
+            console.log("error calling resizeHandler:", err, " elt:", this.elementContent);
         }
     }
     _setPanelDimensions(width, height) {
@@ -399,8 +376,8 @@ export class PanelContainer {
         this.elementContentHost.style.width = width + 'px';
         this.elementContentContainer.style.width = width + 'px';
         this.elementPanel.style.width = width + 'px';
-        const titleBarHeight = this.elementTitle.clientHeight;
-        const contentHeight = height - titleBarHeight;
+        let titleBarHeight = this.elementTitle.clientHeight;
+        let contentHeight = height - titleBarHeight;
         this.elementContentHost.style.height = contentHeight + 'px';
         this.elementContentContainer.style.height = contentHeight + 'px';
         this.elementPanel.style.height = height + 'px';
@@ -436,10 +413,12 @@ export class PanelContainer {
     setHasChanges(changes) {
         this.hasChanges = changes;
         this._updateTitle();
-        if (changes)
+        if (changes) {
             this.elementTitleText.classList.add('panel-has-changes');
-        else
+        }
+        else {
             this.elementTitleText.classList.remove('panel-has-changes');
+        }
         if (this.onTitleChanged)
             this.onTitleChanged(this, this.title);
     }
@@ -479,41 +458,58 @@ export class PanelContainer {
             },
             blured: (e) => {
                 this.dockManager.activePanel = null;
-            },
+            }
         });
     }
-    async close() {
-        this.closeInternal(true);
-    }
-    async closeInternal(runCallback) {
-        let close = true;
-        if (!(this.elementContentContainer.parentElement === this.dockManager.config.dialogRootElement))
-            this.prepareForDocking();
-        if (this.elementContentContainer.parentElement === this.dockManager.config.dialogRootElement) {
-            if (!runCallback)
-                close = true;
-            else if (this.closePanelContainerCallback)
-                close = await this.closePanelContainerCallback(this);
-            else if (this.dockManager.closePanelContainerCallback)
-                close = await this.dockManager.closePanelContainerCallback(this);
-            if (close) {
-                this.dockManager.config.dialogRootElement.removeChild(this.elementContentContainer);
-                if (this.isDialog) {
-                    if (this.floatingDialog) {
-                        //this.floatingDialog.hide();
-                        this.floatingDialog.close(); // fires onClose notification
-                    }
-                }
-                else {
-                    try {
-                        this.dockManager.notifyOnClosePanel(this);
+    close() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.closeInternal(true);
+        });
+    }
+    closeInternal(runCallback) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let close = true;
+            if (!(this.elementContentContainer.parentElement === this.dockManager.config.dialogRootElement))
+                this.prepareForDocking();
+            if (this.elementContentContainer.parentElement === this.dockManager.config.dialogRootElement) {
+                if (!runCallback)
+                    close = true;
+                else if (this.closePanelContainerCallback)
+                    close = yield this.closePanelContainerCallback(this);
+                else if (this.dockManager.closePanelContainerCallback)
+                    close = yield this.dockManager.closePanelContainerCallback(this);
+                if (close) {
+                    this.dockManager.config.dialogRootElement.removeChild(this.elementContentContainer);
+                    if (this.isDialog) {
+                        if (this.floatingDialog) {
+                            //this.floatingDialog.hide();
+                            this.floatingDialog.close(); // fires onClose notification
+                        }
                     }
-                    catch (err) {
-                        console.error(err);
+                    else {
+                        try {
+                            this.dockManager.notifyOnClosePanel(this);
+                        }
+                        catch (err) {
+                            console.error(err);
+                        }
+                        this.performClose();
                     }
-                    this.performClose();
                 }
             }
-        }
+        });
     }
 }
+PanelContainer.createContextMenuContentCallback = (panelContainer) => {
+    const result = [];
+    if (panelContainer.dockManager.config.enableBrowserWindows) {
+        let btnNewBrowserWindow = document.createElement('div');
+        btnNewBrowserWindow.innerText = Localizer.getString('NewBrowserWindow');
+        result.push(btnNewBrowserWindow);
+        btnNewBrowserWindow.onclick = () => {
+            panelContainer.undockToBrowserDialog();
+            panelContainer.closeContextMenu();
+        };
+    }
+    return result;
+};