igniteui-dockmanager 1.12.4 → 1.13.0

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f11f2141.js');
-const locale = require('./locale-758076f2.js');
+const index = require('./index-2e72b990.js');
+const locale = require('./locale-17d229ad.js');
 
 const buttonComponentCss = "button{position:static;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:auto;height:100%;min-width:10px;padding:2px 4px;border-radius:2px;color:var(--igc-button-text, rgba(0, 0, 0, 0.72));cursor:pointer;outline-style:none;font-size:14px;font-family:inherit;background:transparent;border:none;-webkit-tap-highlight-color:transparent;opacity:0.7;-webkit-transition:background 0.25s ease-out, opacity 0.25s ease-out, -webkit-box-shadow 0.25s ease-out;transition:background 0.25s ease-out, opacity 0.25s ease-out, -webkit-box-shadow 0.25s ease-out;transition:background 0.25s ease-out, opacity 0.25s ease-out, box-shadow 0.25s ease-out;transition:background 0.25s ease-out, opacity 0.25s ease-out, box-shadow 0.25s ease-out, -webkit-box-shadow 0.25s ease-out}:host([disabled]){pointer-events:none}:host{display:-ms-flexbox;display:flex}button{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}button:hover{opacity:1}button:focus{background:var(--igc-accent-color, #fff);-webkit-box-shadow:inset 0 0 0 1px var(--igc-active-color, cornflowerblue);box-shadow:inset 0 0 0 1px var(--igc-active-color, cornflowerblue);opacity:1}button[disabled]{opacity:0.54}";
 
