igniteui-dockmanager 1.10.0-beta.1 → 1.10.0

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 1.10.0
+
+### New features
+-  Add `showHeaderIconOnHover` property
+
+### Bug fixes
+- Active pane is not retained on float/dock
+- Splitter styles are not applied [#36](https://github.com/IgniteUI/igniteui-dockmanager/issues/36)
+- `click` event on customized header buttons is not working [#37](https://github.com/IgniteUI/igniteui-dockmanager/issues/37)
+- Removed erroneous dock indicators while dragging over splitter
+
 ## 1.9.0
 
 ### Bug fixes

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

@@ -105,9 +105,13 @@ const contentPaneComponentCss = ":host{--min-pane-size:0px;position:relative;dis
 let IgcContentPaneComponent = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.rendered = index.createEvent(this, "rendered", 7);
     this.disabled = false;
     this.isSingleFloating = false;
   }
+  componentDidRender() {
+    this.rendered.emit();
+  }
   render() {
     const size = this.size || this.size === 0 ? this.size : IGC_DEFAULT_PANE_SIZE;
     const unpinnedSize = this.unpinnedSize ? this.unpinnedSize : IGC_DEFAULT_UNPIN_PANE_SIZE;
@@ -1737,6 +1741,12 @@ class IgcDockManagerKeyboardService {
 
 const dockmanagerComponentCss = ":host{position:relative;display:-ms-flexbox;display:flex;overflow:hidden;-webkit-box-sizing:border-box;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:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;height:100%;width:100%;overflow:hidden}.pane-container--vertical{-ms-flex-direction:column;flex-direction:column}.unpinned-tab-area{display:-ms-flexbox;display:flex;-ms-flex-direction:column;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{-ms-flex-direction:row;flex-direction:row;width:auto;height:var(--unpinned-tab-area-size)}.unpinned-tab-area--hidden{display:none}.flyout-pane{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute;width:100%;height:100%;pointer-events:none;z-index:2}.flyout-pane igc-content-pane-component{-webkit-box-shadow:0 12px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08));box-shadow:0 12px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08))}.flyout-pane--right{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.flyout-pane--right igc-content-pane-component{-webkit-box-shadow:-12px 0px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08));box-shadow:-12px 0px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08))}.flyout-pane--bottom{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.flyout-pane--bottom igc-content-pane-component{-webkit-box-shadow:0 -12px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08));box-shadow:0 -12px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08))}.flyout-pane--left{-ms-flex-direction:row;flex-direction:row}.flyout-pane--left igc-content-pane-component{-webkit-box-shadow:12px 0px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08));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:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%;pointer-events:none;z-index:10004}.content{overflow:auto;height:100%;-ms-flex-positive:1;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))}.maximized{position:absolute;top:0;bottom:0;left:0;right:0;z-index:10002}igc-tab-header-component>span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.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}";
 
+var ActionReason;
+(function (ActionReason) {
+  ActionReason["click"] = "click";
+  ActionReason["drop"] = "drop";
+  ActionReason["maximizeOrMinimize"] = "maximizeOrMinimize";
+})(ActionReason || (ActionReason = {}));
 let IgcDockManager = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -1763,6 +1773,7 @@ let IgcDockManager = class {
     this.domObserver = new MutationObserver(this.mutationCallback.bind(this));
     this.shouldMovePane = false;
     this.scheduledCallbacks = [];
+    this.shouldClearActivePane = true;
     this.isDragging = false;
     this.templatableComponents = [
       {
@@ -1884,7 +1895,7 @@ let IgcDockManager = class {
       }
       const rootNode = this.getRootNode();
       requestAnimationFrame(() => {
-        if (!this.element.shadowRoot.activeElement && rootNode.activeElement === this.element) {
+        if (!this.element.shadowRoot.activeElement && rootNode.activeElement === this.element && this.reason !== ActionReason.maximizeOrMinimize) {
           this.clearActivePane();
         }
       });
@@ -1923,10 +1934,13 @@ let IgcDockManager = class {
   activePaneChange(newValue, oldValue) {
     var _a;
     const args = { newPane: newValue, oldPane: oldValue };
-    if (this.flyoutPane && newValue && newValue !== this.flyoutPane) {
+    if (this.flyoutPane &&
+      newValue !== this.flyoutPane &&
+      (!newValue || newValue.isPinned !== false || this.activePaneInternalSet)) {
       this.service.flyoutPane(this.flyoutPane);
     }
     this.activePaneChanged.emit(args);
+    this.contentPaneId = (newValue === null || newValue === void 0 ? void 0 : newValue.contentId) || this.contentPaneId;
     if (this.activePaneInternalSet) {
       this.activePaneInternalSet = false;
       return;
@@ -1966,17 +1980,17 @@ let IgcDockManager = class {
           }
         }
       }
-      this.scheduleAfterRender(() => {
-        this.setFocus(newValue);
-      });
     }
+    this.scheduleAfterRender(() => {
+      this.setFocus(newValue);
+    });
   }
   handleFocusOut(_event) {
     if (this.paneToFocus) {
       return;
     }
     const rootNode = this.getRootNode();
-    if (!this._tabHeaderIconClicked) {
+    if (!this._tabHeaderIconClicked && !this.isDragging) {
       requestAnimationFrame(() => {
         if (!this.element.contains(rootNode.activeElement)) {
           this.clearActivePane();
@@ -1988,6 +2002,17 @@ let IgcDockManager = class {
   handleKeyDown(event) {
     this.keyboardService.handleKeydown(event);
   }
+  handlePointerDown(event) {
+    const pathHTMLElements = event.composedPath().filter(e => e instanceof HTMLElement).map(e => e);
+    const isMaximizeOrMinimize = pathHTMLElements.filter(e => e.attributes.getNamedItem('part') &&
+      (e.attributes.getNamedItem('part').value === 'tabs-minimize-button' || e.attributes.getNamedItem('part').value === 'tabs-maximize-button')).length > 0;
+    if (isMaximizeOrMinimize) {
+      this.reason = ActionReason.maximizeOrMinimize;
+    }
+  }
+  handlePointerUp() {
+    this.reason = null;
+  }
   async dropPane() {
     const docked = this.handlePaneDragEnd();
     return Promise.resolve(docked);
@@ -2031,6 +2056,62 @@ let IgcDockManager = class {
   focusElement() {
     this.element.focus();
   }
+  handleTabsRendered(pane) {
+    var _a;
+    if (this.reason !== ActionReason.drop) {
+      return;
+    }
+    if (((_a = pane.panes) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      const focusablePane = this.findFocusablePane(pane.panes);
+      if ((focusablePane === null || focusablePane === void 0 ? void 0 : focusablePane.contentId) === this.contentPaneId) {
+        pane.selectedIndex = pane.panes.indexOf(focusablePane);
+        this.setActivePane(focusablePane);
+        this.setFocus(focusablePane);
+      }
+    }
+  }
+  handleSplitPaneRendered(panes) {
+    if (this.reason !== ActionReason.drop) {
+      return;
+    }
+    const focusablePane = this.findFocusablePane(panes);
+    if ((focusablePane === null || focusablePane === void 0 ? void 0 : focusablePane.contentId) === this.contentPaneId) {
+      this.setActivePane(focusablePane);
+      this.setFocus(focusablePane);
+    }
+  }
+  findFocusablePane(panes, candidate) {
+    const splitPanes = panes.filter(p => p.type === locale.IgcDockManagerPaneType.splitPane);
+    for (const pane of splitPanes) {
+      if (candidate) {
+        return candidate;
+      }
+      const splitPane = pane;
+      candidate = this.findFocusablePane(splitPane.panes);
+    }
+    const tabGroupPanes = panes.filter(p => p.type === locale.IgcDockManagerPaneType.tabGroupPane);
+    for (const pane of tabGroupPanes) {
+      if (candidate) {
+        return candidate;
+      }
+      const tabGroupPane = pane;
+      candidate = tabGroupPane.selectedIndex ? tabGroupPane.panes[tabGroupPane.selectedIndex] : this.findFocusablePane(tabGroupPane.panes);
+    }
+    const docHost = panes.filter(p => p.type === locale.IgcDockManagerPaneType.documentHost);
+    for (const pane of docHost) {
+      if (candidate) {
+        return candidate;
+      }
+      const docHostPane = pane;
+      candidate = this.findFocusablePane([docHostPane.rootPane]);
+    }
+    candidate = panes.find(p => p.type === locale.IgcDockManagerPaneType.contentPane
+      && p.contentId === this.contentPaneId) || candidate;
+    if (candidate) {
+      return candidate;
+    }
+    return panes.find(p => p.type === locale.IgcDockManagerPaneType.contentPane);
+  }
   processTemplates() {
     if (this.templates.size === 0) {
       return;
@@ -2154,13 +2235,17 @@ let IgcDockManager = class {
     this.splitterResizeEnd.emit();
   }
   clearActivePane() {
-    if (this.activePane) {
+    if (this.activePane && this.shouldClearActivePane && this.reason !== ActionReason.drop) {
       this.setActivePane(null);
     }
   }
   handlePinToggle(pane) {
-    this.focusElement();
+    this.shouldClearActivePane = false;
     this.service.togglePin(pane);
+    this.scheduleAfterRender(() => {
+      this.shouldClearActivePane = true;
+      this.setFocus(pane);
+    });
   }
   handlePaneClose(pane) {
     this.focusElement();
@@ -2172,10 +2257,15 @@ let IgcDockManager = class {
   }
   handleMaximize(pane) {
     this.service.maximizePane(pane);
+    this.scheduleAfterRender(() => {
+      const paneToFocus = this.findFocusablePane([pane]);
+      this.setFocus(paneToFocus);
+    });
   }
   handleUnpinnedTabMouseDown(pane, event) {
     const target = event.currentTarget;
     const rootNode = this.getRootNode();
+    this.contentPaneId = pane.id;
     requestAnimationFrame(() => {
       if (this.element === rootNode.activeElement || !this.element.contains(rootNode.activeElement)) {
         target.focus();
@@ -2199,9 +2289,26 @@ let IgcDockManager = class {
       rect = (pane !== this.flyoutPane && parent.type === locale.IgcDockManagerPaneType.tabGroupPane) ?
         header.closest('igc-tabs-component').getBoundingClientRect() :
         header.parentElement.getBoundingClientRect();
+      this.contentPaneId = pane.contentId;
     }
+    this.shouldClearActivePane = false;
+    this.focusElement();
     const dragStarted = this.service.dragPaneStart(pane, rect, event.detail.clientX, event.detail.clientY);
     this.isDragging = true;
+    this.scheduleAfterRender(() => {
+      this.shouldClearActivePane = true;
+      if (pane.type === locale.IgcDockManagerPaneType.contentPane) {
+        this.contentPaneId = pane.contentId;
+        return;
+      }
+      if (pane.type === locale.IgcDockManagerPaneType.splitPane) {
+        const targetPane = this.findFocusablePane(pane.panes);
+        if (targetPane) {
+          this.contentPaneId = targetPane.contentId;
+          this.setActivePane(targetPane);
+        }
+      }
+    });
     if (!dragStarted) {
       this.isDragging = false;
       event.detail.cancel = true;
@@ -2221,7 +2328,21 @@ let IgcDockManager = class {
     const docked = this.service.dragPaneEnd();
     this.isDragging = false;
     if (docked) {
+      const activePane = this.activePane;
+      this.shouldClearActivePane = false;
+      this.reason = ActionReason.drop;
       this.focusElement();
+      if (activePane) {
+        this.scheduleAfterRender(() => {
+          this.setActivePane(activePane);
+        });
+      }
+      this.scheduleAfterRender(() => {
+        this.shouldClearActivePane = true;
+      });
+    }
+    if (this.activePane) {
+      this.setFocus(this.activePane);
     }
     return docked;
   }
@@ -2238,9 +2359,13 @@ let IgcDockManager = class {
         return this.handlePaneDragStart(rootParent, event);
       }
     }
+    this.shouldClearActivePane = false;
     this.focusElement();
     const dragStarted = this.service.dragTabStart(pane);
     this.isDragging = true;
+    this.scheduleAfterRender(() => {
+      this.shouldClearActivePane = true;
+    });
     if (!dragStarted) {
       this.isDragging = false;
       event.detail.cancel = true;
@@ -2298,7 +2423,16 @@ let IgcDockManager = class {
     const elements = clientX && clientY ?
       this.element.shadowRoot.elementsFromPoint(clientX, clientY) :
       null;
-    if (!elements || !elements.length) {
+    let isOverSplitter = false;
+    const splitter = elements.filter(e => e.tagName.toLowerCase() === 'igc-splitter-component');
+    if (splitter.length > 0) {
+      const splitterIndex = elements.indexOf(splitter[0]);
+      const adjacentElement = elements[splitterIndex - 1];
+      isOverSplitter = adjacentElement &&
+        adjacentElement.tagName.toLowerCase() === 'igc-floating-pane-component' &&
+        adjacentElement.floatingId === this.draggedPane.id; // if not equal - splitter is below another element, not directly over
+    }
+    if (!elements || !elements.length || isOverSplitter) {
       this.service.dockingIndicator = null;
       this.dropTargetPaneInfo = null;
       return;
@@ -2412,12 +2546,14 @@ let IgcDockManager = class {
       const rootNode = this.getRootNode();
       if (this.element === rootNode.activeElement || !this.element.contains(rootNode.activeElement)) {
         this.setFocus(pane);
+        this.contentPaneId = pane.contentId;
       }
     });
   }
   handlePaneHeaderMouseDown(pane) {
     const rootNode = this.getRootNode();
     requestAnimationFrame(() => {
+      this.contentPaneId = pane.contentId;
       if (this.element === rootNode.activeElement || !this.element.contains(rootNode.activeElement)) {
         const paneElement = this.contentPanesElementMap.get(pane);
         paneElement.focus();
@@ -2434,6 +2570,8 @@ let IgcDockManager = class {
     this._tabHeaderIconClicked = this.showHeaderIconOnHover &&
       pathHTMLElements.filter(el => el.attributes.getNamedItem('part') && el.attributes.getNamedItem('part').value === 'tab-header-more-options floating').length > 0;
     requestAnimationFrame(() => {
+      this.contentPaneId = pane.contentId;
+      this.reason = ActionReason.click;
       if (this.element === rootNode.activeElement || !this.element.contains(rootNode.activeElement)) {
         target.focus();
       }
@@ -2442,8 +2580,22 @@ let IgcDockManager = class {
       }
     });
   }
-  handleFloatingPaneMouseDown(pane) {
+  handleFloatingPaneMouseDown(pane, event) {
+    const pathHTMLElements = event.composedPath().filter(e => e instanceof HTMLElement).map(e => e);
+    const isContextMenu = pathHTMLElements.filter(e => e.attributes.getNamedItem('part') && e.attributes.getNamedItem('part').value === 'context-menu').length > 0;
+    if (isContextMenu) {
+      return;
+    }
     this.service.bringFloatingPaneOnTop(pane);
+    requestAnimationFrame(() => {
+      let targetPane = this.findFocusablePane(pane.panes);
+      if (!targetPane) {
+        targetPane = pane.panes[0];
+      }
+      this.setActivePane(targetPane);
+      this.setFocus(targetPane);
+      this.contentPaneId = targetPane.contentId;
+    });
   }
   handleTabIconClick(p, position, isFloating, event) {
     if (!this.showHeaderIconOnHover) {
@@ -2569,7 +2721,7 @@ let IgcDockManager = class {
     const isSingleTab = tabs.length === 1 && position === IgcTabHeadersPosition.bottom;
     const allowEmpty = pane.type === locale.IgcDockManagerPaneType.tabGroupPane ? pane.allowEmpty : false;
     const allowMaximize = this.resolveAllowMaximize(pane);
-    return (allowEmpty || tabs.length > 0) && (index.h("igc-tabs-component", { key: pane.id, 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), tabHeadersPosition: position, resourceStrings: this.resourceStrings, ref: el => {
+    return (allowEmpty || tabs.length > 0) && (index.h("igc-tabs-component", { key: pane.id, 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);
         }
@@ -2612,7 +2764,7 @@ let 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, 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);
         }
@@ -2692,7 +2844,7 @@ let IgcDockManager = class {
         forceDrag = true;
       }
       const containsMaximizedPane = this.maximizedPane && this.service.getRootParent(this.maximizedPane) === p;
-      return (index.h("igc-floating-pane-component", { key: p.id, style: { zIndex: this.floatingPaneZIndicesMap.get(p).toString() }, floatingLocation: p.floatingLocation ? p.floatingLocation : { x: 0, y: 0 }, floatingWidth: p.floatingWidth ? p.floatingWidth : IGC_DEFAULT_PANE_SIZE, floatingHeight: p.floatingHeight ? p.floatingHeight : IGC_DEFAULT_PANE_SIZE, hasHeader: hasHeader, onWndResizeStart: this.handleFloatingPaneResizeStart.bind(this, p), onWndResizeMove: this.handleFloatingPaneResizeMove.bind(this, p), onWndResizeEnd: this.handleFloatingPaneResizeEnd.bind(this, p), onMouseDown: this.handleFloatingPaneMouseDown.bind(this, p), class: {
+      return (index.h("igc-floating-pane-component", { key: p.id, floatingId: p.id, style: { zIndex: this.floatingPaneZIndicesMap.get(p).toString() }, floatingLocation: p.floatingLocation ? p.floatingLocation : { x: 0, y: 0 }, floatingWidth: p.floatingWidth ? p.floatingWidth : IGC_DEFAULT_PANE_SIZE, floatingHeight: p.floatingHeight ? p.floatingHeight : IGC_DEFAULT_PANE_SIZE, hasHeader: hasHeader, onWndResizeStart: this.handleFloatingPaneResizeStart.bind(this, p), onWndResizeMove: this.handleFloatingPaneResizeMove.bind(this, p), onWndResizeEnd: this.handleFloatingPaneResizeEnd.bind(this, p), onMouseDown: this.handleFloatingPaneMouseDown.bind(this, p), class: {
           'maximized': this.maximizedPane === p
         }, maximized: this.maximizedPane === p || containsMaximizedPane, allowResize: (_a = p.floatingResizable) !== null && _a !== void 0 ? _a : this.allowFloatingPanesResize }, hasHeader ?
         index.h("igc-pane-header-component", { slot: "header", isFloating: true, isFloatingPaneHeader: true, forcedDrag: forceDrag, allowMaximize: this.resolveAllowMaximize(p), maximized: this.maximizedPane === p, resourceStrings: this.resourceStrings, onDragStarted: this.handlePaneDragStart.bind(this, p), onDragMoved: this.handlePaneDragMove.bind(this), onDragEnded: this.handlePaneDragEnd.bind(this), onClose: this.handleFloatingPaneClose.bind(this, p), onMaximize: this.handleMaximize.bind(this, p), onFocusin: (this.clearActivePane.bind(this)) }) : null, this.renderSplitPane(p, true, false)));
@@ -3505,6 +3657,10 @@ const splitPaneComponentCss = ".sc-igc-split-pane-component-h{height:100%;displa
 let IgcSplitPaneComponent = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.rendered = index.createEvent(this, "rendered", 7);
+  }
+  componentDidRender() {
+    this.rendered.emit();
   }
   render() {
     const size = this.size || this.size === 0 ? this.size : IGC_DEFAULT_PANE_SIZE;
@@ -3871,6 +4027,7 @@ let IgcTabsComponent = class {
     this.selectedIndexChanged = index.createEvent(this, "selectedIndexChanged", 3);
     this.hiddenTabSelected = index.createEvent(this, "hiddenTabSelected", 3);
     this.selectedTabOutOfView = index.createEvent(this, "selectedTabOutOfView", 3);
+    this.rendered = index.createEvent(this, "rendered", 7);
     this.forcedUpdate = false;
     this.hasHiddenTabs = false;
     this.allowMaximize = true;
@@ -3921,6 +4078,10 @@ let IgcTabsComponent = class {
   componentWillLoad() {
     this.hiddenTabsMenuMeta = null;
     this.updateSelectedIndex();
+    this.checkForActivePane();
+  }
+  componentDidRender() {
+    this.rendered.emit();
   }
   componentDidLoad() {
     this.setTabsAttributes();
@@ -3932,8 +4093,9 @@ let IgcTabsComponent = class {
   componentDidUpdate() {
     if (this.forcedUpdate) {
       this.forcedUpdate = false;
-      this.setHasHiddenTabs();
+      this.checkForActivePane();
     }
+    this.setHasHiddenTabs();
   }
   setTabsAttributes() {
     const tabHeaders = this.tabHeaders;
@@ -4010,6 +4172,19 @@ let IgcTabsComponent = class {
   setHasHiddenTabs() {
     this.hasHiddenTabs = this.hiddenTabHeaders.length > 0;
   }
+  checkForActivePane() {
+    const activeTabHeader = this.tabHeaders.filter(t => t.isActive);
+    if (activeTabHeader.length > 0) {
+      const hiddenActiveTabIndex = this.hiddenTabHeaders.indexOf(activeTabHeader[0]);
+      const activeTabIndex = this.tabHeaders.indexOf(activeTabHeader[0]);
+      if (hiddenActiveTabIndex >= 0) {
+        this.selectedTabOutOfView.emit(activeTabIndex);
+      }
+      else if (activeTabIndex >= 0) {
+        this.selectedIndex = activeTabIndex;
+      }
+    }
+  }
   handleHiddenTabsMenuClick(ev) {
     const button = ev.currentTarget;
     const items = this.hiddenTabHeaders.map(header => ({
@@ -4044,7 +4219,8 @@ let IgcTabsComponent = class {
         'tab-headers-container': true,
         'tab-headers-container--wrapped': this.showHiddenTabsMenu
       } }, index.h("slot", { name: "tabHeader" })), index.h("div", { part: tabStripActionsParts, class: "tab-header-icon-container" }, this.showHiddenTabsMenu && this.hasHiddenTabs &&
-      index.h("div", { onClick: this.handleHiddenTabsMenuClick.bind(this) }, this.renderMoreTabsButton()), this.allowMaximize &&
+      index.h("div", { onClick: this.handleHiddenTabsMenuClick.bind(this) }, this.renderMoreTabsButton()), !(this.showHiddenTabsMenu && this.hasHiddenTabs) &&
+      index.h("span", { style: { width: '25px' } }), this.allowMaximize &&
       index.h("div", { onClick: this.maximizeButtonClick, onFocusin: this.handleMaximizeMinimizeFocus }, this.maximized ? this.renderMinimizeButton() : this.renderMaximizeButton()))));
   }
   renderMoreTabsButton() {
@@ -4095,12 +4271,15 @@ let IgcUnpinnedPaneHeaderComponent = class {
   render() {
     const isHorizontal = this.location === locale.IgcUnpinnedLocation.top || this.location === locale.IgcUnpinnedLocation.bottom;
     const isLeft = this.location === locale.IgcUnpinnedLocation.left;
+    const isRight = this.location === locale.IgcUnpinnedLocation.right;
+    const isTop = this.location === locale.IgcUnpinnedLocation.top;
+    const isBottom = this.location === locale.IgcUnpinnedLocation.bottom;
     const parts = Utils.partNameMap({
       'unpinned-pane-header': true,
       horizontal: isHorizontal,
       vertical: !isHorizontal,
-      start: isLeft,
-      end: !isLeft,
+      start: isLeft || isTop,
+      end: isRight || isBottom,
       active: this.isActive,
       disabled: this.disabled,
     });
@@ -4423,6 +4602,7 @@ let SampleComponent = class {
       ]
     };
     this.layout = this.layout1;
+    this.logEnabled = false;
     this.id = 100;
     this.foundElem = [];
   }
@@ -4519,7 +4699,7 @@ let SampleComponent = class {
     return divContent;
   }
   handlePaneClose(event) {
-    console.log(event);
+    this.log(event);
     if (this.hideOnCloseCheckbox.checked) {
       for (const pane of event.detail.panes) {
         pane.hidden = true;
@@ -4541,38 +4721,38 @@ let SampleComponent = class {
     // }
   }
   handlePinnedToggle(event) {
-    console.log(event);
+    this.log(event);
     // if (event.detail.sourcePane.type === IgcDockManagerPaneType.contentPane) {
     //   event.detail.panes = [event.detail.sourcePane];
     // }
     // event.preventDefault();
   }
   handleActivePaneChanged(event) {
-    console.log(event);
+    this.log(event);
   }
   handleDragStart(event) {
-    console.log(event);
+    this.log(event);
     // event.preventDefault();
   }
   handleDragOver(event) {
     const args = event.detail;
-    console.log(args.action);
+    this.log(args.action);
   }
   handleDragEnd(event) {
-    console.log(event);
+    this.log(event);
   }
   handleFloatingPaneResizeStart(event) {
-    console.log(event, Object.assign({}, event.detail));
+    this.log(event, Object.assign({}, event.detail));
     // event.preventDefault();
   }
   handleFloatingPaneResizeMove(event) {
-    console.log(event, Object.assign({}, event.detail));
+    this.log(event, Object.assign({}, event.detail));
   }
   handleFloatingPaneResizeEnd(event) {
-    console.log(event, Object.assign({}, event.detail));
+    this.log(event, Object.assign({}, event.detail));
   }
   handleLayoutChange(event) {
-    console.log(event);
+    this.log(event);
   }
   // private getCustomResourceStrings(): IgcDockManagerResourceStrings {
   //   const customResourceStrings: IgcDockManagerResourceStrings = {
@@ -4585,6 +4765,11 @@ let SampleComponent = class {
   //   };
   //   return customResourceStrings;
   // }
+  log(message, ...optionalParams) {
+    if (this.logEnabled) {
+      console.log(message, optionalParams);
+    }
+  }
   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));

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":[4,"show-header-icon-on-hover"],"maximizedPane":[1040],"resourceStrings":[1040],"allowFloatingPanesResize":[4,"allow-floating-panes-resize"],"disableKeyboardNavigation":[4,"disable-keyboard-navigation"],"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,"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],"position":[1],"iconName":[1,"icon-name"],"header":[1],"isActive":[4,"is-active"],"resourceStrings":[16],"forcedDrag":[4,"forced-drag"],"disabled":[4],"showHeaderIconOnHover":[4,"show-header-icon-on-hover"]},[[1,"mousedown","handleMouseDown"]]],[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"]}],[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],"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":[4,"show-header-icon-on-hover"],"maximizedPane":[1040],"resourceStrings":[1040],"allowFloatingPanesResize":[4,"allow-floating-panes-resize"],"disableKeyboardNavigation":[4,"disable-keyboard-navigation"],"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],"position":[1],"iconName":[1,"icon-name"],"header":[1],"isActive":[4,"is-active"],"resourceStrings":[16],"forcedDrag":[4,"forced-drag"],"disabled":[4],"showHeaderIconOnHover":[4,"show-header-icon-on-hover"]},[[1,"mousedown","handleMouseDown"]]],[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],"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":[4,"show-header-icon-on-hover"],"maximizedPane":[1040],"resourceStrings":[1040],"allowFloatingPanesResize":[4,"allow-floating-panes-resize"],"disableKeyboardNavigation":[4,"disable-keyboard-navigation"],"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,"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],"position":[1],"iconName":[1,"icon-name"],"header":[1],"isActive":[4,"is-active"],"resourceStrings":[16],"forcedDrag":[4,"forced-drag"],"disabled":[4],"showHeaderIconOnHover":[4,"show-header-icon-on-hover"]},[[1,"mousedown","handleMouseDown"]]],[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"]}],[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],"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":[4,"show-header-icon-on-hover"],"maximizedPane":[1040],"resourceStrings":[1040],"allowFloatingPanesResize":[4,"allow-floating-panes-resize"],"disableKeyboardNavigation":[4,"disable-keyboard-navigation"],"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],"position":[1],"iconName":[1,"icon-name"],"header":[1],"isActive":[4,"is-active"],"resourceStrings":[16],"forcedDrag":[4,"forced-drag"],"disabled":[4],"showHeaderIconOnHover":[4,"show-header-icon-on-hover"]},[[1,"mousedown","handleMouseDown"]]],[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],"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);
   });
 };