igniteui-dockmanager 1.15.0-beta.3 → 1.15.0

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

@@ -130,7 +130,6 @@ const IgcContentPaneComponent = class {
     this.disabled = false;
     this.isSingleFloating = false;
     this.contentId = undefined;
-    this.parentIgnoreResizeConstraints = false;
   }
   componentDidRender() {
     this.rendered.emit();
@@ -145,7 +144,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` : this.parentIgnoreResizeConstraints ? `0 0 ${size}px` : `${size} 1 ${size}px`
+        flex: this.isFlyout ? `0 1 ${unpinnedSize}px` : `${size} 1 ${size}px`
       }, part: parts }, index.h("slot", { name: "header" }), index.h("slot", null)));
   }
 };
@@ -506,6 +505,10 @@ class IgcDockManagerService {
       parent.panes.splice(index, 1);
       if (parent.panes.length === 0) {
         if (parent.allowEmpty) {
+          if (parent === this.dockManager.maximizedPane) {
+            this.dockManager.maximizedPane = null;
+            parent.isMaximized = false;
+          }
           const rootParent = this.getRootParent(pane);
           if (this.isFloatingPane(rootParent)) {
             this.removeFloatingPaneIfEmpty(rootParent);
@@ -543,8 +546,7 @@ class IgcDockManagerService {
     const floatingPane = {
       type: locale.IgcDockManagerPaneType.splitPane,
       orientation: locale.IgcSplitPaneOrientation.vertical,
-      panes: [content],
-      size: content.size
+      panes: [content]
     };
     floatingPane.floatingLocation = location;
     floatingPane.floatingWidth = width;
@@ -563,6 +565,8 @@ class IgcDockManagerService {
     return panes;
   }
   getChildContentPanesRecursive(pane, children) {
+    if (!pane.panes)
+      return;
     for (const child of pane.panes) {
       if (child.type === locale.IgcDockManagerPaneType.contentPane) {
         children.push(child);
@@ -698,41 +702,23 @@ class IgcDockManagerService {
           panes: isDockingBefore ?
             [paneToDock, targetPane] :
             [targetPane, paneToDock],
-          size: targetPane.size || targetParent.size
+          size: targetPane.size
         };
         targetParent.panes[paneIndex] = newSplitPane;
       }
-      if (!this.shouldIgnoreResizeConstraints(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.orientation = targetParent.orientation;
-        parentSplitPane.panes = targetParent.panes;
-      }
-    }
-  }
-  shouldIgnoreResizeConstraints(pane) {
-    if (pane.type === locale.IgcDockManagerPaneType.splitPane) {
-      if (pane.ignoreResizeConstraints) {
-        return true;
-      }
-      for (let i = 0; i < pane.panes.length; i++) {
-        if (this.shouldIgnoreResizeConstraints(pane.panes[i])) {
-          return true;
-        }
-      }
+      targetPane.size = undefined;
+      paneToDock.size = undefined;
     }
-    else if (pane.type === locale.IgcDockManagerPaneType.documentHost) {
-      this.shouldIgnoreResizeConstraints(pane.rootPane);
+    // 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;
     }
-    return false;
   }
   updateLayout() {
     this.dockManager.layout = Object.assign({}, this.dockManager.layout);
@@ -817,9 +803,7 @@ class IgcDockManagerService {
     const sizeSum = paneSizes.reduce((p, c) => c + p, 0);
     const calcDelta = deltaPercentage * sizeSum;
     childPanes[paneIndex - 1].size = paneSizes[paneIndex - 1] + calcDelta;
-    if (!parentPane.ignoreResizeConstraints) {
-      childPanes[paneIndex].size = paneSizes[paneIndex] - calcDelta;
-    }
+    childPanes[paneIndex].size = paneSizes[paneIndex] - calcDelta;
     this.updateLayout();
   }
   togglePin(pane, unpinBehavior = locale.IgcPaneActionBehavior.allPanes) {
@@ -863,38 +847,16 @@ class IgcDockManagerService {
       this.updateLayout();
     }
   }
-  checkIgnoreResizeConstraintsParent(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.checkIgnoreResizeConstraintsParent(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.getParent(pane);
-      const ignoreResizeConstraintPaneTargetParent = this.checkIgnoreResizeConstraintsParent(pane);
-      if (ignoreResizeConstraintPaneTargetParent !== null) {
-        paneToRemove = ignoreResizeConstraintPaneTargetParent;
-      }
-      else if (parent.type === locale.IgcDockManagerPaneType.tabGroupPane && closeAll) {
+      const parent = this.paneParentMap.get(pane);
+      if (parent.type === locale.IgcDockManagerPaneType.tabGroupPane && closeAll) {
         paneToRemove = parent;
       }
     }
-    const paneRemoved = paneToRemove.type === locale.IgcDockManagerPaneType.tabGroupPane || paneToRemove.type === locale.IgcDockManagerPaneType.splitPane ?
+    const paneRemoved = paneToRemove.type === locale.IgcDockManagerPaneType.tabGroupPane ?
       this.removeAllowedPanes(pane, paneToRemove) :
       this.emitPaneClose(pane, [paneToRemove]);
     if ((paneRemoved || pane.hidden) && pane === this.dockManager.flyoutPane) {
@@ -1237,6 +1199,8 @@ class IgcDockManagerService {
   }
   bringFloatingPaneOnTop(pane) {
     const floatingPanes = this.dockManager.layout.floatingPanes;
+    if (!floatingPanes)
+      return;
     const floatingPaneZIndicesMap = this.dockManager.floatingPaneZIndicesMap;
     const oldZIndex = floatingPaneZIndicesMap.get(pane);
     for (const p of floatingPanes) {
@@ -1263,10 +1227,9 @@ class IgcDockManagerService {
     }
     return items;
   }
-  dragPaneStart(pane, rect, clientX, clientY, anyPaneIgnoringResizeConstraints = false) {
+  dragPaneStart(pane, rect, clientX, clientY) {
     var _a;
-    if (this.dockManager.maximizedPane ||
-      (anyPaneIgnoringResizeConstraints && !this.isFloatingPane(this.getRootParent(pane)))) {
+    if (this.dockManager.maximizedPane) {
       return false;
     }
     let panes;
@@ -1496,10 +1459,7 @@ class IgcDockManagerService {
     this.draggedPanes = [pane];
     return true;
   }
-  dragTabMove(pane, args, rects, anyPaneIgnoringResizeConstraints = false) {
-    if (anyPaneIgnoringResizeConstraints && !this.isFloatingPane(this.getRootParent(pane))) {
-      return false;
-    }
+  dragTabMove(pane, args, rects) {
     const clientX = args.clientX;
     const clientY = args.clientY;
     const offsetX = args.offsetX;
@@ -2006,7 +1966,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;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)}";
+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)}";
 
 var ActionReason;
 (function (ActionReason) {
@@ -2049,7 +2009,6 @@ const IgcDockManager = class {
     this.resizeObserver = new ResizeObserver(this.restrictFloatingPaneSize.bind(this));
     this.proximityDockThreshold = 50;
     this.proximityOuterDockThreshold = 25;
-    this.anyPaneIgnoringResizeConstraints = false;
     this.templatableComponents = [
       {
         slot: 'paneHeaderCloseButton',
@@ -2243,7 +2202,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.anyPaneIgnoringResizeConstraints;
+      this.showDockingIndicators = panes.every(p => p.allowDocking !== false);
       this.documentOnlyDrag = panes.some(p => p.documentOnly);
     }
     else {
@@ -2371,7 +2330,6 @@ const IgcDockManager = class {
     this.contextMenuMeta = null;
     this.navigationPaneMeta = null;
     if (this.layout) {
-      this.updateLayout();
       this.layoutChanged();
     }
     if (!this.resourceStrings) {
@@ -2415,47 +2373,6 @@ const IgcDockManager = class {
   focusElement() {
     this.element.focus();
   }
-  updateLayout() {
-    //Check for ignoreResizeConstraints in the layout and create a placeholder pane for resizing.
-    this.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.checkAndAddPlaceholderPane(cp));
-      // Should we add a resolved prop instead of setting ignoreResizeConstraints to false?
-      // Used to prevent the root parent splitPane of having flex grow and shrink set to 0 which breaks floating pane resizing.
-      p.ignoreResizeConstraints = false;
-    }
-  }
-  isSplitPaneIgnoringResizeConstraints(pane) {
-    return pane && pane.type === locale.IgcDockManagerPaneType.splitPane && pane.ignoreResizeConstraints;
-  }
-  isParentIgnoreResizeConstraints(pane) {
-    const parent = this.service.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);
-    }
-  }
   handleTabsRendered(pane) {
     var _a;
     if (this.reason !== ActionReason.drop) {
@@ -2660,11 +2577,7 @@ const IgcDockManager = class {
       pane.unpinnedSize = minSize;
     }
     // If new pane size does not meet the size constraints, do not resize
-    let parent = this.service.getParent(pane);
-    let offset = this.isSplitPaneIgnoringResizeConstraints(parent) ||
-      this.isPaneSizeWithinConstraints(previousPane, event.detail, orientation, 'previous') ?
-      this.splitterOffset * event.detail :
-      0;
+    let offset = this.isPaneSizeWithinConstraints(previousPane, event.detail, orientation, 'previous') ? this.splitterOffset * event.detail : 0;
     this.service.resizeFlyoutPane(offset);
     let rect;
     rect = splitter.previousElementSibling.getBoundingClientRect();
@@ -2700,9 +2613,7 @@ 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 = parentPane.ignoreResizeConstraints ||
-      this.isPaneSizeWithinConstraints(previousPane, event.detail, parentPane.orientation, 'previous') &&
-        this.isPaneSizeWithinConstraints(nextPane, event.detail, parentPane.orientation) ? event.detail : 0;
+    const offset = 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 !== '') {
@@ -2790,7 +2701,7 @@ const IgcDockManager = class {
     }
     this.shouldClearActivePane = false;
     this.focusElement();
-    const dragStarted = this.service.dragPaneStart(pane, rect, event.detail.clientX, event.detail.clientY, this.anyPaneIgnoringResizeConstraints);
+    const dragStarted = this.service.dragPaneStart(pane, rect, event.detail.clientX, event.detail.clientY);
     this.isDragging = true;
     this.scheduleAfterRender(() => {
       this.shouldClearActivePane = true;
@@ -2830,22 +2741,6 @@ const IgcDockManager = class {
     if (event && !dragMoved) {
       event.detail.cancel = true;
     }
-    // After successfull pane drag, check if there is a splitPane with ignoreResizeConstraints = 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.ignoreResizeConstraints &&
-          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) {
@@ -3014,7 +2909,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, this.anyPaneIgnoringResizeConstraints);
+    const tabMoved = this.service.dragTabMove(pane, event.detail, tabRectsInfo);
     if (event && !tabMoved) {
       event.detail.cancel = true;
     }
@@ -3208,7 +3103,7 @@ const IgcDockManager = class {
       this.contentPaneId = pane.contentId;
       if (this.element === rootNode.activeElement || !this.element.contains(rootNode.activeElement)) {
         const paneElement = this.contentPanesElementMap.get(pane);
-        paneElement.focus();
+        paneElement === null || paneElement === void 0 ? void 0 : paneElement.focus();
       }
       else {
         this.setActivePane(pane);
@@ -3377,7 +3272,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), parentIgnoreResizeConstraints: this.isParentIgnoreResizeConstraints(pane), 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), ref: el => {
         if (el) {
           this.panesElementMap.set(pane, el);
           this.contentPanesElementMap.set(pane, el);
@@ -3392,10 +3287,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), parentIgnoreResizeConstraints: parentPane.ignoreResizeConstraints }));
+    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) }));
   }
   renderDocumentHost(docHost) {
-    return (index.h("igc-document-host-component", { key: docHost.id, size: docHost.size, parentIgnoreResizeConstraints: this.isParentIgnoreResizeConstraints(docHost), ref: el => {
+    return (index.h("igc-document-host-component", { key: docHost.id, size: docHost.size, ref: el => {
         if (el) {
           this.panesElementMap.set(docHost, el);
         }
@@ -3419,7 +3314,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, parentIgnoreResizeConstraints: this.isParentIgnoreResizeConstraints(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 => {
+    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 => {
         if (el) {
           this.panesElementMap.set(pane, el);
         }
@@ -3462,7 +3357,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, ignoreResizeConstraints: splitPane.ignoreResizeConstraints, parentIgnoreResizeConstraints: this.isParentIgnoreResizeConstraints(splitPane), 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, onRendered: this.handleSplitPaneRendered.bind(this, panes), ref: el => {
         if (el) {
           this.panesElementMap.set(splitPane, el);
         }
@@ -3472,11 +3367,9 @@ const IgcDockManager = class {
         paneComponent = this.renderSplitPane(p, isFloating, isInDocumentHost);
       }
       else if (p.type === locale.IgcDockManagerPaneType.contentPane) {
-        paneComponent = p.contentId === "placeholder" ?
-          this.renderPlaceholder(p) :
-          isInDocumentHost ?
-            this.renderTabGroup(p, isFloating, true) :
-            this.renderContentPane(p, isFloating, false);
+        paneComponent = isInDocumentHost ?
+          this.renderTabGroup(p, isFloating, true) :
+          this.renderContentPane(p, isFloating, false);
       }
       else if (p.type === locale.IgcDockManagerPaneType.documentHost) {
         paneComponent = this.renderDocumentHost(p);
@@ -3489,9 +3382,6 @@ 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;
@@ -3563,9 +3453,6 @@ 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;
-    if (this.dropTargetPaneInfo && this.dropTargetPaneInfo.pane.type == "splitPane" && this.dropTargetPaneInfo.pane.ignoreResizeConstraints) {
-      return;
-    }
     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: {
@@ -3630,12 +3517,11 @@ const IgcDocumentHostComponent = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.size = undefined;
-    this.parentIgnoreResizeConstraints = false;
   }
   render() {
     const size = this.size || this.size === 0 ? this.size : IGC_DEFAULT_PANE_SIZE;
     return (index.h(index.Host, { role: "group", style: {
-        flex: this.parentIgnoreResizeConstraints ? `0 0 ${size}px` : `${size} 1 ${size}px`
+        flex: `${size} 1 ${size}px`
       } }));
   }
 };
@@ -4437,8 +4323,6 @@ const IgcSplitPaneComponent = class {
     this.rendered = index.createEvent(this, "rendered", 7);
     this.orientation = undefined;
     this.size = undefined;
-    this.ignoreResizeConstraints = false;
-    this.parentIgnoreResizeConstraints = false;
   }
   componentDidRender() {
     this.rendered.emit();
@@ -4447,7 +4331,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: this.parentIgnoreResizeConstraints ? `0 0 ${size}px` : `${size} 1 ${size}px`
+        flex: `${size} 1 ${size}px`
       }, part: "split-pane" }));
   }
 };
@@ -4499,7 +4383,6 @@ const IgcSplitterComponent = class {
     this.showDragGhost = undefined;
     this.splitPaneOrientation = undefined;
     this.flyoutLocation = undefined;
-    this.parentIgnoreResizeConstraints = false;
   }
   connectedCallback() {
     this.dragService = new IgcDragService(this.element);
@@ -4625,17 +4508,15 @@ const IgcSplitterComponent = class {
       }
     }
     else {
-      if (!this.parentIgnoreResizeConstraints) {
-        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;
+      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;
+      }
     }
   }
   closestElement(selector, el) {
@@ -4916,7 +4797,6 @@ const IgcTabsComponent = class {
     this.showHiddenTabsMenu = true;
     this.resourceStrings = undefined;
     this.contentIds = [];
-    this.parentIgnoreResizeConstraints = false;
   }
   selectedIndexPropertyChanged(newValue) {
     this.handleSelectedIndexChanged(newValue);
@@ -5041,6 +4921,10 @@ const IgcTabsComponent = class {
         this.selectedIndex = activeTabIndex;
       }
     }
+    // When a single pane is visible in the tab group pane, the tabHeaders array is empty but we still need to have that one pane selected. #https://github.com/IgniteUI/igniteui-dockmanager/issues/103
+    else if (this.tabPanels.length === 1) {
+      this.selectedIndex = 0;
+    }
   }
   handleHiddenTabsMenuClick(ev) {
     const button = ev.currentTarget;
@@ -5112,7 +4996,7 @@ const IgcTabsComponent = class {
       bottom
     }, ',');
     return (index.h(index.Host, { role: "tablist", style: {
-        flex: this.parentIgnoreResizeConstraints ? `0 0 ${size}px` : `${size} 1 ${size}px`
+        flex: `${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); }
@@ -5151,7 +5035,7 @@ const IgcUnpinnedPaneHeaderComponent = class {
 };
 IgcUnpinnedPaneHeaderComponent.style = unpinnedPaneHeaderComponentCss;
 
