igniteui-dockmanager 1.11.3 → 1.12.0-beta.0

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 1.12.0
+
+### Bug fixes
+- Docking not working with allowFloating: false [#40](https://github.com/IgniteUI/igniteui-dockmanager/issues/40)
+- Flyout pane closing while active [#41](https://github.com/IgniteUI/igniteui-dockmanager/issues/41)
+- Focusable elements does not receive focus [#42](https://github.com/IgniteUI/igniteui-dockmanager/issues/42)
+- Navigating with pane navigator does not bring selected floating window on top [#48](https://github.com/IgniteUI/igniteui-dockmanager/issues/48)
+- Event `splitterResizeStart` can't be cancelled
+- Tabs context menu not positioning correctly
+
+## 1.11.3
+
+### New features
+- Add `contextMenuPosition` property
+- Add `selected` option for `tab-header-close-button` CSS part
+
+## 1.11.2
+
+### New features
+- Add `hovered` option for `tab-header-close-button` CSS part
+
+## 1.11.1
+
+### Bug fixes
+- CSS part fixes for `tab-header`
+
 ## 1.11.0
 
 ### New features

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

@@ -158,15 +158,29 @@ let IgcContextMenuComponent = class {
   componentDidLoad() {
     const menuItemsDivRect = this.menuItemsDiv.getBoundingClientRect();
     const hostRect = this.elem.getBoundingClientRect();
-    const tabRect = this.target.getRootNode().host.getBoundingClientRect();
-    const isRTL = tabRect.right - menuItemsDivRect.right <= 0;
-    const menuToBottom = tabRect.top - menuItemsDivRect.top + tabRect.height;
-    const menuToTop = tabRect.top - menuItemsDivRect.height - menuItemsDivRect.top;
-    const menuToStart = isRTL ? tabRect.right - menuItemsDivRect.width : tabRect.left;
-    const menuToEnd = isRTL ? tabRect.left : tabRect.right - menuItemsDivRect.width;
-    const menuToCenter = tabRect.left + (tabRect.width - menuItemsDivRect.width) / 2;
+    const rootNodeShadowHost = this.target.getRootNode();
+    const rootHostRect = rootNodeShadowHost.host.getBoundingClientRect();
+    const isTabs = rootNodeShadowHost.host.tagName.toLowerCase() === 'igc-tab-header-component';
+    const tabsContentHost = isTabs ? rootNodeShadowHost.host.parentElement.shadowRoot : rootNodeShadowHost;
+    const tabRect = tabsContentHost.host.getBoundingClientRect();
+    const tabsContentRect = tabsContentHost.querySelector('div[part~="tabs-content"]').getBoundingClientRect();
+    const tabStripArea = tabsContentHost.querySelector('div[part~="tab-strip-area"]').getBoundingClientRect();
+    const isRTL = rootHostRect.right - menuItemsDivRect.right <= 0;
+    const shouldChangeOpenOrientation = tabRect.bottom + menuItemsDivRect.height >= window.innerHeight
+      || tabRect.height + menuItemsDivRect.height >= window.innerHeight;
+    const menuToBottom = shouldChangeOpenOrientation
+      ? tabsContentRect.top + (tabsContentRect.height - menuItemsDivRect.bottom)
+      : rootHostRect.top - menuItemsDivRect.top + rootHostRect.height;
+    const menuToTop = tabStripArea.height + (menuItemsDivRect.top - rootHostRect.top);
+    const menuToStart = isRTL ? rootHostRect.right - menuItemsDivRect.width : rootHostRect.left;
+    const menuToEnd = isRTL ? rootHostRect.left : rootHostRect.right - menuItemsDivRect.width;
+    const menuToCenter = rootHostRect.left + (rootHostRect.width - menuItemsDivRect.width) / 2;
     let menuLeft = !isRTL ? menuToStart : menuToEnd;
-    let menuTop = this.orientation === IgcContextMenuOrientation.bottom ? menuToBottom : menuToTop;
+    let menuTop = this.orientation === IgcContextMenuOrientation.bottom
+      ? isTabs
+        ? menuToBottom
+        : menuToTop
+      : menuToBottom;
     const menuBottom = menuTop + menuItemsDivRect.height;
     menuTop = menuTop >= 0 ? menuTop : menuToBottom;
     switch (this.position) {
@@ -174,10 +188,10 @@ let IgcContextMenuComponent = class {
         menuLeft = menuToStart;
         break;
       case 'center':
-        menuLeft = tabRect.width > menuItemsDivRect.width && menuToCenter;
+        menuLeft = rootHostRect.width > menuItemsDivRect.width && menuToCenter;
         break;
       case 'stretch':
-        this.menuItemsDiv.style.width = tabRect.width > menuItemsDivRect.width && `${tabRect.width}px`;
+        this.menuItemsDiv.style.width = rootHostRect.width > menuItemsDivRect.width && `${rootHostRect.width}px`;
         break;
       case 'end':
       default:
@@ -186,6 +200,7 @@ let IgcContextMenuComponent = class {
     if (this.orientation === IgcContextMenuOrientation.bottom && menuBottom > hostRect.height) {
       menuTop = menuToTop;
     }
+    menuLeft = menuLeft - menuItemsDivRect.left;
     this.menuItemsDiv.style.left = `${menuLeft}px`;
     this.menuItemsDiv.style.top = `${menuTop}px`;
     this.menuItemsDiv.style.visibility = 'visible';
@@ -1794,6 +1809,7 @@ let IgcDockManager = class {
     this.scheduledCallbacks = [];
     this.shouldClearActivePane = true;
     this.isDragging = false;
+    this.splitterOffset = 1;
     this.templatableComponents = [
       {
         slot: 'paneHeaderCloseButton',
@@ -1970,9 +1986,7 @@ let IgcDockManager = class {
   activePaneChange(newValue, oldValue) {
     var _a;
     const args = { newPane: newValue, oldPane: oldValue };
-    if (this.flyoutPane &&
-      newValue !== this.flyoutPane &&
-      (!newValue || newValue.isPinned !== false || this.activePaneInternalSet)) {
+    if (this.flyoutPane && newValue && newValue !== this.flyoutPane) {
       this.service.flyoutPane(this.flyoutPane);
     }
     this.activePaneChanged.emit(args);
@@ -2239,8 +2253,17 @@ let IgcDockManager = class {
     this.service.resizeFlyoutPane(event.detail);
     this.splitterResizeEnd.emit();
   }
-  handleSplitterResizeStart() {
-    this.splitterResizeStart.emit();
+  handleSplitterResizeStart(event) {
+    const splitter = event.target;
+    const resizeStartEvent = this.splitterResizeStart.emit();
+    if (resizeStartEvent.defaultPrevented) {
+      this.splitterOffset = 0;
+      splitter.showDragGhost = false;
+    }
+    else {
+      this.splitterOffset = 1;
+      splitter.showDragGhost = true;
+    }
   }
   handleSplitterResizeEnd(parentPane, pane, event) {
     const splitter = event.target;
@@ -2249,7 +2272,7 @@ let IgcDockManager = class {
     const paneComponents = splitPaneChildren.filter(c => c.tagName.toLowerCase() !== 'igc-splitter-component');
     const sizeProperty = parentPane.orientation === locale.IgcSplitPaneOrientation.horizontal ? 'offsetWidth' : 'offsetHeight';
     const sizeSum = paneComponents.reduce((s, p) => p[sizeProperty] + s, 0);
-    let offsetPercentage = event.detail / sizeSum;
+    let offsetPercentage = this.splitterOffset * event.detail / sizeSum;
     let rtl = false;
     if (this.element.dir !== '') {
       rtl = this.element.dir === 'rtl';
@@ -2531,8 +2554,10 @@ let IgcDockManager = class {
       if ((!this.dropTargetPaneInfo || this.dropTargetPaneInfo.pane !== dropPane) && dropPane !== this.draggedPane) {
         const docHost = this.service.getDocHostParent(dropPane);
         const dropPaneRoot = this.service.getRootParent(dropPane);
-        const floatingPaneWithoutDocHost = this.layout.floatingPanes.indexOf(dropPaneRoot) !== -1 &&
-          !this.service.getChildDocHostRecursive(dropPaneRoot);
+        const floatingPaneWithoutDocHost = this.layout.floatingPanes
+          ? this.layout.floatingPanes.indexOf(dropPaneRoot) !== -1 &&
+            !this.service.getChildDocHostRecursive(dropPaneRoot)
+          : false;
         if (!this.documentOnlyDrag
           || docHost
           || floatingPaneWithoutDocHost
@@ -2628,8 +2653,11 @@ let IgcDockManager = class {
       if (!targetPane) {
         targetPane = pane.panes[0];
       }
-      this.setActivePane(targetPane);
-      this.setFocus(targetPane);
+      const nodeName = event.target.nodeName.toLowerCase();
+      if (nodeName === 'igc-dockmanager') {
+        this.setActivePane(targetPane);
+        this.setFocus(targetPane);
+      }
       this.contentPaneId = targetPane.contentId;
     });
   }
@@ -2914,6 +2942,11 @@ let IgcDockManager = class {
   }
   handlePaneNavigatorClosed(ev) {
     this.service.normalizeMaximizedPane(ev.detail);
+    const parent = this.service.getRootParent(ev.detail);
+    const isParentFloating = this.service.isFloatingPane(parent);
+    if (isParentFloating) {
+      this.service.bringFloatingPaneOnTop(parent);
+    }
     if (ev.detail && this.activePane !== ev.detail) {
       this.activePane = ev.detail;
     }
@@ -3726,6 +3759,9 @@ let IgcSplitterComponent = class {
       this.dragEndHelper();
     };
     this.dragMove = (args) => {
+      if (!this.ghostElement) {
+        return;
+      }
       const rect = this.ghostElement.getBoundingClientRect();
       const isHorizontal = this.splitPaneOrientation === locale.IgcSplitPaneOrientation.horizontal;
       const clientCoordinate = isHorizontal ? args.clientX : args.clientY;
@@ -4814,6 +4850,10 @@ let SampleComponent = class {
   handleDragEnd(event) {
     this.log(event);
   }
+  handleSplitterResizeStart(event) {
+    this.log(event, Object.assign({}, event.detail));
+    // event.preventDefault();
+  }
   handleFloatingPaneResizeStart(event) {
     this.log(event, Object.assign({}, event.detail));
     // event.preventDefault();
@@ -4846,7 +4886,7 @@ let SampleComponent = class {
   render() {
     return (index.h(index.Host, null, index.h("div", null, 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("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("igc-dockmanager", { layout: this.layout, onPaneClose: this.handlePaneClose.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), onFloatingPaneResizeStart: this.handleFloatingPaneResizeStart.bind(this), onFloatingPaneResizeMove: this.handleFloatingPaneResizeMove.bind(this), onFloatingPaneResizeEnd: this.handleFloatingPaneResizeEnd.bind(this), onLayoutChange: this.handleLayoutChange.bind(this),
+    })), index.h("button", { onClick: () => this.showPane() }, "Show Pane"), index.h("button", { onClick: () => this.showAllPanes() }, "Show All Panes")), index.h("igc-dockmanager", { layout: this.layout, onPaneClose: this.handlePaneClose.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), 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}

package/dist/cjs/igniteui-dockmanager.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["igc-button-component_20.cjs",[[2,"sample-component",{"hiddenPanes":[1040]}],[1,"igc-dockmanager",{"navigationPaneMeta":[1040],"allowMaximize":[4,"allow-maximize"],"showHeaderIconOnHover":[1,"show-header-icon-on-hover"],"maximizedPane":[1040],"resourceStrings":[1040],"allowFloatingPanesResize":[4,"allow-floating-panes-resize"],"disableKeyboardNavigation":[4,"disable-keyboard-navigation"],"contextMenuPosition":[1,"context-menu-position"],"layout":[1040],"draggedPane":[1040],"dropPosition":[16],"activePane":[1040],"dropTargetPaneInfo":[32],"flyoutPane":[32],"floatingPaneZIndicesMap":[32],"contextMenuMeta":[32],"dropShadowRect":[32],"templates":[32],"hasCustomMaximizeButton":[32],"hasCustomMinimizeButton":[32],"dropPane":[64],"removePane":[64]},[[0,"focusout","handleFocusOut"],[0,"keydown","handleKeyDown"],[1,"pointerdown","handlePointerDown"],[1,"pointerup","handlePointerUp"]]],[1,"igc-tabs-component",{"size":[2],"maximized":[4],"allowMaximize":[4,"allow-maximize"],"tabHeadersPosition":[1,"tab-headers-position"],"selectedIndex":[1026,"selected-index"],"hasHeaders":[4,"has-headers"],"showHiddenTabsMenu":[4,"show-hidden-tabs-menu"],"resourceStrings":[16],"hiddenTabsMenuMeta":[32],"hasHiddenTabs":[32]},[[0,"tabMouseDown","handleTabMouseDown"]]],[2,"igc-joystick-indicator-component",{"dropTargetPaneInfo":[16],"documentOnlyDrag":[4,"document-only-drag"]}],[1,"igc-pane-header-component",{"dragService":[1040],"pinned":[4],"maximized":[4],"isFloating":[4,"is-floating"],"forcedDrag":[4,"forced-drag"],"isFloatingPaneHeader":[4,"is-floating-pane-header"],"allowClose":[4,"allow-close"],"allowMaximize":[4,"allow-maximize"],"allowPinning":[4,"allow-pinning"],"pane":[16],"isActive":[4,"is-active"],"disabled":[4],"resourceStrings":[16]}],[1,"igc-tab-header-component",{"dragService":[1040],"selected":[4],"hovered":[4],"position":[1],"iconName":[1,"icon-name"],"header":[1],"isActive":[4,"is-active"],"resourceStrings":[16],"forcedDrag":[4,"forced-drag"],"disabled":[4],"showHeaderIconOnHover":[1,"show-header-icon-on-hover"]},[[1,"mousedown","handleMouseDown"],[1,"mouseenter","handleMouseEnter"],[1,"mouseleave","handleMouseLeave"]]],[1,"igc-floating-pane-component",{"allowResize":[4,"allow-resize"],"floatingLocation":[16],"floatingWidth":[2,"floating-width"],"floatingHeight":[2,"floating-height"],"hasHeader":[4,"has-header"],"maximized":[4],"floatingMinHeight":[2,"floating-min-height"],"floatingMinWidth":[2,"floating-min-width"],"floatingId":[1,"floating-id"]}],[2,"igc-root-docking-indicator-component",{"position":[1]}],[1,"igc-content-pane-component",{"size":[2],"isFlyout":[4,"is-flyout"],"unpinnedSize":[2,"unpinned-size"],"header":[1],"disabled":[4],"isSingleFloating":[4,"is-single-floating"]}],[2,"igc-document-host-component",{"size":[2]}],[1,"igc-pane-navigator-component",{"activeDocuments":[16],"activePanes":[16],"selectedIndex":[1026,"selected-index"],"previousActivePaneIndex":[2,"previous-active-pane-index"],"resourceStrings":[16]},[[0,"keyup","handleKeyUp"],[0,"keydown","handleKeydown"]]],[2,"igc-split-pane-component",{"orientation":[1],"size":[2]}],[1,"igc-splitter-component",{"splitPaneOrientation":[1,"split-pane-orientation"],"flyoutLocation":[1,"flyout-location"],"showDragGhost":[32],"dragOffset":[32],"hasCustomSplitterHandle":[32]},[[0,"keydown","handleKeydownEvent"],[1,"mousedown","handleMouseDown"]]],[1,"igc-tab-panel-component",{"selected":[4],"disabled":[4]}],[1,"igc-unpinned-pane-header-component",{"location":[1],"isActive":[4,"is-active"],"disabled":[4]}],[1,"igc-context-menu-component",{"orientation":[1],"position":[1],"target":[16],"items":[16],"activeIndex":[1026,"active-index"]},[[0,"focusout","emitMenuClosed"]]],[2,"igc-joystick-icon-component",{"isDocHost":[4,"is-doc-host"],"position":[1],"empty":[4]}],[2,"igc-resizer-component",{"orientation":[1],"dragOffsetX":[32],"dragOffsetY":[32]}],[1,"igc-button-component",{"disabled":[4],"name":[513],"type":[513],"value":[513]}],[2,"igc-icon-component",{"name":[1]}]]]], options);
+  return index.bootstrapLazy([["igc-button-component_20.cjs",[[2,"sample-component",{"hiddenPanes":[1040]}],[1,"igc-dockmanager",{"navigationPaneMeta":[1040],"allowMaximize":[4,"allow-maximize"],"showHeaderIconOnHover":[1,"show-header-icon-on-hover"],"maximizedPane":[1040],"resourceStrings":[1040],"allowFloatingPanesResize":[4,"allow-floating-panes-resize"],"disableKeyboardNavigation":[4,"disable-keyboard-navigation"],"contextMenuPosition":[1,"context-menu-position"],"layout":[1040],"draggedPane":[1040],"dropPosition":[16],"activePane":[1040],"dropTargetPaneInfo":[32],"flyoutPane":[32],"floatingPaneZIndicesMap":[32],"contextMenuMeta":[32],"dropShadowRect":[32],"templates":[32],"hasCustomMaximizeButton":[32],"hasCustomMinimizeButton":[32],"dropPane":[64],"removePane":[64]},[[0,"focusout","handleFocusOut"],[0,"keydown","handleKeyDown"],[1,"pointerdown","handlePointerDown"],[1,"pointerup","handlePointerUp"]]],[1,"igc-tabs-component",{"size":[2],"maximized":[4],"allowMaximize":[4,"allow-maximize"],"tabHeadersPosition":[1,"tab-headers-position"],"selectedIndex":[1026,"selected-index"],"hasHeaders":[4,"has-headers"],"showHiddenTabsMenu":[4,"show-hidden-tabs-menu"],"resourceStrings":[16],"hiddenTabsMenuMeta":[32],"hasHiddenTabs":[32]},[[0,"tabMouseDown","handleTabMouseDown"]]],[2,"igc-joystick-indicator-component",{"dropTargetPaneInfo":[16],"documentOnlyDrag":[4,"document-only-drag"]}],[1,"igc-pane-header-component",{"dragService":[1040],"pinned":[4],"maximized":[4],"isFloating":[4,"is-floating"],"forcedDrag":[4,"forced-drag"],"isFloatingPaneHeader":[4,"is-floating-pane-header"],"allowClose":[4,"allow-close"],"allowMaximize":[4,"allow-maximize"],"allowPinning":[4,"allow-pinning"],"pane":[16],"isActive":[4,"is-active"],"disabled":[4],"resourceStrings":[16]}],[1,"igc-tab-header-component",{"dragService":[1040],"selected":[4],"hovered":[4],"position":[1],"iconName":[1,"icon-name"],"header":[1],"isActive":[4,"is-active"],"resourceStrings":[16],"forcedDrag":[4,"forced-drag"],"disabled":[4],"showHeaderIconOnHover":[1,"show-header-icon-on-hover"]},[[1,"mousedown","handleMouseDown"],[1,"mouseenter","handleMouseEnter"],[1,"mouseleave","handleMouseLeave"]]],[1,"igc-floating-pane-component",{"allowResize":[4,"allow-resize"],"floatingLocation":[16],"floatingWidth":[2,"floating-width"],"floatingHeight":[2,"floating-height"],"hasHeader":[4,"has-header"],"maximized":[4],"floatingMinHeight":[2,"floating-min-height"],"floatingMinWidth":[2,"floating-min-width"],"floatingId":[1,"floating-id"]}],[2,"igc-root-docking-indicator-component",{"position":[1]}],[1,"igc-content-pane-component",{"size":[2],"isFlyout":[4,"is-flyout"],"unpinnedSize":[2,"unpinned-size"],"header":[1],"disabled":[4],"isSingleFloating":[4,"is-single-floating"]}],[2,"igc-document-host-component",{"size":[2]}],[1,"igc-pane-navigator-component",{"activeDocuments":[16],"activePanes":[16],"selectedIndex":[1026,"selected-index"],"previousActivePaneIndex":[2,"previous-active-pane-index"],"resourceStrings":[16]},[[0,"keyup","handleKeyUp"],[0,"keydown","handleKeydown"]]],[2,"igc-split-pane-component",{"orientation":[1],"size":[2]}],[1,"igc-splitter-component",{"showDragGhost":[4,"show-drag-ghost"],"splitPaneOrientation":[1,"split-pane-orientation"],"flyoutLocation":[1,"flyout-location"],"dragOffset":[32],"hasCustomSplitterHandle":[32]},[[0,"keydown","handleKeydownEvent"],[1,"mousedown","handleMouseDown"]]],[1,"igc-tab-panel-component",{"selected":[4],"disabled":[4]}],[1,"igc-unpinned-pane-header-component",{"location":[1],"isActive":[4,"is-active"],"disabled":[4]}],[1,"igc-context-menu-component",{"orientation":[1],"position":[1],"target":[16],"items":[16],"activeIndex":[1026,"active-index"]},[[0,"focusout","emitMenuClosed"]]],[2,"igc-joystick-icon-component",{"isDocHost":[4,"is-doc-host"],"position":[1],"empty":[4]}],[2,"igc-resizer-component",{"orientation":[1],"dragOffsetX":[32],"dragOffsetY":[32]}],[1,"igc-button-component",{"disabled":[4],"name":[513],"type":[513],"value":[513]}],[2,"igc-icon-component",{"name":[1]}]]]], options);
 });

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["igc-button-component_20.cjs",[[2,"sample-component",{"hiddenPanes":[1040]}],[1,"igc-dockmanager",{"navigationPaneMeta":[1040],"allowMaximize":[4,"allow-maximize"],"showHeaderIconOnHover":[1,"show-header-icon-on-hover"],"maximizedPane":[1040],"resourceStrings":[1040],"allowFloatingPanesResize":[4,"allow-floating-panes-resize"],"disableKeyboardNavigation":[4,"disable-keyboard-navigation"],"contextMenuPosition":[1,"context-menu-position"],"layout":[1040],"draggedPane":[1040],"dropPosition":[16],"activePane":[1040],"dropTargetPaneInfo":[32],"flyoutPane":[32],"floatingPaneZIndicesMap":[32],"contextMenuMeta":[32],"dropShadowRect":[32],"templates":[32],"hasCustomMaximizeButton":[32],"hasCustomMinimizeButton":[32],"dropPane":[64],"removePane":[64]},[[0,"focusout","handleFocusOut"],[0,"keydown","handleKeyDown"],[1,"pointerdown","handlePointerDown"],[1,"pointerup","handlePointerUp"]]],[1,"igc-tabs-component",{"size":[2],"maximized":[4],"allowMaximize":[4,"allow-maximize"],"tabHeadersPosition":[1,"tab-headers-position"],"selectedIndex":[1026,"selected-index"],"hasHeaders":[4,"has-headers"],"showHiddenTabsMenu":[4,"show-hidden-tabs-menu"],"resourceStrings":[16],"hiddenTabsMenuMeta":[32],"hasHiddenTabs":[32]},[[0,"tabMouseDown","handleTabMouseDown"]]],[2,"igc-joystick-indicator-component",{"dropTargetPaneInfo":[16],"documentOnlyDrag":[4,"document-only-drag"]}],[1,"igc-pane-header-component",{"dragService":[1040],"pinned":[4],"maximized":[4],"isFloating":[4,"is-floating"],"forcedDrag":[4,"forced-drag"],"isFloatingPaneHeader":[4,"is-floating-pane-header"],"allowClose":[4,"allow-close"],"allowMaximize":[4,"allow-maximize"],"allowPinning":[4,"allow-pinning"],"pane":[16],"isActive":[4,"is-active"],"disabled":[4],"resourceStrings":[16]}],[1,"igc-tab-header-component",{"dragService":[1040],"selected":[4],"hovered":[4],"position":[1],"iconName":[1,"icon-name"],"header":[1],"isActive":[4,"is-active"],"resourceStrings":[16],"forcedDrag":[4,"forced-drag"],"disabled":[4],"showHeaderIconOnHover":[1,"show-header-icon-on-hover"]},[[1,"mousedown","handleMouseDown"],[1,"mouseenter","handleMouseEnter"],[1,"mouseleave","handleMouseLeave"]]],[1,"igc-floating-pane-component",{"allowResize":[4,"allow-resize"],"floatingLocation":[16],"floatingWidth":[2,"floating-width"],"floatingHeight":[2,"floating-height"],"hasHeader":[4,"has-header"],"maximized":[4],"floatingMinHeight":[2,"floating-min-height"],"floatingMinWidth":[2,"floating-min-width"],"floatingId":[1,"floating-id"]}],[2,"igc-root-docking-indicator-component",{"position":[1]}],[1,"igc-content-pane-component",{"size":[2],"isFlyout":[4,"is-flyout"],"unpinnedSize":[2,"unpinned-size"],"header":[1],"disabled":[4],"isSingleFloating":[4,"is-single-floating"]}],[2,"igc-document-host-component",{"size":[2]}],[1,"igc-pane-navigator-component",{"activeDocuments":[16],"activePanes":[16],"selectedIndex":[1026,"selected-index"],"previousActivePaneIndex":[2,"previous-active-pane-index"],"resourceStrings":[16]},[[0,"keyup","handleKeyUp"],[0,"keydown","handleKeydown"]]],[2,"igc-split-pane-component",{"orientation":[1],"size":[2]}],[1,"igc-splitter-component",{"splitPaneOrientation":[1,"split-pane-orientation"],"flyoutLocation":[1,"flyout-location"],"showDragGhost":[32],"dragOffset":[32],"hasCustomSplitterHandle":[32]},[[0,"keydown","handleKeydownEvent"],[1,"mousedown","handleMouseDown"]]],[1,"igc-tab-panel-component",{"selected":[4],"disabled":[4]}],[1,"igc-unpinned-pane-header-component",{"location":[1],"isActive":[4,"is-active"],"disabled":[4]}],[1,"igc-context-menu-component",{"orientation":[1],"position":[1],"target":[16],"items":[16],"activeIndex":[1026,"active-index"]},[[0,"focusout","emitMenuClosed"]]],[2,"igc-joystick-icon-component",{"isDocHost":[4,"is-doc-host"],"position":[1],"empty":[4]}],[2,"igc-resizer-component",{"orientation":[1],"dragOffsetX":[32],"dragOffsetY":[32]}],[1,"igc-button-component",{"disabled":[4],"name":[513],"type":[513],"value":[513]}],[2,"igc-icon-component",{"name":[1]}]]]], options);
+  return index.bootstrapLazy([["igc-button-component_20.cjs",[[2,"sample-component",{"hiddenPanes":[1040]}],[1,"igc-dockmanager",{"navigationPaneMeta":[1040],"allowMaximize":[4,"allow-maximize"],"showHeaderIconOnHover":[1,"show-header-icon-on-hover"],"maximizedPane":[1040],"resourceStrings":[1040],"allowFloatingPanesResize":[4,"allow-floating-panes-resize"],"disableKeyboardNavigation":[4,"disable-keyboard-navigation"],"contextMenuPosition":[1,"context-menu-position"],"layout":[1040],"draggedPane":[1040],"dropPosition":[16],"activePane":[1040],"dropTargetPaneInfo":[32],"flyoutPane":[32],"floatingPaneZIndicesMap":[32],"contextMenuMeta":[32],"dropShadowRect":[32],"templates":[32],"hasCustomMaximizeButton":[32],"hasCustomMinimizeButton":[32],"dropPane":[64],"removePane":[64]},[[0,"focusout","handleFocusOut"],[0,"keydown","handleKeyDown"],[1,"pointerdown","handlePointerDown"],[1,"pointerup","handlePointerUp"]]],[1,"igc-tabs-component",{"size":[2],"maximized":[4],"allowMaximize":[4,"allow-maximize"],"tabHeadersPosition":[1,"tab-headers-position"],"selectedIndex":[1026,"selected-index"],"hasHeaders":[4,"has-headers"],"showHiddenTabsMenu":[4,"show-hidden-tabs-menu"],"resourceStrings":[16],"hiddenTabsMenuMeta":[32],"hasHiddenTabs":[32]},[[0,"tabMouseDown","handleTabMouseDown"]]],[2,"igc-joystick-indicator-component",{"dropTargetPaneInfo":[16],"documentOnlyDrag":[4,"document-only-drag"]}],[1,"igc-pane-header-component",{"dragService":[1040],"pinned":[4],"maximized":[4],"isFloating":[4,"is-floating"],"forcedDrag":[4,"forced-drag"],"isFloatingPaneHeader":[4,"is-floating-pane-header"],"allowClose":[4,"allow-close"],"allowMaximize":[4,"allow-maximize"],"allowPinning":[4,"allow-pinning"],"pane":[16],"isActive":[4,"is-active"],"disabled":[4],"resourceStrings":[16]}],[1,"igc-tab-header-component",{"dragService":[1040],"selected":[4],"hovered":[4],"position":[1],"iconName":[1,"icon-name"],"header":[1],"isActive":[4,"is-active"],"resourceStrings":[16],"forcedDrag":[4,"forced-drag"],"disabled":[4],"showHeaderIconOnHover":[1,"show-header-icon-on-hover"]},[[1,"mousedown","handleMouseDown"],[1,"mouseenter","handleMouseEnter"],[1,"mouseleave","handleMouseLeave"]]],[1,"igc-floating-pane-component",{"allowResize":[4,"allow-resize"],"floatingLocation":[16],"floatingWidth":[2,"floating-width"],"floatingHeight":[2,"floating-height"],"hasHeader":[4,"has-header"],"maximized":[4],"floatingMinHeight":[2,"floating-min-height"],"floatingMinWidth":[2,"floating-min-width"],"floatingId":[1,"floating-id"]}],[2,"igc-root-docking-indicator-component",{"position":[1]}],[1,"igc-content-pane-component",{"size":[2],"isFlyout":[4,"is-flyout"],"unpinnedSize":[2,"unpinned-size"],"header":[1],"disabled":[4],"isSingleFloating":[4,"is-single-floating"]}],[2,"igc-document-host-component",{"size":[2]}],[1,"igc-pane-navigator-component",{"activeDocuments":[16],"activePanes":[16],"selectedIndex":[1026,"selected-index"],"previousActivePaneIndex":[2,"previous-active-pane-index"],"resourceStrings":[16]},[[0,"keyup","handleKeyUp"],[0,"keydown","handleKeydown"]]],[2,"igc-split-pane-component",{"orientation":[1],"size":[2]}],[1,"igc-splitter-component",{"showDragGhost":[4,"show-drag-ghost"],"splitPaneOrientation":[1,"split-pane-orientation"],"flyoutLocation":[1,"flyout-location"],"dragOffset":[32],"hasCustomSplitterHandle":[32]},[[0,"keydown","handleKeydownEvent"],[1,"mousedown","handleMouseDown"]]],[1,"igc-tab-panel-component",{"selected":[4],"disabled":[4]}],[1,"igc-unpinned-pane-header-component",{"location":[1],"isActive":[4,"is-active"],"disabled":[4]}],[1,"igc-context-menu-component",{"orientation":[1],"position":[1],"target":[16],"items":[16],"activeIndex":[1026,"active-index"]},[[0,"focusout","emitMenuClosed"]]],[2,"igc-joystick-icon-component",{"isDocHost":[4,"is-doc-host"],"position":[1],"empty":[4]}],[2,"igc-resizer-component",{"orientation":[1],"dragOffsetX":[32],"dragOffsetY":[32]}],[1,"igc-button-component",{"disabled":[4],"name":[513],"type":[513],"value":[513]}],[2,"igc-icon-component",{"name":[1]}]]]], options);
   });
 };
 

package/dist/collection/collection-manifest.json

@@ -2,6 +2,7 @@
   "entries": [
     "./components/button/button-component.js",
     "./components/context-menu/context-menu-component.js",
+    "./components/dockmanager/panes/splitter-component.js",
     "./components/dockmanager/dockmanager-component.js",
     "./components/dockmanager/docking/joystick-icon-component.js",
     "./components/dockmanager/docking/joystick-indicator-component.js",
@@ -13,7 +14,6 @@
     "./components/dockmanager/panes/pane-header-component.js",
     "./components/dockmanager/panes/resizer-component.js",
     "./components/dockmanager/panes/split-pane-component.js",
-    "./components/dockmanager/panes/splitter-component.js",
     "./components/dockmanager/panes/unpinned-pane-header-component.js",
     "./components/icon/icon-component.js",
     "./components/sample-component/sample-component.js",

package/dist/collection/components/context-menu/context-menu-component.js

@@ -31,15 +31,29 @@ export class IgcContextMenuComponent {
   componentDidLoad() {
     const menuItemsDivRect = this.menuItemsDiv.getBoundingClientRect();
     const hostRect = this.elem.getBoundingClientRect();
-    const tabRect = this.target.getRootNode().host.getBoundingClientRect();
-    const isRTL = tabRect.right - menuItemsDivRect.right <= 0;
-    const menuToBottom = tabRect.top - menuItemsDivRect.top + tabRect.height;
-    const menuToTop = tabRect.top - menuItemsDivRect.height - menuItemsDivRect.top;
-    const menuToStart = isRTL ? tabRect.right - menuItemsDivRect.width : tabRect.left;
-    const menuToEnd = isRTL ? tabRect.left : tabRect.right - menuItemsDivRect.width;
-    const menuToCenter = tabRect.left + (tabRect.width - menuItemsDivRect.width) / 2;
+    const rootNodeShadowHost = this.target.getRootNode();
+    const rootHostRect = rootNodeShadowHost.host.getBoundingClientRect();
+    const isTabs = rootNodeShadowHost.host.tagName.toLowerCase() === 'igc-tab-header-component';
+    const tabsContentHost = isTabs ? rootNodeShadowHost.host.parentElement.shadowRoot : rootNodeShadowHost;
+    const tabRect = tabsContentHost.host.getBoundingClientRect();
+    const tabsContentRect = tabsContentHost.querySelector('div[part~="tabs-content"]').getBoundingClientRect();
+    const tabStripArea = tabsContentHost.querySelector('div[part~="tab-strip-area"]').getBoundingClientRect();
+    const isRTL = rootHostRect.right - menuItemsDivRect.right <= 0;
+    const shouldChangeOpenOrientation = tabRect.bottom + menuItemsDivRect.height >= window.innerHeight
+      || tabRect.height + menuItemsDivRect.height >= window.innerHeight;
+    const menuToBottom = shouldChangeOpenOrientation
+      ? tabsContentRect.top + (tabsContentRect.height - menuItemsDivRect.bottom)
+      : rootHostRect.top - menuItemsDivRect.top + rootHostRect.height;
+    const menuToTop = tabStripArea.height + (menuItemsDivRect.top - rootHostRect.top);
+    const menuToStart = isRTL ? rootHostRect.right - menuItemsDivRect.width : rootHostRect.left;
+    const menuToEnd = isRTL ? rootHostRect.left : rootHostRect.right - menuItemsDivRect.width;
+    const menuToCenter = rootHostRect.left + (rootHostRect.width - menuItemsDivRect.width) / 2;
     let menuLeft = !isRTL ? menuToStart : menuToEnd;
-    let menuTop = this.orientation === IgcContextMenuOrientation.bottom ? menuToBottom : menuToTop;
+    let menuTop = this.orientation === IgcContextMenuOrientation.bottom
+      ? isTabs
+        ? menuToBottom
+        : menuToTop
+      : menuToBottom;
     const menuBottom = menuTop + menuItemsDivRect.height;
     menuTop = menuTop >= 0 ? menuTop : menuToBottom;
     switch (this.position) {
@@ -47,10 +61,10 @@ export class IgcContextMenuComponent {
         menuLeft = menuToStart;
         break;
       case 'center':
-        menuLeft = tabRect.width > menuItemsDivRect.width && menuToCenter;
+        menuLeft = rootHostRect.width > menuItemsDivRect.width && menuToCenter;
         break;
       case 'stretch':
-        this.menuItemsDiv.style.width = tabRect.width > menuItemsDivRect.width && `${tabRect.width}px`;
+        this.menuItemsDiv.style.width = rootHostRect.width > menuItemsDivRect.width && `${rootHostRect.width}px`;
         break;
       case 'end':
       default:
@@ -59,6 +73,7 @@ export class IgcContextMenuComponent {
     if (this.orientation === IgcContextMenuOrientation.bottom && menuBottom > hostRect.height) {
       menuTop = menuToTop;
     }
+    menuLeft = menuLeft - menuItemsDivRect.left;
     this.menuItemsDiv.style.left = `${menuLeft}px`;
     this.menuItemsDiv.style.top = `${menuTop}px`;
     this.menuItemsDiv.style.visibility = 'visible';

package/dist/collection/components/dockmanager/dockmanager-component.js

@@ -27,6 +27,7 @@ export class IgcDockManager {
     this.scheduledCallbacks = [];
     this.shouldClearActivePane = true;
     this.isDragging = false;
+    this.splitterOffset = 1;
     this.templatableComponents = [
       {
         slot: 'paneHeaderCloseButton',
@@ -203,9 +204,7 @@ export class IgcDockManager {
   activePaneChange(newValue, oldValue) {
     var _a;
     const args = { newPane: newValue, oldPane: oldValue };
-    if (this.flyoutPane &&
-      newValue !== this.flyoutPane &&
-      (!newValue || newValue.isPinned !== false || this.activePaneInternalSet)) {
+    if (this.flyoutPane && newValue && newValue !== this.flyoutPane) {
       this.service.flyoutPane(this.flyoutPane);
     }
     this.activePaneChanged.emit(args);
@@ -472,8 +471,17 @@ export class IgcDockManager {
     this.service.resizeFlyoutPane(event.detail);
     this.splitterResizeEnd.emit();
   }
-  handleSplitterResizeStart() {
-    this.splitterResizeStart.emit();
+  handleSplitterResizeStart(event) {
+    const splitter = event.target;
+    const resizeStartEvent = this.splitterResizeStart.emit();
+    if (resizeStartEvent.defaultPrevented) {
+      this.splitterOffset = 0;
+      splitter.showDragGhost = false;
+    }
+    else {
+      this.splitterOffset = 1;
+      splitter.showDragGhost = true;
+    }
   }
   handleSplitterResizeEnd(parentPane, pane, event) {
     const splitter = event.target;
@@ -482,7 +490,7 @@ export class IgcDockManager {
     const paneComponents = splitPaneChildren.filter(c => c.tagName.toLowerCase() !== 'igc-splitter-component');
     const sizeProperty = parentPane.orientation === IgcSplitPaneOrientation.horizontal ? 'offsetWidth' : 'offsetHeight';
     const sizeSum = paneComponents.reduce((s, p) => p[sizeProperty] + s, 0);
-    let offsetPercentage = event.detail / sizeSum;
+    let offsetPercentage = this.splitterOffset * event.detail / sizeSum;
     let rtl = false;
     if (this.element.dir !== '') {
       rtl = this.element.dir === 'rtl';
@@ -764,8 +772,10 @@ export class IgcDockManager {
       if ((!this.dropTargetPaneInfo || this.dropTargetPaneInfo.pane !== dropPane) && dropPane !== this.draggedPane) {
         const docHost = this.service.getDocHostParent(dropPane);
         const dropPaneRoot = this.service.getRootParent(dropPane);
-        const floatingPaneWithoutDocHost = this.layout.floatingPanes.indexOf(dropPaneRoot) !== -1 &&
-          !this.service.getChildDocHostRecursive(dropPaneRoot);
+        const floatingPaneWithoutDocHost = this.layout.floatingPanes
+          ? this.layout.floatingPanes.indexOf(dropPaneRoot) !== -1 &&
+            !this.service.getChildDocHostRecursive(dropPaneRoot)
+          : false;
         if (!this.documentOnlyDrag
           || docHost
           || floatingPaneWithoutDocHost
@@ -861,8 +871,11 @@ export class IgcDockManager {
       if (!targetPane) {
         targetPane = pane.panes[0];
       }
-      this.setActivePane(targetPane);
-      this.setFocus(targetPane);
+      const nodeName = event.target.nodeName.toLowerCase();
+      if (nodeName === 'igc-dockmanager') {
+        this.setActivePane(targetPane);
+        this.setFocus(targetPane);
+      }
       this.contentPaneId = targetPane.contentId;
     });
   }
@@ -1170,6 +1183,11 @@ export class IgcDockManager {
   }
   handlePaneNavigatorClosed(ev) {
     this.service.normalizeMaximizedPane(ev.detail);
+    const parent = this.service.getRootParent(ev.detail);
+    const isParentFloating = this.service.isFloatingPane(parent);
+    if (isParentFloating) {
+      this.service.bringFloatingPaneOnTop(parent);
+    }
     if (ev.detail && this.activePane !== ev.detail) {
       this.activePane = ev.detail;
     }

package/dist/collection/components/dockmanager/panes/splitter-component.js

@@ -19,6 +19,9 @@ export class IgcSplitterComponent {
       this.dragEndHelper();
     };
     this.dragMove = (args) => {
+      if (!this.ghostElement) {
+        return;
+      }
       const rect = this.ghostElement.getBoundingClientRect();
       const isHorizontal = this.splitPaneOrientation === IgcSplitPaneOrientation.horizontal;
       const clientCoordinate = isHorizontal ? args.clientX : args.clientY;
@@ -222,6 +225,23 @@ export class IgcSplitterComponent {
     "$": ["splitter-component.css"]
   }; }
   static get properties() { return {
+    "showDragGhost": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "show-drag-ghost",
+      "reflect": false
+    },
     "splitPaneOrientation": {
       "type": "string",
       "mutable": false,
@@ -268,7 +288,6 @@ export class IgcSplitterComponent {
     }
   }; }
   static get states() { return {
-    "showDragGhost": {},
     "dragOffset": {},
     "hasCustomSplitterHandle": {}
   }; }

package/dist/collection/components/sample-component/sample-component.js

@@ -468,6 +468,10 @@ export class SampleComponent {
   handleDragEnd(event) {
     this.log(event);
   }
+  handleSplitterResizeStart(event) {
+    this.log(event, Object.assign({}, event.detail));
+    // event.preventDefault();
+  }
   handleFloatingPaneResizeStart(event) {
     this.log(event, Object.assign({}, event.detail));
     // event.preventDefault();
@@ -514,7 +518,7 @@ export class SampleComponent {
         })),
         h("button", { onClick: () => this.showPane() }, "Show Pane"),
         h("button", { onClick: () => this.showAllPanes() }, "Show All Panes")),
-      h("igc-dockmanager", { layout: this.layout, onPaneClose: this.handlePaneClose.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), onFloatingPaneResizeStart: this.handleFloatingPaneResizeStart.bind(this), onFloatingPaneResizeMove: this.handleFloatingPaneResizeMove.bind(this), onFloatingPaneResizeEnd: this.handleFloatingPaneResizeEnd.bind(this), onLayoutChange: this.handleLayoutChange.bind(this), 
+      h("igc-dockmanager", { layout: this.layout, onPaneClose: this.handlePaneClose.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), 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}