dockview-core 3.2.0 → 4.0.0

package/dist/cjs/api/component.api.d.ts

@@ -352,7 +352,6 @@ export declare class DockviewApi implements CommonApi<SerializedDockview> {
      * Total number of panels.
      */
     get totalPanels(): number;
-    get gap(): number;
     /**
      * Invoked when the active group changes. May be undefined if no group is active.
      */
@@ -514,7 +513,6 @@ export declare class DockviewApi implements CommonApi<SerializedDockview> {
             window: Window;
         }) => void;
     }): Promise<boolean>;
-    setGap(gap: number | undefined): void;
     updateOptions(options: Partial<DockviewComponentOptions>): void;
     /**
      * Release resources and teardown component. Do not call when using framework versions of dockview.

package/dist/cjs/api/component.api.js

@@ -662,13 +662,6 @@ var DockviewApi = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(DockviewApi.prototype, "gap", {
-        get: function () {
-            return this.component.gap;
-        },
-        enumerable: false,
-        configurable: true
-    });
     Object.defineProperty(DockviewApi.prototype, "onDidActiveGroupChange", {
         /**
          * Invoked when the active group changes. May be undefined if no group is active.
@@ -977,9 +970,6 @@ var DockviewApi = /** @class */ (function () {
     DockviewApi.prototype.addPopoutGroup = function (item, options) {
         return this.component.addPopoutGroup(item, options);
     };
-    DockviewApi.prototype.setGap = function (gap) {
-        this.component.updateOptions({ gap: gap });
-    };
     DockviewApi.prototype.updateOptions = function (options) {
         this.component.updateOptions(options);
     };

package/dist/cjs/dnd/abstractDragHandler.js

@@ -63,14 +63,16 @@ var DragHandler = /** @class */ (function (_super) {
                      * For example: in react-dnd if dataTransfer.types is not set then the dragStart event will be cancelled
                      * through .preventDefault(). Since this is applied globally to all drag events this would break dockviews
                      * dnd logic. You can see the code at
-                     * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
+                 P    * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
                      */
                     event.dataTransfer.setData('text/plain', '');
                 }
             }
         }), (0, events_1.addDisposableListener)(this.el, 'dragend', function () {
             _this.pointerEventsDisposable.dispose();
-            _this.dataDisposable.dispose();
+            setTimeout(function () {
+                _this.dataDisposable.dispose(); // allow the data to be read by other handlers before disposing
+            }, 0);
         }));
     };
     return DragHandler;

package/dist/cjs/dnd/dropTargetAnchorContainer.d.ts

@@ -0,0 +1,16 @@
+import { CompositeDisposable } from '../lifecycle';
+import { DropTargetTargetModel } from './droptarget';
+export declare class DropTargetAnchorContainer extends CompositeDisposable {
+    readonly element: HTMLElement;
+    private _model;
+    private _outline;
+    private _disabled;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get model(): DropTargetTargetModel | undefined;
+    constructor(element: HTMLElement, options: {
+        disabled: boolean;
+    });
+    private createContainer;
+    private createAnchor;
+}

package/dist/cjs/dnd/dropTargetAnchorContainer.js

