igniteui-dockmanager 2.0.2-alpha.3 → 2.1.0

package/CHANGELOG.md

@@ -6,6 +6,8 @@ All notable changes for each version of this project will be documented in this
 
 ### New features
 - Added `paneFlyoutToggle` event that fires when an unpinned pane's flyout opens or closes (distinct from pin/unpin operations).
+- Added `minResizeWidth` and `minResizeHeight` properties to `IgcContentPane`, `IgcSplitPane`, and `IgcTabGroupPane` to constrain resizing behavior during resize operations. These properties set minimum size constraints (in pixels, default: 42) that are enforced when a user interacts with splitters or resizes floating panes. **Note:** These constraints only apply during active resize operations and do not prevent docking into smaller containers or affect container sizing during docking operations.
+- The `layoutChange` event now includes the updated layout in its `detail.layout` property.
 
 ### Bug Fixes
 - The hover area for showing pane headers when `showPaneHeaders` is set to `onHoverOnly` now correctly accounts for the actual pane header height, including custom heights set via `::part(pane-header)` styles. Note that when customizing the header height, the `min-height` property should also be overridden, as it defaults to 40px to ensure header elements are properly displayed.

package/components/dockmanager/dockmanager-component.d.ts

@@ -1,13 +1,13 @@
 import { LitElement, type TemplateResult } from 'lit';
 import type { Constructor } from '../../common/mixins/constructor.js';
 import type { ContextMenuPosition, PaneActionBehavior } from './backfill-types-dockmanager.js';