@@ -183,12 +183,13 @@ let IgcContextMenuComponent = class {
     const menuItemsDivRect = this.menuItemsDiv.getBoundingClientRect();
     const hostRect = this.elem.getBoundingClientRect();
     const rootNodeShadowHost = this.target.getRootNode();
+    const isFloating = this.isFloating(rootNodeShadowHost.host);
     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 isRTL = rootHostRect.right - menuItemsDivRect.right <= 0;
+    const isRTL = rootHostRect.right - menuItemsDivRect.right < 1;
     const shouldChangeOpenOrientation = tabRect.bottom + menuItemsDivRect.bottom >= window.innerHeight
       || tabRect.height + menuItemsDivRect.bottom >= window.innerHeight
       || (isTabsMoreButton && tabsContentRect.height - menuItemsDivRect.height > 0);
@@ -197,7 +198,7 @@ let IgcContextMenuComponent = class {
       : rootHostRect.top - menuItemsDivRect.top + rootHostRect.height;
     const menuToTop = tabsContentRect.top - menuItemsDivRect.top;
     const menuToStart = isRTL ? rootHostRect.right - menuItemsDivRect.width : rootHostRect.left;
-    const menuToEnd = isRTL ? rootHostRect.left : rootHostRect.right - menuItemsDivRect.width;
+    const menuToEnd = isRTL && !isFloating ? rootHostRect.left : rootHostRect.right - menuItemsDivRect.right;
     const menuToCenter = rootHostRect.left + (rootHostRect.width - menuItemsDivRect.width) / 2;
     let menuLeft = !isRTL ? menuToStart : menuToEnd;
     let menuTop = this.orientation === IgcContextMenuOrientation.bottom
@@ -224,7 +225,6 @@ 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';
@@ -235,6 +235,15 @@ let IgcContextMenuComponent = class {
     const firstMenuItem = this.menuItemsDiv.querySelector('div[part="menu-item"]');
     (_a = firstMenuItem) === null || _a === void 0 ? void 0 : _a.focus();
   }
+  isFloating(host) {
+    while (host) {
+      if (host.tagName && host.tagName.toLowerCase() === 'igc-floating-pane-component') {
+        return true;
+      }
+      host = host.parentNode;
+    }
+    return false;
+  }
   handleKeyboardEvents(item, ev) {
     const menuItemChildren = this.menuItemsDiv.querySelectorAll('div[part="menu-item"]');
     if (ev.key === 'ArrowDown') {
@@ -329,6 +338,7 @@ class IgcDockManagerService {
   constructor(dockManager) {
     this.dockManager = dockManager;
     this.unpinnedLocationMap = new Map();
+    this.keyboardDockPane = null;
   }
   getContent(contentId) {
     return this.clientContentPanesMap.get(contentId);
@@ -683,6 +693,14 @@ class IgcDockManagerService {
   updateLayout() {
     this.dockManager.layout = Object.assign({}, this.dockManager.layout);
   }
+  hasMaximizedProp(pane) {
+    return 'isMaximized' in pane;
+  }
+  getLastMaximizedPane() {
+    const keys = Array.from(this.paneParentMap.keys());
+    const maximizedPane = keys.filter(this.hasMaximizedProp).filter(i => i.isMaximized)[0];
+    return maximizedPane;
+  }
   processLayout() {
     this.paneParentMap = new Map();
     this.unpinnedLocationMap = new Map();
@@ -837,6 +855,12 @@ class IgcDockManagerService {
     const parent = this.getParent(pane);
     const targetPane = parent && parent.type === locale.IgcDockManagerPaneType.tabGroupPane && pane !== this.dockManager.flyoutPane ? parent : pane;
     this.dockManager.maximizedPane = this.dockManager.maximizedPane === targetPane ? null : targetPane;
+    if (this.dockManager.maximizedPane) {
+      targetPane.isMaximized = true;
+    }
+    else {
+      targetPane.isMaximized = false;
+    }
   }
   moveFloatingPane(pane, location) {
     pane.floatingLocation = location;
@@ -1750,36 +1774,46 @@ class IgcDockManagerKeyboardService {
     }
   }
   handleRootDockPane(key) {
+    let position;
     switch (key) {
       case 'ArrowUp':
-        this.service.rootDockPane(locale.IgcDockingIndicatorPosition.top);
+        position = locale.IgcDockingIndicatorPosition.top;
         break;
       case 'ArrowDown':
-        this.service.rootDockPane(locale.IgcDockingIndicatorPosition.bottom);
+        position = locale.IgcDockingIndicatorPosition.bottom;
         break;
       case 'ArrowLeft':
-        this.service.rootDockPane(locale.IgcDockingIndicatorPosition.left);
+        position = locale.IgcDockingIndicatorPosition.left;
         break;
       case 'ArrowRight':
-        this.service.rootDockPane(locale.IgcDockingIndicatorPosition.right);
+        position = locale.IgcDockingIndicatorPosition.right;
         break;
     }
+    if (position) {
+      this.service.keyboardDockPane = this.service.dockManager.activePane;
+      this.service.rootDockPane(position);
+    }
   }
   handleInnerDockPane(key) {
+    let position;
     switch (key) {
       case 'ArrowUp':
-        this.service.dockPane(locale.IgcDockingIndicatorPosition.top);
+        position = locale.IgcDockingIndicatorPosition.top;
         break;
       case 'ArrowDown':
-        this.service.dockPane(locale.IgcDockingIndicatorPosition.bottom);
+        position = locale.IgcDockingIndicatorPosition.bottom;
         break;
       case 'ArrowLeft':
-        this.service.dockPane(locale.IgcDockingIndicatorPosition.left);
+        position = locale.IgcDockingIndicatorPosition.left;
         break;
       case 'ArrowRight':
-        this.service.dockPane(locale.IgcDockingIndicatorPosition.right);
+        position = locale.IgcDockingIndicatorPosition.right;
         break;
     }
+    if (position) {
+      this.service.keyboardDockPane = this.service.dockManager.activePane;
+      this.service.dockPane(position);
+    }
   }
   setPaneNavigatorMeta(altKey, ctrlOrMetaKey, shiftKey) {
     let initIndex = 0;
@@ -1832,6 +1866,7 @@ let IgcDockManager = class {
     this.splitterResizeStart = index.createEvent(this, "splitterResizeStart", 7);
     this.splitterResizeEnd = index.createEvent(this, "splitterResizeEnd", 7);
     this.paneClose = index.createEvent(this, "paneClose", 7);
+    this.paneScroll = index.createEvent(this, "paneScroll", 7);
     this.panePinnedToggle = index.createEvent(this, "panePinnedToggle", 7);
     this.activePaneChanged = index.createEvent(this, "activePaneChanged", 7);
     this.paneDragStart = index.createEvent(this, "paneDragStart", 7);
@@ -1954,6 +1989,7 @@ let IgcDockManager = class {
     this.allowMaximize = true;
     this.allowFloatingPanesResize = true;
     this.disableKeyboardNavigation = false;
+    this.allowInnerDock = true;
     this.activePane = null;
     this.updateTemplates = () => {
       if (this.templates.size > 0) {
@@ -2111,6 +2147,22 @@ let IgcDockManager = class {
   async removePane(pane) {
     this.service.removePane(pane);
   }
+  async focusPane(contentId) {
+    const contentPane = this.service.getContent(contentId);
+    const parentPane = this.service.getRootParent(contentPane);
+    const isFloating = this.service.isFloatingPane(parentPane);
+    const isUnpinned = contentPane.isPinned !== undefined && !contentPane.isPinned;
+    if (isFloating) {
+      this.service.bringFloatingPaneOnTop(parentPane);
+      this.activePane = contentPane;
+    }
+    else if (isUnpinned) {
+      this.handlePaneFlyout(contentPane);
+    }
+    else {
+      this.activePane = contentPane;
+    }
+  }
   connectedCallback() {
     this.element.shadowRoot.addEventListener('focusout', this.handleShadowRootFocusOut);
     this.domObserver.observe(this.element, { attributes: true, subtree: true, childList: true });
@@ -2132,11 +2184,26 @@ let IgcDockManager = class {
       this.resourceStrings = locale.resourceStringsMap.has(lang) ? locale.resourceStringsMap.get(lang) : locale.resourceStringsMap.get('en');
     }
   }
+  componentWillRender() {
+    const lastMaximizedPane = this.service.getLastMaximizedPane();
+    if (lastMaximizedPane && this.maximizedPane !== lastMaximizedPane) {
+      const shouldFlyout = 'isPinned' in lastMaximizedPane && !lastMaximizedPane.isPinned;
+      if (shouldFlyout) {
+        this.handlePaneFlyout(lastMaximizedPane);
+      }
+      this.handleMaximize(lastMaximizedPane);
+    }
+  }
   componentDidRender() {
     while (this.scheduledCallbacks.length) {
       const callback = this.scheduledCallbacks.shift();
       callback();
     }
+    if (this.service.keyboardDockPane) {
+      this.setActivePane(this.service.keyboardDockPane);
+      this.setFocus(this.service.keyboardDockPane);
+      this.service.keyboardDockPane = null;
+    }
     this.processTemplates();
   }
   disconnectedCallback() {
@@ -2357,8 +2424,10 @@ let IgcDockManager = class {
     }
   }
   handlePinToggle(pane) {
+    const isPinned = this.service.getActualIsPinned(pane);
+    const pinBehavior = !isPinned ? IgcPinBehavior.selectedPane : IgcPinBehavior.allPanes;
     this.shouldClearActivePane = false;
-    this.service.togglePin(pane);
+    this.service.togglePin(pane, pinBehavior);
     this.scheduleAfterRender(() => {
       this.shouldClearActivePane = true;
       this.setFocus(pane);
@@ -2537,6 +2606,7 @@ let IgcDockManager = class {
     this.service.resizeFloatingPaneEnd(pane, event.detail.resizerLocation);
   }
   handleDropPositionChange(clientX, clientY, target) {
+    var _a;
     const elements = clientX && clientY ?
       this.element.shadowRoot.elementsFromPoint(clientX, clientY) :
       null;
@@ -2547,7 +2617,7 @@ let IgcDockManager = class {
       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
+        adjacentElement.floatingId === ((_a = this.draggedPane) === null || _a === void 0 ? void 0 : _a.id); // if not equal - splitter is below another element, not directly over
     }
     if (!elements || !elements.length || isOverSplitter) {
       this.service.dockingIndicator = null;
@@ -2671,6 +2741,11 @@ let IgcDockManager = class {
       }
     });
   }
+  handlePaneContentScroll(pane, event) {
+    const contentElement = event.target;
+    const args = { pane, contentElement: contentElement };
+    this.paneScroll.emit(args);
+  }
   handlePaneHeaderMouseDown(pane) {
     const rootNode = this.getRootNode();
     requestAnimationFrame(() => {
@@ -2842,7 +2917,7 @@ let IgcDockManager = class {
         'maximized': this.maximizedPane === pane
       }, header: pane.header, onFocusin: this.handleContentPaneFocus.bind(this, pane) }, index.h("igc-pane-header-component", { slot: "header", pane: pane, isActive: pane === this.activePane, disabled: pane.disabled && !isSingleFloatingContentPane, pinned: this.service.getActualIsPinned(pane), allowMaximize: this.resolveAllowMaximize(pane), maximized: maximized, allowClose: this.service.getActualAllowClose(pane), allowPinning: pane.allowPinning !== false, isFloating: isFloating, forcedDrag: forceDrag, resourceStrings: this.resourceStrings, onPinToggle: this.handlePinToggle.bind(this, pane), onMaximize: this.handleMaximize.bind(this, pane), onDragMoved: this.handlePaneDragMove.bind(this), onDragStarted: this.handlePaneDragStart.bind(this, isSingleFloatingContentPane ? floatingPane : pane), onDragEnded: this.handlePaneDragEnd.bind(this), onClose: this.handlePaneClose.bind(this, pane), onElementConnected: this.emitPaneHeaderConnected.bind(this, pane), onElementDisconnected: this.emitPaneHeaderDisconnected.bind(this, pane), onMouseDown: this.handlePaneHeaderMouseDown.bind(this, pane) }, (isFloating && pane.floatingHeaderId) ? index.h("slot", { name: pane.floatingHeaderId }) :
       pane.headerId ? index.h("slot", { name: pane.headerId }) :
-        pane.header), index.h("div", { class: "content", onMouseDown: this.handlePaneContentMouseDown.bind(this, pane) }, index.h("slot", { name: pane.contentId }))));
+        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) }));
@@ -2879,7 +2954,7 @@ let IgcDockManager = class {
       })));
   }
   renderTabPanel(pane, isInDocumentHost, isFloating) {
-    return (index.h("igc-tab-panel-component", { key: pane.id, disabled: pane.disabled, onMouseDown: isInDocumentHost ? this.handlePaneContentMouseDown.bind(this, pane) : null, onSelectedChanged: this.handleTabSelectedChanged.bind(this, pane) }, isInDocumentHost ?
+    return (index.h("igc-tab-panel-component", { key: pane.id, disabled: pane.disabled, onMouseDown: isInDocumentHost ? this.handlePaneContentMouseDown.bind(this, pane) : null, onSelectedChanged: this.handleTabSelectedChanged.bind(this, pane), onScroll: isInDocumentHost ? this.handlePaneContentScroll.bind(this, pane) : null }, isInDocumentHost ?
       index.h("slot", { name: pane.contentId }) :
       this.renderContentPane(pane, isFloating, false)));
   }
@@ -3010,7 +3085,7 @@ let IgcDockManager = class {
         flexDirection: 'row',
         justifyContent: 'space-between'
       } }, !this.documentOnlyDrag && this.renderRootDockingIndicator(startPosition), !this.documentOnlyDrag && this.renderRootDockingIndicator(endPosition)), !this.documentOnlyDrag && this.renderRootDockingIndicator(locale.IgcDockingIndicatorPosition.bottom), this.dropTargetPaneInfo &&
-      index.h("igc-joystick-indicator-component", { dropTargetPaneInfo: this.dropTargetPaneInfo, documentOnlyDrag: this.documentOnlyDrag })));
+      index.h("igc-joystick-indicator-component", { dropTargetPaneInfo: this.dropTargetPaneInfo, documentOnlyDrag: this.documentOnlyDrag, allowCenterDock: this.allowInnerDock })));
   }
   renderContextMenu() {
     return this.contextMenuMeta && (index.h("igc-context-menu-component", { onMenuClosed: this.handleContextMenuClosed.bind(this), orientation: IgcContextMenuOrientation.bottom, items: this.contextMenuMeta.menuItems, target: this.contextMenuMeta.target, position: this.contextMenuMeta.position }));
@@ -3361,6 +3436,16 @@ let IgcJoystickIndicatorComponent = class {
     return ((el && el.closest(selector)) ||
       this.closestElement(selector, el.getRootNode().host));
   }
+  shouldAllowCenterDock() {
+    let targetPane = this.dropTargetPaneInfo.pane;
+    targetPane = targetPane.type === locale.IgcDockManagerPaneType.tabGroupPane && targetPane.selectedIndex > -1 ? targetPane.panes[targetPane.selectedIndex] : targetPane;
+    return targetPane.type === locale.IgcDockManagerPaneType.contentPane && targetPane.acceptsInnerDock !== undefined
+      ? targetPane.acceptsInnerDock
+      : this.allowCenterDock;
+  }
+  renderBlankIndicator(position) {
+    return (index.h("igc-joystick-icon-component", { isDocHost: this.isDocHost, position: position, direction: Utils.getDirection(this.closestElement('igc-dockmanager', this.element)), empty: true }));
+  }
   renderIndicator(position) {
     return (index.h("igc-joystick-icon-component", { isDocHost: this.isDocHost, position: position, direction: Utils.getDirection(this.closestElement('igc-dockmanager', this.element)), empty: this.isEmptyCenter(position) || this.isEmptyEdge(position) }));
   }
@@ -3374,7 +3459,7 @@ let IgcJoystickIndicatorComponent = class {
       } }, index.h("div", { class: {
         'indicators-container': true,
         'indicators-container--doc-host': this.isDocHost
-      } }, this.isDocHost && !this.documentOnlyDrag && this.renderIndicator(locale.IgcDockingIndicatorPosition.outerLeft), this.renderIndicator(locale.IgcDockingIndicatorPosition.left), this.isDocHost && !this.documentOnlyDrag && this.renderIndicator(locale.IgcDockingIndicatorPosition.outerTop), this.renderIndicator(locale.IgcDockingIndicatorPosition.top), this.renderIndicator(locale.IgcDockingIndicatorPosition.center), this.renderIndicator(locale.IgcDockingIndicatorPosition.right), this.isDocHost && !this.documentOnlyDrag && this.renderIndicator(locale.IgcDockingIndicatorPosition.outerRight), this.renderIndicator(locale.IgcDockingIndicatorPosition.bottom), this.isDocHost && !this.documentOnlyDrag && this.renderIndicator(locale.IgcDockingIndicatorPosition.outerBottom))));
+      } }, this.isDocHost && !this.documentOnlyDrag && this.renderIndicator(locale.IgcDockingIndicatorPosition.outerLeft), this.renderIndicator(locale.IgcDockingIndicatorPosition.left), this.isDocHost && !this.documentOnlyDrag && this.renderIndicator(locale.IgcDockingIndicatorPosition.outerTop), this.renderIndicator(locale.IgcDockingIndicatorPosition.top), !this.shouldAllowCenterDock() && this.renderBlankIndicator(locale.IgcDockingIndicatorPosition.center), this.shouldAllowCenterDock() && this.renderIndicator(locale.IgcDockingIndicatorPosition.center), this.renderIndicator(locale.IgcDockingIndicatorPosition.right), this.isDocHost && !this.documentOnlyDrag && this.renderIndicator(locale.IgcDockingIndicatorPosition.outerRight), this.renderIndicator(locale.IgcDockingIndicatorPosition.bottom), this.isDocHost && !this.documentOnlyDrag && this.renderIndicator(locale.IgcDockingIndicatorPosition.outerBottom))));
   }
   get element() { return index.getElement(this); }
 };
