@mintplayer/ng-bootstrap 15.27.0 → 16.0.0

package/fesm2022/mintplayer-ng-bootstrap-dock.mjs

@@ -0,0 +1,598 @@
+import * as i0 from '@angular/core';
+import { Component, ViewChild, Input, ContentChildren, ViewChildren, HostBinding, Injectable, HostListener, NgModule } from '@angular/core';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from '@angular/cdk/portal';
+import { DomPortal, PortalModule } from '@angular/cdk/portal';
+import { BsCardModule } from '@mintplayer/ng-bootstrap/card';
+import * as i5 from '@mintplayer/ng-bootstrap/splitter';
+import { BsSplitterModule } from '@mintplayer/ng-bootstrap/splitter';
+import * as i7 from '@mintplayer/ng-bootstrap/resizable';
+import { BsResizableModule } from '@mintplayer/ng-bootstrap/resizable';
+import * as i6 from '@mintplayer/ng-bootstrap/tab-control';
+import { BsTabControlModule } from '@mintplayer/ng-bootstrap/tab-control';
+import * as i4 from '@mintplayer/ng-bootstrap/instance-of';
+import { BsInstanceOfModule } from '@mintplayer/ng-bootstrap/instance-of';
+import { BehaviorSubject, Subject, takeUntil, map, take } from 'rxjs';
+import { deepClone } from '@mintplayer/parentify';
+import * as i1 from '@angular/cdk/overlay';
+
+class BsDockPanelComponent {
+    constructor() {
+        this.panelId = '';
+    }
+    ngAfterViewInit() {
+        this.headerPortal = new DomPortal(this.headerElement.nativeElement);
+        this.contentPortal = new DomPortal(this.contentElement.nativeElement);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: BsDockPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: BsDockPanelComponent, selector: "bs-dock-panel", inputs: { panelId: "panelId" }, viewQueries: [{ propertyName: "headerElement", first: true, predicate: ["headerElement"], descendants: true }, { propertyName: "contentElement", first: true, predicate: ["contentElement"], descendants: true }], ngImport: i0, template: "<!-- <bs-split-panel> -->\n<div #headerElement class=\"dock-header\">\n    <ng-content select=\"bs-dock-panel-header\"></ng-content>\n</div>\n<div #contentElement>\n    <ng-content></ng-content>\n</div>\n<!-- </bs-split-panel> -->", styles: [".dock-header{padding:var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);margin:calc(-1 * var(--bs-nav-link-padding-y)) calc(-1 * var(--bs-nav-link-padding-x))}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: BsDockPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-dock-panel', template: "<!-- <bs-split-panel> -->\n<div #headerElement class=\"dock-header\">\n    <ng-content select=\"bs-dock-panel-header\"></ng-content>\n</div>\n<div #contentElement>\n    <ng-content></ng-content>\n</div>\n<!-- </bs-split-panel> -->", styles: [".dock-header{padding:var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);margin:calc(-1 * var(--bs-nav-link-padding-y)) calc(-1 * var(--bs-nav-link-padding-x))}\n"] }]
+        }], propDecorators: { headerElement: [{
+                type: ViewChild,
+                args: ['headerElement']
+            }], contentElement: [{
+                type: ViewChild,
+                args: ['contentElement']
+            }], panelId: [{
+                type: Input
+            }] } });
+
+class BsDockPane {
+}
+
+class BsTabGroupPane extends BsDockPane {
+    constructor(data) {
+        super();
+        this.panes = [];
+        Object.assign(this, data);
+    }
+    get isEmpty() {
+        return this.panes.length === 0;
+    }
+}
+
+class BsDocumentHost extends BsDockPane {
+    constructor(data) {
+        super();
+        Object.assign(this, data);
+    }
+    get isEmpty() {
+        return this.rootPane?.isEmpty ?? true;
+    }
+}
+
+class BsContentPane extends BsDockPane {
+    constructor(data) {
+        super();
+        Object.assign(this, data);
+    }
+    get isEmpty() {
+        return false;
+    }
+}
+
+class BsFloatingPane extends BsDockPane {
+    constructor(data) {
+        super();
+        Object.assign(this, data);
+    }
+    get isEmpty() {
+        return this.pane?.isEmpty ?? true;
+    }
+}
+
+class BsSplitPane extends BsDockPane {
+    constructor(data) {
+        super();
+        this.orientation = 'horizontal';
+        this.panes = [];
+        Object.assign(this, data);
+    }
+    get isEmpty() {
+        return this.panes.length === 0;
+    }
+}
+
+var EPaneType;
+(function (EPaneType) {
+    EPaneType[EPaneType["documentHost"] = 1] = "documentHost";
+    EPaneType[EPaneType["splitPane"] = 2] = "splitPane";
+    EPaneType[EPaneType["contentPane"] = 3] = "contentPane";
+    EPaneType[EPaneType["tabGroupPane"] = 4] = "tabGroupPane";
+})(EPaneType || (EPaneType = {}));
+
+class BsDockPaneRendererComponent {
+    constructor(overlay, element) {
+        this.overlay = overlay;
+        this.paneTypes = EPaneType;
+        this.BsDocumentHostType = BsDocumentHost;
+        this.BsTabGroupType = BsTabGroupPane;
+        this.BsSplitterType = BsSplitPane;
+        this.BsContentPaneType = BsContentPane;
+        this.BsFloatingPaneType = BsFloatingPane;
+        //#region Layout
+        this.layout$ = new BehaviorSubject(null);
+        this.portal = new DomPortal(element);
+    }
+    get layout() {
+        return this.layout$.value;
+    }
+    set layout(value) {
+        this.layout$.next(value);
+    }
+    moveToOverlay() {
+        if (!this.overlayRef && !this.portal.isAttached) {
+            this.overlayRef = this.overlay.create({});
+            this.portal.attach(this.overlayRef);
+        }
+    }
+    disposeOverlay() {
+        if (this.overlayRef) {
+            this.portal.detach();
+            this.overlayRef.dispose();
+            this.overlayRef = undefined;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: BsDockPaneRendererComponent, deps: [{ token: i1.Overlay }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: BsDockPaneRendererComponent, selector: "bs-dock-pane-renderer", inputs: { layout: "layout" }, ngImport: i0, template: "<!-- <ng-content></ng-content> -->\n<ng-container [bsInstanceof]=\"layout$ | async\">\n    <div *bsInstanceofCase=\"BsDocumentHostType; let documentHost\" data-hello>\n        <bs-dock-pane-renderer [layout]=\"documentHost\"></bs-dock-pane-renderer>\n    </div>\n    <bs-tab-control *bsInstanceofCase=\"BsTabGroupType; let tabGroup\" [allowDragDrop]=\"false\" class=\"d-flex flex-column h-100 dock-tabs\">\n        <bs-tab-page *ngFor=\"let tab of tabGroup.panes\">\n            <ng-container *bsTabPageHeader>\n                <ng-template [cdkPortalOutlet]=\"tab.dockPanel.headerPortal\"></ng-template>\n            </ng-container>\n            <bs-dock-pane-renderer [layout]=\"tab\"></bs-dock-pane-renderer>\n        </bs-tab-page>\n    </bs-tab-control>\n    <bs-splitter *bsInstanceofCase=\"BsSplitterType; let splitter\" [orientation]=\"splitter.orientation\">\n        <bs-split-panel *ngFor=\"let panel of splitter.panes\">\n            <bs-dock-pane-renderer [layout]=\"panel\"></bs-dock-pane-renderer>\n        </bs-split-panel>\n    </bs-splitter>\n    <ng-container *bsInstanceofCase=\"BsContentPaneType; let content\">\n        <ng-template [cdkPortalOutlet]=\"content.dockPanel.contentPortal\"></ng-template>\n    </ng-container>\n    <ng-container *bsInstanceofCase=\"BsFloatingPaneType; let floating\">\n        <bs-resizable *ngIf=\"floating.pane\" [positioning]=\"'absolute'\" [presetPosition]=\"{ left: floating.location?.x ?? 0, top: floating.location?.y ?? 0, width: floating.size?.width ?? 200, height: floating.size?.height ?? 100 }\">\n            <bs-dock-pane-renderer [layout]=\"floating.pane\"></bs-dock-pane-renderer>\n        </bs-resizable>\n    </ng-container>\n    <div *bsInstanceofDefault>\n        No match\n    </div>\n</ng-container>", styles: [".dock-tabs{background:#F3F3F3}:host ::ng-deep .tab-page-content{background:#FFF;min-height:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: i4.BsInstanceOfDirective, selector: "[bsInstanceof]", inputs: ["bsInstanceof"] }, { kind: "directive", type: i4.BsInstanceofCaseDirective, selector: "[bsInstanceofCase]", inputs: ["bsInstanceofCase"] }, { kind: "directive", type: i4.BsInstanceOfDefaultDirective, selector: "[bsInstanceofDefault]" }, { kind: "component", type: i5.BsSplitterComponent, selector: "bs-splitter", inputs: ["orientation"] }, { kind: "component", type: i5.BsSplitPanelComponent, selector: "bs-split-panel" }, { kind: "component", type: i6.BsTabControlComponent, selector: "bs-tab-control", inputs: ["border", "restrictDragging", "selectFirstTab", "tabsPosition", "allowDragDrop"] }, { kind: "component", type: i6.BsTabPageComponent, selector: "bs-tab-page", inputs: ["disabled"] }, { kind: "directive", type: i6.BsTabPageHeaderDirective, selector: "[bsTabPageHeader]" }, { kind: "component", type: i7.BsResizableComponent, selector: "bs-resizable", inputs: ["positioning", "presetPosition"] }, { kind: "component", type: BsDockPaneRendererComponent, selector: "bs-dock-pane-renderer", inputs: ["layout"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: BsDockPaneRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-dock-pane-renderer', template: "<!-- <ng-content></ng-content> -->\n<ng-container [bsInstanceof]=\"layout$ | async\">\n    <div *bsInstanceofCase=\"BsDocumentHostType; let documentHost\" data-hello>\n        <bs-dock-pane-renderer [layout]=\"documentHost\"></bs-dock-pane-renderer>\n    </div>\n    <bs-tab-control *bsInstanceofCase=\"BsTabGroupType; let tabGroup\" [allowDragDrop]=\"false\" class=\"d-flex flex-column h-100 dock-tabs\">\n        <bs-tab-page *ngFor=\"let tab of tabGroup.panes\">\n            <ng-container *bsTabPageHeader>\n                <ng-template [cdkPortalOutlet]=\"tab.dockPanel.headerPortal\"></ng-template>\n            </ng-container>\n            <bs-dock-pane-renderer [layout]=\"tab\"></bs-dock-pane-renderer>\n        </bs-tab-page>\n    </bs-tab-control>\n    <bs-splitter *bsInstanceofCase=\"BsSplitterType; let splitter\" [orientation]=\"splitter.orientation\">\n        <bs-split-panel *ngFor=\"let panel of splitter.panes\">\n            <bs-dock-pane-renderer [layout]=\"panel\"></bs-dock-pane-renderer>\n        </bs-split-panel>\n    </bs-splitter>\n    <ng-container *bsInstanceofCase=\"BsContentPaneType; let content\">\n        <ng-template [cdkPortalOutlet]=\"content.dockPanel.contentPortal\"></ng-template>\n    </ng-container>\n    <ng-container *bsInstanceofCase=\"BsFloatingPaneType; let floating\">\n        <bs-resizable *ngIf=\"floating.pane\" [positioning]=\"'absolute'\" [presetPosition]=\"{ left: floating.location?.x ?? 0, top: floating.location?.y ?? 0, width: floating.size?.width ?? 200, height: floating.size?.height ?? 100 }\">\n            <bs-dock-pane-renderer [layout]=\"floating.pane\"></bs-dock-pane-renderer>\n        </bs-resizable>\n    </ng-container>\n    <div *bsInstanceofDefault>\n        No match\n    </div>\n</ng-container>", styles: [".dock-tabs{background:#F3F3F3}:host ::ng-deep .tab-page-content{background:#FFF;min-height:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.Overlay }, { type: i0.ElementRef }]; }, propDecorators: { layout: [{
+                type: Input
+            }] } });
+
+class BsDockComponent {
+    constructor() {
+        //#region Panels
+        this.panels$ = new BehaviorSubject([]);
+        //#endregion
+        this.floating$ = new BehaviorSubject([]);
+        this.positionAbsolute = true;
+        this.positionPx = 0;
+        this.destroyed$ = new Subject();
+        const tabs = new BsTabGroupPane();
+        const docHost = new BsDocumentHost();
+        docHost.rootPane = tabs;
+        this.layout$ = new BehaviorSubject({
+            rootPane: docHost,
+            floatingPanes: []
+        });
+        // combineLatest([this.layout$, this.panels$])
+        //   .pipe(takeUntil(this.destroyed$))
+        //   .subscribe(([layout, panels]) => {
+        //   })
+        this.floating$.pipe(takeUntil(this.destroyed$))
+            .subscribe((floating) => {
+            floating.forEach((panel) => panel.moveToOverlay());
+        });
+        this.parentifiedLayout$ = this.layout$.pipe(map(layout => {
+            const clone = deepClone(layout, true, 
+            // []
+            [BsContentPane, BsDocumentHost, BsFloatingPane, BsSplitPane, BsTabGroupPane], true, this.paneCache);
+            // this.paneCache = clone.cache;
+            console.log('parentify', { layout, result: clone.result });
+            return clone.result;
+        }));
+        this.parentifiedLayout$.pipe(takeUntil(this.destroyed$)).subscribe(console.log);
+    }
+    set panels(value) {
+        this.panels$.next(value.toArray());
+    }
+    get layout() {
+        return this.layout$.value;
+    }
+    set layout(value) {
+        this.layout$.next(value);
+    }
+    set floatingPanes(value) {
+        this.floating$.next(value.toArray());
+    }
+    ngOnDestroy() {
+        this.destroyed$.next(true);
+        this.floating$.value.forEach(panel => panel.disposeOverlay());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: BsDockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: BsDockComponent, selector: "bs-dock", inputs: { layout: "layout" }, host: { properties: { "class.position-absolute": "this.positionAbsolute", "style.top": "this.positionPx", "style.left": "this.positionPx", "style.bottom": "this.positionPx", "style.right": "this.positionPx" } }, queries: [{ propertyName: "panels", predicate: BsDockPanelComponent }], viewQueries: [{ propertyName: "floatingPanes", predicate: ["floating"], descendants: true }], ngImport: i0, template: "<ng-content></ng-content>\n<ng-container *ngIf=\"(layout$ | async) as layout\">\n    <bs-dock-pane-renderer [layout]=\"layout.rootPane\"></bs-dock-pane-renderer>\n\n    <ng-container *ngFor=\"let pane of layout.floatingPanes\">\n        <bs-dock-pane-renderer #floating *ngIf=\"pane.pane\" [layout]=\"pane\"></bs-dock-pane-renderer>\n    </ng-container>\n</ng-container>\n<!-- <bs-splitter>\n    <ng-content></ng-content>\n    <ng-container *ngFor=\"let panel of (panels$ | async)\">\n        <bs-split-panel>\n            <ng-template [cdkPortalOutlet]=\"panel.portal\"></ng-template>\n        </bs-split-panel>\n    </ng-container>\n</bs-splitter> -->\n", styles: [":host ::ng-deep .tab-content{max-height:calc(100% - 41px);overflow:auto}:host ::ng-deep bs-dock-pane-renderer{min-width:100%;min-height:100%}:host ::ng-deep>bs-dock-panel>*{display:none}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BsDockPaneRendererComponent, selector: "bs-dock-pane-renderer", inputs: ["layout"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: BsDockComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-dock', template: "<ng-content></ng-content>\n<ng-container *ngIf=\"(layout$ | async) as layout\">\n    <bs-dock-pane-renderer [layout]=\"layout.rootPane\"></bs-dock-pane-renderer>\n\n    <ng-container *ngFor=\"let pane of layout.floatingPanes\">\n        <bs-dock-pane-renderer #floating *ngIf=\"pane.pane\" [layout]=\"pane\"></bs-dock-pane-renderer>\n    </ng-container>\n</ng-container>\n<!-- <bs-splitter>\n    <ng-content></ng-content>\n    <ng-container *ngFor=\"let panel of (panels$ | async)\">\n        <bs-split-panel>\n            <ng-template [cdkPortalOutlet]=\"panel.portal\"></ng-template>\n        </bs-split-panel>\n    </ng-container>\n</bs-splitter> -->\n", styles: [":host ::ng-deep .tab-content{max-height:calc(100% - 41px);overflow:auto}:host ::ng-deep bs-dock-pane-renderer{min-width:100%;min-height:100%}:host ::ng-deep>bs-dock-panel>*{display:none}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { panels: [{
+                type: ContentChildren,
+                args: [BsDockPanelComponent]
+            }], layout: [{
+                type: Input
+            }], floatingPanes: [{
+                type: ViewChildren,
+                args: ['floating']
+            }], positionAbsolute: [{
+                type: HostBinding,
+                args: ['class.position-absolute']
+            }], positionPx: [{
+                type: HostBinding,
+                args: ['style.top']
+            }, {
+                type: HostBinding,
+                args: ['style.left']
+            }, {
+                type: HostBinding,
+                args: ['style.bottom']
+            }, {
+                type: HostBinding,
+                args: ['style.right']
+            }] } });
+
+class BsDockService {
+    buildTraces(layout) {
+        const result = [layout.rootPane, ...layout.floatingPanes].map(pane => this.buildTracesPrivate([pane]));
+        // const result = this.buildTracesPrivate([layout.rootPane]);
+        return result.flatMap(traceGroup => traceGroup);
+    }
+    buildTracesPrivate(currentSequence) {
+        const children = this.getChildPanes(currentSequence[currentSequence.length - 1]);
+        if (children.length === 0) {
+            return [{
+                    finished: true,
+                    trace: currentSequence
+                }];
+        }
+        else {
+            const result = children.map(child => this.buildTracesPrivate([...currentSequence, child]));
+            return result.flatMap(r => r);
+        }
+    }
+    getChildPanes(pane) {
+        if (pane instanceof BsContentPane) {
+            return [];
+        }
+        else if (pane instanceof BsTabGroupPane) {
+            return pane.panes;
+        }
+        else if (pane instanceof BsSplitPane) {
+            return pane.panes;
+        }
+        else if (pane instanceof BsFloatingPane) {
+            return pane.pane ? [pane.pane] : [];
+        }
+        else if (pane instanceof BsDocumentHost) {
+            return pane.rootPane ? [pane.rootPane] : [];
+        }
+        else {
+            return [];
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: BsDockService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: BsDockService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: BsDockService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class BsDockPanelHeaderComponent {
+    constructor(dockPanel, dock, dockService, element) {
+        this.dockPanel = dockPanel;
+        this.dock = dock;
+        this.dockService = dockService;
+        this.element = element;
+        this.isMouseDown = false;
+        this.isDragging = false;
+        this.dBlock = true;
+    }
+    onMouseDown(ev) {
+        ev.preventDefault();
+        this.isMouseDown = true;
+    }
+    onMouseMove(ev) {
+        if (this.isMouseDown) {
+            if (!this.isDragging) {
+                this.isDragging = true;
+                this.dock.parentifiedLayout$.pipe(take(1)).subscribe((parentifiedLayout) => {
+                    // this.dock.layout$.pipe(take(1)).subscribe((layout) => {
+                    const traces = this.dockService.buildTraces(parentifiedLayout);
+                    console.log('traces', { parentifiedLayout, traces });
+                    const matching = traces.filter(t => {
+                        const lastPane = t.trace[t.trace.length - 1];
+                        // return (lastPane instanceof BsContentPane) && (lastPane.dockPanel === this.dockPanel);
+                        return (lastPane instanceof BsContentPane) && (lastPane.dockPanel === this.dockPanel);
+                    });
+                    console.log('matching', matching);
+                    if (matching.length !== 1) {
+                        return;
+                    }
+                    // const tabs = matching[0].trace.filter(pane => pane instanceof BsTabGroupPane);
+                    // const lastTabGroup = tabs[tabs.length - 1];
+                    // // console.log('last tabgroup', lastTabGroup);
+                    let tabControlEl = this.element.nativeElement;
+                    do {
+                        if (tabControlEl.parentElement) {
+                            tabControlEl = tabControlEl.parentElement;
+                        }
+                        else {
+                            throw 'No more parents';
+                        }
+                    } while (tabControlEl.tagName.toUpperCase() !== 'BS-TAB-CONTROL');
+                    const coords = {
+                        width: tabControlEl.clientWidth,
+                        height: tabControlEl.clientHeight,
+                        left: ev.clientX - ev.offsetX,
+                        top: ev.clientY - ev.offsetY,
+                    };
+                    // this.dockPanel.headerPortal?.isAttached && this.dockPanel.headerPortal?.detach();
+                    // this.dockPanel.contentPortal?.isAttached && this.dockPanel.contentPortal?.detach();
+                    this.removeFromPane(parentifiedLayout.$original.rootPane, this.dockPanel);
+                    const trace = [...matching[0].trace];
+                    this.dockPanel.headerPortal?.isAttached && this.dockPanel.headerPortal?.detach();
+                    this.dockPanel.contentPortal?.isAttached && this.dockPanel.contentPortal?.detach();
+                    for (let index = trace.length - 1; index >= 0; index--) {
+                        if (index > 0) {
+                            this.removeFromPaneBis(trace[index - 1], trace[index]);
+                            if (!trace[index - 1].isEmpty)
+                                break;
+                        }
+                        else {
+                            const floatingIndex = parentifiedLayout.floatingPanes.indexOf(trace[0]);
+                            if (trace[0].isEmpty && (floatingIndex > -1)) {
+                                parentifiedLayout.$original.floatingPanes.splice(floatingIndex, 1);
+                            }
+                        }
+                    }
+                    // this.removeFromPane((<any>matching[0].trace[0])['$original'], this.dockPanel);
+                    const floatingPane = new BsFloatingPane({
+                        pane: new BsTabGroupPane({
+                            panes: [
+                                new BsContentPane({
+                                    dockPanel: this.dockPanel
+                                })
+                            ]
+                        }),
+                        size: {
+                            width: coords.width,
+                            height: coords.height,
+                        },
+                        location: {
+                            x: coords.left,
+                            y: coords.top,
+                        }
+                    });
+                    this.dragOperation = {
+                        offsetX: ev.offsetX,
+                        offsetY: ev.offsetY,
+                        floatingPane
+                    };
+                    parentifiedLayout.$original.floatingPanes.push(floatingPane);
+                    // debugger;
+                    setTimeout(() => this.dock.layout$.next(parentifiedLayout.$original), 5);
+                    // console.log('traces', { traces, matching, dockPanel: this.dockPanel, equals: traces[2].trace[3] });
+                    //     let element: HTMLElement | null = this.element.nativeElement;
+                    //     let tree: HTMLElement[] = [];
+                    //     do {
+                    //       tree.push(element!);
+                    //       element = element!.parentElement;
+                    //     } while (element);
+                    //     const tabControls = tree.filter(el => el.tagName.toUpperCase() === 'BS-TAB-CONTROL');
+                    //     if (tabControls.length > 0) {
+                    //       const coords = {
+                    //         width: tabControls[0].clientWidth,
+                    //         height: tabControls[0].clientHeight,
+                    //         left: ev.clientX - ev.offsetX,
+                    //         top: ev.clientY - ev.offsetY,
+                    //       };
+                    //       this.dockPanel.headerPortal?.isAttached && this.dockPanel.headerPortal?.detach();
+                    //       this.dockPanel.contentPortal?.isAttached && this.dockPanel.contentPortal?.detach();
+                    //       this.removeFromPane(layout.rootPane, this.dockPanel);
+                    //       const floatingPane = new BsFloatingPane({
+                    //         pane: new BsTabGroupPane({
+                    //           panes: [
+                    //             new BsContentPane({
+                    //               dockPanel: this.dockPanel
+                    //             })
+                    //           ]
+                    //         }),
+                    //         size: {
+                    //           width: coords.width,
+                    //           height: coords.height,
+                    //         },
+                    //         location: {
+                    //           x: coords.left,
+                    //           y: coords.top,
+                    //         }
+                    //       });
+                    //       this.dragOperation = {
+                    //         offsetX: ev.offsetX,
+                    //         offsetY: ev.offsetY,
+                    //         floatingPane
+                    //       };
+                    //       layout.floatingPanes.push(floatingPane);
+                    //       this.dock.layout$.next(layout);
+                    //     }
+                });
+            }
+            else {
+                if (this.dragOperation) {
+                    if (this.dragOperation.floatingPane.location) {
+                        this.dragOperation.floatingPane.location.x = ev.clientX - this.dragOperation.offsetX;
+                        this.dragOperation.floatingPane.location.y = ev.clientY - this.dragOperation.offsetY;
+                    }
+                    //   } else {
+                    //     const traces = this.dockService.buildTraces(this.dock.layout);
+                    //     const matchingTrace = traces.filter(trace => {
+                    //       const pane = trace.trace[trace.trace.length - 1];
+                    //       return (pane instanceof BsContentPane) && (pane.dockPanel === this.dockPanel);
+                    //     });
+                    //     console.log('matching', { traces, matchingTrace });
+                    //     // this.dragOperation = {
+                    //     // }
+                }
+            }
+        }
+    }
+    removeFromPaneBis(host, pane) {
+        if (host instanceof BsContentPane) {
+        }
+        else if (host instanceof BsDocumentHost) {
+            // Actually documentHost should never be removed
+        }
+        else if (host instanceof BsTabGroupPane) {
+            if (pane instanceof BsContentPane) {
+                const index = host.panes.indexOf(pane);
+                host.panes.splice(index, 1);
+            }
+        }
+        else if (host instanceof BsSplitPane) {
+            const index = host.panes.indexOf(pane);
+            host.panes.splice(index, 1);
+        }
+        else if (host instanceof BsFloatingPane) {
+        }
+        else {
+            throw 'Unknown pane type';
+        }
+    }
+    removeFromPane(host, panel /*, parents: BsDockPane[] */) {
+        if (host instanceof BsContentPane) {
+            return { paneRemoved: false, hostIsEmpty: false };
+        }
+        else if (host instanceof BsDocumentHost) {
+            // Actually documentHost should never be removed
+            if (!host.rootPane) {
+                return { paneRemoved: false, hostIsEmpty: true };
+            }
+            const result = this.removeFromPane(host.rootPane, panel);
+            return { paneRemoved: result.paneRemoved, hostIsEmpty: result.hostIsEmpty };
+        }
+        else if (host instanceof BsTabGroupPane) {
+            const matching = host.panes.filter(p => p.dockPanel === panel);
+            if (matching.length > 0) {
+                host.panes.splice(host.panes.findIndex(p => p.dockPanel === panel), 1);
+                return { paneRemoved: true, hostIsEmpty: host.panes.length === 0 };
+            }
+            else {
+                // ATM. all panes are ContentPanes anyway.
+                // So unless you'd want to have splitters inside the tabs,
+                // This code will not be hit.
+                // const result = host.panes
+                //   .map(parentPane => this.removeFromPane(parentPane, panel))
+                //   .filter(r => r.paneRemoved);
+                //
+                // if (result.length > 0) {
+                //   return { paneRemoved: true, hostIsEmpty: }
+                // }
+                return { paneRemoved: false, hostIsEmpty: host.panes.length === 0 };
+            }
+        }
+        else if (host instanceof BsSplitPane) {
+            const matching = host.panes
+                .filter(p => p instanceof BsContentPane)
+                .map(p => p)
+                .filter(p => p.dockPanel === panel);
+            if (matching.length > 0) {
+                host.panes.splice(host.panes.findIndex(p => (p instanceof BsContentPane) && matching.includes(p)), 1);
+                // TODO: Remove splitter if only 1 pane left?
+                return { paneRemoved: true, hostIsEmpty: host.panes.length === 0 };
+            }
+            else {
+                for (let splitPane of host.panes) {
+                    const result = this.removeFromPane(splitPane, panel);
+                    if (result.paneRemoved && result.hostIsEmpty) {
+                        // splitPane is empty now, so we can remove it from this splitter
+                        host.panes.splice(host.panes.indexOf(splitPane), 1);
+                        return { paneRemoved: true, hostIsEmpty: host.panes.length === 0 };
+                    }
+                }
+            }
+            return { paneRemoved: false, hostIsEmpty: host.panes.length === 0 };
+        }
+        else {
+            throw 'unknown host type';
+        }
+    }
+    onMouseUp(ev) {
+        this.isMouseDown = false;
+        this.isDragging = false;
+        this.dragOperation = undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: BsDockPanelHeaderComponent, deps: [{ token: BsDockPanelComponent }, { token: BsDockComponent }, { token: BsDockService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: BsDockPanelHeaderComponent, selector: "bs-dock-panel-header", host: { listeners: { "mousedown": "onMouseDown($event)", "document:mousemove": "onMouseMove($event)", "document:mouseup": "onMouseUp($event)" }, properties: { "class.d-block": "this.dBlock" } }, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{padding:var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);margin:calc(-1 * var(--bs-nav-link-padding-y)) calc(-1 * var(--bs-nav-link-padding-x))}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: BsDockPanelHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-dock-panel-header', template: "<ng-content></ng-content>", styles: [":host{padding:var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);margin:calc(-1 * var(--bs-nav-link-padding-y)) calc(-1 * var(--bs-nav-link-padding-x))}\n"] }]
+        }], ctorParameters: function () { return [{ type: BsDockPanelComponent }, { type: BsDockComponent }, { type: BsDockService }, { type: i0.ElementRef }]; }, propDecorators: { onMouseDown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }], onMouseMove: [{
+                type: HostListener,
+                args: ['document:mousemove', ['$event']]
+            }], onMouseUp: [{
+                type: HostListener,
+                args: ['document:mouseup', ['$event']]
+            }], dBlock: [{
+                type: HostBinding,
+                args: ['class.d-block']
+            }] } });
+
+class BsDockModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: BsDockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: BsDockModule, declarations: [BsDockComponent,
+            BsDockPanelComponent,
+            BsDockPanelHeaderComponent,
+            BsDockPaneRendererComponent], imports: [CommonModule,
+            PortalModule,
+            BsCardModule,
+            BsInstanceOfModule,
+            BsSplitterModule,
+            BsTabControlModule,
+            BsResizableModule], exports: [BsDockComponent,
+            BsDockPanelComponent,
+            BsDockPanelHeaderComponent,
+            BsDockPaneRendererComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: BsDockModule, imports: [CommonModule,
+            PortalModule,
+            BsCardModule,
+            BsInstanceOfModule,
+            BsSplitterModule,
+            BsTabControlModule,
+            BsResizableModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: BsDockModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BsDockComponent,
+                        BsDockPanelComponent,
+                        BsDockPanelHeaderComponent,
+                        BsDockPaneRendererComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        PortalModule,
+                        BsCardModule,
+                        BsInstanceOfModule,
+                        BsSplitterModule,
+                        BsTabControlModule,
+                        BsResizableModule
+                    ],
+                    exports: [
+                        BsDockComponent,
+                        BsDockPanelComponent,
+                        BsDockPanelHeaderComponent,
+                        BsDockPaneRendererComponent
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BsContentPane, BsDockComponent, BsDockModule, BsDockPane, BsDockPaneRendererComponent, BsDockPanelComponent, BsDockPanelHeaderComponent, BsDockService, BsDocumentHost, BsFloatingPane, BsSplitPane, BsTabGroupPane, EPaneType };
+//# sourceMappingURL=mintplayer-ng-bootstrap-dock.mjs.map