dockview-core 1.6.0

package/dist/esm/paneview/paneviewComponent.d.ts

@@ -0,0 +1,129 @@
+import { Event } from '../events';
+import { CompositeDisposable, IDisposable } from '../lifecycle';
+import { LayoutPriority, Orientation } from '../splitview/splitview';
+import { PaneviewComponentOptions } from './options';
+import { Paneview } from './paneview';
+import { IPaneBodyPart, IPaneHeaderPart, PaneviewPanel, IPaneviewPanel } from './paneviewPanel';
+import { DraggablePaneviewPanel, PaneviewDropEvent } from './draggablePaneviewPanel';
+import { PaneTransfer } from '../dnd/dataTransfer';
+export interface PaneviewDndOverlayEvent {
+    nativeEvent: DragEvent;
+    panel: IPaneviewPanel;
+    getData: () => PaneTransfer | undefined;
+}
+export interface SerializedPaneviewPanel {
+    snap?: boolean;
+    priority?: LayoutPriority;
+    minimumSize?: number;
+    maximumSize?: number;
+    data: {
+        id: string;
+        component: string;
+        title: string;
+        headerComponent?: string;
+        params?: {
+            [index: string]: any;
+        };
+    };
+    size: number;
+    expanded?: boolean;
+}
+export interface SerializedPaneview {
+    size: number;
+    views: SerializedPaneviewPanel[];
+}
+export declare class PaneFramework extends DraggablePaneviewPanel {
+    private readonly options;
+    constructor(options: {
+        id: string;
+        component: string;
+        headerComponent: string | undefined;
+        body: IPaneBodyPart;
+        header: IPaneHeaderPart;
+        orientation: Orientation;
+        isExpanded: boolean;
+        disableDnd: boolean;
+        accessor: IPaneviewComponent;
+    });
+    getBodyComponent(): IPaneBodyPart;
+    getHeaderComponent(): IPaneHeaderPart;
+}
+export interface AddPaneviewComponentOptions {
+    id: string;
+    component: string;
+    headerComponent?: string;
+    params?: {
+        [key: string]: any;
+    };
+    minimumBodySize?: number;
+    maximumBodySize?: number;
+    isExpanded?: boolean;
+    title: string;
+    index?: number;
+    size?: number;
+}
+export interface IPaneviewComponent extends IDisposable {
+    readonly id: string;
+    readonly width: number;
+    readonly height: number;
+    readonly minimumSize: number;
+    readonly maximumSize: number;
+    readonly panels: IPaneviewPanel[];
+    readonly options: PaneviewComponentOptions;
+    readonly onDidAddView: Event<PaneviewPanel>;
+    readonly onDidRemoveView: Event<PaneviewPanel>;
+    readonly onDidDrop: Event<PaneviewDropEvent>;
+    readonly onDidLayoutChange: Event<void>;
+    readonly onDidLayoutFromJSON: Event<void>;
+    addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel;
+    layout(width: number, height: number): void;
+    toJSON(): SerializedPaneview;
+    fromJSON(serializedPaneview: SerializedPaneview): void;
+    focus(): void;
+    removePanel(panel: IPaneviewPanel): void;
+    getPanel(id: string): IPaneviewPanel | undefined;
+    movePanel(from: number, to: number): void;
+    updateOptions(options: Partial<PaneviewComponentOptions>): void;
+    clear(): void;
+}
+export declare class PaneviewComponent extends CompositeDisposable implements IPaneviewComponent {
+    private element;
+    private readonly _id;
+    private _options;
+    private _disposable;
+    private _viewDisposables;
+    private _paneview;
+    private readonly _onDidLayoutfromJSON;
+    readonly onDidLayoutFromJSON: Event<void>;
+    private readonly _onDidLayoutChange;
+    readonly onDidLayoutChange: Event<void>;
+    private readonly _onDidDrop;
+    readonly onDidDrop: Event<PaneviewDropEvent>;
+    private readonly _onDidAddView;
+    readonly onDidAddView: Event<PaneviewPanel>;
+    private readonly _onDidRemoveView;
+    readonly onDidRemoveView: Event<PaneviewPanel>;
+    get id(): string;
+    get panels(): PaneviewPanel[];
+    set paneview(value: Paneview);
+    get paneview(): Paneview;
+    get minimumSize(): number;
+    get maximumSize(): number;
+    get height(): number;
+    get width(): number;
+    get options(): PaneviewComponentOptions;
+    constructor(element: HTMLElement, options: PaneviewComponentOptions);
+    focus(): void;
+    updateOptions(options: Partial<PaneviewComponentOptions>): void;
+    addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel;
+    removePanel(panel: PaneviewPanel): void;
+    movePanel(from: number, to: number): void;
+    getPanel(id: string): PaneviewPanel | undefined;
+    layout(width: number, height: number): void;
+    toJSON(): SerializedPaneview;
+    fromJSON(serializedPaneview: SerializedPaneview): void;
+    clear(): void;
+    private doAddPanel;
+    private doRemovePanel;
+    dispose(): void;
+}