@@ -4237,6 +4322,7 @@ let IgcTabsComponent = class {
     this.selectedTabOutOfView = index.createEvent(this, "selectedTabOutOfView", 3);
     this.rendered = index.createEvent(this, "rendered", 7);
     this.forcedUpdate = false;
+    this.selectionOrder = [];
     this.hasHiddenTabs = false;
     this.allowMaximize = true;
     this.tabHeadersPosition = IgcTabHeadersPosition.top;
@@ -4244,8 +4330,9 @@ let IgcTabsComponent = class {
     this.showHiddenTabsMenu = true;
     this.resizeObserver = new ResizeObserver(this.tabHeadersDivResized.bind(this));
     this.slotChanged = () => {
-      this.updateSelectedIndex();
       this.setTabsAttributes();
+      this.updateSelection();
+      this.handleSelectedIndexChanged(this.selectedIndex);
       this.forceUpdate();
     };
     this.onTabKeyDown = (ev) => {
@@ -4285,9 +4372,31 @@ let IgcTabsComponent = class {
   }
   componentWillLoad() {
     this.hiddenTabsMenuMeta = null;
-    this.updateSelectedIndex();
+    this.handleSelectedIndexChanged(this.selectedIndex);
     this.checkForActivePane();
   }
+  componentWillUpdate() {
+    this.updateSelection();
+  }
+  updateSelection() {
+    var _a;
+    const headers = this.tabHeaders;
+    // if any header is removed - delete its id from selection order & update selected index
+    const missingMatchIndex = this.selectionOrder.findIndex(s => headers.findIndex(h => h.id === s) < 0);
+    if (missingMatchIndex > -1) {
+      this.selectionOrder.splice(missingMatchIndex, 1);
+      const newSelectedIndex = headers.findIndex(h => h.id === this.selectionOrder[this.selectionOrder.length - 1]);
+      this.selectedIndex = newSelectedIndex > -1 ? newSelectedIndex : 0;
+    }
+    const currentSelectionId = (_a = headers[this.selectedIndex]) === null || _a === void 0 ? void 0 : _a.id;
+    const existingMatchIndex = this.selectionOrder.indexOf(currentSelectionId);
+    if (existingMatchIndex > -1) {
+      this.selectionOrder.splice(existingMatchIndex, 1);
+    }
+    if (currentSelectionId) {
+      this.selectionOrder.push(currentSelectionId);
+    }
+  }
   componentDidRender() {
     this.rendered.emit();
   }
@@ -4326,18 +4435,6 @@ let IgcTabsComponent = class {
     this.forcedUpdate = true;
     index.forceUpdate(this);
   }
-  updateSelectedIndex() {
-    const tabPanels = this.tabPanels;
-    if (tabPanels.length === 0) {
-      return;
-    }
-    if (this.selectedIndex > tabPanels.length - 1) {
-      this.selectedIndex = tabPanels.length - 1;
-    }
-    else {
-      this.handleSelectedIndexChanged(this.selectedIndex);
-    }
-  }
   get tabPanels() {
     return Array.from(this.el.querySelectorAll('igc-tab-panel-component'));
   }
@@ -4579,7 +4676,8 @@ let SampleComponent = class {
                       type: locale.IgcDockManagerPaneType.contentPane,
                       header: 'App.xaml',
                       contentId: 'content8',
-                      allowMaximize: true
+                      allowMaximize: true,
+                      acceptsInnerDock: false
                     }
                   ]
                 }
@@ -4661,7 +4759,8 @@ let SampleComponent = class {
             {
               type: locale.IgcDockManagerPaneType.contentPane,
               header: 'Floating 1',
-              contentId: 'content10'
+              contentId: 'content10',
+              acceptsInnerDock: false
             },
             {
               type: locale.IgcDockManagerPaneType.contentPane,
@@ -4865,6 +4964,9 @@ let SampleComponent = class {
     tabGroupPane.panes[0].disabled = true;
     this.dockManager.layout = Object.assign({}, this.layout);
   }
+  focusPane() {
+    this.dockManager.focusPane('content12');
+  }
   findElement(pane, type) {
     if (!pane) {
       return;
@@ -4939,6 +5041,17 @@ let SampleComponent = class {
     //   event.preventDefault();
     // }
   }
+  handlePaneScroll(event) {
+    this.log(event);
+    // // check if the pane content is scrolled to bottom
+    // let scrolledToBottom = false;
+    // const contentEl = event.detail.contentElement;
+    // if (contentEl.scrollHeight - contentEl.scrollTop - contentEl.clientHeight < 1)
+    // {
+    //   scrolledToBottom = true;
+    // }
+    // this.log("Scrolled to bottom: " + scrolledToBottom);
+  }
   handlePinnedToggle(event) {
     this.log(event);
     // if (event.detail.sourcePane.type === IgcDockManagerPaneType.contentPane) {
@@ -4997,13 +5110,13 @@ 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(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("button", { onClick: () => this.focusPane() }, "Focus 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), 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),
+    })), 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), onPaneScroll: this.handlePaneScroll.bind(this), onPanePinnedToggle: this.handlePinnedToggle.bind(this), onActivePaneChanged: this.handleActivePaneChanged.bind(this), onPaneDragStart: this.handleDragStart.bind(this), onPaneDragOver: this.handleDragOver.bind(this), onPaneDragEnd: this.handleDragEnd.bind(this), onSplitterResizeStart: this.handleSplitterResizeStart.bind(this), onSplitterResizeEnd: this.handleSplitterResizeEnd.bind(this), onFloatingPaneResizeStart: this.handleFloatingPaneResizeStart.bind(this), onFloatingPaneResizeMove: this.handleFloatingPaneResizeMove.bind(this), onFloatingPaneResizeEnd: this.handleFloatingPaneResizeEnd.bind(this), onLayoutChange: this.handleLayoutChange.bind(this),
       // resourceStrings={this.getCustomResourceStrings()}
       ref: el => this.dockManager = el,
       // allowFloatingPanesResize={false}
-      showHeaderIconOnHover: 'closeOnly' }, index.h("div", { slot: "header1" }, index.h("span", { style: { color: 'red' } }, "Solution Explorer"), index.h("button", null, "H")), index.h("div", { slot: "tabHeader1" }, index.h("span", { style: { color: 'orange' } }, "Solution Explorer"), index.h("button", null, "T")), index.h("div", { slot: "unpinnedHeader1" }, index.h("span", { style: { color: 'blue' } }, "Solution Explorer"), index.h("button", null, "U")), index.h("button", { style: { background: 'pink' }, slot: "tabHeaderCloseButton" }, "Y"), index.h("div", { slot: "content1", style: { width: '100%', height: '100%' } }, "Content 1"), index.h("div", { slot: "content2", style: { width: '100%', height: '100%' } }, index.h("button", null, "Tests")), index.h("div", { slot: "content3", style: { width: '100%', height: '100%' } }, "Content 3"), index.h("div", { slot: "content4" }, "Content 4"), index.h("div", { slot: "content5", style: { width: '100%', height: '100%' } }, "Content 5"), index.h("div", { slot: "content6", style: { width: '100%', height: '100%' } }, "Content 6"), index.h("div", { slot: "content7", style: { width: '100%', height: '100%' } }, "Content 7"), index.h("div", { slot: "content8" }, "Content 8"), index.h("div", { slot: "content9", style: { width: '100%', height: '100%' } }, "Content 9"), index.h("div", { slot: "content10", style: { width: '100%', height: '100%' } }, index.h("button", null, "Test")), index.h("div", { slot: "content11", style: { width: '100%', height: '100%' } }, index.h("input", null)), index.h("div", { slot: "content12", style: { width: '100%', height: '100%' } }, "Content 12"), index.h("div", { slot: "content13", style: { width: '100%', height: '100%' } }, "Content 13"), index.h("div", { slot: "content14", style: { width: '100%', height: '100%' } }, "Content 14"), index.h("div", { slot: "toolboxHeader" }, index.h("span", null, "[U] Toolbox")), index.h("div", { slot: "teamExplorerHeader" }, index.h("span", null, "[U] Team Explorer")))));
+      showHeaderIconOnHover: 'closeOnly' }, index.h("div", { slot: "header1" }, index.h("span", { style: { color: 'red' } }, "Solution Explorer"), index.h("button", null, "H")), index.h("div", { slot: "tabHeader1" }, index.h("span", { style: { color: 'orange' } }, "Solution Explorer"), index.h("button", null, "T")), index.h("div", { slot: "unpinnedHeader1" }, index.h("span", { style: { color: 'blue' } }, "Solution Explorer"), index.h("button", null, "U")), index.h("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;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-f11f2141.js');
+const index = require('./index-2e72b990.js');
 
 /*
  Stencil Client Patch Browser v2.12.1 | MIT Licensed | https://stenciljs.com
@@ -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",{"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],"direction":[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"],"allowInnerDock":[4,"allow-inner-dock"],"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],"focusPane":[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"],"allowCenterDock":[4,"allow-center-dock"]}],[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],"direction":[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/{index-f11f2141.js → index-2e72b990.js}

@@ -758,6 +758,14 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
             promise = safeCall(instance, 'componentWillLoad');
         }
     }
+    else {
+        {
+            promise = safeCall(instance, 'componentWillUpdate');
+        }
+    }
+    {
+        promise = then(promise, () => safeCall(instance, 'componentWillRender'));
+    }
     endSchedule();
     return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
 };

package/dist/cjs/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const locale = require('./locale-758076f2.js');
+const locale = require('./locale-17d229ad.js');
 
 
 

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f11f2141.js');
+const index = require('./index-2e72b990.js');
 
 /*
  Stencil Client Patch Esm v2.12.1 | MIT Licensed | https://stenciljs.com
@@ -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",{"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],"direction":[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"],"allowInnerDock":[4,"allow-inner-dock"],"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],"focusPane":[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"],"allowCenterDock":[4,"allow-center-dock"]}],[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],"direction":[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/{locale-758076f2.js → locale-17d229ad.js}

@@ -56,6 +56,12 @@ class IgcDockManagerComponent extends HTMLElement {
   removePane(pane) {
     return null;
   }
+  /**
+   * Focuses a pane from the layout.
+   */
+  focusPane(contentId) {
+    return null;
+  }
   addEventListener() { }
   removeEventListener() { }
 }

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