@@ -0,0 +1,105 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropTargetAnchorContainer = void 0;
+var lifecycle_1 = require("../lifecycle");
+var DropTargetAnchorContainer = /** @class */ (function (_super) {
+    __extends(DropTargetAnchorContainer, _super);
+    function DropTargetAnchorContainer(element, options) {
+        var _this = _super.call(this) || this;
+        _this.element = element;
+        _this._disabled = false;
+        _this._disabled = options.disabled;
+        _this.addDisposables(lifecycle_1.Disposable.from(function () {
+            var _a;
+            (_a = _this.model) === null || _a === void 0 ? void 0 : _a.clear();
+        }));
+        return _this;
+    }
+    Object.defineProperty(DropTargetAnchorContainer.prototype, "disabled", {
+        get: function () {
+            return this._disabled;
+        },
+        set: function (value) {
+            var _a;
+            if (this.disabled === value) {
+                return;
+            }
+            this._disabled = value;
+            if (value) {
+                (_a = this.model) === null || _a === void 0 ? void 0 : _a.clear();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DropTargetAnchorContainer.prototype, "model", {
+        get: function () {
+            var _this = this;
+            if (this.disabled) {
+                return undefined;
+            }
+            return {
+                clear: function () {
+                    var _a;
+                    if (_this._model) {
+                        (_a = _this._model.root.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(_this._model.root);
+                    }
+                    _this._model = undefined;
+                },
+                exists: function () {
+                    return !!_this._model;
+                },
+                getElements: function (event, outline) {
+                    var changed = _this._outline !== outline;
+                    _this._outline = outline;
+                    if (_this._model) {
+                        _this._model.changed = changed;
+                        return _this._model;
+                    }
+                    var container = _this.createContainer();
+                    var anchor = _this.createAnchor();
+                    _this._model = { root: container, overlay: anchor, changed: changed };
+                    container.appendChild(anchor);
+                    _this.element.appendChild(container);
+                    if ((event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement) {
+                        var targetBox = event.target.getBoundingClientRect();
+                        var box = _this.element.getBoundingClientRect();
+                        anchor.style.left = "".concat(targetBox.left - box.left, "px");
+                        anchor.style.top = "".concat(targetBox.top - box.top, "px");
+                    }
+                    return _this._model;
+                },
+            };
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DropTargetAnchorContainer.prototype.createContainer = function () {
+        var el = document.createElement('div');
+        el.className = 'dv-drop-target-container';
+        return el;
+    };
+    DropTargetAnchorContainer.prototype.createAnchor = function () {
+        var el = document.createElement('div');
+        el.className = 'dv-drop-target-anchor';
+        el.style.visibility = 'hidden';
+        return el;
+    };
+    return DropTargetAnchorContainer;
+}(lifecycle_1.CompositeDisposable));
+exports.DropTargetAnchorContainer = DropTargetAnchorContainer;

package/dist/cjs/dnd/droptarget.d.ts

@@ -27,10 +27,22 @@ export type DroptargetOverlayModel = {
     size?: MeasuredValue;
     activationSize?: MeasuredValue;
 };
+export interface DropTargetTargetModel {
+    getElements(event?: DragEvent, outline?: HTMLElement): {
+        root: HTMLElement;
+        overlay: HTMLElement;
+        changed: boolean;
+    };
+    exists(): boolean;
+    clear(): void;
+}
 export interface DroptargetOptions {
     canDisplayOverlay: CanDisplayOverlay;
     acceptedTargetZones: Position[];
     overlayModel?: DroptargetOverlayModel;
+    getOverrideTarget?: () => DropTargetTargetModel | undefined;
+    className?: string;
+    getOverlayOutline?: () => HTMLElement | null;
 }
 export declare class Droptarget extends CompositeDisposable {
     private readonly element;
@@ -45,6 +57,10 @@ export declare class Droptarget extends CompositeDisposable {
     readonly onWillShowOverlay: Event<WillShowOverlayEvent>;
     readonly dnd: DragAndDropObserver;
     private static USED_EVENT_ID;
+    private static ACTUAL_TARGET;
+    private _disabled;
+    get disabled(): boolean;
+    set disabled(value: boolean);
     get state(): Position | undefined;
     constructor(element: HTMLElement, options: DroptargetOptions);
     setTargetZones(acceptedTargetZones: Position[]): void;

package/dist/cjs/dnd/droptarget.js

@@ -99,23 +99,34 @@ var Droptarget = /** @class */ (function (_super) {
         _this.onDrop = _this._onDrop.event;
         _this._onWillShowOverlay = new events_1.Emitter();
         _this.onWillShowOverlay = _this._onWillShowOverlay.event;
+        _this._disabled = false;
         // use a set to take advantage of #<set>.has
         _this._acceptedTargetZonesSet = new Set(_this.options.acceptedTargetZones);
         _this.dnd = new dnd_1.DragAndDropObserver(_this.element, {
-            onDragEnter: function () { return undefined; },
+            onDragEnter: function () {
+                var _a, _b, _c;
+                (_c = (_b = (_a = _this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.getElements();
+            },
             onDragOver: function (e) {
+                var _a, _b, _c, _d, _e, _f, _g;
+                Droptarget.ACTUAL_TARGET = _this;
+                var overrideTraget = (_b = (_a = _this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
                 if (_this._acceptedTargetZonesSet.size === 0) {
+                    if (overrideTraget) {
+                        return;
+                    }
                     _this.removeDropTarget();
                     return;
                 }
-                var width = _this.element.clientWidth;
-                var height = _this.element.clientHeight;
+                var target = (_e = (_d = (_c = _this.options).getOverlayOutline) === null || _d === void 0 ? void 0 : _d.call(_c)) !== null && _e !== void 0 ? _e : _this.element;
+                var width = target.offsetWidth;
+                var height = target.offsetHeight;
                 if (width === 0 || height === 0) {
                     return; // avoid div!0
                 }
                 var rect = e.currentTarget.getBoundingClientRect();
-                var x = e.clientX - rect.left;
-                var y = e.clientY - rect.top;
+                var x = ((_f = e.clientX) !== null && _f !== void 0 ? _f : 0) - rect.left;
+                var y = ((_g = e.clientY) !== null && _g !== void 0 ? _g : 0) - rect.top;
                 var quadrant = _this.calculateQuadrant(_this._acceptedTargetZonesSet, x, y, width, height);
                 /**
                  * If the event has already been used by another DropTarget instance
@@ -128,6 +139,9 @@ var Droptarget = /** @class */ (function (_super) {
                     return;
                 }
                 if (!_this.options.canDisplayOverlay(e, quadrant)) {
+                    if (overrideTraget) {
+                        return;
+                    }
                     _this.removeDropTarget();
                     return;
                 }
@@ -145,29 +159,59 @@ var Droptarget = /** @class */ (function (_super) {
                     return;
                 }
                 _this.markAsUsed(e);
-                if (!_this.targetElement) {
+                if (overrideTraget) {
+                    //
+                }
+                else if (!_this.targetElement) {
                     _this.targetElement = document.createElement('div');
                     _this.targetElement.className = 'dv-drop-target-dropzone';
                     _this.overlayElement = document.createElement('div');
                     _this.overlayElement.className = 'dv-drop-target-selection';
                     _this._state = 'center';
                     _this.targetElement.appendChild(_this.overlayElement);
-                    _this.element.classList.add('dv-drop-target');
-                    _this.element.append(_this.targetElement);
+                    target.classList.add('dv-drop-target');
+                    target.append(_this.targetElement);
+                    // this.overlayElement.style.opacity = '0';
+                    // requestAnimationFrame(() => {
+                    //     if (this.overlayElement) {
+                    //         this.overlayElement.style.opacity = '';
+                    //     }
+                    // });
                 }
                 _this.toggleClasses(quadrant, width, height);
                 _this._state = quadrant;
             },
             onDragLeave: function () {
+                var _a, _b;
+                var target = (_b = (_a = _this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
+                if (target) {
+                    return;
+                }
                 _this.removeDropTarget();
             },
-            onDragEnd: function () {
+            onDragEnd: function (e) {
+                var _a, _b;
+                var target = (_b = (_a = _this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
+                if (target && Droptarget.ACTUAL_TARGET === _this) {
+                    if (_this._state) {
+                        // only stop the propagation of the event if we are dealing with it
+                        // which is only when the target has state
+                        e.stopPropagation();
+                        _this._onDrop.fire({
+                            position: _this._state,
+                            nativeEvent: e,
+                        });
+                    }
+                }
                 _this.removeDropTarget();
+                target === null || target === void 0 ? void 0 : target.clear();
             },
             onDrop: function (e) {
+                var _a, _b, _c;
                 e.preventDefault();
                 var state = _this._state;
                 _this.removeDropTarget();
+                (_c = (_b = (_a = _this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.clear();
                 if (state) {
                     // only stop the propagation of the event if we are dealing with it
                     // which is only when the target has state
@@ -179,6 +223,16 @@ var Droptarget = /** @class */ (function (_super) {
         _this.addDisposables(_this._onDrop, _this._onWillShowOverlay, _this.dnd);
         return _this;
     }
+    Object.defineProperty(Droptarget.prototype, "disabled", {
+        get: function () {
+            return this._disabled;
+        },
+        set: function (value) {
+            this._disabled = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(Droptarget.prototype, "state", {
         get: function () {
             return this._state;
@@ -210,8 +264,9 @@ var Droptarget = /** @class */ (function (_super) {
         return typeof value === 'boolean' && value;
     };
     Droptarget.prototype.toggleClasses = function (quadrant, width, height) {
-        var _a, _b;
-        if (!this.overlayElement) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        var target = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
+        if (!target && !this.overlayElement) {
             return;
         }
         var isSmallX = width < SMALL_WIDTH_BOUNDARY;
@@ -225,7 +280,7 @@ var Droptarget = /** @class */ (function (_super) {
         var topClass = !isSmallY && isTop;
         var bottomClass = !isSmallY && isBottom;
         var size = 1;
-        var sizeOptions = (_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : DEFAULT_SIZE;
+        var sizeOptions = (_d = (_c = this.options.overlayModel) === null || _c === void 0 ? void 0 : _c.size) !== null && _d !== void 0 ? _d : DEFAULT_SIZE;
         if (sizeOptions.type === 'percentage') {
             size = (0, math_1.clamp)(sizeOptions.value, 0, 100) / 100;
         }
@@ -237,6 +292,74 @@ var Droptarget = /** @class */ (function (_super) {
                 size = (0, math_1.clamp)(0, sizeOptions.value, height) / height;
             }
         }
+        if (target) {
+            var outlineEl = (_g = (_f = (_e = this.options).getOverlayOutline) === null || _f === void 0 ? void 0 : _f.call(_e)) !== null && _g !== void 0 ? _g : this.element;
+            var elBox = outlineEl.getBoundingClientRect();
+            var ta = target.getElements(undefined, outlineEl);
+            var el = ta.root;
+            var overlay_1 = ta.overlay;
+            var bigbox = el.getBoundingClientRect();
+            var rootTop = elBox.top - bigbox.top;
+            var rootLeft = elBox.left - bigbox.left;
+            var box_1 = {
+                top: rootTop,
+                left: rootLeft,
+                width: width,
+                height: height,
+            };
+            if (rightClass) {
+                box_1.left = rootLeft + width * (1 - size);
+                box_1.width = width * size;
+            }
+            else if (leftClass) {
+                box_1.width = width * size;
+            }
+            else if (topClass) {
+                box_1.height = height * size;
+            }
+            else if (bottomClass) {
+                box_1.top = rootTop + height * (1 - size);
+                box_1.height = height * size;
+            }
+            if (isSmallX && isLeft) {
+                box_1.width = 4;
+            }
+            if (isSmallX && isRight) {
+                box_1.left = rootLeft + width - 4;
+                box_1.width = 4;
+            }
+            var topPx = "".concat(Math.round(box_1.top), "px");
+            var leftPx = "".concat(Math.round(box_1.left), "px");
+            var widthPx = "".concat(Math.round(box_1.width), "px");
+            var heightPx = "".concat(Math.round(box_1.height), "px");
+            if (overlay_1.style.top === topPx &&
+                overlay_1.style.left === leftPx &&
+                overlay_1.style.width === widthPx &&
+                overlay_1.style.height === heightPx) {
+                return;
+            }
+            overlay_1.style.top = topPx;
+            overlay_1.style.left = leftPx;
+            overlay_1.style.width = widthPx;
+            overlay_1.style.height = heightPx;
+            overlay_1.style.visibility = 'visible';
+            overlay_1.className = "dv-drop-target-anchor".concat(this.options.className ? " ".concat(this.options.className) : '');
+            (0, dom_1.toggleClass)(overlay_1, 'dv-drop-target-left', isLeft);
+            (0, dom_1.toggleClass)(overlay_1, 'dv-drop-target-right', isRight);
+            (0, dom_1.toggleClass)(overlay_1, 'dv-drop-target-top', isTop);
+            (0, dom_1.toggleClass)(overlay_1, 'dv-drop-target-bottom', isBottom);
+            (0, dom_1.toggleClass)(overlay_1, 'dv-drop-target-center', quadrant === 'center');
+            if (ta.changed) {
+                (0, dom_1.toggleClass)(overlay_1, 'dv-drop-target-anchor-container-changed', true);
+                setTimeout(function () {
+                    (0, dom_1.toggleClass)(overlay_1, 'dv-drop-target-anchor-container-changed', false);
+                }, 10);
+            }
+            return;
+        }
+        if (!this.overlayElement) {
+            return;
+        }
         var box = { top: '0px', left: '0px', width: '100%', height: '100%' };
         /**
          * You can also achieve the overlay placement using the transform CSS property
@@ -293,12 +416,13 @@ var Droptarget = /** @class */ (function (_super) {
         return calculateQuadrantAsPixels(overlayType, x, y, width, height, activationSizeOptions.value);
     };
     Droptarget.prototype.removeDropTarget = function () {
+        var _a;
         if (this.targetElement) {
             this._state = undefined;
-            this.element.removeChild(this.targetElement);
+            (_a = this.targetElement.parentElement) === null || _a === void 0 ? void 0 : _a.classList.remove('dv-drop-target');
+            this.targetElement.remove();
             this.targetElement = undefined;
             this.overlayElement = undefined;
-            this.element.classList.remove('dv-drop-target');
         }
     };
     Droptarget.USED_EVENT_ID = '__dockview_droptarget_event_is_used__';

package/dist/cjs/dnd/ghost.d.ts

@@ -1 +1,4 @@
-export declare function addGhostImage(dataTransfer: DataTransfer, ghostElement: HTMLElement): void;
+export declare function addGhostImage(dataTransfer: DataTransfer, ghostElement: HTMLElement, options?: {
+    x?: number;
+    y?: number;
+}): void;

package/dist/cjs/dnd/ghost.js

@@ -2,11 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addGhostImage = void 0;
 var dom_1 = require("../dom");
-function addGhostImage(dataTransfer, ghostElement) {
+function addGhostImage(dataTransfer, ghostElement, options) {
+    var _a, _b;
     // class dockview provides to force ghost image to be drawn on a different layer and prevent weird rendering issues
     (0, dom_1.addClasses)(ghostElement, 'dv-dragged');
     document.body.appendChild(ghostElement);
-    dataTransfer.setDragImage(ghostElement, 0, 0);
+    dataTransfer.setDragImage(ghostElement, (_a = options === null || options === void 0 ? void 0 : options.x) !== null && _a !== void 0 ? _a : 0, (_b = options === null || options === void 0 ? void 0 : options.y) !== null && _b !== void 0 ? _b : 0);
     setTimeout(function () {
         (0, dom_1.removeClasses)(ghostElement, 'dv-dragged');
         ghostElement.remove();

package/dist/cjs/dnd/groupDragHandler.js

@@ -63,8 +63,10 @@ var GroupDragHandler = /** @class */ (function (_super) {
             ghostElement.style.lineHeight = '20px';
             ghostElement.style.borderRadius = '12px';
             ghostElement.style.position = 'absolute';
+            ghostElement.style.pointerEvents = 'none';
+            ghostElement.style.top = '-9999px';
             ghostElement.textContent = "Multiple Panels (".concat(this.group.size, ")");
-            (0, ghost_1.addGhostImage)(dataTransfer, ghostElement);
+            (0, ghost_1.addGhostImage)(dataTransfer, ghostElement, { y: -10, x: 30 });
         }
         return {
             dispose: function () {

package/dist/cjs/dockview/components/panel/content.js

@@ -36,7 +36,15 @@ var ContentContainer = /** @class */ (function (_super) {
         _this._element.className = 'dv-content-container';
         _this._element.tabIndex = -1;
         _this.addDisposables(_this._onDidFocus, _this._onDidBlur);
+        var target = group.dropTargetContainer;
         _this.dropTarget = new droptarget_1.Droptarget(_this.element, {
+            getOverlayOutline: function () {
+                var _a;
+                return ((_a = accessor.options.theme) === null || _a === void 0 ? void 0 : _a.dndPanelOverlay) === 'group'
+                    ? _this.element.parentElement
+                    : null;
+            },
+            className: 'dv-drop-target-content',
             acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
             canDisplayOverlay: function (event, position) {
                 if (_this.group.locked === 'no-drop-target' ||
@@ -50,22 +58,11 @@ var ContentContainer = /** @class */ (function (_super) {
                     return false;
                 }
                 if (data && data.viewId === _this.accessor.id) {
-                    if (data.groupId === _this.group.id) {
-                        if (position === 'center') {
-                            // don't allow to drop on self for center position
-                            return false;
-                        }
-                        if (data.panelId === null) {
-                            // don't allow group move to drop anywhere on self
-                            return false;
-                        }
-                    }
-                    var groupHasOnePanelAndIsActiveDragElement = _this.group.panels.length === 1 &&
-                        data.groupId === _this.group.id;
-                    return !groupHasOnePanelAndIsActiveDragElement;
+                    return true;
                 }
                 return _this.group.canDisplayOverlay(event, position, 'content');
             },
+            getOverrideTarget: target ? function () { return target.model; } : undefined,
         });
         _this.addDisposables(_this.dropTarget);
         return _this;

package/dist/cjs/dockview/components/popupService.d.ts

@@ -0,0 +1,13 @@
+import { CompositeDisposable } from '../../lifecycle';
+export declare class PopupService extends CompositeDisposable {
+    private readonly root;
+    private readonly _element;
+    private _active;
+    private readonly _activeDisposable;
+    constructor(root: HTMLElement);
+    openPopover(element: HTMLElement, position: {
+        x: number;
+        y: number;
+    }): void;
+    close(): void;
+}

package/dist/cjs/dockview/components/popupService.js

@@ -0,0 +1,76 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopupService = void 0;
+var events_1 = require("../../events");
+var lifecycle_1 = require("../../lifecycle");
+var PopupService = /** @class */ (function (_super) {
+    __extends(PopupService, _super);
+    function PopupService(root) {
+        var _this = _super.call(this) || this;
+        _this.root = root;
+        _this._active = null;
+        _this._activeDisposable = new lifecycle_1.MutableDisposable();
+        _this._element = document.createElement('div');
+        _this._element.className = 'dv-popover-anchor';
+        _this._element.style.position = 'relative';
+        _this.root.prepend(_this._element);
+        _this.addDisposables(lifecycle_1.Disposable.from(function () {
+            _this.close();
+        }), _this._activeDisposable);
+        return _this;
+    }
+    PopupService.prototype.openPopover = function (element, position) {
+        var _this = this;
+        this.close();
+        var wrapper = document.createElement('div');
+        wrapper.style.position = 'absolute';
+        wrapper.style.zIndex = '99';
+        wrapper.appendChild(element);
+        var anchorBox = this._element.getBoundingClientRect();
+        var offsetX = anchorBox.left;
+        var offsetY = anchorBox.top;
+        wrapper.style.top = "".concat(position.y - offsetY, "px");
+        wrapper.style.left = "".concat(position.x - offsetX, "px");
+        this._element.appendChild(wrapper);
+        this._active = wrapper;
+        this._activeDisposable.value = new lifecycle_1.CompositeDisposable((0, events_1.addDisposableWindowListener)(window, 'pointerdown', function (event) {
+            var _a;
+            var target = event.target;
+            if (!(target instanceof HTMLElement)) {
+                return;
+            }
+            var el = target;
+            while (el && el !== wrapper) {
+                el = (_a = el === null || el === void 0 ? void 0 : el.parentElement) !== null && _a !== void 0 ? _a : null;
+            }
+            if (el) {
+                return; // clicked within popover
+            }
+            _this.close();
+        }));
+    };
+    PopupService.prototype.close = function () {
+        if (this._active) {
+            this._active.remove();
+            this._activeDisposable.dispose();
+            this._active = null;
+        }
+    };
+    return PopupService;
+}(lifecycle_1.CompositeDisposable));
+exports.PopupService = PopupService;