igniteui-dockmanager 1.16.0-beta.2 → 1.16.0-beta.4

package/dist/cjs/igc-button-component_20.cjs.entry.js

@@ -84,6 +84,10 @@ class Utils {
  * @hidden
  */
 const IGC_DEFAULT_PANE_SIZE = 100;
+/**
+ * @hidden
+ */
+const IGC_DEFAULT_PANE_SIZE_IN_PIXELS = 100;
 /**
  * @hidden
  */
@@ -130,13 +134,14 @@ const IgcContentPaneComponent = class {
     this.disabled = false;
     this.isSingleFloating = false;
     this.contentId = undefined;
+    this.parentUseFixedSize = false;
   }
   componentDidRender() {
     this.rendered.emit();
   }
   render() {
     const size = this.size || this.size === 0 ? this.size : IGC_DEFAULT_PANE_SIZE;
-    const unpinnedSize = this.unpinnedSize ? this.unpinnedSize : IGC_DEFAULT_UNPIN_PANE_SIZE;
+    const unpinnedSize = this.unpinnedSize >= 0 ? this.unpinnedSize : IGC_DEFAULT_UNPIN_PANE_SIZE;
     const parts = Utils.partNameMap({
       'content-pane': true,
       [this.contentId]: true,
@@ -144,7 +149,7 @@ const IgcContentPaneComponent = class {
       'single-floating': this.isSingleFloating
     });
     return (index.h(index.Host, { role: "group", "aria-label": this.header, "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, style: {
-        flex: this.isFlyout ? `0 1 ${unpinnedSize}px` : `${size} 1 ${size}px`
+        flex: this.isFlyout ? `0 1 ${unpinnedSize}px` : this.parentUseFixedSize ? `0 0 ${size}px` : `${size} 1 ${size}px`
       }, part: parts }, index.h("slot", { name: "header" }), index.h("slot", null)));
   }
 };
@@ -546,7 +551,8 @@ class IgcDockManagerService {
     const floatingPane = {
       type: locale.IgcDockManagerPaneType.splitPane,
       orientation: locale.IgcSplitPaneOrientation.vertical,
-      panes: [content]
+      panes: [content],
+      size: content.size
     };
     floatingPane.floatingLocation = location;
     floatingPane.floatingWidth = width;
@@ -653,6 +659,7 @@ class IgcDockManagerService {
     }
   }
   dockToEdge(targetPane, position) {
+    var _a, _b;
     const targetParent = this.getParent(targetPane);
     if (!targetParent) {
       return this.dockToCenter(targetPane, this.dockManager.draggedPane);
@@ -682,6 +689,15 @@ class IgcDockManagerService {
       };
     }
     const paneToDock = draggedPane ? this.getPaneToDock(draggedPane) : this.dockManager.activePane;
+    // reset dragged pane size in pixels
+    if (((_a = this.draggedPaneParent) === null || _a === void 0 ? void 0 : _a.useFixedSize) === true && targetParent.useFixedSize !== true) {
+      paneToDock.size = IGC_DEFAULT_PANE_SIZE_IN_PIXELS;
+    }
+    else if (targetParent.useFixedSize === true && ((_b = this.draggedPaneParent) === null || _b === void 0 ? void 0 : _b.orientation) !== targetParent.orientation) {
+      const floatingPane = draggedPane;
+      const floatingPaneSizeInPixels = targetParent.orientation === locale.IgcSplitPaneOrientation.horizontal ? floatingPane === null || floatingPane === void 0 ? void 0 : floatingPane.floatingWidth : floatingPane === null || floatingPane === void 0 ? void 0 : floatingPane.floatingHeight;
+      paneToDock.size = floatingPaneSizeInPixels;
+    }
     let newSplitPane;
     var isDockingBefore = Utils.isDockingIndicatorBefore(position) && !isRTL || Utils.isDockingIndicatorBeforeRTL(position) && isRTL;
     const insertIndex = isDockingBefore ?
@@ -702,23 +718,42 @@ class IgcDockManagerService {
           panes: isDockingBefore ?
             [paneToDock, targetPane] :
             [targetPane, paneToDock],
-          size: targetPane.size
+          size: targetPane.size >= 0 ? targetPane.size : targetParent.size
         };
         targetParent.panes[paneIndex] = newSplitPane;
       }
-      targetPane.size = undefined;
-      paneToDock.size = undefined;
+      if (!this.shouldUseFixedSize(targetPane)) {
+        targetPane.size = undefined;
+        paneToDock.size = undefined;
+      }
+      // simplifying nested split panes
+      const parentSplitPane = this.getParent(targetParent);
+      if (parentSplitPane &&
+        parentSplitPane.type === locale.IgcDockManagerPaneType.splitPane &&
+        parentSplitPane.panes.length === 1 &&
+        parentSplitPane.allowEmpty === targetParent.allowEmpty &&
+        parentSplitPane.size === targetParent.size &&
+        parentSplitPane.useFixedSize === targetParent.useFixedSize) {
+        parentSplitPane.orientation = targetParent.orientation;
+        parentSplitPane.panes = targetParent.panes;
+      }
     }