-import { type IgcActivePaneEventArgs, type IgcContentPane, type IgcContextMenuMetadata, type IgcDockManagerComponentBase, type IgcDockManagerLayout, type IgcDockManagerPane, type IgcDockManagerPoint, type IgcDockManagerResourceStrings, type IgcDropTargetPaneInfo, type IgcFloatingPaneResizeEventArgs, type IgcFloatingPaneResizeMoveEventArgs, type IgcPaneCloseEventArgs, type IgcPaneDragEndEventArgs, type IgcPaneDragOverEventArgs, type IgcPaneDragStartEventArgs, type IgcPaneFlyoutEventArgs, type IgcPaneHeaderConnectionEventArgs, type IgcPaneNavigatorMetadata, type IgcPanePinnedEventArgs, type IgcPaneScrollEventArgs, type IgcSplitPane, type IgcSplitterResizeEventArgs, type IgcTabGroupPane, type IgcTabHeaderConnectionEventArgs } from './dockmanager.interfaces.js';
+import { type IgcActivePaneEventArgs, type IgcContentPane, type IgcContextMenuMetadata, type IgcDockManagerComponentBase, type IgcDockManagerLayout, type IgcDockManagerPane, type IgcDockManagerPoint, type IgcDockManagerResourceStrings, type IgcDropTargetPaneInfo, type IgcFloatingPaneResizeEventArgs, type IgcFloatingPaneResizeMoveEventArgs, type IgcLayoutChangeEventArgs, type IgcPaneCloseEventArgs, type IgcPaneDragEndEventArgs, type IgcPaneDragOverEventArgs, type IgcPaneDragStartEventArgs, type IgcPaneFlyoutEventArgs, type IgcPaneHeaderConnectionEventArgs, type IgcPaneNavigatorMetadata, type IgcPanePinnedEventArgs, type IgcPaneScrollEventArgs, type IgcScrollConfig, type IgcSplitPane, type IgcSplitterResizeEventArgs, type IgcTabGroupPane, type IgcTabHeaderConnectionEventArgs } from './dockmanager.interfaces.js';
 export interface IgcDockManagerEventMap {
     activePaneChanged: CustomEvent<IgcActivePaneEventArgs>;
     floatingPaneResizeEnd: CustomEvent<IgcFloatingPaneResizeEventArgs>;
     floatingPaneResizeMove: CustomEvent<IgcFloatingPaneResizeMoveEventArgs>;
     floatingPaneResizeStart: CustomEvent<IgcFloatingPaneResizeEventArgs>;
-    layoutChange: CustomEvent;
+    layoutChange: CustomEvent<IgcLayoutChangeEventArgs>;
     paneDragEnd: CustomEvent<IgcPaneDragEndEventArgs>;
     paneDragOver: CustomEvent<IgcPaneDragOverEventArgs>;
     paneDragStart: CustomEvent<IgcPaneDragStartEventArgs>;
@@ -105,6 +105,7 @@ export default class IgcDockManagerComponent extends IgcDockManagerComponent_bas
     private cachedHeaderHeight;
     private templatableComponents;
     private readonly _resourceChangeHandler;
+    /** @hidden @internal **/
     documentOnlyDrag: boolean;
     draggedPaneElement?: HTMLElement;
     /**
@@ -217,10 +218,7 @@ export default class IgcDockManagerComponent extends IgcDockManagerComponent_bas
      * @type {{ edgeThreshold: number, scrollSpeed: number }}
      * @default { edgeThreshold: 20, scrollSpeed: 15 }
      */
-    autoScrollConfig: {
-        edgeThreshold: number;
-        scrollSpeed: number;
-    };
+    autoScrollConfig: IgcScrollConfig;
     /**
      * Determines whether docking indicators are displayed while docking
      *
@@ -332,18 +330,26 @@ export default class IgcDockManagerComponent extends IgcDockManagerComponent_bas
     protected draggedPaneChanged(): void;
     protected layoutChanged(): void;
     protected containedInBoundariesChanged(): void;
+    /** @hidden @internal **/
     dropPositionChanged(): void;
     constructor();
+    /** @hidden @internal **/
     connectedCallback(): void;
     private onResourceChangeHandler;
+    /** @hidden @internal **/
     willUpdate(): void;
+    /** @hidden @internal **/
     updated(): void;
+    /** @hidden @internal **/
     firstUpdated(): void;
+    /** @hidden @internal **/
     disconnectedCallback(): void;
+    /** @hidden @internal **/
     focusElement(): void;
     dropPane(): Promise<boolean>;
     removePane(pane: IgcDockManagerPane): Promise<void>;
     focusPane(contentId: string): Promise<void>;
+    /** @hidden @internal **/
     getDockedPanesContainerRect(): DOMRect | undefined;
     private updateLayout;
     private handleFocusOut;
@@ -375,6 +381,7 @@ export default class IgcDockManagerComponent extends IgcDockManagerComponent_bas
     private handleUnpinnedHeaderFocus;
     private clearActivePane;
     private isPaneSizeWithinConstraints;
+    private _getMinSizeFromPane;
     private restrictFloatingPaneSize;
     private renderDocumentHost;
     private renderSplitter;
@@ -434,6 +441,7 @@ export default class IgcDockManagerComponent extends IgcDockManagerComponent_bas
     private handleAutoScroll;
     private setSplitterDockingIndicatorVisibility;
     private setSplitterDockTarget;
+    /** @hidden @internal **/
     scrollPaneIntoView(pane: IgcDockManagerPane): void;
     private handlePaneDragStart;
     private handlePaneDragMove;
@@ -467,8 +475,11 @@ export default class IgcDockManagerComponent extends IgcDockManagerComponent_bas
     private updateTemplates;
     private emitTabHeaderConnected;
     private emitTabHeaderDisconnected;
+    /** @hidden @internal **/
     paneClose(args: IgcPaneCloseEventArgs): CustomEvent<IgcPaneCloseEventArgs>;
+    /** @hidden @internal **/
     paneScroll(args: IgcPaneScrollEventArgs): CustomEvent<IgcPaneScrollEventArgs>;
+    /** @hidden @internal **/
     panePinnedToggle(args: IgcPanePinnedEventArgs): CustomEvent<IgcPanePinnedEventArgs>;
     /**
      * Emitted when an unpinned pane's flyout state changes (opens or closes).
@@ -499,13 +510,20 @@ export default class IgcDockManagerComponent extends IgcDockManagerComponent_bas
      * ```
      */
     paneFlyoutToggle(args: IgcPaneFlyoutEventArgs): CustomEvent<IgcPaneFlyoutEventArgs>;
+    /** @hidden @internal **/
     paneDragStart(args: IgcPaneDragStartEventArgs): CustomEvent<IgcPaneDragStartEventArgs>;
+    /** @hidden @internal **/
     paneDragOver(args: IgcPaneDragOverEventArgs): CustomEvent<IgcPaneDragOverEventArgs>;
+    /** @hidden @internal **/
     paneDragEnd(args: IgcPaneDragEndEventArgs): CustomEvent<IgcPaneDragEndEventArgs>;
+    /** @hidden @internal **/
     floatingPaneResizeStart(args: IgcFloatingPaneResizeEventArgs): CustomEvent<IgcFloatingPaneResizeEventArgs>;
+    /** @hidden @internal **/
     floatingPaneResizeMove(eventArgs: IgcFloatingPaneResizeMoveEventArgs): CustomEvent<IgcFloatingPaneResizeMoveEventArgs>;
+    /** @hidden @internal **/
     floatingPaneResizeEnd(args: IgcFloatingPaneResizeEventArgs): CustomEvent<IgcFloatingPaneResizeEventArgs>;
-    layoutChange(): CustomEvent;
+    /** @hidden @internal **/
+    layoutChange(): CustomEvent<IgcLayoutChangeEventArgs>;
     private renderContentPane;
     private renderSplitPane;
     private renderPlaceholder;

package/components/dockmanager/dockmanager-component.js

@@ -145,7 +145,9 @@ class IgcDockManagerComponent extends EventEmitterMixin(LitElement) {
         this.service.processLayout();
         this.restoreDraggedPanes();
         if (!this.isDragging) {
-            this.emitEvent('layoutChange');
+            this.emitEvent('layoutChange', {
+                detail: { layout: this.layout },
+            });
         }
     }
     containedInBoundariesChanged() {
@@ -904,8 +906,9 @@ class IgcDockManagerComponent extends EventEmitterMixin(LitElement) {
             pane.unpinnedSize = minSize;
         }
         const parent = this.service.getParent(pane);
+        const unpinnedLocation = this.service.unpinnedLocationMap.get(pane);
         let offset = this.service.isSplitPaneIgnoringResizeConstraints(parent) ||
-            this.isPaneSizeWithinConstraints(previousPane, event.detail, orientation, 'previous')
+            this.isPaneSizeWithinConstraints(previousPane, event.detail, orientation, 'previous', unpinnedLocation)
             ? this.splitterOffset * event.detail
             : 0;
         if (this.direction === 'rtl' && orientation === 'horizontal') {
@@ -955,14 +958,14 @@ class IgcDockManagerComponent extends EventEmitterMixin(LitElement) {
             this.setActivePane(null);
         }
     }
-    isPaneSizeWithinConstraints(pane, offset, orientation, position = 'next') {
+    isPaneSizeWithinConstraints(pane, offset, orientation, position = 'next', unpinnedLocation) {
         let size;
         let minSize;
         let maxSize;
         let adjustedOffset = offset;
         if (orientation === 'horizontal') {
             size = pane.getBoundingClientRect().width;
-            minSize = Number.parseFloat(getComputedStyle(pane).minWidth);
+            minSize = this._getMinSizeFromPane(pane, 'minResizeWidth');
             maxSize = Number.parseFloat(getComputedStyle(pane).maxWidth);
             if (this.direction === 'rtl') {
                 adjustedOffset *= -1;
@@ -970,20 +973,46 @@ class IgcDockManagerComponent extends EventEmitterMixin(LitElement) {
         }
         else {
             size = pane.getBoundingClientRect().height;
-            minSize = Number.parseFloat(getComputedStyle(pane).minHeight);
+            minSize = this._getMinSizeFromPane(pane, 'minResizeHeight');
             maxSize = Number.parseFloat(getComputedStyle(pane).maxHeight);
         }
         if (position === 'previous') {
-            return adjustedOffset < 0
-                ? size + adjustedOffset >= minSize ||
-                    Number.isNaN(minSize) ||
-                    minSize === 0
-                : size + adjustedOffset <= maxSize || Number.isNaN(maxSize);
+            let newSize;
+            if (unpinnedLocation) {
+                const shouldAddOffset = unpinnedLocation === 'top' || unpinnedLocation === 'left';
+                newSize = shouldAddOffset
+                    ? size + adjustedOffset
+                    : size - adjustedOffset;
+            }
+            else {
+                newSize = size + adjustedOffset;
+            }
+            if (newSize > size) {
+                if (unpinnedLocation) {
+                    return true;
+                }
+                return newSize <= maxSize || Number.isNaN(maxSize);
+            }
+            return newSize >= minSize || Number.isNaN(minSize) || minSize === 0;
         }
         return adjustedOffset > 0
-            ? size - adjustedOffset >= minSize || Number.isNaN(minSize)
+            ? size - adjustedOffset >= minSize ||
+                Number.isNaN(minSize) ||
+                minSize === 0
             : size - adjustedOffset <= maxSize || Number.isNaN(maxSize);
     }
+    _getMinSizeFromPane(pane, property) {
+        const customElement = pane;
+        if (property in customElement &&
+            typeof customElement[property] === 'number') {
+            const value = customElement[property];
+            if (value > 0) {
+                return value;
+            }
+        }
+        const cssProperty = property === 'minResizeWidth' ? 'minWidth' : 'minHeight';
+        return Number.parseFloat(getComputedStyle(pane)[cssProperty]);
+    }
     restrictFloatingPaneSize() {
         if (this.containedInBoundaries) {
             if (!this.shadowRoot)
@@ -1038,6 +1067,7 @@ class IgcDockManagerComponent extends EventEmitterMixin(LitElement) {
         ${ref((el) => {
             if (el instanceof HTMLElement) {
                 this.panesElementMap.set(docHost, el);
+                el._layoutPane = docHost;
             }
         })}
       >
@@ -2299,7 +2329,9 @@ class IgcDockManagerComponent extends EventEmitterMixin(LitElement) {
         return this.createAndDispatchEvent('floatingPaneResizeEnd', args);
     }
     layoutChange() {
-        return this.createAndDispatchEvent('layoutChange', { cancelable: true });
+        return this.createAndDispatchEvent('layoutChange', { layout: this.layout }, {
+            cancelable: true,
+        });
     }
     renderContentPane(pane, isFloating, isFlyout) {
         const parentPane = this.service.getParent(pane);
@@ -2327,6 +2359,8 @@ class IgcDockManagerComponent extends EventEmitterMixin(LitElement) {
       <igc-content-pane
         .contentId=${pane.contentId}
         .size=${pane.size ?? IGC_DEFAULT_PANE_SIZE}
+        .minResizeWidth=${pane.minResizeWidth}
+        .minResizeHeight=${pane.minResizeHeight}
         .isFlyout=${isFlyout}
         .unpinnedSize=${pane.unpinnedSize ?? IGC_DEFAULT_UNPIN_PANE_SIZE}
         ?disabled=${pane.disabled}
@@ -2341,6 +2375,7 @@ class IgcDockManagerComponent extends EventEmitterMixin(LitElement) {
             if (el instanceof HTMLElement) {
                 this.panesElementMap.set(pane, el);
                 this.contentPanesElementMap.set(pane, el);
+                el._layoutPane = pane;
             }
         })}
       >
@@ -2412,12 +2447,15 @@ class IgcDockManagerComponent extends EventEmitterMixin(LitElement) {
       <igc-split-pane
         orientation=${splitPane.orientation}
         .size=${splitPane.size}
+        .minResizeWidth=${splitPane.minResizeWidth}
+        .minResizeHeight=${splitPane.minResizeHeight}
         .useFixedSize=${splitPane.useFixedSize ?? false}
         .parentUseFixedSize=${this.service.isParentUseFixedSize(splitPane)}
         @rendered=${() => this.handleSplitPaneRendered(panes)}
         ${ref((el) => {
             if (el instanceof HTMLElement) {
                 this.panesElementMap.set(splitPane, el);
+                el._layoutPane = splitPane;
             }
         })}
       >
@@ -2652,6 +2690,8 @@ class IgcDockManagerComponent extends EventEmitterMixin(LitElement) {
         class=${classMap(tabClassMap)}
         .contentIds=${contentIds}
         .size=${pane.size ?? IGC_DEFAULT_PANE_SIZE}
+        .minResizeWidth=${pane.minResizeWidth}
+        .minResizeHeight=${pane.minResizeHeight}
         .selectedIndex=${selectedIndex}
         .hasHeaders=${!isSingleTab}
         .parentUseFixedSize=${this.service.isParentUseFixedSize(pane)}
@@ -2668,6 +2708,7 @@ class IgcDockManagerComponent extends EventEmitterMixin(LitElement) {
         ${ref((el) => {
             if (el instanceof HTMLElement) {
                 this.panesElementMap.set(pane, el);
+                el._layoutPane = pane;
             }
         })}
       >

package/components/dockmanager/dockmanager.interfaces.d.ts

@@ -16,6 +16,10 @@ export declare const IGC_DEFAULT_UNPIN_PANE_SIZE = 200;
  * @hidden
  */
 export declare const IGC_RESIZING_MIN_SIZE = 42;
+/**
+ * @hidden
+ */
+export declare const IGC_DEFAULT_SPLITTER_SIZE = 4;
 /**
  * @hidden
  */
@@ -24,6 +28,10 @@ export declare const IGC_DEFAULT_RESIZE = 10;
  * @hidden
  */
 export declare const IGC_DRAG_FLYOUT_THRESHOLD = 50;
+/**
+ * @hidden
+ */
+export declare const IGC_DEFAULT_FLOATING_PANE_HEADER_HEIGHT = 30;
 /**
  * @hidden
  * @deprecated Use TabHeadersPosition instead.
@@ -94,7 +102,7 @@ export interface IgcDockManagerComponentBase {
     floatingPaneResizeStart(eventArgs: IgcFloatingPaneResizeEventArgs): CustomEvent<IgcFloatingPaneResizeEventArgs>;
     floatingPaneResizeMove(eventArgs: IgcFloatingPaneResizeMoveEventArgs): CustomEvent<IgcFloatingPaneResizeMoveEventArgs>;
     floatingPaneResizeEnd(eventArgs: IgcFloatingPaneResizeEventArgs): CustomEvent<IgcFloatingPaneResizeEventArgs>;
-    layoutChange(eventArgs?: IgcDockManagerLayout): CustomEvent;
+    layoutChange(): CustomEvent<IgcLayoutChangeEventArgs>;
     direction: string;
     allowInnerDock: boolean;
     closeBehavior: IgcPaneActionBehavior;
@@ -135,15 +143,16 @@ export interface IgcTabRectsInfo {
     lastVisibleHeaderRect: DOMRect;
     tabsRect: DOMRect;
 }
-/**
- * @hidden
- */
 export interface IgcPaneNavigatorMetadata {
     activePanes: IgcContentPane[];
     activeDocuments: IgcContentPane[];
     initialIndex: number;
     previousActivePaneIndex: number;
 }
+export interface IgcScrollConfig {
+    edgeThreshold: number;
+    scrollSpeed: number;
+}
 /**
  * @hidden
  */
@@ -378,6 +387,12 @@ export interface IgcPaneDragEndEventArgs {
      */
     readonly panes: IgcContentPane[];
 }
+export interface IgcLayoutChangeEventArgs {
+    /**
+     * The new layout of the Dock Manager.
+     */
+    layout: IgcDockManagerLayout;
+}
 export interface IgcContentPane {
     /**
      * The id of the pane. If not set the Dock Manager generates it automatically.
@@ -471,6 +486,14 @@ export interface IgcContentPane {
      * Marks that a content pane can be docked only inside a document host.
      */
     documentOnly?: boolean;
+    /**
+     * The minimum width of the pane in pixels during resizing. Defaults to 42.
+     */
+    minResizeWidth?: number;
+    /**
+     * The minimum height of the pane in pixels during resizing. Defaults to 42.
+     */
+    minResizeHeight?: number;
 }
 export interface IgcSplitPane {
     /**
@@ -524,6 +547,14 @@ export interface IgcSplitPane {
      * Defaults to false.
      */
     useFixedSize?: boolean;
+    /**
+     * The minimum width of child panes in pixels during resizing. Defaults to 42.
+     */
+    minResizeWidth?: number;
+    /**
+     * The minimum height of child panes in pixels during resizing. Defaults to 42.
+     */
+    minResizeHeight?: number;
 }
 export interface IgcTabGroupPane {
     /**
@@ -554,6 +585,14 @@ export interface IgcTabGroupPane {
      *  Determines whether a tab group is maximized or not. Defaults to false.
      */
     isMaximized?: boolean;
+    /**
+     * The minimum width of the tab group pane in pixels during resizing. Defaults to 42.
+     */
+    minResizeWidth?: number;
+    /**
+     * The minimum height of the tab group pane in pixels during resizing. Defaults to 42.
+     */
+    minResizeHeight?: number;
 }
 export interface IgcDocumentHost {
     /**

package/components/dockmanager/dockmanager.interfaces.js

@@ -2,8 +2,10 @@ export const IGC_DEFAULT_PANE_SIZE = 100;
 export const IGC_DEFAULT_PANE_SIZE_IN_PIXELS = 100;
 export const IGC_DEFAULT_UNPIN_PANE_SIZE = 200;
 export const IGC_RESIZING_MIN_SIZE = 42;
+export const IGC_DEFAULT_SPLITTER_SIZE = 4;
 export const IGC_DEFAULT_RESIZE = 10;
 export const IGC_DRAG_FLYOUT_THRESHOLD = 50;
+export const IGC_DEFAULT_FLOATING_PANE_HEADER_HEIGHT = 30;
 export const IgcTabHeadersPosition = {
     top: 'top',
     bottom: 'bottom',

package/components/dockmanager/dockmanager.service.d.ts

@@ -19,9 +19,9 @@ export declare class IgcDockManagerService {
     private shiftRightThreshold;
     private documentsCache;
     private contentPanesCache;
-    private defaultSplitterSize;
     private isUpdatingLayout;
     private lastSwapCenter;
+    private _splitterSize;
     visibleDocuments: IgcContentPane[];
     visibleContentPanes: IgcContentPane[];
     documentHosts: IgcDocumentHost[];
@@ -56,6 +56,26 @@ export declare class IgcDockManagerService {
     private getChildContentPanesRecursive;
     getChildDocHostRecursive(pane: IgcSplitPane): IgcDocumentHost | null;
     getVisibleContentPanes(parent: IgcTabGroupPane): IgcContentPane[];
+    /**
+     * Get the actual rendered size of a splitter element from the DOM.
+     * The result is cached after the first successful measurement since splitter
+     * size is consistent across the component and rarely changes at runtime.
+     * @returns The splitter thickness in pixels, or IGC_DEFAULT_SPLITTER_SIZE if not found
+     */
+    private getSplitterSize;
+    /**
+     * Get the actual rendered height of a floating pane header from the DOM.
+     * This accounts for user customization via slots, CSS parts, or other styling.
+     * @param pane The floating pane to check
+     * @returns The header height in pixels, or default as a fallback if not found
+     */
+    private getFloatingPaneHeaderHeight;
+    /**
+     * Calculate the minimum width and height constraints for a floating pane
+     * based on all its child panes' minResizeWidth and minResizeHeight properties.
+     * This properly handles split panes by summing constraints in the split direction.
+     */
+    private getFloatingPaneMinConstraints;
     findPaneById(paneId: string | undefined): IgcDockManagerPane | null;
     private getPaneToDock;
     private removeDocumentHost;

package/components/dockmanager/dockmanager.service.js

@@ -1,5 +1,5 @@
-import { closestElement, getDirection, isDockingIndicatorBefore, isDockingIndicatorBeforeRTL, isDockingIndicatorOuter, isDockingIndicatorVertical, isSplitPaneVertical, } from '../../utils/utils.js';
-import { IGC_DEFAULT_PANE_SIZE, IGC_DEFAULT_PANE_SIZE_IN_PIXELS, IGC_DEFAULT_UNPIN_PANE_SIZE, IGC_DRAG_FLYOUT_THRESHOLD, } from './dockmanager.interfaces.js';
+import { calculatePaneMinSize, closestElement, getDirection, isDockingIndicatorBefore, isDockingIndicatorBeforeRTL, isDockingIndicatorOuter, isDockingIndicatorVertical, isSplitPaneVertical, } from '../../utils/utils.js';
+import { IGC_DEFAULT_FLOATING_PANE_HEADER_HEIGHT, IGC_DEFAULT_PANE_SIZE, IGC_DEFAULT_PANE_SIZE_IN_PIXELS, IGC_DEFAULT_SPLITTER_SIZE, IGC_DEFAULT_UNPIN_PANE_SIZE, IGC_DRAG_FLYOUT_THRESHOLD, } from './dockmanager.interfaces.js';
 export class IgcDockManagerService {
     constructor(dockManager) {
         this.dockManager = dockManager;
@@ -9,8 +9,8 @@ export class IgcDockManagerService {
         this.draggedPaneParent = null;
         this.documentsCache = [];
         this.contentPanesCache = [];
-        this.defaultSplitterSize = 4;
         this.isUpdatingLayout = false;
+        this._splitterSize = null;
         this.visibleDocuments = [];
         this.visibleContentPanes = [];
         this.documentHosts = [];
@@ -301,6 +301,61 @@ export class IgcDockManagerService {
     getVisibleContentPanes(parent) {
         return parent.panes.filter((t) => this.isContentPaneVisible(t));
     }
+    getSplitterSize() {
+        if (this._splitterSize !== null) {
+            return this._splitterSize;
+        }
+        const dockManagerElement = this.dockManager;
+        if (!dockManagerElement || !dockManagerElement.shadowRoot) {
+            return IGC_DEFAULT_SPLITTER_SIZE;
+        }
+        const splitter = dockManagerElement.shadowRoot.querySelector('igc-splitter');
+        if (splitter) {
+            const rect = splitter.getBoundingClientRect();
+            const thickness = Math.min(rect.width, rect.height);
+            if (thickness > 0) {
+                this._splitterSize = thickness;
+                return this._splitterSize;
+            }
+        }
+        return IGC_DEFAULT_SPLITTER_SIZE;
+    }
+    getFloatingPaneHeaderHeight(pane) {
+        const dockManagerElement = this.dockManager;
+        if (!dockManagerElement || !dockManagerElement.shadowRoot) {
+            return IGC_DEFAULT_FLOATING_PANE_HEADER_HEIGHT + 2;
+        }
+        const floatingPaneElements = dockManagerElement.shadowRoot.querySelectorAll('igc-floating-pane');
+        let floatingPaneElement = null;
+        for (const element of Array.from(floatingPaneElements)) {
+            if (element.floatingId === pane.id) {
+                floatingPaneElement = element;
+                break;
+            }
+        }
+        if (floatingPaneElement) {
+            const headerElement = floatingPaneElement.querySelector('igc-pane-header[slot="header"]');
+            if (headerElement) {
+                const rect = headerElement.getBoundingClientRect();
+                if (rect.height > 0) {
+                    return rect.height;
+                }
+            }
+        }
+        return IGC_DEFAULT_FLOATING_PANE_HEADER_HEIGHT + 2;
+    }
+    getFloatingPaneMinConstraints(pane) {
+        const splitterSize = this.getSplitterSize();
+        let minWidth = calculatePaneMinSize(pane, 'horizontal', splitterSize);
+        let minHeight = calculatePaneMinSize(pane, 'vertical', splitterSize);
+        if (this.hasFloatingPaneHeader(pane)) {
+            const headerHeight = this.getFloatingPaneHeaderHeight(pane);
+            minHeight += headerHeight;
+        }
+        minWidth += 2;
+        minHeight += 2;
+        return { minWidth, minHeight };
+    }
     findPaneById(paneId) {
         const layout = this.dockManager.layout;
         if (!layout || !paneId)
@@ -749,7 +804,6 @@ export class IgcDockManagerService {
                 this.setFlyoutPane(null, this.dockManager.flyoutPane);
             }
             this.updateLayout();
-            this.dockManager.layoutChange();
         }
     }
     checkUseFixedSizeParent(pane) {
@@ -902,8 +956,9 @@ export class IgcDockManagerService {
         const currH = pane.floatingHeight
             ? pane.floatingHeight
             : IGC_DEFAULT_PANE_SIZE;
-        const minW = IGC_DEFAULT_PANE_SIZE;
-        const minH = IGC_DEFAULT_PANE_SIZE;
+        const constraints = this.getFloatingPaneMinConstraints(pane);
+        const minW = constraints.minWidth;
+        const minH = constraints.minHeight;
         const initialWidth = this.initialFloatingPaneWidth;
         const initialHeight = this.initialFloatingPaneHeight;
         const initialLocation = this.initialFloatingPaneLocation;
@@ -920,10 +975,14 @@ export class IgcDockManagerService {
             case 'topLeft':
             case 'topRight':
                 newHeight = initialHeight - totalOffsetY;
-                if (newHeight < minH) {
+                if (initialHeight >= minH && newHeight < minH) {
                     totalOffsetY = initialHeight - minH;
                     newHeight = minH;
                 }
+                else if (initialHeight < minH && newHeight < initialHeight) {
+                    totalOffsetY = 0;
+                    newHeight = initialHeight;
+                }
                 newY = initialLocation.y + totalOffsetY;
                 if (newY < 0) {
                     newHeight += newY;
@@ -937,9 +996,12 @@ export class IgcDockManagerService {
             case 'bottomLeft':
             case 'bottomRight':
                 newHeight = initialHeight + totalOffsetY;
-                if (newHeight < minH) {
+                if (initialHeight >= minH && newHeight < minH) {
                     newHeight = minH;
                 }
+                else if (initialHeight < minH && newHeight < initialHeight) {
+                    newHeight = initialHeight;
+                }
                 if (newY + newHeight > maxHeight) {
                     newHeight = maxHeight - newY;
                 }
@@ -950,10 +1012,14 @@ export class IgcDockManagerService {
             case 'topLeft':
             case 'bottomLeft':
                 newWidth = initialWidth - totalOffsetX;
-                if (newWidth < minW) {
+                if (initialWidth >= minW && newWidth < minW) {
                     totalOffsetX = initialWidth - minW;
                     newWidth = minW;
                 }
+                else if (initialWidth < minW && newWidth < initialWidth) {
+                    totalOffsetX = 0;
+                    newWidth = initialWidth;
+                }
                 newX = initialLocation.x + totalOffsetX;
                 if (newX < 0) {
                     newWidth += newX;
@@ -967,9 +1033,12 @@ export class IgcDockManagerService {
             case 'topRight':
             case 'bottomRight':
                 newWidth = initialWidth + totalOffsetX;
-                if (newWidth < minW) {
+                if (initialWidth >= minW && newWidth < minW) {
                     newWidth = minW;
                 }
+                else if (initialWidth < minW && newWidth < initialWidth) {
+                    newWidth = initialWidth;
+                }
                 if (newX + newWidth > maxWidth) {
                     newWidth = maxWidth - newX;
                 }
@@ -1164,12 +1233,12 @@ export class IgcDockManagerService {
                     (isHorizontal
                         ? paneContainerRect?.width / 2
                         : paneContainerRect?.height / 2) -
-                        2 * this.defaultSplitterSize;
+                        2 * this.getSplitterSize();
                 rootPane.size =
                     (isHorizontal
                         ? paneContainerRect.width - paneToDock.size
                         : paneContainerRect.height - paneToDock.size) -
-                        2 * this.defaultSplitterSize;
+                        2 * this.getSplitterSize();
                 this.checkAndAddPlaceholderPane(layout.rootPane, true);
             }
         }
@@ -1229,7 +1298,6 @@ export class IgcDockManagerService {
             }
         }
         this.updateLayout();
-        this.dockManager.layoutChange();
     }
     getActualIsPinned(pane) {
         return pane.isPinned !== false;
@@ -1872,9 +1940,7 @@ export class IgcDockManagerService {
         const isSameSplitPane = (isIndicatorVertical && isTargetSplitPaneVertical) ||
             (!isIndicatorVertical && !isTargetSplitPaneVertical);
         const isRTL = finalDockingDirection === 'rtl';
-        const splitterSize = targetParent.useFixedSize
-            ? this.defaultSplitterSize
-            : 0;
+        const splitterSize = targetParent.useFixedSize ? this.getSplitterSize() : 0;
         const panesTotalSize = panes.reduce((a, b) => a + (b?.size && b.size >= 0 ? b.size : IGC_DEFAULT_PANE_SIZE), 0) +
             (panes.length - 1) * splitterSize;
         const beforePanesTotalSize = !isRTL || isIndicatorVertical

package/components/dockmanager/panes/content-pane-component.d.ts

@@ -91,6 +91,24 @@ export default class IgcContentPaneComponent extends IgcContentPaneComponent_bas
      */
     set unpinnedSize(value: number);
     get unpinnedSize(): number;
+    private _minResizeWidth;
+    private _minResizeHeight;
+    /**
+     * The minimum width of the pane in pixels during resizing.
+     *
+     * @attr min-resize-width
+     * @default 42
+     */
+    set minResizeWidth(value: number | undefined);
+    get minResizeWidth(): number;
+    /**
+     * The minimum height of the pane in pixels during resizing.
+     *
+     * @attr min-resize-height
+     * @default 42
+     */
+    set minResizeHeight(value: number | undefined);
+    get minResizeHeight(): number;
     connectedCallback(): void;
     protected updated(): void;
     private _updateFlex;