dockview-angular 4.11.0 → 4.13.0

package/dist/dockview-angular.esm.js

@@ -1,6 +1,6 @@
 /**
  * dockview-angular
- * @version 4.11.0
+ * @version 4.13.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -1296,11 +1296,13 @@ class Splitview {
                     document.removeEventListener('pointermove', onPointerMove);
                     document.removeEventListener('pointerup', end);
                     document.removeEventListener('pointercancel', end);
+                    document.removeEventListener('contextmenu', end);
                     this._onDidSashEnd.fire(undefined);
                 };
                 document.addEventListener('pointermove', onPointerMove);
                 document.addEventListener('pointerup', end);
                 document.addEventListener('pointercancel', end);
+                document.addEventListener('contextmenu', end);
             };
             sash.addEventListener('pointerdown', onPointerStart);
             const sashItem = {
@@ -3783,8 +3785,8 @@ class DockviewApi {
     /**
      * Create a component from a serialized object.
      */
-    fromJSON(data) {
-        this.component.fromJSON(data);
+    fromJSON(data, options) {
+        this.component.fromJSON(data, options);
     }
     /**
      * Create a serialized object of the current component.
@@ -5015,6 +5017,7 @@ class ContentContainer extends CompositeDisposable {
         }
         if (doRender) {
             const focusTracker = trackFocus(container);
+            this.focusTracker = focusTracker;
             const disposable = new CompositeDisposable();
             disposable.addDisposables(focusTracker, focusTracker.onDidFocus(() => this._onDidFocus.fire()), focusTracker.onDidBlur(() => this._onDidBlur.fire()));
             this.disposable.value = disposable;
@@ -5042,6 +5045,16 @@ class ContentContainer extends CompositeDisposable {
         this.disposable.dispose();
         super.dispose();
     }
+    /**
+     * Refresh the focus tracker state to handle cases where focus state
+     * gets out of sync due to programmatic panel activation
+     */
+    refreshFocusState() {
+        var _a;
+        if ((_a = this.focusTracker) === null || _a === void 0 ? void 0 : _a.refreshState) {
+            this.focusTracker.refreshState();
+        }
+    }
 }
 
 function addGhostImage(dataTransfer, ghostElement, options) {
@@ -5151,7 +5164,7 @@ class Tab extends CompositeDisposable {
     }
 }
 