@@ -33,12 +33,13 @@ export class IgcContextMenuComponent {
     const menuItemsDivRect = this.menuItemsDiv.getBoundingClientRect();
     const hostRect = this.elem.getBoundingClientRect();
     const rootNodeShadowHost = this.target.getRootNode();
+    const isFloating = this.isFloating(rootNodeShadowHost.host);
     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 isRTL = rootHostRect.right - menuItemsDivRect.right <= 0;
+    const isRTL = rootHostRect.right - menuItemsDivRect.right < 1;
     const shouldChangeOpenOrientation = tabRect.bottom + menuItemsDivRect.bottom >= window.innerHeight
       || tabRect.height + menuItemsDivRect.bottom >= window.innerHeight
       || (isTabsMoreButton && tabsContentRect.height - menuItemsDivRect.height > 0);
@@ -47,7 +48,7 @@ export class IgcContextMenuComponent {
       : rootHostRect.top - menuItemsDivRect.top + rootHostRect.height;
     const menuToTop = tabsContentRect.top - menuItemsDivRect.top;
     const menuToStart = isRTL ? rootHostRect.right - menuItemsDivRect.width : rootHostRect.left;
-    const menuToEnd = isRTL ? rootHostRect.left : rootHostRect.right - menuItemsDivRect.width;
+    const menuToEnd = isRTL && !isFloating ? rootHostRect.left : rootHostRect.right - menuItemsDivRect.right;
     const menuToCenter = rootHostRect.left + (rootHostRect.width - menuItemsDivRect.width) / 2;
     let menuLeft = !isRTL ? menuToStart : menuToEnd;
     let menuTop = this.orientation === IgcContextMenuOrientation.bottom
@@ -74,7 +75,6 @@ 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';
@@ -85,6 +85,15 @@ export class IgcContextMenuComponent {
     const firstMenuItem = this.menuItemsDiv.querySelector('div[part="menu-item"]');
     (_a = firstMenuItem) === null || _a === void 0 ? void 0 : _a.focus();
   }
+  isFloating(host) {
+    while (host) {
+      if (host.tagName && host.tagName.toLowerCase() === 'igc-floating-pane-component') {
+        return true;
+      }
+      host = host.parentNode;
+    }
+    return false;
+  }
   handleKeyboardEvents(item, ev) {
     const menuItemChildren = this.menuItemsDiv.querySelectorAll('div[part="menu-item"]');
     if (ev.key === 'ArrowDown') {