-    // simplifying nested split panes
-    const parentSplitPane = this.getParent(targetParent);
-    if (parentSplitPane &&
-      parentSplitPane.type === locale.IgcDockManagerPaneType.splitPane &&
-      parentSplitPane.panes.length === 1 &&
-      parentSplitPane.allowEmpty === targetParent.allowEmpty &&
-      parentSplitPane.size === targetParent.size) {
-      parentSplitPane.orientation = targetParent.orientation;
-      parentSplitPane.panes = targetParent.panes;
+  }
+  shouldUseFixedSize(pane) {
+    if (pane.type === locale.IgcDockManagerPaneType.splitPane) {
+      if (pane.useFixedSize) {
+        return true;
+      }
+      for (let i = 0; i < pane.panes.length; i++) {
+        if (this.shouldUseFixedSize(pane.panes[i])) {
+          return true;
+        }
+      }
     }
+    else if (pane.type === locale.IgcDockManagerPaneType.documentHost) {
+      this.shouldUseFixedSize(pane.rootPane);
+    }
+    return false;
   }
   updateLayout() {
     this.dockManager.layout = Object.assign({}, this.dockManager.layout);
@@ -788,7 +823,7 @@ class IgcDockManagerService {
   resizeFlyoutPane(delta) {
     const pane = this.dockManager.flyoutPane;
     const location = this.unpinnedLocationMap.get(pane);
-    const paneSize = pane.unpinnedSize ? pane.unpinnedSize : IGC_DEFAULT_UNPIN_PANE_SIZE;
+    const paneSize = pane.unpinnedSize >= 0 ? pane.unpinnedSize : IGC_DEFAULT_UNPIN_PANE_SIZE;
     const newSize = location === locale.IgcUnpinnedLocation.left || location === locale.IgcUnpinnedLocation.top ?
       paneSize + delta :
       paneSize - delta;
@@ -803,7 +838,9 @@ class IgcDockManagerService {
     const sizeSum = paneSizes.reduce((p, c) => c + p, 0);
     const calcDelta = deltaPercentage * sizeSum;
     childPanes[paneIndex - 1].size = paneSizes[paneIndex - 1] + calcDelta;
-    childPanes[paneIndex].size = paneSizes[paneIndex] - calcDelta;
+    if (!parentPane.useFixedSize) {
+      childPanes[paneIndex].size = paneSizes[paneIndex] - calcDelta;
+    }
     this.updateLayout();
   }
   togglePin(pane, unpinBehavior = locale.IgcPaneActionBehavior.allPanes) {
@@ -847,16 +884,38 @@ class IgcDockManagerService {
       this.updateLayout();
     }
   }
+  checkUseFixedSizeParent(pane) {
+    const parent = this.getParent(pane);
+    if (!parent) {
+      return null;
+    }
+    // If the pane to close is the last non-placeholder pane of a split pane, close the whole split pane.
+    // Also check if the pane to close is inside a split pane and close the top split pane that holds the placeholder.
+    if (parent.type === locale.IgcDockManagerPaneType.splitPane && parent.panes.length === 2) {
+      const isPlaceholderPresent = parent.panes.some(p => p.type === locale.IgcDockManagerPaneType.contentPane && p.contentId === "placeholder");
+      const isValidContentPane = parent.panes.every(p => p.type === locale.IgcDockManagerPaneType.contentPane ||
+        p.type === locale.IgcDockManagerPaneType.tabGroupPane ||
+        (p.type === locale.IgcDockManagerPaneType.splitPane && p.panes.length === 1 && p.panes[0].type === locale.IgcDockManagerPaneType.contentPane));
+      if (isPlaceholderPresent && isValidContentPane) {
+        return parent;
+      }
+    }
+    return this.checkUseFixedSizeParent(parent);
+  }
   closePane(pane) {
     let paneToRemove = pane;
     let closeAll = this.dockManager.closeBehavior !== locale.IgcPaneActionBehavior.selectedPane;
     if (pane.type === locale.IgcDockManagerPaneType.contentPane && pane !== this.dockManager.flyoutPane) {
-      const parent = this.paneParentMap.get(pane);
-      if (parent.type === locale.IgcDockManagerPaneType.tabGroupPane && closeAll) {
+      const parent = this.getParent(pane);
+      const ignoreResizeConstraintPaneTargetParent = this.checkUseFixedSizeParent(pane);
+      if (ignoreResizeConstraintPaneTargetParent !== null) {
+        paneToRemove = ignoreResizeConstraintPaneTargetParent;
+      }
+      else if (parent.type === locale.IgcDockManagerPaneType.tabGroupPane && closeAll) {
         paneToRemove = parent;
       }
     }
-    const paneRemoved = paneToRemove.type === locale.IgcDockManagerPaneType.tabGroupPane ?
+    const paneRemoved = paneToRemove.type === locale.IgcDockManagerPaneType.tabGroupPane || paneToRemove.type === locale.IgcDockManagerPaneType.splitPane ?
       this.removeAllowedPanes(pane, paneToRemove) :
       this.emitPaneClose(pane, [paneToRemove]);
     if ((paneRemoved || pane.hidden) && pane === this.dockManager.flyoutPane) {
@@ -1042,6 +1101,9 @@ class IgcDockManagerService {
     let panesToRemove = [pane];
     let paneToAdd = pane;
     const parent = this.paneParentMap.get(pane);
+    if (parent.type === locale.IgcDockManagerPaneType.splitPane && parent.useFixedSize === true) {
+      this.draggedPaneParent = parent;
+    }
     if (pane !== this.dockManager.flyoutPane && parent.type === locale.IgcDockManagerPaneType.tabGroupPane) {
       if (parent.allowEmpty) {
         const panes = [...parent.panes];
@@ -1116,11 +1178,11 @@ class IgcDockManagerService {
       position === locale.IgcDockingIndicatorPosition.right && isRTL ||
       position === locale.IgcDockingIndicatorPosition.top;
     const insertIndex = isDockingBefore ? 0 : rootPane.panes.length;
-    if ((isIndicatorVertical && isSplitPaneVertical) || (!isIndicatorVertical && !isSplitPaneVertical)) {
+    if (rootPane.useFixedSize !== true && ((isIndicatorVertical && isSplitPaneVertical) || (!isIndicatorVertical && !isSplitPaneVertical))) {
       rootPane.panes.splice(insertIndex, 0, paneToDock);
     }
     else {
-      if (rootPane.panes.length === 1 && rootPane.panes[0].type === locale.IgcDockManagerPaneType.splitPane) {
+      if (rootPane.useFixedSize !== true && rootPane.panes.length === 1 && rootPane.panes[0].type === locale.IgcDockManagerPaneType.splitPane) {
         rootPane.orientation =
           rootPane.orientation === locale.IgcSplitPaneOrientation.horizontal ?
             locale.IgcSplitPaneOrientation.vertical :
@@ -1130,7 +1192,9 @@ class IgcDockManagerService {
       else {
         const newRootPane = {
           type: locale.IgcDockManagerPaneType.splitPane,
-          orientation: isSplitPaneVertical ? locale.IgcSplitPaneOrientation.horizontal : locale.IgcSplitPaneOrientation.vertical,
+          orientation: rootPane.useFixedSize !== true ?
+            (isSplitPaneVertical ? locale.IgcSplitPaneOrientation.horizontal : locale.IgcSplitPaneOrientation.vertical) :
+            isIndicatorVertical ? locale.IgcSplitPaneOrientation.vertical : locale.IgcSplitPaneOrientation.horizontal,
           panes: isDockingBefore ?
             [paneToDock, rootPane] :
             [rootPane, paneToDock],
@@ -1227,9 +1291,10 @@ class IgcDockManagerService {
     }
     return items;
   }
-  dragPaneStart(pane, rect, clientX, clientY) {
+  dragPaneStart(pane, rect, clientX, clientY, anyPaneIgnoringResizeConstraints = false) {
     var _a;
-    if (this.dockManager.maximizedPane) {
+    if (this.dockManager.maximizedPane ||
+      (anyPaneIgnoringResizeConstraints && !this.isFloatingPane(this.getRootParent(pane)))) {
       return false;
     }
     let panes;
@@ -1379,8 +1444,12 @@ class IgcDockManagerService {
       this.dockPane(this.proximityDockPosition);
       docked = true;
     }
+    if (!docked && this.draggedPaneParent && this.dockManager.draggedPane.type === locale.IgcDockManagerPaneType.splitPane && this.dockManager.draggedPane.panes.length === 1) {
+      this.dockManager.draggedPane.panes[0].size = IGC_DEFAULT_PANE_SIZE_IN_PIXELS;
+    }
     this.draggedPanes = null;
     this.draggedTab = null;
+    this.draggedPaneParent = null;
     this.dockManager.draggedPane = null;
     this.dockManager.dropTargetPaneInfo = null;
     this.dockManager.dropShadowRect = null;
@@ -1459,7 +1528,10 @@ class IgcDockManagerService {
     this.draggedPanes = [pane];
     return true;
   }
-  dragTabMove(pane, args, rects) {
+  dragTabMove(pane, args, rects, anyPaneIgnoringResizeConstraints = false) {
+    if (anyPaneIgnoringResizeConstraints && !this.isFloatingPane(this.getRootParent(pane))) {
+      return false;
+    }
     const clientX = args.clientX;
     const clientY = args.clientY;
     const offsetX = args.offsetX;
@@ -1609,11 +1681,11 @@ class IgcDockManagerService {
     }
   }
   getDropShadowRect(dockingPosition, dockingDirection) {
-    var _a;
+    var _a, _b;
     const shadowRect = new DOMRect();
     dockingPosition = dockingPosition !== null && dockingPosition !== void 0 ? dockingPosition : this.dockingIndicator.position;
     dockingDirection = dockingDirection !== null && dockingDirection !== void 0 ? dockingDirection : this.dockingIndicator.direction;
-    const parentRect = this.dropTargetParentRect;
+    let parentRect = this.dropTargetParentRect;
     const dropTargetPaneInfo = this.dockManager.dropTargetPaneInfo;
     if (dropTargetPaneInfo && !parentRect) {
       const targetRect = dropTargetPaneInfo.targetRect;
@@ -1626,7 +1698,6 @@ class IgcDockManagerService {
     else if (!dropTargetPaneInfo || !parentRect) {
       return;
     }
-    const draggedPaneSize = (_a = this.getPaneToDock(this.dockManager.draggedPane).size) !== null && _a !== void 0 ? _a : IGC_DEFAULT_PANE_SIZE;
     const isOuter = Utils.isDockingIndicatorOuter(dockingPosition);
     const baseRect = isOuter ? parentRect : dropTargetPaneInfo.targetRect;
     if (dockingPosition === locale.IgcDockingIndicatorPosition.center) {
@@ -1640,6 +1711,17 @@ class IgcDockManagerService {
     const targetParent = this.getParent(targetPane);
     const panes = this.getSplitPaneVisibleChildren(targetParent);
     const draggedPaneIndex = panes.indexOf(this.dockManager.draggedPane);
+    // reset dragged pane size for preview
+    let draggedPaneSize = this.getPaneToDock(this.dockManager.draggedPane).size;
+    if (((_a = this.draggedPaneParent) === null || _a === void 0 ? void 0 : _a.useFixedSize) === true && targetParent.useFixedSize !== true) {
+      draggedPaneSize = IGC_DEFAULT_PANE_SIZE_IN_PIXELS;
+    }
+    if (targetParent.useFixedSize === true && ((_b = this.draggedPaneParent) === null || _b === void 0 ? void 0 : _b.orientation) !== targetParent.orientation) {
+      const floatingPane = this.dockManager.draggedPane;
+      const floatingPaneSizeInPixels = targetParent.orientation === locale.IgcSplitPaneOrientation.horizontal ? floatingPane === null || floatingPane === void 0 ? void 0 : floatingPane.floatingWidth : floatingPane === null || floatingPane === void 0 ? void 0 : floatingPane.floatingHeight;
+      draggedPaneSize = floatingPaneSizeInPixels;
+    }
+    draggedPaneSize = draggedPaneSize >= 0 ? draggedPaneSize : IGC_DEFAULT_PANE_SIZE;
     if (draggedPaneIndex > -1) {
       panes.splice(draggedPaneIndex, 1);
     }
@@ -1648,13 +1730,24 @@ class IgcDockManagerService {
     const isSplitPaneVertical = Utils.isSplitPaneVertical(targetParent);
     const isSameSplitPane = ((isIndicatorVertical && isSplitPaneVertical) || (!isIndicatorVertical && !isSplitPaneVertical));
     const isRTL = dockingDirection === 'rtl';
-    const panesTotalSize = panes.reduce((a, b) => a + (b.size || IGC_DEFAULT_PANE_SIZE), 0);
+    // take splitter size into account only when split pane has useFixedSize=true
+    const splitterSize = targetParent.useFixedSize ? 4 : 0;
+    const panesTotalSize = panes.reduce((a, b) => a + (b.size >= 0 ? b.size : IGC_DEFAULT_PANE_SIZE), 0) + (panes.length - 1) * splitterSize;
     const beforePanesTotalSize = !isRTL || isIndicatorVertical
-      ? panes.slice(0, dropTargetIndex).reduce((a, b) => a + (b.size || IGC_DEFAULT_PANE_SIZE), 0)
-      : panes.slice(dropTargetIndex, panes.length).reduce((a, b) => a + (b.size || IGC_DEFAULT_PANE_SIZE), 0);
+      ? panes.slice(0, dropTargetIndex).reduce((a, b) => a + (b.size >= 0 ? b.size : IGC_DEFAULT_PANE_SIZE), 0) + dropTargetIndex * splitterSize
+      : panes.slice(dropTargetIndex, panes.length).reduce((a, b) => a + (b.size >= 0 ? b.size : IGC_DEFAULT_PANE_SIZE), 0) + dropTargetIndex * splitterSize;
     const afterPanesTotalSize = !isRTL || isIndicatorVertical
-      ? panes.slice(0, dropTargetIndex + 1).reduce((a, b) => a + (b.size || IGC_DEFAULT_PANE_SIZE), 0)
-      : panes.slice(dropTargetIndex + 1, panes.length).reduce((a, b) => a + (b.size || IGC_DEFAULT_PANE_SIZE), 0);
+      ? panes.slice(0, dropTargetIndex + 1).reduce((a, b) => a + (b.size >= 0 ? b.size : IGC_DEFAULT_PANE_SIZE), 0) + (dropTargetIndex + 1) * splitterSize
+      : panes.slice(dropTargetIndex + 1, panes.length).reduce((a, b) => a + (b.size >= 0 ? b.size : IGC_DEFAULT_PANE_SIZE), 0) + (dropTargetIndex + 1) * splitterSize;
+    // update parent rect for preview when useFixedSize=true
+    if (targetParent.useFixedSize) {
+      const rectWithPlaceholder = parentRect;
+      parentRect = new DOMRect();
+      parentRect.x = rectWithPlaceholder.x;
+      parentRect.y = rectWithPlaceholder.y;
+      parentRect.width = isSplitPaneVertical ? rectWithPlaceholder.width : panesTotalSize + draggedPaneSize;
+      parentRect.height = isSplitPaneVertical ? panesTotalSize + draggedPaneSize : rectWithPlaceholder.height;
+    }
     switch (dockingPosition) {
       case locale.IgcDockingIndicatorPosition.left:
       case locale.IgcDockingIndicatorPosition.outerLeft:
@@ -1716,19 +1809,19 @@ class IgcDockManagerService {
     return shadowRect;
   }
   getDropShadowRectRoot() {
-    var _a;
     const rootRect = this.dropTargetParentRect;
     const shadowRect = new DOMRect();
-    const draggedPaneSize = (_a = this.getPaneToDock(this.dockManager.draggedPane).size) !== null && _a !== void 0 ? _a : IGC_DEFAULT_PANE_SIZE;
+    let draggedPaneSize = this.getPaneToDock(this.dockManager.draggedPane).size;
+    draggedPaneSize = draggedPaneSize >= 0 ? draggedPaneSize : IGC_DEFAULT_PANE_SIZE;
     const panes = this.getSplitPaneVisibleChildren(this.dockManager.layout.rootPane);
     const draggedPaneIndex = panes.indexOf(this.dockManager.draggedPane);
     if (draggedPaneIndex > -1) {
       panes.splice(draggedPaneIndex, 1);
     }
-    const panesTotalSize = panes.reduce((a, b) => a + (b.size || IGC_DEFAULT_PANE_SIZE), 0);
+    const panesTotalSize = panes.reduce((a, b) => a + (b.size >= 0 ? b.size : IGC_DEFAULT_PANE_SIZE), 0);
     const isIndicatorVertical = Utils.isDockingIndicatorVertical(this.dockingIndicator.position);
     const isSplitPaneVertical = Utils.isSplitPaneVertical(this.dockManager.layout.rootPane);
-    const isSameSplitPane = (isIndicatorVertical && isSplitPaneVertical) || (!isIndicatorVertical && !isSplitPaneVertical);
+    const isSameSplitPane = this.dockManager.layout.rootPane.useFixedSize !== true && ((isIndicatorVertical && isSplitPaneVertical) || (!isIndicatorVertical && !isSplitPaneVertical));
     const isEmptyDockManager = panes.length === 0;
     switch (this.dockingIndicator.position) {
       case locale.IgcDockingIndicatorPosition.left:
@@ -1811,6 +1904,36 @@ class IgcDockManagerService {
     this.normalizeMaximizedPane(nextPane);
     this.dockManager.activePane = nextPane;
   }
+  isSplitPaneIgnoringResizeConstraints(pane) {
+    return pane && pane.type === locale.IgcDockManagerPaneType.splitPane && pane.useFixedSize;
+  }
+  isParentUseFixedSize(pane) {
+    const parent = this.getParent(pane);
+    return this.isSplitPaneIgnoringResizeConstraints(parent);
+  }
+  checkAndAddPlaceholderPane(pane) {
+    //Add placeholder pane in every splitPane that ignores resize constraints
+    if (this.isSplitPaneIgnoringResizeConstraints(pane)) {
+      // this.anyPaneIgnoringResizeConstraints = true;
+      const placeholderPane = {
+        type: locale.IgcDockManagerPaneType.contentPane,
+        contentId: "placeholder",
+        header: 'Placeholder',
+        allowDocking: false,
+        allowFloating: false,
+        allowMaximize: false,
+        allowPinning: false,
+        size: 0
+      };
+      pane.panes.push(placeholderPane);
+    }
+    if (pane.type !== locale.IgcDockManagerPaneType.contentPane && pane.type !== locale.IgcDockManagerPaneType.documentHost && pane.panes) {
+      pane.panes.forEach(p => this.checkAndAddPlaceholderPane(p));
+    }
+    else if (pane.type === locale.IgcDockManagerPaneType.documentHost) {
+      this.checkAndAddPlaceholderPane(pane.rootPane);
+    }
+  }
 }
 
 /**
@@ -1966,7 +2089,7 @@ class IgcDockManagerKeyboardService {
   }
 }
 
-const dockmanagerComponentCss = ":host{position:relative;z-index:0;display:flex;overflow:hidden;box-sizing:border-box;height:100%;background:var(--igc-dock-background, var(--igc-background-color, #E5E7E9));color:var(--igc-dock-text, var(--igc-text-color, rgba(0, 0, 0, 0.72)));font-family:var(--igc-font-family, \"Titillium Web\", \"Roboto\", \"Helvetica Neue\", sans-serif);outline-style:none;--unpinned-tab-area-size:30px}:host igc-icon-component svg{width:17px;height:17px}.pane-container--vertical,.pane-container--horizontal,.pane-container{display:flex;flex-grow:1;height:100%;width:100%;overflow:hidden}.pane-container--vertical{flex-direction:column}.unpinned-tab-area{display:flex;flex-direction:column;width:var(--unpinned-tab-area-size);height:auto}.unpinned-tab-area--left{padding:8px 8px 8px 0}.unpinned-tab-area--right{padding:8px 0 8px 8px}.unpinned-tab-area--bottom{padding-top:8px}.unpinned-tab-area--horizontal{flex-direction:row;width:auto;height:var(--unpinned-tab-area-size)}.unpinned-tab-area--hidden{display:none}.flyout-pane{display:flex;flex-direction:column;position:absolute;width:100%;height:100%;pointer-events:none;z-index:2}.flyout-pane igc-content-pane-component{box-shadow:0 12px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08))}.flyout-pane--right{flex-direction:row-reverse}.flyout-pane--right igc-content-pane-component{box-shadow:-12px 0px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08))}.flyout-pane--bottom{flex-direction:column-reverse}.flyout-pane--bottom igc-content-pane-component{box-shadow:0 -12px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08))}.flyout-pane--left{flex-direction:row}.flyout-pane--left igc-content-pane-component{box-shadow:12px 0px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08))}.floating-panes{position:fixed;top:0;left:0;bottom:0;right:0;pointer-events:none;z-index:10000}.docking-indicators-container{position:absolute;display:flex;flex-direction:column;width:100%;height:100%;pointer-events:none;z-index:10004}.content{overflow:auto;height:100%;flex-grow:1;color:var(--igc-pane-content-text, var(--igc-text-color, rgba(0, 0, 0, 0.72)));background:var(--igc-pane-content-background, var(--igc-border-color, #F3F5F7));position:relative}.maximized{position:absolute;top:0;bottom:0;left:0;right:0;z-index:10002}.drop-shadow{background-color:var(--igc-drop-shadow-background, rgba(100, 149, 237, 0.2));position:fixed;z-index:10003;display:block;pointer-events:none}.hidden{height:0;opacity:0;padding:0;pointer-events:none;min-height:0 !important;transition:opacity 0.5s ease;position:absolute}.transitioned{overflow:hidden;transition:opacity 0.5s ease;position:absolute;z-index:999;width:100%}::-webkit-scrollbar{height:var(--igc-sb-size, 12px);width:var(--igc-sb-size, 12px)}::-webkit-scrollbar-track{background:var(--igc-sb-track-bg-color, #e5e7e9)}::-webkit-scrollbar-track:hover,::-webkit-scrollbar-track:active{background:var(--igc-sb-track-bg-color-hover, #e5e7e9)}::-webkit-scrollbar-corner{background:var(--igc-sb-corner-bg, #e5e7e9);border:var(--igc-sb-corner-border-size, 0) solid var(--igc-sb-corner-border-color, transparent)}::-webkit-scrollbar-track-piece{border:var(--igc-sb-track-border-size, 0) solid var(--igc-sb-track-border-color, transparent)}::-webkit-scrollbar-button:vertical:start:decrement,::-webkit-scrollbar-button:vertical:end:increment,::-webkit-scrollbar-button:horizontal:start:decrement,::-webkit-scrollbar-button:horizontal:end:increment{display:none}::-webkit-scrollbar-thumb{min-height:var(--igc-sb-thumb-min-height, 32px);border-radius:var(--igc-sb-thumb-border-radius, 0);border:var(--igc-sb-thumb-border-size, 0) solid var(--igc-sb-thumb-border-color, transparent);background-clip:content-box;background-color:var(--igc-sb-thumb-bg-color, #d1d1d1)}::-webkit-scrollbar-thumb:hover{background-color:var(--igc-sb-thumb-bg-color-hover, #afafaf)}";
+const dockmanagerComponentCss = ":host{position:relative;z-index:0;display:flex;overflow:hidden;box-sizing:border-box;height:100%;background:var(--igc-dock-background, var(--igc-background-color, #E5E7E9));color:var(--igc-dock-text, var(--igc-text-color, rgba(0, 0, 0, 0.72)));font-family:var(--igc-font-family, \"Titillium Web\", \"Roboto\", \"Helvetica Neue\", sans-serif);outline-style:none;--unpinned-tab-area-size:30px}:host igc-icon-component svg{width:17px;height:17px}.pane-container--vertical,.pane-container--horizontal,.pane-container{display:flex;flex-grow:1;max-height:100vh;max-width:100vw;height:100%;width:100%}.pane-container--horizontal{overflow-x:auto}.pane-container--vertical{flex-direction:column;overflow-y:auto}.unpinned-tab-area{display:flex;flex-direction:column;width:var(--unpinned-tab-area-size);height:auto}.unpinned-tab-area--left{padding:8px 8px 8px 0}.unpinned-tab-area--right{padding:8px 0 8px 8px}.unpinned-tab-area--bottom{padding-top:8px}.unpinned-tab-area--horizontal{flex-direction:row;width:auto;height:var(--unpinned-tab-area-size)}.unpinned-tab-area--hidden{display:none}.flyout-pane{display:flex;flex-direction:column;position:absolute;width:100%;height:100%;pointer-events:none;z-index:2}.flyout-pane igc-content-pane-component{box-shadow:0 12px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08))}.flyout-pane--right{flex-direction:row-reverse}.flyout-pane--right igc-content-pane-component{box-shadow:-12px 0px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08))}.flyout-pane--bottom{flex-direction:column-reverse}.flyout-pane--bottom igc-content-pane-component{box-shadow:0 -12px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08))}.flyout-pane--left{flex-direction:row}.flyout-pane--left igc-content-pane-component{box-shadow:12px 0px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08))}.floating-panes{position:fixed;top:0;left:0;bottom:0;right:0;pointer-events:none;z-index:10000}.docking-indicators-container{position:absolute;display:flex;flex-direction:column;width:100%;height:100%;pointer-events:none;z-index:10004}.content{overflow:auto;height:100%;flex-grow:1;color:var(--igc-pane-content-text, var(--igc-text-color, rgba(0, 0, 0, 0.72)));background:var(--igc-pane-content-background, var(--igc-border-color, #F3F5F7));position:relative}.maximized{position:absolute;top:0;bottom:0;left:0;right:0;z-index:10002}.drop-shadow{background-color:var(--igc-drop-shadow-background, rgba(100, 149, 237, 0.2));position:fixed;z-index:10003;display:block;pointer-events:none}.hidden{height:0;opacity:0;padding:0;pointer-events:none;min-height:0 !important;transition:opacity 0.5s ease;position:absolute}.transitioned{overflow:hidden;transition:opacity 0.5s ease;position:absolute;z-index:999;width:100%}::-webkit-scrollbar{height:var(--igc-sb-size, 12px);width:var(--igc-sb-size, 12px)}::-webkit-scrollbar-track{background:var(--igc-sb-track-bg-color, #e5e7e9)}::-webkit-scrollbar-track:hover,::-webkit-scrollbar-track:active{background:var(--igc-sb-track-bg-color-hover, #e5e7e9)}::-webkit-scrollbar-corner{background:var(--igc-sb-corner-bg, #e5e7e9);border:var(--igc-sb-corner-border-size, 0) solid var(--igc-sb-corner-border-color, transparent)}::-webkit-scrollbar-track-piece{border:var(--igc-sb-track-border-size, 0) solid var(--igc-sb-track-border-color, transparent)}::-webkit-scrollbar-button:vertical:start:decrement,::-webkit-scrollbar-button:vertical:end:increment,::-webkit-scrollbar-button:horizontal:start:decrement,::-webkit-scrollbar-button:horizontal:end:increment{display:none}::-webkit-scrollbar-thumb{min-height:var(--igc-sb-thumb-min-height, 32px);border-radius:var(--igc-sb-thumb-border-radius, 0);border:var(--igc-sb-thumb-border-size, 0) solid var(--igc-sb-thumb-border-color, transparent);background-clip:content-box;background-color:var(--igc-sb-thumb-bg-color, #d1d1d1)}::-webkit-scrollbar-thumb:hover{background-color:var(--igc-sb-thumb-bg-color-hover, #afafaf)}";
 
 var ActionReason;
 (function (ActionReason) {
@@ -2009,6 +2132,7 @@ const IgcDockManager = class {
     this.resizeObserver = new ResizeObserver(this.restrictFloatingPaneSize.bind(this));
     this.proximityDockThreshold = 50;
     this.proximityOuterDockThreshold = 25;
+    this.anyPaneIgnoringResizeConstraints = false;
     this.templatableComponents = [
       {
         slot: 'paneHeaderCloseButton',
@@ -2202,7 +2326,7 @@ const IgcDockManager = class {
       const panes = this.draggedPane.type === locale.IgcDockManagerPaneType.contentPane ?
         [this.draggedPane] :
         this.service.getChildContentPanes(this.draggedPane);
-      this.showDockingIndicators = panes.every(p => p.allowDocking !== false);
+      this.showDockingIndicators = panes.every(p => p.allowDocking !== false) && !this.anyPaneIgnoringResizeConstraints;
       this.documentOnlyDrag = panes.some(p => p.documentOnly);
     }
     else {
@@ -2330,6 +2454,7 @@ const IgcDockManager = class {
     this.contextMenuMeta = null;
     this.navigationPaneMeta = null;
     if (this.layout) {
+      this.updateLayout();
       this.layoutChanged();
     }
     if (!this.resourceStrings) {
@@ -2373,6 +2498,17 @@ const IgcDockManager = class {
   focusElement() {
     this.element.focus();
   }
+  updateLayout() {
+    //Check for useFixedSize in the layout and create a placeholder pane for resizing.
+    this.service.checkAndAddPlaceholderPane(this.layout.rootPane);
+    for (const p of this.layout.floatingPanes) {
+      // Do not add a placeholder pane for floating pane's root splitPane
+      p.panes.forEach(cp => this.service.checkAndAddPlaceholderPane(cp));
+      // Should we add a resolved prop instead of setting useFixedSize to false?
+      // Used to prevent the root parent splitPane of having flex grow and shrink set to 0 which breaks floating pane resizing.
+      p.useFixedSize = false;
+    }
+  }
   handleTabsRendered(pane) {
     var _a;
     if (this.reason !== ActionReason.drop) {
@@ -2577,7 +2713,11 @@ const IgcDockManager = class {
       pane.unpinnedSize = minSize;
     }
     // If new pane size does not meet the size constraints, do not resize
-    let offset = this.isPaneSizeWithinConstraints(previousPane, event.detail, orientation, 'previous') ? this.splitterOffset * event.detail : 0;
+    let parent = this.service.getParent(pane);
+    let offset = this.service.isSplitPaneIgnoringResizeConstraints(parent) ||
+      this.isPaneSizeWithinConstraints(previousPane, event.detail, orientation, 'previous') ?
+      this.splitterOffset * event.detail :
+      0;
     this.service.resizeFlyoutPane(offset);
     let rect;
     rect = splitter.previousElementSibling.getBoundingClientRect();
@@ -2613,7 +2753,9 @@ const IgcDockManager = class {
     const sizeProperty = parentPane.orientation === locale.IgcSplitPaneOrientation.horizontal ? 'offsetWidth' : 'offsetHeight';
     const sizeSum = paneComponents.reduce((s, p) => p[sizeProperty] + s, 0);
     // If the new size is smaller or bigger that the size constraints, do not resize
-    const offset = this.isPaneSizeWithinConstraints(previousPane, event.detail, parentPane.orientation, 'previous') && this.isPaneSizeWithinConstraints(nextPane, event.detail, parentPane.orientation) ? event.detail : 0;
+    const offset = parentPane.useFixedSize ||
+      this.isPaneSizeWithinConstraints(previousPane, event.detail, parentPane.orientation, 'previous') &&
+        this.isPaneSizeWithinConstraints(nextPane, event.detail, parentPane.orientation) ? event.detail : 0;
     let offsetPercentage = this.splitterOffset * offset / sizeSum;
     let rtl = false;
     if (this.element.dir !== '') {
@@ -2701,7 +2843,7 @@ const IgcDockManager = class {
     }
     this.shouldClearActivePane = false;
     this.focusElement();
-    const dragStarted = this.service.dragPaneStart(pane, rect, event.detail.clientX, event.detail.clientY);
+    const dragStarted = this.service.dragPaneStart(pane, rect, event.detail.clientX, event.detail.clientY, this.anyPaneIgnoringResizeConstraints);
     this.isDragging = true;
     this.scheduleAfterRender(() => {
       this.shouldClearActivePane = true;
@@ -2741,6 +2883,22 @@ const IgcDockManager = class {
     if (event && !dragMoved) {
       event.detail.cancel = true;
     }
+    // After successfull pane drag, check if there is a splitPane with useFixedSize = true
+    // that is left with a single placeholder pane and remove it.
+    // This would happen only when the last non placeholder pane of a split pane gets dragged.
+    if (dragMoved) {
+      const elements = this.element.shadowRoot.elementsFromPoint(clientX, clientY);
+      const splitPanes = elements.filter(e => e.tagName.toLowerCase() === 'igc-split-pane-component');
+      for (const sp of splitPanes) {
+        const splitPane = this.panesElementMap.getByValue(sp);
+        if (splitPane.useFixedSize &&
+          splitPane.panes.length === 1 &&
+          splitPane.panes[0].type === locale.IgcDockManagerPaneType.contentPane &&
+          splitPane.panes[0].contentId === "placeholder") {
+          this.service.closePane(splitPane.panes[0]);
+        }
+      }
+    }
   }
   getInnerDropTargetParentRect() {
     if (this.dropTargetPaneInfo && this.service.proximityDockPosition) {
@@ -2909,7 +3067,7 @@ const IgcDockManager = class {
       tabsRect
     };
     this.handleDropPositionChange(event.detail.clientX, event.detail.clientY, event === null || event === void 0 ? void 0 : event.target);
-    const tabMoved = this.service.dragTabMove(pane, event.detail, tabRectsInfo);
+    const tabMoved = this.service.dragTabMove(pane, event.detail, tabRectsInfo, this.anyPaneIgnoringResizeConstraints);
     if (event && !tabMoved) {
       event.detail.cancel = true;
     }
@@ -2938,6 +3096,9 @@ const IgcDockManager = class {
   }
   handleDropPositionChange(clientX, clientY, target) {
     var _a;
+    if (this.highlightedJoystick) {
+      this.highlightedJoystick.style.boxShadow = '';
+    }
     const elements = clientX && clientY ?
       this.element.shadowRoot.elementsFromPoint(clientX, clientY) :
       null;
@@ -2974,13 +3135,17 @@ const IgcDockManager = class {
     let indicatorTarget = null;
     let dockingIndicatorElement = topElement.closest('igc-root-docking-indicator-component');
     if (dockingIndicatorElement) {
+      // root docking indicator
       this.service.dockingIndicator = {
         position: dockingIndicatorElement.position,
         isRoot: true,
-        direction: this.direction
+        direction: this.direction,
       };
+      this.highlightedJoystick = dockingIndicatorElement;
+      this.highlightedJoystick.style.boxShadow = 'inset 0 0 0 3px rgba(0,0,0,0.2), inset 0 0 0 25px rgba(100,149,237,0.2)';
     }
-    if (!dockingIndicatorElement) {
+    else {
+      // regular docking indicator
       const joystickIcon = topElement.closest('igc-joystick-icon-component');
       if (joystickIcon && !joystickIcon.empty) {
         dockingIndicatorElement = joystickIcon;
@@ -2991,6 +3156,8 @@ const IgcDockManager = class {
         };
         const joystickIndicator = joystickIcon.closest('igc-joystick-indicator-component');
         indicatorTarget = joystickIndicator.dropTargetPaneInfo;
+        this.highlightedJoystick = joystickIcon;
+        this.highlightedJoystick.style.boxShadow = 'inset 0 0 0 3px rgba(0,0,0,0.2), inset 0 0 0 25px rgba(100,149,237,0.2)';
       }
     }
     if (dockingIndicatorElement &&
@@ -3272,7 +3439,7 @@ const IgcDockManager = class {
     const maximized = this.maximizedPane === pane ||
       (parentPane.type === locale.IgcDockManagerPaneType.tabGroupPane && this.maximizedPane === parentPane) ||
       isFloating && isSingleFloatingContentPane && floatingPane === this.maximizedPane;
-    return (index.h("igc-content-pane-component", { key: pane.id, contentId: pane.contentId, size: pane.size, isFlyout: isFlyout, unpinnedSize: pane.unpinnedSize, disabled: pane.disabled, isSingleFloating: isSingleFloatingContentPane, onMouseMove: this.togglePaneHeaderVisibility.bind(this, pane), onMouseLeave: this.removeHoveredPane.bind(this), ref: el => {
+    return (index.h("igc-content-pane-component", { key: pane.id, contentId: pane.contentId, size: pane.size, isFlyout: isFlyout, unpinnedSize: pane.unpinnedSize, disabled: pane.disabled, isSingleFloating: isSingleFloatingContentPane, onMouseMove: this.togglePaneHeaderVisibility.bind(this, pane), onMouseLeave: this.removeHoveredPane.bind(this), parentUseFixedSize: this.service.isParentUseFixedSize(pane), ref: el => {
         if (el) {
           this.panesElementMap.set(pane, el);
           this.contentPanesElementMap.set(pane, el);
@@ -3287,10 +3454,10 @@ const IgcDockManager = class {
         pane.header), index.h("div", { class: "content", onMouseDown: this.handlePaneContentMouseDown.bind(this, pane), onScroll: this.handlePaneContentScroll.bind(this, pane) }, index.h("slot", { name: pane.contentId }))));
   }
   renderSplitter(parentPane, pane) {
-    return (index.h("igc-splitter-component", { splitPaneOrientation: parentPane.orientation, onResizeStart: this.handleSplitterResizeStart.bind(this, pane), onResizeEnd: this.handleSplitterResizeEnd.bind(this, parentPane, pane), onFocusin: this.clearActivePane.bind(this) }));
+    return (index.h("igc-splitter-component", { splitPaneOrientation: parentPane.orientation, onResizeStart: this.handleSplitterResizeStart.bind(this, pane), onResizeEnd: this.handleSplitterResizeEnd.bind(this, parentPane, pane), onFocusin: this.clearActivePane.bind(this), parentUseFixedSize: parentPane.useFixedSize }));
   }
   renderDocumentHost(docHost) {
-    return (index.h("igc-document-host-component", { key: docHost.id, size: docHost.size, ref: el => {
+    return (index.h("igc-document-host-component", { key: docHost.id, size: docHost.size, parentUseFixedSize: this.service.isParentUseFixedSize(docHost), ref: el => {
         if (el) {
           this.panesElementMap.set(docHost, el);
         }
@@ -3314,7 +3481,7 @@ const IgcDockManager = class {
     else {
       contentIds.push(pane.contentId);
     }
-    return (allowEmpty || tabs.length > 0) && (index.h("igc-tabs-component", { key: pane.id, contentIds: contentIds, size: pane.size, selectedIndex: selectedIndex, hasHeaders: !isSingleTab, maximized: this.maximizedPane === pane, allowMaximize: position === IgcTabHeadersPosition.top && allowMaximize, onMaximizeMinimizeFocus: this.clearActivePane.bind(this), onMaximize: this.handleMaximize.bind(this, pane), onSelectedIndexChanged: this.handleTabSelectedIndexChanged.bind(this, pane), onHiddenTabSelected: this.handleHiddenTabSelected.bind(this, pane), onSelectedTabOutOfView: this.handleSelectedTabOutOfView.bind(this, pane), onRendered: this.handleTabsRendered.bind(this, pane), tabHeadersPosition: position, resourceStrings: this.resourceStrings, ref: el => {
+    return (allowEmpty || tabs.length > 0) && (index.h("igc-tabs-component", { key: pane.id, contentIds: contentIds, size: pane.size, selectedIndex: selectedIndex, hasHeaders: !isSingleTab, parentUseFixedSize: this.service.isParentUseFixedSize(pane), maximized: this.maximizedPane === pane, allowMaximize: position === IgcTabHeadersPosition.top && allowMaximize, onMaximizeMinimizeFocus: this.clearActivePane.bind(this), onMaximize: this.handleMaximize.bind(this, pane), onSelectedIndexChanged: this.handleTabSelectedIndexChanged.bind(this, pane), onHiddenTabSelected: this.handleHiddenTabSelected.bind(this, pane), onSelectedTabOutOfView: this.handleSelectedTabOutOfView.bind(this, pane), onRendered: this.handleTabsRendered.bind(this, pane), tabHeadersPosition: position, resourceStrings: this.resourceStrings, ref: el => {
         if (el) {
           this.panesElementMap.set(pane, el);
         }
@@ -3357,7 +3524,7 @@ const IgcDockManager = class {
   }
   renderSplitPane(splitPane, isFloating, isInDocumentHost) {
     const panes = this.service.getSplitPaneVisibleChildren(splitPane);
-    return (splitPane.allowEmpty || panes.length > 0) && (index.h("igc-split-pane-component", { key: splitPane.id, orientation: splitPane.orientation, size: splitPane.size, onRendered: this.handleSplitPaneRendered.bind(this, panes), ref: el => {
+    return (splitPane.allowEmpty || panes.length > 0) && (index.h("igc-split-pane-component", { key: splitPane.id, orientation: splitPane.orientation, size: splitPane.size, useFixedSize: splitPane.useFixedSize, parentUseFixedSize: this.service.isParentUseFixedSize(splitPane), onRendered: this.handleSplitPaneRendered.bind(this, panes), ref: el => {
         if (el) {
           this.panesElementMap.set(splitPane, el);
         }
@@ -3367,9 +3534,11 @@ const IgcDockManager = class {
         paneComponent = this.renderSplitPane(p, isFloating, isInDocumentHost);
       }
       else if (p.type === locale.IgcDockManagerPaneType.contentPane) {
-        paneComponent = isInDocumentHost ?
-          this.renderTabGroup(p, isFloating, true) :
-          this.renderContentPane(p, isFloating, false);
+        paneComponent = p.contentId === "placeholder" ?
+          this.renderPlaceholder(p) :
+          isInDocumentHost ?
+            this.renderTabGroup(p, isFloating, true) :
+            this.renderContentPane(p, isFloating, false);
       }
       else if (p.type === locale.IgcDockManagerPaneType.documentHost) {
         paneComponent = this.renderDocumentHost(p);
@@ -3382,6 +3551,9 @@ const IgcDockManager = class {
         paneComponent;
     })));
   }
+  renderPlaceholder(pane) {
+    return (index.h("igc-content-pane-component", { key: pane.id, contentId: pane.contentId, size: pane.size }));
+  }
   renderUnpinnedTabArea(location) {
     const panes = [];
     const isHorizontal = location === locale.IgcUnpinnedLocation.top || location === locale.IgcUnpinnedLocation.bottom;
@@ -3453,6 +3625,10 @@ const IgcDockManager = class {
   renderDockingIndicators() {
     const startPosition = this.direction !== 'rtl' ? locale.IgcDockingIndicatorPosition.left : locale.IgcDockingIndicatorPosition.right;
     const endPosition = this.direction !== 'rtl' ? locale.IgcDockingIndicatorPosition.right : locale.IgcDockingIndicatorPosition.left;
+    // Only show the joystick indicator if the target drop location is an empty split pane 
+    const hideJoystickIndicator = this.dropTargetPaneInfo &&
+      this.dropTargetPaneInfo.pane.type == "splitPane" &&
+      this.service.getSplitPaneVisibleChildren(this.dropTargetPaneInfo.pane).length;
     return (index.h("div", { class: "docking-indicators-container", style: {
         display: this.showDockingIndicators ? 'flex' : 'none'
       } }, !this.documentOnlyDrag && !this.proximityDock && this.renderRootDockingIndicator(locale.IgcDockingIndicatorPosition.top), index.h("div", { style: {
@@ -3460,7 +3636,7 @@ const IgcDockManager = class {
         display: 'flex',
         flexDirection: 'row',
         justifyContent: 'space-between'
-      } }, !this.documentOnlyDrag && !this.proximityDock && this.renderRootDockingIndicator(startPosition), !this.documentOnlyDrag && !this.proximityDock && this.renderRootDockingIndicator(endPosition)), !this.documentOnlyDrag && !this.proximityDock && this.renderRootDockingIndicator(locale.IgcDockingIndicatorPosition.bottom), this.dropTargetPaneInfo && !this.proximityDock &&
+      } }, !this.documentOnlyDrag && !this.proximityDock && this.renderRootDockingIndicator(startPosition), !this.documentOnlyDrag && !this.proximityDock && this.renderRootDockingIndicator(endPosition)), !this.documentOnlyDrag && !this.proximityDock && this.renderRootDockingIndicator(locale.IgcDockingIndicatorPosition.bottom), this.dropTargetPaneInfo && !this.proximityDock && !hideJoystickIndicator &&
       index.h("igc-joystick-indicator-component", { dropTargetPaneInfo: this.dropTargetPaneInfo, documentOnlyDrag: this.documentOnlyDrag, allowCenterDock: this.allowInnerDock })));
   }
   renderContextMenu() {
@@ -3517,11 +3693,12 @@ const IgcDocumentHostComponent = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.size = undefined;
+    this.parentUseFixedSize = false;
   }
   render() {
     const size = this.size || this.size === 0 ? this.size : IGC_DEFAULT_PANE_SIZE;
     return (index.h(index.Host, { role: "group", style: {
-        flex: `${size} 1 ${size}px`
+        flex: this.parentUseFixedSize ? `0 0 ${size}px` : `${size} 1 ${size}px`
       } }));
   }
 };
@@ -4323,6 +4500,8 @@ const IgcSplitPaneComponent = class {
     this.rendered = index.createEvent(this, "rendered", 7);
     this.orientation = undefined;
     this.size = undefined;
+    this.useFixedSize = false;
+    this.parentUseFixedSize = false;
   }
   componentDidRender() {
     this.rendered.emit();
@@ -4331,7 +4510,7 @@ const IgcSplitPaneComponent = class {
     const size = this.size || this.size === 0 ? this.size : IGC_DEFAULT_PANE_SIZE;
     return (index.h(index.Host, { role: "group", style: {
         flexDirection: this.orientation === locale.IgcSplitPaneOrientation.horizontal ? 'row' : 'column',
-        flex: `${size} 1 ${size}px`
+        flex: this.parentUseFixedSize ? `0 0 ${size}px` : `${size} 1 ${size}px`
       }, part: "split-pane" }));
   }
 };
@@ -4383,6 +4562,7 @@ const IgcSplitterComponent = class {
     this.showDragGhost = undefined;
     this.splitPaneOrientation = undefined;
     this.flyoutLocation = undefined;
+    this.parentUseFixedSize = false;
   }
   connectedCallback() {
     this.dragService = new IgcDragService(this.element);
@@ -4508,14 +4688,16 @@ const IgcSplitterComponent = class {
       }
     }
     else {
-      const referencePaneSize = !rtl || isVertical ? this.paneSizes[1] : this.paneSizes[0];
-      if (referencePaneSize > IGC_RESIZING_MIN_SIZE) {
-        if (referencePaneSize - this.dragOffset < IGC_RESIZING_MIN_SIZE) {
-          this.dragOffset = referencePaneSize - IGC_RESIZING_MIN_SIZE;
+      if (!this.parentUseFixedSize) {
+        const referencePaneSize = !rtl || isVertical ? this.paneSizes[1] : this.paneSizes[0];
+        if (referencePaneSize > IGC_RESIZING_MIN_SIZE) {
+          if (referencePaneSize - this.dragOffset < IGC_RESIZING_MIN_SIZE) {
+            this.dragOffset = referencePaneSize - IGC_RESIZING_MIN_SIZE;
+          }
+        }
+        else {
+          this.dragOffset = 0;
         }
-      }
-      else {
-        this.dragOffset = 0;
       }
     }
   }
@@ -4797,6 +4979,7 @@ const IgcTabsComponent = class {
     this.showHiddenTabsMenu = true;
     this.resourceStrings = undefined;
     this.contentIds = [];
+    this.parentUseFixedSize = false;
   }
   selectedIndexPropertyChanged(newValue) {
     this.handleSelectedIndexChanged(newValue);
@@ -4996,7 +5179,7 @@ const IgcTabsComponent = class {
       bottom
     }, ',');
     return (index.h(index.Host, { role: "tablist", style: {
-        flex: `${size} 1 ${size}px`
+        flex: this.parentUseFixedSize ? `0 0 ${size}px` : `${size} 1 ${size}px`
       }, exportparts: exportParts, part: parts }, top && this.renderTabHeaders(top), index.h("div", { part: tabsContentParts, class: "content" }, index.h("slot", { onSlotchange: this.slotChanged.bind(this) })), bottom && this.renderTabHeaders(top), this.renderHiddenTabsMenu()));
   }
   get el() { return index.getElement(this); }
@@ -5035,7 +5218,7 @@ const IgcUnpinnedPaneHeaderComponent = class {
 };
 IgcUnpinnedPaneHeaderComponent.style = unpinnedPaneHeaderComponentCss;
 
-const sampleComponentCss = ".sc-sample-component-h{display:flex;flex-direction:column;height:100%}";
+const sampleComponentCss = ".sc-sample-component-h{display:flex;flex-direction:column;height:100%}igc-dockmanager.sc-sample-component{margin:10px;border:1px solid black}";
 
 /**
  * @hidden
@@ -5360,128 +5543,723 @@ const SampleComponent = class {
     };
     this.layout3 = {
       rootPane: {
-        id: "root",
         type: locale.IgcDockManagerPaneType.splitPane,
         orientation: locale.IgcSplitPaneOrientation.horizontal,
+        useFixedSize: true,
         panes: [
+          // {
+          //   type: IgcDockManagerPaneType.splitPane,
+          //   useFixedSize: true,
+          //   orientation: IgcSplitPaneOrientation.vertical,
+          //   size: 300, // PIXELS
+          //   panes: [
+          //     {
+          //       type: IgcDockManagerPaneType.contentPane,
+          //       contentId: 'content1',
+          //       header: 'Content Pane 1',
+          //       size: 500 // PIXELS
+          //     },
+          //     {
+          //       type: IgcDockManagerPaneType.contentPane,
+          //       contentId: 'content2',
+          //       header: 'Content Pane 2',
+          //       size: 300 // PIXELS
+          //     }
+          //   ]
+          // },
           {
             type: locale.IgcDockManagerPaneType.splitPane,
             orientation: locale.IgcSplitPaneOrientation.vertical,
+            size: 450,
+            panes: [
+              {
+                type: locale.IgcDockManagerPaneType.splitPane,
+                orientation: locale.IgcSplitPaneOrientation.horizontal,
+                useFixedSize: true,
+                size: 300,
+                panes: [
+                  {
+                    type: locale.IgcDockManagerPaneType.contentPane,
+                    contentId: 'content4',
+                    header: 'Content Pane 4',
+                    size: 400 // PIXELS
+                  }
+                ]
+              },
+              {
+                type: locale.IgcDockManagerPaneType.contentPane,
+                contentId: 'content7',
+                header: 'Content Pane 7',
+                size: 450 // PIXELS
+              }
+            ]
+          }
+        ]
+      },
+      floatingPanes: [
+      // {
+      //   type: IgcDockManagerPaneType.splitPane,
+      //   orientation: IgcSplitPaneOrientation.vertical,
+      //   useFixedSize: true,
+      //   // size: 950, // PIXELS
+      //   floatingHeight: 950,
+      //   floatingWidth: 650,
+      //   floatingLocation: { x: 200, y: 50 },
+      //   panes: [
+      //     {
+      //       type: IgcDockManagerPaneType.splitPane,
+      //       orientation: IgcSplitPaneOrientation.horizontal,
+      //       useFixedSize: true,
+      //       size: 400, // PIXELS
+      //       panes: [
+      //         {
+      //           type: IgcDockManagerPaneType.contentPane,
+      //           contentId: 'content12',
+      //           header: 'Content Pane 12',
+      //           size: 400 // PIXELS
+      //         },
+      //         {
+      //           type: IgcDockManagerPaneType.contentPane,
+      //           contentId: 'content13',
+      //           header: 'Content Pane 13',
+      //           size: 200 // PIXELS
+      //         }
+      //       ]
+      //     },
+      //     {
+      //       type: IgcDockManagerPaneType.splitPane,
+      //       orientation: IgcSplitPaneOrientation.vertical,
+      //       useFixedSize: true,
+      //       size: 500, // PIXELS
+      //       panes: [
+      //         {
+      //           type: IgcDockManagerPaneType.contentPane,
+      //           contentId: 'content11',
+      //           header: 'Content Pane 11',
+      //           size: 300 // PIXELS
+      //         },
+      //       ]
+      //     }
+      //   ]
+      // }
+      ]
+    };
+    this.commonProps = {
+      allowClose: false,
+      allowMaximize: false,
+      allowPinning: false,
+    };
+    this.bodyRect = document.body.getBoundingClientRect();
+    this.bodyWidth = this.bodyRect.width - 36;
+    this.bodyHeight = this.bodyRect.height - 36;
+    this.layout4 = {
+      rootPane: {
+        type: locale.IgcDockManagerPaneType.splitPane,
+        orientation: locale.IgcSplitPaneOrientation.vertical,
+        useFixedSize: true,
+        panes: [
+          {
+            type: locale.IgcDockManagerPaneType.splitPane,
+            orientation: locale.IgcSplitPaneOrientation.vertical,
+            useFixedSize: true,
+            size: this.bodyHeight / 2,
+            panes: [
+              {
+                type: locale.IgcDockManagerPaneType.contentPane,
+                contentId: 'content1',
+                header: 'Content 1 Header',
+                size: 260, // PIXELS
+              },
+              {
+                type: locale.IgcDockManagerPaneType.splitPane,
+                orientation: locale.IgcSplitPaneOrientation.horizontal,
+                size: 240 + 10,
+                useFixedSize: true,
+                panes: [
+                  {
+                    type: locale.IgcDockManagerPaneType.splitPane,
+                    orientation: locale.IgcSplitPaneOrientation.vertical,
+                    size: this.bodyWidth / 3,
+                    panes: [
+                      {
+                        type: locale.IgcDockManagerPaneType.contentPane,
+                        contentId: 'content2',
+                        header: 'Content 2 Header',
+                        size: 240, // PIXELS
+                      },
+                    ],
+                  },
+                  {
+                    type: locale.IgcDockManagerPaneType.splitPane,
+                    orientation: locale.IgcSplitPaneOrientation.vertical,
+                    useFixedSize: true,
+                    size: (this.bodyWidth * 2) / 3,
+                    panes: [
+                      {
+                        type: locale.IgcDockManagerPaneType.contentPane,
+                        contentId: 'content3',
+                        header: 'Content 3 Header',
+                        size: 240, // PIXELS
+                      },
+                    ],
+                  },
+                  // {
+                  //   type: IgcDockManagerPaneType.contentPane,
+                  //   contentId: 'content_not_used_2',
+                  //   header: 'NOT USED',
+                  //   // size: 0,
+                  //   ...this.commonProps,
+                  // },
+                ],
+              },
+              {
+                type: locale.IgcDockManagerPaneType.contentPane,
+                contentId: 'content4',
+                header: 'Content 4 Header',
+                size: 290, // PIXELS
+              },
+              {
+                type: locale.IgcDockManagerPaneType.splitPane,
+                orientation: locale.IgcSplitPaneOrientation.horizontal,
+                size: 240 + 10,
+                panes: [
+                  {
+                    type: locale.IgcDockManagerPaneType.splitPane,
+                    orientation: locale.IgcSplitPaneOrientation.vertical,
+                    size: this.bodyWidth / 3,
+                    panes: [
+                      {
+                        type: locale.IgcDockManagerPaneType.contentPane,
+                        contentId: 'content5',
+                        header: 'Content 5 Header',
+                        size: 240, // PIXELS
+                      },
+                    ],
+                  },
+                  {
+                    type: locale.IgcDockManagerPaneType.splitPane,
+                    orientation: locale.IgcSplitPaneOrientation.vertical,
+                    size: (this.bodyWidth * 2) / 3,
+                    panes: [
+                      {
+                        type: locale.IgcDockManagerPaneType.contentPane,
+                        contentId: 'content6',
+                        header: 'Content 6 Header',
+                        size: 240, // PIXELS
+                      },
+                    ],
+                  },
+                  // {
+                  //   type: IgcDockManagerPaneType.contentPane,
+                  //   contentId: 'content_not_used_3',
+                  //   header: 'NOT USED',
+                  //   ...this.commonProps,
+                  // },
+                ],
+              },
+              {
+                type: locale.IgcDockManagerPaneType.splitPane,
+                orientation: locale.IgcSplitPaneOrientation.horizontal,
+                size: 240 + 10,
+                panes: [
+                  {
+                    type: locale.IgcDockManagerPaneType.splitPane,
+                    orientation: locale.IgcSplitPaneOrientation.vertical,
+                    size: this.bodyWidth / 2,
+                    panes: [
+                      {
+                        type: locale.IgcDockManagerPaneType.contentPane,
+                        contentId: 'content7',
+                        header: 'Content 7 Header',
+                        size: 240, // PIXELS
+                      },
+                    ],
+                  },
+                  {
+                    type: locale.IgcDockManagerPaneType.splitPane,
+                    orientation: locale.IgcSplitPaneOrientation.vertical,
+                    size: this.bodyWidth / 2,
+                    panes: [
+                      {
+                        type: locale.IgcDockManagerPaneType.contentPane,
+                        contentId: 'content8',
+                        header: 'Content 8 Header',
+                        size: 240, // PIXELS
+                      },
+                    ],
+                  },
+                  // {
+                  //   type: IgcDockManagerPaneType.contentPane,
+                  //   contentId: 'content_not_used_4',
+                  //   header: 'NOT USED',
+                  //   ...this.commonProps,
+                  // },
+                ],
+              },
+              {
+                type: locale.IgcDockManagerPaneType.contentPane,
+                contentId: 'content9',
+                header: 'Content 9 Header',
+                size: 290, // PIXELS
+              },
+              // {
+              //   type: IgcDockManagerPaneType.contentPane,
+              //   contentId: 'content_not_used_1',
+              //   header: 'NOT USED',
+              //   ...this.commonProps,
+              // },
+            ],
+          },
+        ],
+      },
+      floatingPanes: [],
+    };
+    this.layout5 = {
+      rootPane: {
+        type: locale.IgcDockManagerPaneType.splitPane,
+        orientation: locale.IgcSplitPaneOrientation.horizontal,
+        panes: [
+          {
+            type: locale.IgcDockManagerPaneType.splitPane,
+            orientation: locale.IgcSplitPaneOrientation.vertical,
+            useFixedSize: true,
+            size: this.bodyWidth,
+            panes: [
+              {
+                type: locale.IgcDockManagerPaneType.contentPane,
+                contentId: 'content1',
+                header: 'Content 1 Header',
+                size: 60, // PIXELS
+              },
+              {
+                type: locale.IgcDockManagerPaneType.splitPane,
+                orientation: locale.IgcSplitPaneOrientation.horizontal,
+                size: 240 + 10,
+                useFixedSize: true,
+                panes: [
+                  {
+                    type: locale.IgcDockManagerPaneType.splitPane,
+                    orientation: locale.IgcSplitPaneOrientation.vertical,
+                    size: this.bodyWidth / 3,
+                    panes: [
+                      {
+                        type: locale.IgcDockManagerPaneType.contentPane,
+                        contentId: 'content2',
+                        header: 'Content 2 Header',
+                        size: 240, // PIXELS
+                      },
+                    ],
+                  },
+                  {
+                    type: locale.IgcDockManagerPaneType.splitPane,
+                    orientation: locale.IgcSplitPaneOrientation.vertical,
+                    size: (this.bodyWidth * 2) / 3,
+                    panes: [
+                      {
+                        type: locale.IgcDockManagerPaneType.contentPane,
+                        contentId: 'content3',
+                        header: 'Content 3 Header',
+                        size: 240, // PIXELS
+                      },
+                    ],
+                  },
+                  Object.assign({ type: locale.IgcDockManagerPaneType.contentPane, contentId: 'content_not_used_2', header: 'NOT USED' }, this.commonProps),
+                ],
+              },
+              {
+                type: locale.IgcDockManagerPaneType.contentPane,
+                contentId: 'content4',
+                header: 'Content 4 Header',
+                size: 290, // PIXELS
+              },
+              {
+                type: locale.IgcDockManagerPaneType.splitPane,
+                orientation: locale.IgcSplitPaneOrientation.horizontal,
+                size: 240 + 10,
+                panes: [
+                  {
+                    type: locale.IgcDockManagerPaneType.splitPane,
+                    orientation: locale.IgcSplitPaneOrientation.vertical,
+                    size: this.bodyWidth / 3,
+                    panes: [
+                      {
+                        type: locale.IgcDockManagerPaneType.contentPane,
+                        contentId: 'content5',
+                        header: 'Content 5 Header',
+                        size: 240, // PIXELS
+                      },
+                    ],
+                  },
+                  {
+                    type: locale.IgcDockManagerPaneType.splitPane,
+                    orientation: locale.IgcSplitPaneOrientation.vertical,
+                    size: (this.bodyWidth * 2) / 3,
+                    panes: [
+                      {
+                        type: locale.IgcDockManagerPaneType.contentPane,
+                        contentId: 'content6',
+                        header: 'Content 6 Header',
+                        size: 240, // PIXELS
+                      },
+                    ],
+                  },
+                  Object.assign({ type: locale.IgcDockManagerPaneType.contentPane, contentId: 'content_not_used_3', header: 'NOT USED' }, this.commonProps),
+                ],
+              },
+              {
+                type: locale.IgcDockManagerPaneType.splitPane,
+                orientation: locale.IgcSplitPaneOrientation.horizontal,
+                size: 240 + 10,
+                panes: [
+                  {
+                    type: locale.IgcDockManagerPaneType.splitPane,
+                    orientation: locale.IgcSplitPaneOrientation.vertical,
+                    size: this.bodyWidth / 2,
+                    panes: [
+                      {
+                        type: locale.IgcDockManagerPaneType.contentPane,
+                        contentId: 'content7',
+                        header: 'Content 7 Header',
+                        size: 240, // PIXELS
+                      },
+                    ],
+                  },
+                  {
+                    type: locale.IgcDockManagerPaneType.splitPane,
+                    orientation: locale.IgcSplitPaneOrientation.vertical,
+                    size: this.bodyWidth / 2,
+                    panes: [
+                      {
+                        type: locale.IgcDockManagerPaneType.contentPane,
+                        contentId: 'content8',
+                        header: 'Content 8 Header',
+                        size: 240, // PIXELS
+                      },
+                    ],
+                  },
+                  Object.assign({ type: locale.IgcDockManagerPaneType.contentPane, contentId: 'content_not_used_4', header: 'NOT USED' }, this.commonProps),
+                ],
+              },
+              {
+                type: locale.IgcDockManagerPaneType.contentPane,
+                contentId: 'content9',
+                header: 'Content 9 Header',
+                size: 290, // PIXELS
+              },
+              Object.assign({ type: locale.IgcDockManagerPaneType.contentPane, contentId: 'content_not_used_1', header: 'NOT USED' }, this.commonProps),
+            ],
+          },
+        ],
+      },
+      floatingPanes: [],
+    };
+    // UseFizedSize with DCH
+    this.layout6 = {
+      rootPane: {
+        type: locale.IgcDockManagerPaneType.splitPane,
+        orientation: locale.IgcSplitPaneOrientation.vertical,
+        useFixedSize: true,
+        panes: [
+          {
+            type: locale.IgcDockManagerPaneType.splitPane,
+            orientation: locale.IgcSplitPaneOrientation.horizontal,
+            useFixedSize: true,
             size: 300,
-            allowEmpty: true,
             panes: [
               {
                 type: locale.IgcDockManagerPaneType.contentPane,
-                header: '1',
-                contentId: 'content1'
+                contentId: "content1",
+                header: "Content Pane 1",
+                size: 300
               },
               {
                 type: locale.IgcDockManagerPaneType.contentPane,
-                header: '2',
-                contentId: 'content2'
+                contentId: "content2",
+                header: "Content Pane 2",
+                size: 700
+              },
+            ]
+          },
+          {
+            type: locale.IgcDockManagerPaneType.splitPane,
+            orientation: locale.IgcSplitPaneOrientation.horizontal,
+            useFixedSize: true,
+            size: 500,
+            panes: [
+              {
+                type: locale.IgcDockManagerPaneType.documentHost,
+                size: 508,
+                rootPane: {
+                  type: locale.IgcDockManagerPaneType.splitPane,
+                  orientation: locale.IgcSplitPaneOrientation.horizontal,
+                  useFixedSize: true,
+                  allowEmpty: true,
+                  panes: [
+                    {
+                      type: locale.IgcDockManagerPaneType.tabGroupPane,
+                      size: 300,
+                      panes: [
+                        {
+                          type: locale.IgcDockManagerPaneType.contentPane,
+                          header: 'MainWindow.xaml',
+                          contentId: 'content7',
+                          documentOnly: true,
+                          // allowMaximize: false,
+                        },
+                        {
+                          type: locale.IgcDockManagerPaneType.contentPane,
+                          header: 'MainWindow.xaml.cs',
+                          contentId: 'content9',
+                          documentOnly: true,
+                          allowFloating: false
+                        }
+                      ]
+                    },
+                    {
+                      type: locale.IgcDockManagerPaneType.contentPane,
+                      header: 'App.xaml',
+                      contentId: 'content8',
+                      allowMaximize: true,
+                      acceptsInnerDock: false,
+                      size: 200
+                    }
+                  ]
+                }
+              },
+              {
+                type: locale.IgcDockManagerPaneType.contentPane,
+                contentId: "content3",
+                header: "Content Pane 3",
+                size: 400
+              },
+              {
+                type: locale.IgcDockManagerPaneType.contentPane,
+                contentId: "content4",
+                header: "Content Pane 4",
+                size: 400
+              }
+            ]
+          },
+          {
+            type: locale.IgcDockManagerPaneType.splitPane,
+            orientation: locale.IgcSplitPaneOrientation.horizontal,
+            // useFixedSize: true,
+            size: 300,
+            panes: [
+              {
+                type: locale.IgcDockManagerPaneType.contentPane,
+                contentId: "content5",
+                header: "Content Pane 5",
+                size: 500
               },
               {
                 type: locale.IgcDockManagerPaneType.contentPane,
-                header: '3',
-                contentId: 'content3'
+                contentId: "content6",
+                header: "Content Pane 6",
+                size: 800
               }
             ]
           }
         ]
-      }
+      },
+      floatingPanes: [],
+    };
+    // The layout used in 'useFixedSize' unit tests
+    this.layout7 = {
+      rootPane: {
+        type: locale.IgcDockManagerPaneType.splitPane,
+        orientation: locale.IgcSplitPaneOrientation.vertical,
+        // useFixedSize: true,
+        panes: [
+          {
+            type: locale.IgcDockManagerPaneType.splitPane,
+            orientation: locale.IgcSplitPaneOrientation.horizontal,
+            useFixedSize: true,
+            panes: [
+              {
+                type: locale.IgcDockManagerPaneType.contentPane,
+                contentId: "content1",
+                header: "Content Pane 1",
+                size: 400
+              },
+              {
+                type: locale.IgcDockManagerPaneType.contentPane,
+                contentId: "content2",
+                header: "Content Pane 2",
+                size: 600
+              },
+            ]
+          },
+          {
+            type: locale.IgcDockManagerPaneType.splitPane,
+            orientation: locale.IgcSplitPaneOrientation.horizontal,
+            panes: [
+              {
+                type: locale.IgcDockManagerPaneType.tabGroupPane,
+                size: 400,
+                panes: [
+                  {
+                    type: locale.IgcDockManagerPaneType.contentPane,
+                    contentId: "content3",
+                    header: "Content Pane 3"
+                  },
+                  {
+                    type: locale.IgcDockManagerPaneType.contentPane,
+                    contentId: "content4",
+                    header: "Content Pane 4",
+                  }
+                ]
+              },
+              {
+                type: locale.IgcDockManagerPaneType.contentPane,
+                contentId: "content5",
+                header: "Content Pane 5",
+                size: 600
+              }
+            ]
+          },
+          {
+            type: locale.IgcDockManagerPaneType.contentPane,
+            contentId: "content6",
+            header: "Content Pane 6"
+          }
+        ]
+      },
+      floatingPanes: [{
+          type: locale.IgcDockManagerPaneType.splitPane,
+          orientation: locale.IgcSplitPaneOrientation.vertical,
+          floatingHeight: 200,
+          floatingWidth: 300,
+          panes: [{
+              type: locale.IgcDockManagerPaneType.contentPane,
+              contentId: "content7",
+              header: "Content Pane 7"
+            }]
+        }]
     };
-    this.layout = this.layout3;
+    this.layout = this.layout6;
     this.logEnabled = false;
-    this.id = 100;
-    this.foundElem = [];
     this.hiddenPanes = [];
   }
-  saveLayout() {
+  // private hideOnCloseCheckbox: HTMLInputElement;
+  /*
+  private hiddenPanesSelect: HTMLSelectElement;
+  private savedLayout: string;
+
+  private saveLayout() {
     this.savedLayout = JSON.stringify(this.dockManager.layout);
   }
-  loadLayout() {
+
+  private loadLayout() {
     this.dockManager.layout = JSON.parse(this.savedLayout);
   }
-  setActivePane() {
+
+  private setActivePane() {
     // this.dockManager.activePane = this.teamExplorerPane;
     this.dockManager.activePane = this.unpinnedToolboxPane;
   }
-  addPane() {
+
+  private id = 100;
+  private newId: string;
+
+  private addPane() {
     this.newId = `content${this.id++}`;
     const newDiv = this.createElement(this.newId, 'input');
     this.dockManager.appendChild(newDiv);
+
     this.layout.floatingPanes[1].panes.push({
-      type: locale.IgcDockManagerPaneType.contentPane,
+      type: IgcDockManagerPaneType.contentPane,
       header: 'NewPane',
       contentId: this.newId
     });
-    this.dockManager.layout = Object.assign({}, this.layout);
+
+    this.dockManager.layout = { ...this.layout };
   }
-  addTab() {
-    this.findElement(this.layout.rootPane, locale.IgcDockManagerPaneType.tabGroupPane);
+
+  private addTab() {
+    this.findElement(this.layout.rootPane, IgcDockManagerPaneType.tabGroupPane);
+
     this.newId = `content${this.id++}`;
     const newDiv = this.createElement(this.newId, 'button');
     this.dockManager.appendChild(newDiv);
-    const tabGroupPane = this.foundElem[0];
+
+    const tabGroupPane = this.foundElem[0] as IgcTabGroupPane;
     tabGroupPane.panes.push({
-      type: locale.IgcDockManagerPaneType.contentPane,
+      type: IgcDockManagerPaneType.contentPane,
       header: 'NewTab',
       contentId: this.newId
     });
-    this.dockManager.layout = Object.assign({}, this.layout);
+
+    this.dockManager.layout = { ...this.layout };
   }
-  disableContentPane() {
-    this.findElement(this.layout.rootPane, locale.IgcDockManagerPaneType.tabGroupPane);
-    const tabGroupPane = this.foundElem[0];
+
+  private disableContentPane() {
+    this.findElement(this.layout.rootPane, IgcDockManagerPaneType.tabGroupPane);
+
+    const tabGroupPane = this.foundElem[0] as IgcTabGroupPane;
     tabGroupPane.panes[0].disabled = true;
-    this.dockManager.layout = Object.assign({}, this.layout);
+    this.dockManager.layout = { ...this.layout };
   }
-  toggleProximityDock() {
+
+  private toggleProximityDock() {
     this.dockManager.proximityDock = !this.dockManager.proximityDock;
   }
-  focusPane() {
+
+  private focusPane() {
     this.dockManager.focusPane('content12');
   }
-  findElement(pane, type) {
-    if (!pane) {
-      return;
-    }
+
+  private foundElem: IgcDockManagerPane[] = [];
+  private findElement(pane: IgcDockManagerPane, type: IgcDockManagerPaneType) {
+    if (!pane) { return; }
+
     if (pane.type === type) {
       this.foundElem.push(pane);
     }
-    if (pane.type === locale.IgcDockManagerPaneType.tabGroupPane || pane.type === locale.IgcDockManagerPaneType.splitPane) {
+
+    if (pane.type === IgcDockManagerPaneType.tabGroupPane || pane.type === IgcDockManagerPaneType.splitPane) {
       for (const c of pane.panes) {
         this.findElement(c, type);
       }
     }
-    if (pane.type === locale.IgcDockManagerPaneType.documentHost) {
+
+    if (pane.type === IgcDockManagerPaneType.documentHost) {
       this.findElement(pane.rootPane, type);
     }
   }
-  showPane() {
+
+  private showPane() {
     const index = this.hiddenPanesSelect.selectedIndex;
+
     if (index >= 0) {
       this.hiddenPanes[index].hidden = false;
       this.hiddenPanes.splice(index, 1);
       this.hiddenPanes = [...this.hiddenPanes];
-      this.dockManager.layout = Object.assign({}, this.dockManager.layout);
+      this.dockManager.layout = { ...this.dockManager.layout };
     }
   }
-  showAllPanes() {
+
+  private showAllPanes() {
     if (this.hiddenPanes.length > 0) {
       for (const pane of this.hiddenPanes) {
         pane.hidden = false;
       }
       this.hiddenPanes = [];
-      this.dockManager.layout = Object.assign({}, this.dockManager.layout);
+      this.dockManager.layout = { ...this.dockManager.layout };
     }
   }
-  toggleInBoundaries() {
+
+  private toggleInBoundaries() {
     this.dockManager.containedInBoundaries = !this.dockManager.containedInBoundaries;
   }
-  createElement(content, typeOfElement) {
+
+  // private toggleUseFixedSize() {
+  //   this.dockManager.useFixedSize = !this.dockManager.useFixedSize;
+  // }
+
+  private createElement(content: string, typeOfElement: string): HTMLElement {
     const someContent = document.createTextNode(content);
-    let elem;
+    let elem: HTMLElement;
     switch (typeOfElement) {
       case ('button'):
         elem = document.createElement('button');
@@ -5491,22 +6269,25 @@ const SampleComponent = class {
         elem = document.createElement('input');
         break;
     }
+
     const divContent = document.createElement('div');
     divContent.appendChild(elem ? elem : someContent);
     divContent.setAttribute('slot', content);
     divContent.setAttribute('style', 'width: 100%; height: 100%;');
+
     return divContent;
   }
+  */
   handlePaneClose(event) {
     this.log(event);
-    if (this.hideOnCloseCheckbox.checked) {
-      for (const pane of event.detail.panes) {
-        pane.hidden = true;
-        this.hiddenPanes.splice(0, 0, pane);
-        this.hiddenPanes = [...this.hiddenPanes];
-      }
-      event.preventDefault();
-    }
+    // if (this.hideOnCloseCheckbox.checked) {
+    //   for (const pane of event.detail.panes) {
+    //     pane.hidden = true;
+    //     this.hiddenPanes.splice(0, 0, pane);
+    //     this.hiddenPanes = [...this.hiddenPanes];
+    //   }
+    //   event.preventDefault();
+    // }
     // const panes = event.detail.panes;
     // const confirmed = confirm(`Are you sure you want to close panes '${panes.map(p => p.header).join(', ')}'?`);
     // // event.detail.panes = [panes[0]];
@@ -5588,13 +6369,11 @@ const SampleComponent = class {
     }
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", null, index.h("button", { onClick: () => console.log(JSON.stringify(this.dockManager.layout, null, 2)) }, "LOG LAYOUT"), index.h("button", { onClick: () => this.saveLayout() }, "Save Layout"), index.h("button", { onClick: () => this.loadLayout() }, "Load Layout"), index.h("button", { onClick: () => this.setActivePane() }, "Set Active Pane"), index.h("button", { onClick: () => this.addPane() }, "Add Floating Pane"), index.h("button", { onClick: () => this.addTab() }, "Add Tab Pane"), index.h("button", { onClick: () => this.disableContentPane() }, "Disable Tab Pane"), index.h("button", { onClick: () => this.focusPane() }, "Focus Pane"), index.h("button", { onClick: () => this.toggleProximityDock() }, "Toggle Proximity Dock"), index.h("input", { id: "hideOnClose", type: "checkbox", style: { marginLeft: '20px' }, ref: el => this.hideOnCloseCheckbox = el }), index.h("label", { htmlFor: "hideOnClose" }, "Hide on close"), index.h("span", { style: { marginLeft: '20px' } }, "Hidden Panes:"), index.h("select", { style: { width: '150px' }, ref: el => this.hiddenPanesSelect = el }, this.hiddenPanes.map(p => {
-      return (index.h("option", { value: p.id }, p.header));
-    })), index.h("button", { onClick: () => this.showPane() }, "Show Pane"), index.h("button", { onClick: () => this.showAllPanes() }, "Show All Panes"), index.h("button", { onClick: () => this.toggleInBoundaries() }, "Toggle In Boundaries")), index.h("igc-dockmanager", { layout: this.layout, onPaneClose: this.handlePaneClose.bind(this), onPaneScroll: this.handlePaneScroll.bind(this), onPanePinnedToggle: this.handlePinnedToggle.bind(this), onActivePaneChanged: this.handleActivePaneChanged.bind(this), onPaneDragStart: this.handleDragStart.bind(this), onPaneDragOver: this.handleDragOver.bind(this), onPaneDragEnd: this.handleDragEnd.bind(this), onSplitterResizeStart: this.handleSplitterResizeStart.bind(this), onSplitterResizeEnd: this.handleSplitterResizeEnd.bind(this), onFloatingPaneResizeStart: this.handleFloatingPaneResizeStart.bind(this), onFloatingPaneResizeMove: this.handleFloatingPaneResizeMove.bind(this), onFloatingPaneResizeEnd: this.handleFloatingPaneResizeEnd.bind(this), onLayoutChange: this.handleLayoutChange.bind(this),
+    return (index.h(index.Host, null, index.h("igc-dockmanager", { layout: this.layout, onPaneClose: this.handlePaneClose.bind(this), onPaneScroll: this.handlePaneScroll.bind(this), onPanePinnedToggle: this.handlePinnedToggle.bind(this), onActivePaneChanged: this.handleActivePaneChanged.bind(this), onPaneDragStart: this.handleDragStart.bind(this), onPaneDragOver: this.handleDragOver.bind(this), onPaneDragEnd: this.handleDragEnd.bind(this), onSplitterResizeStart: this.handleSplitterResizeStart.bind(this), onSplitterResizeEnd: this.handleSplitterResizeEnd.bind(this), onFloatingPaneResizeStart: this.handleFloatingPaneResizeStart.bind(this), onFloatingPaneResizeMove: this.handleFloatingPaneResizeMove.bind(this), onFloatingPaneResizeEnd: this.handleFloatingPaneResizeEnd.bind(this), onLayoutChange: this.handleLayoutChange.bind(this),
       // resourceStrings={this.getCustomResourceStrings()}
       ref: el => this.dockManager = el,
       // allowFloatingPanesResize={false}
-      showHeaderIconOnHover: 'closeOnly' }, index.h("div", { slot: "header1" }, index.h("span", { style: { color: 'red' } }, "Solution Explorer"), index.h("button", null, "H")), index.h("div", { slot: "tabHeader1" }, index.h("span", { style: { color: 'orange' } }, "Solution Explorer"), index.h("button", null, "T")), index.h("div", { slot: "unpinnedHeader1" }, index.h("span", { style: { color: 'blue' } }, "Solution Explorer"), index.h("button", null, "U")), index.h("button", { style: { background: 'pink' }, slot: "tabHeaderCloseButton" }, "Y"), index.h("div", { slot: "content1", style: { width: '100%', height: '100%' } }, "Content 1"), index.h("div", { slot: "content2", style: { width: '100%', height: '100%' } }, index.h("button", null, "Tests")), index.h("div", { slot: "content3", style: { width: '100%', height: '100%' } }, "Content 3"), index.h("div", { slot: "content4" }, "Content 4"), index.h("div", { slot: "content5", style: { width: '100%', height: '100%' } }, "Content 5"), index.h("div", { slot: "content6", style: { width: '100%', height: '100%' } }, "Content 6"), index.h("div", { slot: "content7", style: { width: '100%', height: '100%' } }, "Content 7"), index.h("div", { slot: "content8" }, "Content 8"), index.h("div", { slot: "content9", style: { width: '100%', height: '100%' } }, "Content 9"), index.h("div", { slot: "content10", style: { width: '100%', height: '100%' } }, index.h("button", null, "Test")), index.h("div", { slot: "content11", style: { width: '100%', height: '100%' } }, index.h("input", null)), index.h("div", { slot: "content12", style: { width: '100%', height: '100%' } }, index.h("p", null, "Content 12 "), index.h("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ")), index.h("div", { slot: "content13", style: { width: '100%', height: '100%' } }, "Content 13"), index.h("div", { slot: "content14", style: { width: '100%', height: '100%' } }, "Content 14"), index.h("div", { slot: "toolboxHeader" }, index.h("span", null, "[U] Toolbox")), index.h("div", { slot: "teamExplorerHeader" }, index.h("span", null, "[U] Team Explorer")))));
+      showHeaderIconOnHover: 'closeOnly' }, index.h("div", { slot: "header1" }, index.h("span", { style: { color: 'red' } }, "Solution Explorer"), index.h("button", null, "H")), index.h("div", { slot: "tabHeader1" }, index.h("span", { style: { color: 'orange' } }, "Solution Explorer"), index.h("button", null, "T")), index.h("div", { slot: "unpinnedHeader1" }, index.h("span", { style: { color: 'blue' } }, "Solution Explorer"), index.h("button", null, "U")), index.h("div", { slot: "toolboxHeader" }, index.h("span", null, "[U] Toolbox")), index.h("div", { slot: "teamExplorerHeader" }, index.h("span", null, "[U] Team Explorer")), index.h("button", { style: { background: 'pink' }, slot: "tabHeaderCloseButton" }, "Y"), index.h("div", { slot: "content1" }, "Content 1"), index.h("div", { slot: "content2" }, "Content 2"), index.h("div", { slot: "content3" }, "Content 3"), index.h("div", { slot: "content4" }, "Content 4"), index.h("div", { slot: "content5" }, "Content 5"), index.h("div", { slot: "content6" }, "Content 6"), index.h("div", { slot: "content7" }, "Content 7"), index.h("div", { slot: "content8" }, "Content 8"), index.h("div", { slot: "content9" }, "Content 9"), index.h("div", { slot: "content_not_used_1" }), index.h("div", { slot: "content_not_used_2" }), index.h("div", { slot: "content_not_used_3" }), index.h("div", { slot: "content_not_used_4" }))));
   }
 };
 SampleComponent.style = sampleComponentCss;