package/dist/esm/paneview/paneviewComponent.js

@@ -0,0 +1,270 @@
+import { PaneviewApi } from '../api/component.api';
+import { createComponent } from '../panel/componentFactory';
+import { Emitter } from '../events';
+import { CompositeDisposable, MutableDisposable, } from '../lifecycle';
+import { Orientation, Sizing } from '../splitview/splitview';
+import { Paneview } from './paneview';
+import { DraggablePaneviewPanel, } from './draggablePaneviewPanel';
+import { DefaultHeader } from './defaultPaneviewHeader';
+import { sequentialNumberGenerator } from '../math';
+const nextLayoutId = sequentialNumberGenerator();
+export class PaneFramework extends DraggablePaneviewPanel {
+    constructor(options) {
+        super(options.accessor, options.id, options.component, options.headerComponent, options.orientation, options.isExpanded, options.disableDnd);
+        this.options = options;
+    }
+    getBodyComponent() {
+        return this.options.body;
+    }
+    getHeaderComponent() {
+        return this.options.header;
+    }
+}
+export class PaneviewComponent extends CompositeDisposable {
+    get id() {
+        return this._id;
+    }
+    get panels() {
+        return this.paneview.getPanes();
+    }
+    set paneview(value) {
+        this._paneview = value;
+        this._disposable.value = new CompositeDisposable(this._paneview.onDidChange(() => {
+            this._onDidLayoutChange.fire(undefined);
+        }), this._paneview.onDidAddView((e) => this._onDidAddView.fire(e)), this._paneview.onDidRemoveView((e) => this._onDidRemoveView.fire(e)));
+    }
+    get paneview() {
+        return this._paneview;
+    }
+    get minimumSize() {
+        return this.paneview.minimumSize;
+    }
+    get maximumSize() {
+        return this.paneview.maximumSize;
+    }
+    get height() {
+        return this.paneview.orientation === Orientation.HORIZONTAL
+            ? this.paneview.orthogonalSize
+            : this.paneview.size;
+    }
+    get width() {
+        return this.paneview.orientation === Orientation.HORIZONTAL
+            ? this.paneview.size
+            : this.paneview.orthogonalSize;
+    }
+    get options() {
+        return this._options;
+    }
+    constructor(element, options) {
+        super();
+        this.element = element;
+        this._id = nextLayoutId.next();
+        this._disposable = new MutableDisposable();
+        this._viewDisposables = new Map();
+        this._onDidLayoutfromJSON = new Emitter();
+        this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
+        this._onDidLayoutChange = new Emitter();
+        this.onDidLayoutChange = this._onDidLayoutChange.event;
+        this._onDidDrop = new Emitter();
+        this.onDidDrop = this._onDidDrop.event;
+        this._onDidAddView = new Emitter();
+        this.onDidAddView = this._onDidAddView.event;
+        this._onDidRemoveView = new Emitter();
+        this.onDidRemoveView = this._onDidRemoveView.event;
+        this.addDisposables(this._onDidLayoutChange, this._onDidLayoutfromJSON, this._onDidDrop, this._onDidAddView, this._onDidRemoveView);
+        this._options = options;
+        if (!options.components) {
+            options.components = {};
+        }
+        if (!options.frameworkComponents) {
+            options.frameworkComponents = {};
+        }
+        this.paneview = new Paneview(this.element, {
+            // only allow paneview in the vertical orientation for now
+            orientation: Orientation.VERTICAL,
+        });
+        this.addDisposables(this._disposable);
+    }
+    focus() {
+        //noop
+    }
+    updateOptions(options) {
+        this._options = Object.assign(Object.assign({}, this.options), options);
+    }
+    addPanel(options) {
+        const body = createComponent(options.id, options.component, this.options.components || {}, this.options.frameworkComponents || {}, this.options.frameworkWrapper
+            ? {
+                createComponent: this.options.frameworkWrapper.body.createComponent,
+            }
+            : undefined);
+        let header;
+        if (options.headerComponent) {
+            header = createComponent(options.id, options.headerComponent, this.options.headerComponents || {}, this.options.headerframeworkComponents, this.options.frameworkWrapper
+                ? {
+                    createComponent: this.options.frameworkWrapper.header
+                        .createComponent,
+                }
+                : undefined);
+        }
+        else {
+            header = new DefaultHeader();
+        }
+        const view = new PaneFramework({
+            id: options.id,
+            component: options.component,
+            headerComponent: options.headerComponent,
+            header,
+            body,
+            orientation: Orientation.VERTICAL,
+            isExpanded: !!options.isExpanded,
+            disableDnd: !!this.options.disableDnd,
+            accessor: this,
+        });
+        this.doAddPanel(view);
+        const size = typeof options.size === 'number' ? options.size : Sizing.Distribute;
+        const index = typeof options.index === 'number' ? options.index : undefined;
+        view.init({
+            params: options.params || {},
+            minimumBodySize: options.minimumBodySize,
+            maximumBodySize: options.maximumBodySize,
+            isExpanded: options.isExpanded,
+            title: options.title,
+            containerApi: new PaneviewApi(this),
+        });
+        this.paneview.addPane(view, size, index);
+        view.orientation = this.paneview.orientation;
+        return view;
+    }
+    removePanel(panel) {
+        const views = this.panels;
+        const index = views.findIndex((_) => _ === panel);
+        this.paneview.removePane(index);
+        this.doRemovePanel(panel);
+    }
+    movePanel(from, to) {
+        this.paneview.moveView(from, to);
+    }
+    getPanel(id) {
+        return this.panels.find((view) => view.id === id);
+    }
+    layout(width, height) {
+        const [size, orthogonalSize] = this.paneview.orientation === Orientation.HORIZONTAL
+            ? [width, height]
+            : [height, width];
+        this.paneview.layout(size, orthogonalSize);
+    }
+    toJSON() {
+        const maximum = (value) => value === Number.MAX_SAFE_INTEGER ||
+            value === Number.POSITIVE_INFINITY
+            ? undefined
+            : value;
+        const minimum = (value) => (value <= 0 ? undefined : value);
+        const views = this.paneview
+            .getPanes()
+            .map((view, i) => {
+            const size = this.paneview.getViewSize(i);
+            return {
+                size,
+                data: view.toJSON(),
+                minimumSize: minimum(view.minimumBodySize),
+                maximumSize: maximum(view.maximumBodySize),
+                expanded: view.isExpanded(),
+            };
+        });
+        return {
+            views,
+            size: this.paneview.size,
+        };
+    }
+    fromJSON(serializedPaneview) {
+        this.clear();
+        const { views, size } = serializedPaneview;
+        const queue = [];
+        this.paneview = new Paneview(this.element, {
+            orientation: Orientation.VERTICAL,
+            descriptor: {
+                size,
+                views: views.map((view) => {
+                    const data = view.data;
+                    const body = createComponent(data.id, data.component, this.options.components || {}, this.options.frameworkComponents || {}, this.options.frameworkWrapper
+                        ? {
+                            createComponent: this.options.frameworkWrapper.body
+                                .createComponent,
+                        }
+                        : undefined);
+                    let header;
+                    if (data.headerComponent) {
+                        header = createComponent(data.id, data.headerComponent, this.options.headerComponents || {}, this.options.headerframeworkComponents || {}, this.options.frameworkWrapper
+                            ? {
+                                createComponent: this.options.frameworkWrapper.header
+                                    .createComponent,
+                            }
+                            : undefined);
+                    }
+                    else {
+                        header = new DefaultHeader();
+                    }
+                    const panel = new PaneFramework({
+                        id: data.id,
+                        component: data.component,
+                        headerComponent: data.headerComponent,
+                        header,
+                        body,
+                        orientation: Orientation.VERTICAL,
+                        isExpanded: !!view.expanded,
+                        disableDnd: !!this.options.disableDnd,
+                        accessor: this,
+                    });
+                    this.doAddPanel(panel);
+                    queue.push(() => {
+                        panel.init({
+                            params: data.params || {},
+                            minimumBodySize: view.minimumSize,
+                            maximumBodySize: view.maximumSize,
+                            title: data.title,
+                            isExpanded: !!view.expanded,
+                            containerApi: new PaneviewApi(this),
+                        });
+                        panel.orientation = this.paneview.orientation;
+                    });
+                    setTimeout(() => {
+                        // the original onDidAddView events are missed since they are fired before we can subcribe to them
+                        this._onDidAddView.fire(panel);
+                    }, 0);
+                    return { size: view.size, view: panel };
+                }),
+            },
+        });
+        this.layout(this.width, this.height);
+        queue.forEach((f) => f());
+        this._onDidLayoutfromJSON.fire();
+    }
+    clear() {
+        for (const [_, value] of this._viewDisposables.entries()) {
+            value.dispose();
+        }
+        this._viewDisposables.clear();
+        this.paneview.dispose();
+    }
+    doAddPanel(panel) {
+        const disposable = panel.onDidDrop((event) => {
+            this._onDidDrop.fire(event);
+        });
+        this._viewDisposables.set(panel.id, disposable);
+    }
+    doRemovePanel(panel) {
+        const disposable = this._viewDisposables.get(panel.id);
+        if (disposable) {
+            disposable.dispose();
+            this._viewDisposables.delete(panel.id);
+        }
+    }
+    dispose() {
+        super.dispose();
+        for (const [_, value] of this._viewDisposables.entries()) {
+            value.dispose();
+        }
+        this._viewDisposables.clear();
+        this.paneview.dispose();
+    }
+}