-const sampleComponentCss = ".sc-sample-component-h{display:flex;flex-direction:column;height:100%}igc-dockmanager.sc-sample-component{margin:10px;border:1px solid black}";
+const sampleComponentCss = ".sc-sample-component-h{display:flex;flex-direction:column;height:100%}";
 
 /**
  * @hidden
@@ -5476,570 +5360,128 @@ const SampleComponent = class {
     };
     this.layout3 = {
       rootPane: {
-        type: locale.IgcDockManagerPaneType.splitPane,
-        orientation: locale.IgcSplitPaneOrientation.horizontal,
-        ignoreResizeConstraints: true,
-        panes: [
-          // {
-          //   type: IgcDockManagerPaneType.splitPane,
-          //   ignoreResizeConstraints: 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,
-                ignoreResizeConstraints: 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,
-      //   ignoreResizeConstraints: true,
-      //   // size: 950, // PIXELS
-      //   floatingHeight: 950,
-      //   floatingWidth: 650,
-      //   floatingLocation: { x: 200, y: 50 },
-      //   panes: [
-      //     {
-      //       type: IgcDockManagerPaneType.splitPane,
-      //       orientation: IgcSplitPaneOrientation.horizontal,
-      //       ignoreResizeConstraints: 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,
-      //       ignoreResizeConstraints: 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.bodyWidth = document.body.getBoundingClientRect().width;
-    this.layout4 = {
-      rootPane: {
-        type: locale.IgcDockManagerPaneType.splitPane,
-        orientation: locale.IgcSplitPaneOrientation.horizontal,
-        panes: [
-          {
-            type: locale.IgcDockManagerPaneType.splitPane,
-            orientation: locale.IgcSplitPaneOrientation.vertical,
-            ignoreResizeConstraints: 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,
-                ignoreResizeConstraints: 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
-                      },
-                    ],
-                  },
-                  // {
-                  //   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: {
+        id: "root",
         type: locale.IgcDockManagerPaneType.splitPane,
         orientation: locale.IgcSplitPaneOrientation.horizontal,
         panes: [
           {
             type: locale.IgcDockManagerPaneType.splitPane,
             orientation: locale.IgcSplitPaneOrientation.vertical,
-            ignoreResizeConstraints: true,
-            size: this.bodyWidth,
+            size: 300,
+            allowEmpty: true,
             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,
-                ignoreResizeConstraints: 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),
-                ],
+                header: '1',
+                contentId: 'content1'
               },
               {
                 type: locale.IgcDockManagerPaneType.contentPane,
-                contentId: 'content4',
-                header: 'Content 4 Header',
-                size: 290, // PIXELS
+                header: '2',
+                contentId: 'content2'
               },
-              {
-                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: [],
-    };
-    this.layout6 = {
-      rootPane: {
-        type: locale.IgcDockManagerPaneType.splitPane,
-        orientation: locale.IgcSplitPaneOrientation.vertical,
-        ignoreResizeConstraints: true,
-        size: 1,
-        panes: [
-          {
-            type: locale.IgcDockManagerPaneType.splitPane,
-            orientation: locale.IgcSplitPaneOrientation.vertical,
-            size: 200,
-            panes: [
-              {
-                type: locale.IgcDockManagerPaneType.contentPane,
-                contentId: "content1",
-                header: "Content Pane 1"
-              }
-            ]
-          },
-          {
-            type: locale.IgcDockManagerPaneType.splitPane,
-            orientation: locale.IgcSplitPaneOrientation.vertical,
-            size: 400,
-            panes: [
               {
                 type: locale.IgcDockManagerPaneType.contentPane,
-                contentId: "content2",
-                header: "Content Pane 2"
+                header: '3',
+                contentId: 'content3'
               }
             ]
           }
         ]
-      },
-      floatingPanes: [],
+      }
     };
-    this.layout = this.layout1;
+    this.layout = this.layout3;
     this.logEnabled = false;
+    this.id = 100;
+    this.foundElem = [];
     this.hiddenPanes = [];
   }
-  // private hideOnCloseCheckbox: HTMLInputElement;
-  /*
-  private hiddenPanesSelect: HTMLSelectElement;
-  private savedLayout: string;
-
-  private saveLayout() {
+  saveLayout() {
     this.savedLayout = JSON.stringify(this.dockManager.layout);
   }
-
-  private loadLayout() {
+  loadLayout() {
     this.dockManager.layout = JSON.parse(this.savedLayout);
   }
-
-  private setActivePane() {
+  setActivePane() {
     // this.dockManager.activePane = this.teamExplorerPane;
     this.dockManager.activePane = this.unpinnedToolboxPane;
   }
-
-  private id = 100;
-  private newId: string;
-
-  private addPane() {
+  addPane() {
     this.newId = `content${this.id++}`;
     const newDiv = this.createElement(this.newId, 'input');
     this.dockManager.appendChild(newDiv);
-
     this.layout.floatingPanes[1].panes.push({
-      type: IgcDockManagerPaneType.contentPane,
+      type: locale.IgcDockManagerPaneType.contentPane,
       header: 'NewPane',
       contentId: this.newId
     });
-
-    this.dockManager.layout = { ...this.layout };
+    this.dockManager.layout = Object.assign({}, this.layout);
   }
-
-  private addTab() {
-    this.findElement(this.layout.rootPane, IgcDockManagerPaneType.tabGroupPane);
-
+  addTab() {
+    this.findElement(this.layout.rootPane, locale.IgcDockManagerPaneType.tabGroupPane);
     this.newId = `content${this.id++}`;
     const newDiv = this.createElement(this.newId, 'button');
     this.dockManager.appendChild(newDiv);
-
-    const tabGroupPane = this.foundElem[0] as IgcTabGroupPane;
+    const tabGroupPane = this.foundElem[0];
     tabGroupPane.panes.push({
-      type: IgcDockManagerPaneType.contentPane,
+      type: locale.IgcDockManagerPaneType.contentPane,
       header: 'NewTab',
       contentId: this.newId
     });
-
-    this.dockManager.layout = { ...this.layout };
+    this.dockManager.layout = Object.assign({}, this.layout);
   }
-
-  private disableContentPane() {
-    this.findElement(this.layout.rootPane, IgcDockManagerPaneType.tabGroupPane);
-
-    const tabGroupPane = this.foundElem[0] as IgcTabGroupPane;
+  disableContentPane() {
+    this.findElement(this.layout.rootPane, locale.IgcDockManagerPaneType.tabGroupPane);
+    const tabGroupPane = this.foundElem[0];
     tabGroupPane.panes[0].disabled = true;
-    this.dockManager.layout = { ...this.layout };
+    this.dockManager.layout = Object.assign({}, this.layout);
   }
-
-  private toggleProximityDock() {
+  toggleProximityDock() {
     this.dockManager.proximityDock = !this.dockManager.proximityDock;
   }
-
-  private focusPane() {
+  focusPane() {
     this.dockManager.focusPane('content12');
   }
-
-  private foundElem: IgcDockManagerPane[] = [];
-  private findElement(pane: IgcDockManagerPane, type: IgcDockManagerPaneType) {
-    if (!pane) { return; }
-
+  findElement(pane, type) {
+    if (!pane) {
+      return;
+    }
     if (pane.type === type) {
       this.foundElem.push(pane);
     }
-
-    if (pane.type === IgcDockManagerPaneType.tabGroupPane || pane.type === IgcDockManagerPaneType.splitPane) {
+    if (pane.type === locale.IgcDockManagerPaneType.tabGroupPane || pane.type === locale.IgcDockManagerPaneType.splitPane) {
       for (const c of pane.panes) {
         this.findElement(c, type);
       }
     }
-
-    if (pane.type === IgcDockManagerPaneType.documentHost) {
+    if (pane.type === locale.IgcDockManagerPaneType.documentHost) {
       this.findElement(pane.rootPane, type);
     }
   }
-
-  private showPane() {
+  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 = { ...this.dockManager.layout };
+      this.dockManager.layout = Object.assign({}, this.dockManager.layout);
     }
   }
-
-  private showAllPanes() {
+  showAllPanes() {
     if (this.hiddenPanes.length > 0) {
       for (const pane of this.hiddenPanes) {
         pane.hidden = false;
       }
       this.hiddenPanes = [];
-      this.dockManager.layout = { ...this.dockManager.layout };
+      this.dockManager.layout = Object.assign({}, this.dockManager.layout);
     }
   }
-
-  private toggleInBoundaries() {
+  toggleInBoundaries() {
     this.dockManager.containedInBoundaries = !this.dockManager.containedInBoundaries;
   }
-
-  // private toggleIgnoreResizeConstraints() {
-  //   this.dockManager.ignoreResizeConstraints = !this.dockManager.ignoreResizeConstraints;
-  // }
-
-  private createElement(content: string, typeOfElement: string): HTMLElement {
+  createElement(content, typeOfElement) {
     const someContent = document.createTextNode(content);
-    let elem: HTMLElement;
+    let elem;
     switch (typeOfElement) {
       case ('button'):
         elem = document.createElement('button');
@@ -6049,25 +5491,22 @@ 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]];
@@ -6149,11 +5588,13 @@ const SampleComponent = class {
     }
   }
   render() {
-    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),
+    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),
       // 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("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" }))));
+      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")))));
   }
 };
 SampleComponent.style = sampleComponentCss;