-class WillShowOverlayLocationEvent {
+class DockviewWillShowOverlayLocationEvent {
     get kind() {
         return this.options.kind;
     }
@@ -5499,7 +5512,7 @@ class Tabs extends CompositeDisposable {
                 index: this._tabs.findIndex((x) => x.value === tab),
             });
         }), tab.onWillShowOverlay((event) => {
-            this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+            this._onWillShowOverlay.fire(new DockviewWillShowOverlayLocationEvent(event, {
                 kind: 'tab',
                 panel: this.group.activePanel,
                 api: this.accessor.api,
@@ -5663,7 +5676,7 @@ class TabsContainer extends CompositeDisposable {
                 index: this.tabs.size,
             });
         }), this.voidContainer.onWillShowOverlay((event) => {
-            this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+            this._onWillShowOverlay.fire(new DockviewWillShowOverlayLocationEvent(event, {
                 kind: 'header_space',
                 panel: this.group.activePanel,
                 api: this.accessor.api,
@@ -6057,7 +6070,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         }), this.tabsContainer.onWillShowOverlay((event) => {
             this._onWillShowOverlay.fire(event);
         }), this.contentContainer.dropTarget.onWillShowOverlay((event) => {
-            this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+            this._onWillShowOverlay.fire(new DockviewWillShowOverlayLocationEvent(event, {
                 kind: 'content',
                 panel: this.activePanel,
                 api: this._api,
@@ -6368,8 +6381,11 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         this._activePanel = panel;
         if (panel) {
             this.tabsContainer.setActivePanel(panel);
+            this.contentContainer.openPanel(panel);
             panel.layout(this._width, this._height);
             this.updateMru(panel);
+            // Refresh focus state to handle programmatic activation without DOM focus change
+            this.contentContainer.refreshFocusState();
             this._onDidActivePanelChange.fire({
                 panel,
             });
@@ -6730,7 +6746,19 @@ class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
         this.onDidLocationChange = this._onDidLocationChange.event;
         this._onDidActivePanelChange = new Emitter();
         this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-        this.addDisposables(this._onDidLocationChange, this._onDidActivePanelChange);
+        this.addDisposables(this._onDidLocationChange, this._onDidActivePanelChange, this._onDidVisibilityChange.event((event) => {
+            // When becoming visible, apply any pending size change
+            if (event.isVisible && this._pendingSize) {
+                super.setSize(this._pendingSize);
+                this._pendingSize = undefined;
+            }
+        }));
+    }
+    setSize(event) {
+        // Always store the requested size
+        this._pendingSize = Object.assign({}, event);
+        // Apply the size change immediately
+        super.setSize(event);
     }
     close() {
         if (!this._group) {
@@ -7199,6 +7227,18 @@ class DockviewPanel extends CompositeDisposable {
             params: this._params,
         });
     }
+    updateFromStateModel(state) {
+        var _a, _b, _c;
+        this._maximumHeight = state.maximumHeight;
+        this._minimumHeight = state.minimumHeight;
+        this._maximumWidth = state.maximumWidth;
+        this._minimumWidth = state.minimumWidth;
+        this.update({ params: (_a = state.params) !== null && _a !== void 0 ? _a : {} });
+        this.setTitle((_b = state.title) !== null && _b !== void 0 ? _b : this.id);
+        this.setRenderer((_c = state.renderer) !== null && _c !== void 0 ? _c : this.accessor.renderer);
+        // state.contentComponent;
+        // state.tabComponent;
+    }
     updateParentGroup(group, options) {
         this._group = group;
         this.api.group = this._group;
@@ -7670,13 +7710,16 @@ class Overlay extends CompositeDisposable {
                 let right = undefined;
                 let width = undefined;
                 const moveTop = () => {
-                    top = clamp(y, -Number.MAX_VALUE, startPosition.originalY +
+                    // When dragging top handle, constrain top position to prevent oversizing
+                    const maxTop = startPosition.originalY +
                         startPosition.originalHeight >
                         containerRect.height
-                        ? this.getMinimumHeight(containerRect.height)
+                        ? Math.max(0, containerRect.height -
+                            Overlay.MINIMUM_HEIGHT)
                         : Math.max(0, startPosition.originalY +
                             startPosition.originalHeight -
-                            Overlay.MINIMUM_HEIGHT));
+                            Overlay.MINIMUM_HEIGHT);
+                    top = clamp(y, 0, maxTop);
                     height =
                         startPosition.originalY +
                             startPosition.originalHeight -
@@ -7687,22 +7730,27 @@ class Overlay extends CompositeDisposable {
                     top =
                         startPosition.originalY -
                             startPosition.originalHeight;
-                    height = clamp(y - top, top < 0 &&
-                        typeof this.options
-                            .minimumInViewportHeight === 'number'
+                    // When dragging bottom handle, constrain height to container height
+                    const minHeight = top < 0 &&
+                        typeof this.options.minimumInViewportHeight ===
+                            'number'
                         ? -top +
                             this.options.minimumInViewportHeight
-                        : Overlay.MINIMUM_HEIGHT, Number.MAX_VALUE);
+                        : Overlay.MINIMUM_HEIGHT;
+                    const maxHeight = containerRect.height - Math.max(0, top);
+                    height = clamp(y - top, minHeight, maxHeight);
                     bottom = containerRect.height - top - height;
                 };
                 const moveLeft = () => {
-                    left = clamp(x, -Number.MAX_VALUE, startPosition.originalX +
+                    const maxLeft = startPosition.originalX +
                         startPosition.originalWidth >
                         containerRect.width
-                        ? this.getMinimumWidth(containerRect.width)
+                        ? Math.max(0, containerRect.width -
+                            Overlay.MINIMUM_WIDTH) // Prevent extending beyong right edge
                         : Math.max(0, startPosition.originalX +
                             startPosition.originalWidth -
-                            Overlay.MINIMUM_WIDTH));
+                            Overlay.MINIMUM_WIDTH);
+                    left = clamp(x, 0, maxLeft); // min is 0 (Not -Infinity) to prevent dragging beyond left edge
                     width =
                         startPosition.originalX +
                             startPosition.originalWidth -
@@ -7713,12 +7761,15 @@ class Overlay extends CompositeDisposable {
                     left =
                         startPosition.originalX -
                             startPosition.originalWidth;
-                    width = clamp(x - left, left < 0 &&
-                        typeof this.options
-                            .minimumInViewportWidth === 'number'
+                    // When dragging right handle, constrain width to container width
+                    const minWidth = left < 0 &&
+                        typeof this.options.minimumInViewportWidth ===
+                            'number'
                         ? -left +
                             this.options.minimumInViewportWidth
-                        : Overlay.MINIMUM_WIDTH, Number.MAX_VALUE);
+                        : Overlay.MINIMUM_WIDTH;
+                    const maxWidth = containerRect.width - Math.max(0, left);
+                    width = clamp(x - left, minWidth, maxWidth);
                     right = containerRect.width - left - width;
                 };
                 switch (direction) {
@@ -8548,7 +8599,7 @@ class DockviewComponent extends BaseGrid {
                 // option only available when no panels in primary grid
                 return;
             }
-            this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+            this._onWillShowOverlay.fire(new DockviewWillShowOverlayLocationEvent(event, {
                 kind: 'edge',
                 panel: undefined,
                 api: this._api,
@@ -8962,7 +9013,7 @@ class DockviewComponent extends BaseGrid {
                 : (_e = (_d = this.options.floatingGroupBounds) === null || _d === void 0 ? void 0 : _d.minimumHeightWithinViewport) !== null && _e !== void 0 ? _e : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE }));
         const el = group.element.querySelector('.dv-void-container');
         if (!el) {
-            throw new Error('failed to find drag handle');
+            throw new Error('dockview: failed to find drag handle');
         }
         overlay.setupDrag(el, {
             inDragMode: typeof (options === null || options === void 0 ? void 0 : options.inDragMode) === 'boolean'
@@ -9034,7 +9085,7 @@ class DockviewComponent extends BaseGrid {
             case 'right':
                 return this.createGroupAtLocation([this.gridview.length], undefined, options); // insert into last position
             default:
-                throw new Error(`unsupported position ${position}`);
+                throw new Error(`dockview: unsupported position ${position}`);
         }
     }
     updateOptions(options) {
@@ -9180,15 +9231,48 @@ class DockviewComponent extends BaseGrid {
         }
         return result;
     }
-    fromJSON(data) {
+    fromJSON(data, options) {
         var _a, _b;
+        const existingPanels = new Map();
+        let tempGroup;
+        if (options === null || options === void 0 ? void 0 : options.reuseExistingPanels) {
+            /**
+             * What are we doing here?
+             *
+             * 1. Create a temporary group to hold any panels that currently exist and that also exist in the new layout
+             * 2. Remove that temporary group from the group mapping so that it doesn't get cleared when we clear the layout
+             */
+            tempGroup = this.createGroup();
+            this._groups.delete(tempGroup.api.id);
+            const newPanels = Object.keys(data.panels);
+            for (const panel of this.panels) {
+                if (newPanels.includes(panel.api.id)) {
+                    existingPanels.set(panel.api.id, panel);
+                }
+            }
+            this.movingLock(() => {
+                Array.from(existingPanels.values()).forEach((panel) => {
+                    this.moveGroupOrPanel({
+                        from: {
+                            groupId: panel.api.group.api.id,
+                            panelId: panel.api.id,
+                        },
+                        to: {
+                            group: tempGroup,
+                            position: 'center',
+                        },
+                        keepEmptyGroups: true,
+                    });
+                });
+            });
+        }
         this.clear();
         if (typeof data !== 'object' || data === null) {
-            throw new Error('serialized layout must be a non-null object');
+            throw new Error('dockview: serialized layout must be a non-null object');
         }
         const { grid, panels, activeGroup } = data;
         if (grid.root.type !== 'branch' || !Array.isArray(grid.root.data)) {
-            throw new Error('root must be of type branch');
+            throw new Error('dockview: root must be of type branch');
         }
         try {
             // take note of the existing dimensions
@@ -9197,7 +9281,7 @@ class DockviewComponent extends BaseGrid {
             const createGroupFromSerializedState = (data) => {
                 const { id, locked, hideHeader, views, activeView } = data;
                 if (typeof id !== 'string') {
-                    throw new Error('group id must be of type string');
+                    throw new Error('dockview: group id must be of type string');
                 }
                 const group = this.createGroup({
                     id,
@@ -9212,17 +9296,38 @@ class DockviewComponent extends BaseGrid {
                      * In running this section first we avoid firing lots of 'add' events in the event of a failure
                      * due to a corruption of input data.
                      */
-                    const panel = this._deserializer.fromJSON(panels[child], group);
-                    createdPanels.push(panel);
+                    const existingPanel = existingPanels.get(child);
+                    if (tempGroup && existingPanel) {
+                        this.movingLock(() => {
+                            tempGroup.model.removePanel(existingPanel);
+                        });
+                        createdPanels.push(existingPanel);
+                        existingPanel.updateFromStateModel(panels[child]);
+                    }
+                    else {
+                        const panel = this._deserializer.fromJSON(panels[child], group);
+                        createdPanels.push(panel);
+                    }
                 }
                 for (let i = 0; i < views.length; i++) {
                     const panel = createdPanels[i];
                     const isActive = typeof activeView === 'string' &&
                         activeView === panel.id;
-                    group.model.openPanel(panel, {
-                        skipSetActive: !isActive,
-                        skipSetGroupActive: true,
-                    });
+                    const hasExisting = existingPanels.has(panel.api.id);
+                    if (hasExisting) {
+                        this.movingLock(() => {
+                            group.model.openPanel(panel, {
+                                skipSetActive: !isActive,
+                                skipSetGroupActive: true,
+                            });
+                        });
+                    }
+                    else {
+                        group.model.openPanel(panel, {
+                            skipSetActive: !isActive,
+                            skipSetGroupActive: true,
+                        });
+                    }
                 }
                 if (!group.activePanel && group.panels.length > 0) {
                     group.model.openPanel(group.panels[group.panels.length - 1], {
@@ -9261,7 +9366,9 @@ class DockviewComponent extends BaseGrid {
                     setTimeout(() => {
                         this.addPopoutGroup(group, {
                             position: position !== null && position !== void 0 ? position : undefined,
-                            overridePopoutGroup: gridReferenceGroup ? group : undefined,
+                            overridePopoutGroup: gridReferenceGroup
+                                ? group
+                                : undefined,
                             referenceGroup: gridReferenceGroup
                                 ? this.getPanel(gridReferenceGroup)
                                 : undefined,
@@ -9347,11 +9454,11 @@ class DockviewComponent extends BaseGrid {
     addPanel(options) {
         var _a, _b;
         if (this.panels.find((_) => _.id === options.id)) {
-            throw new Error(`panel with id ${options.id} already exists`);
+            throw new Error(`dockview: panel with id ${options.id} already exists`);
         }
         let referenceGroup;
         if (options.position && options.floating) {
-            throw new Error('you can only provide one of: position, floating as arguments to .addPanel(...)');
+            throw new Error('dockview: you can only provide one of: position, floating as arguments to .addPanel(...)');
         }
         const initial = {
             width: options.initialWidth,
@@ -9365,7 +9472,7 @@ class DockviewComponent extends BaseGrid {
                     : options.position.referencePanel;
                 index = options.position.index;
                 if (!referencePanel) {
-                    throw new Error(`referencePanel '${options.position.referencePanel}' does not exist`);
+                    throw new Error(`dockview: referencePanel '${options.position.referencePanel}' does not exist`);
                 }
                 referenceGroup = this.findGroup(referencePanel);
             }
@@ -9376,7 +9483,7 @@ class DockviewComponent extends BaseGrid {
                         : options.position.referenceGroup;
                 index = options.position.index;
                 if (!referenceGroup) {
-                    throw new Error(`referenceGroup '${options.position.referenceGroup}' does not exist`);
+                    throw new Error(`dockview: referenceGroup '${options.position.referenceGroup}' does not exist`);
                 }
             }
             else {
@@ -9488,7 +9595,7 @@ class DockviewComponent extends BaseGrid {
     }) {
         const group = panel.group;
         if (!group) {
-            throw new Error(`cannot remove panel ${panel.id}. it's missing a group.`);
+            throw new Error(`dockview: cannot remove panel ${panel.id}. it's missing a group.`);
         }
         group.model.removePanel(panel, {
             skipSetActiveGroup: options.skipSetActiveGroup,
@@ -9537,11 +9644,11 @@ class DockviewComponent extends BaseGrid {
                     ? this.panels.find((panel) => panel.id === options.referencePanel)
                     : options.referencePanel;
                 if (!referencePanel) {
-                    throw new Error(`reference panel ${options.referencePanel} does not exist`);
+                    throw new Error(`dockview: reference panel ${options.referencePanel} does not exist`);
                 }
                 referenceGroup = this.findGroup(referencePanel);
                 if (!referenceGroup) {
-                    throw new Error(`reference group for reference panel ${options.referencePanel} does not exist`);
+                    throw new Error(`dockview: reference group for reference panel ${options.referencePanel} does not exist`);
                 }
             }
             else if (isGroupOptionsWithGroup(options)) {
@@ -9550,7 +9657,7 @@ class DockviewComponent extends BaseGrid {
                         ? (_a = this._groups.get(options.referenceGroup)) === null || _a === void 0 ? void 0 : _a.value
                         : options.referenceGroup;
                 if (!referenceGroup) {
-                    throw new Error(`reference group ${options.referenceGroup} does not exist`);
+                    throw new Error(`dockview: reference group ${options.referenceGroup} does not exist`);
                 }
             }
             else {
@@ -9618,7 +9725,7 @@ class DockviewComponent extends BaseGrid {
                 }
                 return floatingGroup.group;
             }
-            throw new Error('failed to find floating group');
+            throw new Error('dockview: failed to find floating group');
         }
         if (group.api.location.type === 'popout') {
             const selectedGroup = this._popoutGroups.find((_) => _.popoutGroup === group);
@@ -9649,7 +9756,7 @@ class DockviewComponent extends BaseGrid {
                 this.updateWatermark();
                 return selectedGroup.popoutGroup;
             }
-            throw new Error('failed to find popout group');
+            throw new Error('dockview: failed to find popout group');
         }
         const re = super.doRemoveGroup(group, options);
         if (!(options === null || options === void 0 ? void 0 : options.skipActive)) {
@@ -9680,7 +9787,7 @@ class DockviewComponent extends BaseGrid {
             ? (_a = this._groups.get(sourceGroupId)) === null || _a === void 0 ? void 0 : _a.value
             : undefined;
         if (!sourceGroup) {
-            throw new Error(`Failed to find group id ${sourceGroupId}`);
+            throw new Error(`dockview: Failed to find group id ${sourceGroupId}`);
         }
         if (sourceItemId === undefined) {
             /**
@@ -9705,9 +9812,9 @@ class DockviewComponent extends BaseGrid {
                 skipSetActiveGroup: true,
             }));
             if (!removedPanel) {
-                throw new Error(`No panel with id ${sourceItemId}`);
+                throw new Error(`dockview: No panel with id ${sourceItemId}`);
             }
-            if (sourceGroup.model.size === 0) {
+            if (!options.keepEmptyGroups && sourceGroup.model.size === 0) {
                 // remove the group and do not set a new group as active
                 this.doRemoveGroup(sourceGroup, { skipActive: true });
             }
@@ -9717,7 +9824,8 @@ class DockviewComponent extends BaseGrid {
                 var _a;
                 return destinationGroup.model.openPanel(removedPanel, {
                     index: destinationIndex,
-                    skipSetActive: ((_a = options.skipSetActive) !== null && _a !== void 0 ? _a : false) && !isDestinationGroupEmpty,
+                    skipSetActive: ((_a = options.skipSetActive) !== null && _a !== void 0 ? _a : false) &&
+                        !isDestinationGroupEmpty,
                     skipSetGroupActive: true,
                 });
             });
@@ -9728,6 +9836,13 @@ class DockviewComponent extends BaseGrid {
                 panel: removedPanel,
                 from: sourceGroup,
             });
+            /**
+            * Update overlay positions after DOM layout completes to prevent 0×0 dimensions.
+            * With defaultRenderer="always" this results in panel content not showing after move operations.
+            */
+            requestAnimationFrame(() => {
+                this.overlayRenderContainer.updateAllPositions();
+            });
         }
         else {
             /**
@@ -9772,7 +9887,9 @@ class DockviewComponent extends BaseGrid {
                     }));
                     this.doRemoveGroup(sourceGroup, { skipActive: true });
                     const newGroup = this.createGroupAtLocation(targetLocation);
-                    this.movingLock(() => newGroup.model.openPanel(removedPanel));
+                    this.movingLock(() => newGroup.model.openPanel(removedPanel, {
+                        skipSetActive: true,
+                    }));
                     this.doSetGroupAndPanelActive(newGroup);
                     this._onDidMovePanel.fire({
                         panel: this.getGroupPanel(sourceItemId),
@@ -9805,7 +9922,7 @@ class DockviewComponent extends BaseGrid {
                     skipSetActiveGroup: true,
                 }));
                 if (!removedPanel) {
-                    throw new Error(`No panel with id ${sourceItemId}`);
+                    throw new Error(`dockview: No panel with id ${sourceItemId}`);
                 }
                 const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, destinationTarget);
                 const group = this.createGroupAtLocation(dropLocation);
@@ -9860,7 +9977,7 @@ class DockviewComponent extends BaseGrid {
                 case 'floating': {
                     const selectedFloatingGroup = this._floatingGroups.find((x) => x.group === from);
                     if (!selectedFloatingGroup) {
-                        throw new Error('failed to find floating group');
+                        throw new Error('dockview: failed to find floating group');
                     }
                     selectedFloatingGroup.dispose();
                     break;
@@ -9868,7 +9985,7 @@ class DockviewComponent extends BaseGrid {
                 case 'popout': {
                     const selectedPopoutGroup = this._popoutGroups.find((x) => x.popoutGroup === from);
                     if (!selectedPopoutGroup) {
-                        throw new Error('failed to find popout group');
+                        throw new Error('dockview: failed to find popout group');
                     }
                     // Remove from popout groups list to prevent automatic restoration
                     const index = this._popoutGroups.indexOf(selectedPopoutGroup);
@@ -11317,12 +11434,19 @@ class AngularRenderer {
         return this._element;
     }
     init(parameters) {
-        this.render(parameters);
+        // If already initialized, just update the parameters
+        if (this.componentRef) {
+            this.update(parameters);
+        }
+        else {
+            this.render(parameters);
+        }
     }
     update(params) {
         if (this.componentRef) {
             Object.keys(params).forEach(key => {
-                if (this.componentRef.instance.hasOwnProperty(key)) {
+                // Use 'in' operator instead of hasOwnProperty to support getter/setter properties
+                if (key in this.componentRef.instance) {
                     this.componentRef.instance[key] = params[key];
                 }
             });
@@ -11338,7 +11462,8 @@ class AngularRenderer {
             });
             // Set initial parameters
             Object.keys(parameters).forEach(key => {
-                if (this.componentRef.instance.hasOwnProperty(key)) {
+                // Use 'in' operator instead of hasOwnProperty to support getter/setter properties
+                if (key in this.componentRef.instance) {
                     this.componentRef.instance[key] = parameters[key];
                 }
             });
@@ -11509,6 +11634,7 @@ class AngularFrameworkComponentFactory {
             injector: this.injector,
             environmentInjector: this.environmentInjector
         });
+        // Initialize with empty props - dockview-core will call init() again with actual IGroupHeaderProps
         renderer.init({});
         return renderer;
     }
@@ -12566,6 +12692,7 @@ __decorate([
 DockviewAngularComponent = __decorate([
     Component({
         selector: 'dv-dockview',
+        standalone: true,
         template: '<div #dockviewContainer class="dockview-container"></div>',
         styles: [`
         :host {
@@ -12573,7 +12700,7 @@ DockviewAngularComponent = __decorate([
             width: 100%;
             height: 100%;
         }
-        
+
         .dockview-container {
             width: 100%;
             height: 100%;
@@ -12689,6 +12816,7 @@ __decorate([
 GridviewAngularComponent = __decorate([
     Component({
         selector: 'dv-gridview',
+        standalone: true,
         template: '<div #gridviewContainer class="gridview-container"></div>',
         styles: [`
         :host {
@@ -12696,7 +12824,7 @@ GridviewAngularComponent = __decorate([
             width: 100%;
             height: 100%;
         }
-        
+
         .gridview-container {
             width: 100%;
             height: 100%;
@@ -12837,6 +12965,7 @@ __decorate([
 PaneviewAngularComponent = __decorate([
     Component({
         selector: 'dv-paneview',
+        standalone: true,
         template: '<div #paneviewContainer class="paneview-container"></div>',
         styles: [`
         :host {
@@ -12844,7 +12973,7 @@ PaneviewAngularComponent = __decorate([
             width: 100%;
             height: 100%;
         }
-        
+
         .paneview-container {
             width: 100%;
             height: 100%;
@@ -12960,6 +13089,7 @@ __decorate([
 SplitviewAngularComponent = __decorate([
     Component({
         selector: 'dv-splitview',
+        standalone: true,
         template: '<div #splitviewContainer class="splitview-container"></div>',
         styles: [`
         :host {
@@ -12967,7 +13097,7 @@ SplitviewAngularComponent = __decorate([
             width: 100%;
             height: 100%;
         }
-        
+
         .splitview-container {
             width: 100%;
             height: 100%;
@@ -12981,15 +13111,13 @@ let DockviewAngularModule = class DockviewAngularModule {
 };
 DockviewAngularModule = __decorate([
     NgModule({
-        declarations: [
+        imports: [
+            CommonModule,
             DockviewAngularComponent,
             GridviewAngularComponent,
             PaneviewAngularComponent,
             SplitviewAngularComponent
         ],
-        imports: [
-            CommonModule
-        ],
         exports: [
             DockviewAngularComponent,
             GridviewAngularComponent,
@@ -12999,5 +13127,5 @@ DockviewAngularModule = __decorate([
     })
 ], DockviewAngularModule);
 
-export { AngularDisposable, AngularFrameworkComponentFactory, AngularLifecycleManager, AngularRenderer, BaseGrid, ContentContainer, DefaultDockviewDeserialzier, DefaultTab, DockviewAngularComponent, DockviewAngularModule, DockviewApi, DockviewComponent, CompositeDisposable as DockviewCompositeDisposable, DockviewDidDropEvent, Disposable as DockviewDisposable, Emitter as DockviewEmitter, Event as DockviewEvent, DockviewGroupPanel, DockviewGroupPanelModel, MutableDisposable as DockviewMutableDisposable, DockviewPanel, DockviewUnhandledDragOverEvent, DockviewWillDropEvent, DraggablePaneviewPanel, Gridview, GridviewAngularComponent, GridviewApi, GridviewComponent, GridviewPanel, LayoutPriority, Orientation, PROPERTY_KEYS_DOCKVIEW, PROPERTY_KEYS_GRIDVIEW, PROPERTY_KEYS_PANEVIEW, PROPERTY_KEYS_SPLITVIEW, PaneFramework, PaneTransfer, PanelTransfer, Paneview, PaneviewAngularComponent, PaneviewApi, PaneviewComponent, PaneviewPanel, PaneviewUnhandledDragOverEvent, SashState, Sizing, Splitview, SplitviewAngularComponent, SplitviewApi, SplitviewComponent, SplitviewPanel, Tab, createAngularDisposable, createDockview, createGridview, createPaneview, createSplitview, directionToPosition, getDirectionOrientation, getGridLocation, getLocationOrientation, getPaneData, getPanelData, getRelativeLocation, indexInParent, isGridBranchNode, isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGroup, isPanelOptionsWithPanel, orthogonal, positionToDirection, themeAbyss, themeAbyssSpaced, themeDark, themeDracula, themeLight, themeLightSpaced, themeReplit, themeVisualStudio, toTarget };
+export { AngularDisposable, AngularFrameworkComponentFactory, AngularLifecycleManager, AngularRenderer, BaseGrid, ContentContainer, DefaultDockviewDeserialzier, DefaultTab, DockviewAngularComponent, DockviewAngularModule, DockviewApi, DockviewComponent, CompositeDisposable as DockviewCompositeDisposable, DockviewDidDropEvent, Disposable as DockviewDisposable, Emitter as DockviewEmitter, Event as DockviewEvent, DockviewGroupPanel, DockviewGroupPanelModel, MutableDisposable as DockviewMutableDisposable, DockviewPanel, DockviewUnhandledDragOverEvent, DockviewWillDropEvent, DockviewWillShowOverlayLocationEvent, DraggablePaneviewPanel, Gridview, GridviewAngularComponent, GridviewApi, GridviewComponent, GridviewPanel, LayoutPriority, Orientation, PROPERTY_KEYS_DOCKVIEW, PROPERTY_KEYS_GRIDVIEW, PROPERTY_KEYS_PANEVIEW, PROPERTY_KEYS_SPLITVIEW, PaneFramework, PaneTransfer, PanelTransfer, Paneview, PaneviewAngularComponent, PaneviewApi, PaneviewComponent, PaneviewPanel, PaneviewUnhandledDragOverEvent, SashState, Sizing, Splitview, SplitviewAngularComponent, SplitviewApi, SplitviewComponent, SplitviewPanel, Tab, createAngularDisposable, createDockview, createGridview, createPaneview, createSplitview, directionToPosition, getDirectionOrientation, getGridLocation, getLocationOrientation, getPaneData, getPanelData, getRelativeLocation, indexInParent, isGridBranchNode, isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGroup, isPanelOptionsWithPanel, orthogonal, positionToDirection, themeAbyss, themeAbyssSpaced, themeDark, themeDracula, themeLight, themeLightSpaced, themeReplit, themeVisualStudio, toTarget };
 //# sourceMappingURL=dockview-angular.esm.js.map