package/dist/esm/paneview/paneviewPanel.d.ts

@@ -0,0 +1,92 @@
+import { PaneviewApi } from '../api/component.api';
+import { PaneviewPanelApiImpl } from '../api/paneviewPanelApi';
+import { Event } from '../events';
+import { BasePanelView, BasePanelViewExported, BasePanelViewState } from '../gridview/basePanelView';
+import { IDisposable } from '../lifecycle';
+import { IFrameworkPart, PanelInitParameters, PanelUpdateEvent } from '../panel/types';
+import { IView, Orientation } from '../splitview/splitview';
+export interface PanePanelViewState extends BasePanelViewState {
+    headerComponent?: string;
+    title: string;
+}
+export interface PanePanelInitParameter extends PanelInitParameters {
+    minimumBodySize?: number;
+    maximumBodySize?: number;
+    isExpanded?: boolean;
+    title: string;
+    containerApi: PaneviewApi;
+}
+export interface PanePanelComponentInitParameter extends PanePanelInitParameter {
+    api: PaneviewPanelApiImpl;
+}
+export interface IPaneBodyPart extends IDisposable {
+    readonly element: HTMLElement;
+    update(params: PanelUpdateEvent): void;
+    init(parameters: PanePanelComponentInitParameter): void;
+}
+export interface IPaneHeaderPart extends IDisposable {
+    readonly element: HTMLElement;
+    update(params: PanelUpdateEvent): void;
+    init(parameters: PanePanelComponentInitParameter): void;
+}
+export interface IPaneview extends IView {
+    onDidChangeExpansionState: Event<boolean>;
+}
+export interface IPaneviewPanel extends BasePanelViewExported<PaneviewPanelApiImpl> {
+    readonly minimumSize: number;
+    readonly maximumSize: number;
+    readonly minimumBodySize: number;
+    readonly maximumBodySize: number;
+    isExpanded(): boolean;
+    setExpanded(isExpanded: boolean): void;
+    headerVisible: boolean;
+}
+export declare abstract class PaneviewPanel extends BasePanelView<PaneviewPanelApiImpl> implements IPaneview, IPaneviewPanel {
+    private readonly headerComponent;
+    private _onDidChangeExpansionState;
+    onDidChangeExpansionState: Event<boolean>;
+    private readonly _onDidChange;
+    readonly onDidChange: Event<{
+        size?: number;
+        orthogonalSize?: number;
+    }>;
+    private headerSize;
+    private _orthogonalSize;
+    private _size;
+    private _minimumBodySize;
+    private _maximumBodySize;
+    private _isExpanded;
+    protected header?: HTMLElement;
+    protected body?: HTMLElement;
+    private bodyPart?;
+    private headerPart?;
+    private expandedSize;
+    private animationTimer;
+    private _orientation;
+    private _headerVisible;
+    set orientation(value: Orientation);
+    get orientation(): Orientation;
+    get minimumSize(): number;
+    get maximumSize(): number;
+    get size(): number;
+    get orthogonalSize(): number;
+    set orthogonalSize(size: number);
+    get minimumBodySize(): number;
+    set minimumBodySize(value: number);
+    get maximumBodySize(): number;
+    set maximumBodySize(value: number);
+    get headerVisible(): boolean;
+    set headerVisible(value: boolean);
+    constructor(id: string, component: string, headerComponent: string | undefined, orientation: Orientation, isExpanded: boolean, isHeaderVisible: boolean);
+    setVisible(isVisible: boolean): void;
+    setActive(isActive: boolean): void;
+    isExpanded(): boolean;
+    setExpanded(expanded: boolean): void;
+    layout(size: number, orthogonalSize: number): void;
+    init(parameters: PanePanelInitParameter): void;
+    toJSON(): PanePanelViewState;
+    private renderOnce;
+    getComponent(): IFrameworkPart;
+    protected abstract getBodyComponent(): IPaneBodyPart;
+    protected abstract getHeaderComponent(): IPaneHeaderPart;
+}

package/dist/esm/paneview/paneviewPanel.js

@@ -0,0 +1,192 @@
+import { PaneviewPanelApiImpl } from '../api/paneviewPanelApi';
+import { addClasses, removeClasses } from '../dom';
+import { addDisposableListener, Emitter } from '../events';
+import { BasePanelView, } from '../gridview/basePanelView';
+import { Orientation } from '../splitview/splitview';
+export class PaneviewPanel extends BasePanelView {
+    set orientation(value) {
+        this._orientation = value;
+    }
+    get orientation() {
+        return this._orientation;
+    }
+    get minimumSize() {
+        const headerSize = this.headerSize;
+        const expanded = this.isExpanded();
+        const minimumBodySize = expanded ? this._minimumBodySize : 0;
+        return headerSize + minimumBodySize;
+    }
+    get maximumSize() {
+        const headerSize = this.headerSize;
+        const expanded = this.isExpanded();
+        const maximumBodySize = expanded ? this._maximumBodySize : 0;
+        return headerSize + maximumBodySize;
+    }
+    get size() {
+        return this._size;
+    }
+    get orthogonalSize() {
+        return this._orthogonalSize;
+    }
+    set orthogonalSize(size) {
+        this._orthogonalSize = size;
+    }
+    get minimumBodySize() {
+        return this._minimumBodySize;
+    }
+    set minimumBodySize(value) {
+        this._minimumBodySize = typeof value === 'number' ? value : 0;
+    }
+    get maximumBodySize() {
+        return this._maximumBodySize;
+    }
+    set maximumBodySize(value) {
+        this._maximumBodySize =
+            typeof value === 'number' ? value : Number.POSITIVE_INFINITY;
+    }
+    get headerVisible() {
+        return this._headerVisible;
+    }
+    set headerVisible(value) {
+        this._headerVisible = value;
+        this.header.style.display = value ? '' : 'none';
+    }
+    constructor(id, component, headerComponent, orientation, isExpanded, isHeaderVisible) {
+        super(id, component, new PaneviewPanelApiImpl(id));
+        this.headerComponent = headerComponent;
+        this._onDidChangeExpansionState = new Emitter({ replay: true });
+        this.onDidChangeExpansionState = this._onDidChangeExpansionState.event;
+        this._onDidChange = new Emitter();
+        this.onDidChange = this._onDidChange.event;
+        this.headerSize = 22;
+        this._orthogonalSize = 0;
+        this._size = 0;
+        this._minimumBodySize = 100;
+        this._maximumBodySize = Number.POSITIVE_INFINITY;
+        this._isExpanded = false;
+        this.expandedSize = 0;
+        this.api.pane = this; // TODO cannot use 'this' before 'super'
+        this.api.initialize(this);
+        this._isExpanded = isExpanded;
+        this._headerVisible = isHeaderVisible;
+        this._onDidChangeExpansionState.fire(this.isExpanded()); // initialize value
+        this._orientation = orientation;
+        this.element.classList.add('pane');
+        this.addDisposables(this.api.onDidSizeChange((event) => {
+            this._onDidChange.fire({ size: event.size });
+        }), addDisposableListener(this.element, 'mouseenter', (ev) => {
+            this.api._onMouseEnter.fire(ev);
+        }), addDisposableListener(this.element, 'mouseleave', (ev) => {
+            this.api._onMouseLeave.fire(ev);
+        }));
+        this.addDisposables(this._onDidChangeExpansionState, this.onDidChangeExpansionState((isPanelExpanded) => {
+            this.api._onDidExpansionChange.fire({
+                isExpanded: isPanelExpanded,
+            });
+        }), this.api.onDidFocusChange((e) => {
+            if (!this.header) {
+                return;
+            }
+            if (e.isFocused) {
+                addClasses(this.header, 'focused');
+            }
+            else {
+                removeClasses(this.header, 'focused');
+            }
+        }));
+        this.renderOnce();
+    }
+    setVisible(isVisible) {
+        this.api._onDidVisibilityChange.fire({ isVisible });
+    }
+    setActive(isActive) {
+        this.api._onDidActiveChange.fire({ isActive });
+    }
+    isExpanded() {
+        return this._isExpanded;
+    }
+    setExpanded(expanded) {
+        if (this._isExpanded === expanded) {
+            return;
+        }
+        this._isExpanded = expanded;
+        if (expanded) {
+            if (this.animationTimer) {
+                clearTimeout(this.animationTimer);
+            }
+            if (this.body) {
+                this.element.appendChild(this.body);
+            }
+        }
+        else {
+            this.animationTimer = setTimeout(() => {
+                var _a;
+                (_a = this.body) === null || _a === void 0 ? void 0 : _a.remove();
+            }, 200);
+        }
+        this._onDidChange.fire(expanded ? { size: this.width } : {});
+        this._onDidChangeExpansionState.fire(expanded);
+    }
+    layout(size, orthogonalSize) {
+        this._size = size;
+        this._orthogonalSize = orthogonalSize;
+        const [width, height] = this.orientation === Orientation.HORIZONTAL
+            ? [size, orthogonalSize]
+            : [orthogonalSize, size];
+        if (this.isExpanded()) {
+            this.expandedSize = width;
+        }
+        super.layout(width, height);
+    }
+    init(parameters) {
+        var _a, _b;
+        super.init(parameters);
+        if (typeof parameters.minimumBodySize === 'number') {
+            this.minimumBodySize = parameters.minimumBodySize;
+        }
+        if (typeof parameters.maximumBodySize === 'number') {
+            this.maximumBodySize = parameters.maximumBodySize;
+        }
+        this.bodyPart = this.getBodyComponent();
+        this.headerPart = this.getHeaderComponent();
+        this.bodyPart.init(Object.assign(Object.assign({}, parameters), { api: this.api }));
+        this.headerPart.init(Object.assign(Object.assign({}, parameters), { api: this.api }));
+        (_a = this.body) === null || _a === void 0 ? void 0 : _a.append(this.bodyPart.element);
+        (_b = this.header) === null || _b === void 0 ? void 0 : _b.append(this.headerPart.element);
+        if (typeof parameters.isExpanded === 'boolean') {
+            this.setExpanded(parameters.isExpanded);
+        }
+    }
+    toJSON() {
+        const params = this._params;
+        return Object.assign(Object.assign({}, super.toJSON()), { headerComponent: this.headerComponent, title: params.title });
+    }
+    renderOnce() {
+        this.header = document.createElement('div');
+        this.header.tabIndex = 0;
+        this.header.className = 'pane-header';
+        this.header.style.height = `${this.headerSize}px`;
+        this.header.style.lineHeight = `${this.headerSize}px`;
+        this.header.style.minHeight = `${this.headerSize}px`;
+        this.header.style.maxHeight = `${this.headerSize}px`;
+        this.element.appendChild(this.header);
+        this.body = document.createElement('div');
+        this.body.className = 'pane-body';
+        this.element.appendChild(this.body);
+    }
+    // TODO slightly hacky by-pass of the component to create a body and header component
+    getComponent() {
+        return {
+            update: (params) => {
+                var _a, _b;
+                (_a = this.bodyPart) === null || _a === void 0 ? void 0 : _a.update({ params });
+                (_b = this.headerPart) === null || _b === void 0 ? void 0 : _b.update({ params });
+            },
+            dispose: () => {
+                var _a, _b;
+                (_a = this.bodyPart) === null || _a === void 0 ? void 0 : _a.dispose();
+                (_b = this.headerPart) === null || _b === void 0 ? void 0 : _b.dispose();
+            },
+        };
+    }
+}