igniteui-dockmanager 1.12.2-beta.0 → 1.12.2-beta.2

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 1.12.2
+
+### Bug fixes
+- Docking indicator left/right arrows positions are reversed in RTL mode [#54](https://github.com/IgniteUI/igniteui-dockmanager/issues/54)
+- Context menu not positioning correctly
+- Missing overloads for `addEventListener` and `removeEventListener`
+
+### Enhancements
+- Add `tabs-more-menu-content` and `tabs-more-menu-item` CSS parts
+
 ## 1.12.1
 
 ### Enhancements

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-f11f2141.js');
-const locale = require('./locale-d4a89130.js');
+const locale = require('./locale-758076f2.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}";
 
@@ -33,6 +33,12 @@ class Utils {
       position === locale.IgcDockingIndicatorPosition.outerTop ||
       position === locale.IgcDockingIndicatorPosition.outerLeft;
   }
+  static isDockingIndicatorBeforeRTL(position) {
+    return position === locale.IgcDockingIndicatorPosition.top ||
+      position === locale.IgcDockingIndicatorPosition.right ||
+      position === locale.IgcDockingIndicatorPosition.outerTop ||
+      position === locale.IgcDockingIndicatorPosition.outerRight;
+  }
   static isDockingIndicatorOuter(position) {
     return position === locale.IgcDockingIndicatorPosition.outerLeft ||
       position === locale.IgcDockingIndicatorPosition.outerRight ||
@@ -53,6 +59,23 @@ class Utils {
       .filter(key => partNameInfo[key])
       .join(delimiter);
   }
+  static getDirection(element) {
+    let direction = '';
+    if (element.dir !== '') {
+      direction = element.dir;
+    }
+    else {
+      let parent = element.parentElement;
+      while (parent) {
+        if (parent.dir !== '') {
+          direction = parent.dir;
+          break;
+        }
+        parent = parent.parentElement;
+      }
+    }
+    return direction;
+  }
 }
 
 /**
@@ -156,6 +179,7 @@ let IgcContextMenuComponent = class {
     document.defaultView.removeEventListener('mousedown', this.handleDocumentMouseDown, false);
   }
   componentDidLoad() {
+    const isTabsMoreButton = this.target.querySelector('slot[name="tabsMoreButton"]') !== null;
     const menuItemsDivRect = this.menuItemsDiv.getBoundingClientRect();
     const hostRect = this.elem.getBoundingClientRect();
     const rootNodeShadowHost = this.target.getRootNode();
@@ -166,8 +190,9 @@ let IgcContextMenuComponent = class {
     const tabsContentRect = tabsContentHost.querySelector('div[part~="tabs-content"]').getBoundingClientRect();
     const tabStripArea = tabsContentHost.querySelector('div[part~="tab-strip-area"]').getBoundingClientRect();
     const isRTL = rootHostRect.right - menuItemsDivRect.right <= 0;
-    const shouldChangeOpenOrientation = tabRect.bottom + menuItemsDivRect.height >= window.innerHeight
-      || tabRect.height + menuItemsDivRect.height >= window.innerHeight;
+    const shouldChangeOpenOrientation = tabRect.bottom + menuItemsDivRect.bottom >= window.innerHeight
+      || tabRect.height + menuItemsDivRect.bottom >= window.innerHeight
+      || (isTabsMoreButton && tabsContentRect.height - menuItemsDivRect.height > 0);
     const menuToBottom = shouldChangeOpenOrientation
       ? tabsContentRect.top + (tabsContentRect.height - menuItemsDivRect.bottom)
       : rootHostRect.top - menuItemsDivRect.top + rootHostRect.height;
@@ -614,6 +639,7 @@ class IgcDockManagerService {
     const paneIndex = targetParent.panes.indexOf(targetPane);
     const isIndicatorVertical = Utils.isDockingIndicatorVertical(position);
     const isSplitPaneVertical = Utils.isSplitPaneVertical(targetParent);
+    const isRTL = this.dockingIndicator && this.dockingIndicator.direction === 'rtl';
     let draggedPane = this.dockManager.draggedPane;
     if ((draggedPane === null || draggedPane === void 0 ? void 0 : draggedPane.type) === locale.IgcDockManagerPaneType.splitPane &&
       this.dockManager.documentOnlyDrag &&
@@ -634,7 +660,8 @@ class IgcDockManagerService {
     }
     const paneToDock = draggedPane ? this.getPaneToDock(draggedPane) : this.dockManager.activePane;
     if ((isIndicatorVertical && isSplitPaneVertical) || (!isIndicatorVertical && !isSplitPaneVertical)) {
-      const insertIndex = Utils.isDockingIndicatorBefore(position) ?
+      const insertIndex = Utils.isDockingIndicatorBefore(position) && !isRTL ||
+        Utils.isDockingIndicatorBeforeRTL(position) && isRTL ?
         paneIndex :
         paneIndex + 1;
       targetParent.panes.splice(insertIndex, 0, paneToDock);
@@ -643,7 +670,8 @@ class IgcDockManagerService {
       const newSplitPane = {
         type: locale.IgcDockManagerPaneType.splitPane,
         orientation: isSplitPaneVertical ? locale.IgcSplitPaneOrientation.horizontal : locale.IgcSplitPaneOrientation.vertical,
-        panes: Utils.isDockingIndicatorBefore(position) ?
+        panes: Utils.isDockingIndicatorBefore(position) && !isRTL ||
+          Utils.isDockingIndicatorBeforeRTL(position) && isRTL ?
           [paneToDock, targetPane] :
           [targetPane, paneToDock],
         size: targetPane.size
@@ -1013,8 +1041,11 @@ class IgcDockManagerService {
     this.removePane(paneToDock);
     const isIndicatorVertical = position === locale.IgcDockingIndicatorPosition.top || position === locale.IgcDockingIndicatorPosition.bottom;
     const isSplitPaneVertical = Utils.isSplitPaneVertical(rootPane);
+    const isRTL = this.dockingIndicator && this.dockingIndicator.direction === 'rtl';
     if ((isIndicatorVertical && isSplitPaneVertical) || (!isIndicatorVertical && !isSplitPaneVertical)) {
-      const insertIndex = (position === locale.IgcDockingIndicatorPosition.left || position === locale.IgcDockingIndicatorPosition.top) ?
+      const insertIndex = position === locale.IgcDockingIndicatorPosition.left && !isRTL ||
+        position === locale.IgcDockingIndicatorPosition.right && isRTL ||
+        position === locale.IgcDockingIndicatorPosition.top ?
         0 :
         rootPane.panes.length;
       rootPane.panes.splice(insertIndex, 0, paneToDock);
@@ -1023,7 +1054,9 @@ class IgcDockManagerService {
       const newRootPane = {
         type: locale.IgcDockManagerPaneType.splitPane,
         orientation: isSplitPaneVertical ? locale.IgcSplitPaneOrientation.horizontal : locale.IgcSplitPaneOrientation.vertical,
-        panes: (position === locale.IgcDockingIndicatorPosition.left || position === locale.IgcDockingIndicatorPosition.top) ?
+        panes: position === locale.IgcDockingIndicatorPosition.left && !isRTL ||
+          position === locale.IgcDockingIndicatorPosition.right && isRTL ||
+          position === locale.IgcDockingIndicatorPosition.top ?
           [paneToDock, rootPane] :
           [rootPane, paneToDock],
       };
@@ -1473,9 +1506,14 @@ class IgcDockManagerService {
     const isIndicatorVertical = Utils.isDockingIndicatorVertical(this.dockingIndicator.position);
     const isSplitPaneVertical = Utils.isSplitPaneVertical(targetParent);
     const isSameSplitPane = ((isIndicatorVertical && isSplitPaneVertical) || (!isIndicatorVertical && !isSplitPaneVertical));
+    const isRTL = this.dockingIndicator.direction === 'rtl';
     const panesTotalSize = panes.reduce((a, b) => a + (b.size || IGC_DEFAULT_PANE_SIZE), 0);
-    const beforePanesTotalSize = panes.slice(0, dropTargetIndex).reduce((a, b) => a + (b.size || IGC_DEFAULT_PANE_SIZE), 0);
-    const afterPanesTotalSize = panes.slice(0, dropTargetIndex + 1).reduce((a, b) => a + (b.size || IGC_DEFAULT_PANE_SIZE), 0);
+    const beforePanesTotalSize = !isRTL || isIndicatorVertical
+      ? panes.slice(0, dropTargetIndex).reduce((a, b) => a + (b.size || IGC_DEFAULT_PANE_SIZE), 0)
+      : panes.slice(dropTargetIndex, panes.length).reduce((a, b) => a + (b.size || IGC_DEFAULT_PANE_SIZE), 0);
+    const afterPanesTotalSize = !isRTL || isIndicatorVertical
+      ? panes.slice(0, dropTargetIndex + 1).reduce((a, b) => a + (b.size || IGC_DEFAULT_PANE_SIZE), 0)
+      : panes.slice(dropTargetIndex + 1, panes.length).reduce((a, b) => a + (b.size || IGC_DEFAULT_PANE_SIZE), 0);
     switch (this.dockingIndicator.position) {
       case locale.IgcDockingIndicatorPosition.left:
       case locale.IgcDockingIndicatorPosition.outerLeft:
@@ -1484,7 +1522,9 @@ class IgcDockManagerService {
         shadowRect.height = baseRect.height;
         if (isSameSplitPane) {
           shadowRect.width = (draggedPaneSize / (draggedPaneSize + panesTotalSize)) * parentRect.width;
-          shadowRect.x = parentRect.left + beforePanesTotalSize / (draggedPaneSize + panesTotalSize) * parentRect.width;
+          !isRTL
+            ? shadowRect.x = parentRect.left + beforePanesTotalSize / (draggedPaneSize + panesTotalSize) * parentRect.width
+            : shadowRect.x = parentRect.left + afterPanesTotalSize / (draggedPaneSize + panesTotalSize) * parentRect.width;
         }
         else {
           shadowRect.width = parentRect.width / 2;
@@ -1496,7 +1536,9 @@ class IgcDockManagerService {
         shadowRect.height = baseRect.height;
         if (isSameSplitPane) {
           shadowRect.width = (draggedPaneSize / (draggedPaneSize + panesTotalSize)) * parentRect.width;
-          shadowRect.x = parentRect.left + afterPanesTotalSize / (draggedPaneSize + panesTotalSize) * parentRect.width;
+          !isRTL
+            ? shadowRect.x = parentRect.left + afterPanesTotalSize / (draggedPaneSize + panesTotalSize) * parentRect.width
+            : shadowRect.x = parentRect.left + beforePanesTotalSize / (draggedPaneSize + panesTotalSize) * parentRect.width;
         }
         else {
           shadowRect.width = parentRect.width / 2;
@@ -2519,7 +2561,8 @@ let IgcDockManager = class {
     if (dockingIndicatorElement) {
       this.service.dockingIndicator = {
         position: dockingIndicatorElement.position,
-        isRoot: true
+        isRoot: true,
+        direction: Utils.getDirection(this.element)
       };
     }
     if (!dockingIndicatorElement) {
@@ -2528,7 +2571,8 @@ let IgcDockManager = class {
         dockingIndicatorElement = joystickIcon;
         this.service.dockingIndicator = {
           position: joystickIcon.position,
-          isRoot: false
+          isRoot: false,
+          direction: Utils.getDirection(this.element)
         };
         const joystickIndicator = joystickIcon.closest('igc-joystick-indicator-component');
         indicatorTarget = joystickIndicator.dropTargetPaneInfo;
@@ -2939,6 +2983,8 @@ let IgcDockManager = class {
     return (index.h("igc-root-docking-indicator-component", { position: position }));
   }
   renderDockingIndicators() {
+    const startPosition = Utils.getDirection(this.element) !== 'rtl' ? locale.IgcDockingIndicatorPosition.left : locale.IgcDockingIndicatorPosition.right;
+    const endPosition = Utils.getDirection(this.element) !== 'rtl' ? locale.IgcDockingIndicatorPosition.right : locale.IgcDockingIndicatorPosition.left;
     return (index.h("div", { class: "docking-indicators-container", style: {
         display: this.showDockingIndicators ? 'flex' : 'none'
       } }, !this.documentOnlyDrag && this.renderRootDockingIndicator(locale.IgcDockingIndicatorPosition.top), index.h("div", { style: {
@@ -2946,7 +2992,7 @@ let IgcDockManager = class {
         display: 'flex',
         flexDirection: 'row',
         justifyContent: 'space-between'
-      } }, !this.documentOnlyDrag && this.renderRootDockingIndicator(locale.IgcDockingIndicatorPosition.left), !this.documentOnlyDrag && this.renderRootDockingIndicator(locale.IgcDockingIndicatorPosition.right)), !this.documentOnlyDrag && this.renderRootDockingIndicator(locale.IgcDockingIndicatorPosition.bottom), this.dropTargetPaneInfo &&
+      } }, !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 })));
   }
   renderContextMenu() {
@@ -3207,9 +3253,14 @@ let IgcJoystickIconComponent = class {
   resolveGridColumn() {
     switch (this.position) {
       case locale.IgcDockingIndicatorPosition.outerLeft:
-        return '1';
+        return this.direction !== 'rtl' ? '1' : '5';
       case locale.IgcDockingIndicatorPosition.left:
-        return this.isDocHost ? '2' : '1';
+        if (this.direction !== 'rtl') {
+          return this.isDocHost ? '2' : '1';
+        }
+        else {
+          return this.isDocHost ? '4' : '3';
+        }
       case locale.IgcDockingIndicatorPosition.center:
         return this.isDocHost ? '3' : '2';
       case locale.IgcDockingIndicatorPosition.outerTop:
@@ -3219,9 +3270,14 @@ let IgcJoystickIconComponent = class {
       case locale.IgcDockingIndicatorPosition.bottom:
         return this.isDocHost ? '3' : '2';
       case locale.IgcDockingIndicatorPosition.outerRight:
-        return '5';
+        return this.direction !== 'rtl' ? '5' : '1';
       case locale.IgcDockingIndicatorPosition.right:
-        return this.isDocHost ? '4' : '3';
+        if (this.direction !== 'rtl') {
+          return this.isDocHost ? '4' : '3';
+        }
+        else {
+          return this.isDocHost ? '2' : '1';
+        }
     }
   }
   renderIcon() {
@@ -3284,8 +3340,12 @@ let IgcJoystickIndicatorComponent = class {
       && position !== locale.IgcDockingIndicatorPosition.center
       && this.dropTargetPaneInfo.pane.type === locale.IgcDockManagerPaneType.documentHost;
   }
+  closestElement(selector, el) {
+    return ((el && el.closest(selector)) ||
+      this.closestElement(selector, el.getRootNode().host));
+  }
   renderIndicator(position) {
-    return (index.h("igc-joystick-icon-component", { isDocHost: this.isDocHost, position: position, empty: this.isEmptyCenter(position) || this.isEmptyEdge(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) }));
   }
   render() {
     this.isDocHost = !!this.dropTargetPaneInfo.docHost;
@@ -3299,6 +3359,7 @@ let IgcJoystickIndicatorComponent = class {
         '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))));
   }
+  get element() { return index.getElement(this); }
 };
 IgcJoystickIndicatorComponent.style = joystickIndicatorComponentCss;
 
@@ -4376,6 +4437,8 @@ let IgcTabsComponent = class {
       'tabs-more-button': true,
       'tabs-maximize-button': true,
       'tabs-minimize-button': true,
+      'context-menu-content: tabs-more-menu-content': true,
+      'context-menu-item: tabs-more-menu-item': true,
       document: top,
       top,
       bottom

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

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

package/dist/cjs/index.cjs.js

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

package/dist/cjs/loader.cjs.js

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

package/dist/cjs/{locale-d4a89130.js → locale-758076f2.js}

@@ -56,10 +56,8 @@ class IgcDockManagerComponent extends HTMLElement {
   removePane(pane) {
     return null;
   }
-  addEventListener(type, listener, options) {
-  }
-  removeEventListener(type, listener, options) {
-  }
+  addEventListener() { }
+  removeEventListener() { }
 }
 exports.IgcResizerLocation = void 0;
 (function (IgcResizerLocation) {

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

@@ -29,6 +29,7 @@ export class IgcContextMenuComponent {
     document.defaultView.removeEventListener('mousedown', this.handleDocumentMouseDown, false);
   }
   componentDidLoad() {
+    const isTabsMoreButton = this.target.querySelector('slot[name="tabsMoreButton"]') !== null;
     const menuItemsDivRect = this.menuItemsDiv.getBoundingClientRect();
     const hostRect = this.elem.getBoundingClientRect();
     const rootNodeShadowHost = this.target.getRootNode();
@@ -39,8 +40,9 @@ export class IgcContextMenuComponent {
     const tabsContentRect = tabsContentHost.querySelector('div[part~="tabs-content"]').getBoundingClientRect();
     const tabStripArea = tabsContentHost.querySelector('div[part~="tab-strip-area"]').getBoundingClientRect();
     const isRTL = rootHostRect.right - menuItemsDivRect.right <= 0;
-    const shouldChangeOpenOrientation = tabRect.bottom + menuItemsDivRect.height >= window.innerHeight
-      || tabRect.height + menuItemsDivRect.height >= window.innerHeight;
+    const shouldChangeOpenOrientation = tabRect.bottom + menuItemsDivRect.bottom >= window.innerHeight
+      || tabRect.height + menuItemsDivRect.bottom >= window.innerHeight
+      || (isTabsMoreButton && tabsContentRect.height - menuItemsDivRect.height > 0);
     const menuToBottom = shouldChangeOpenOrientation
       ? tabsContentRect.top + (tabsContentRect.height - menuItemsDivRect.bottom)
       : rootHostRect.top - menuItemsDivRect.top + rootHostRect.height;

package/dist/collection/components/dockmanager/docking/joystick-icon-component.js

@@ -78,9 +78,14 @@ export class IgcJoystickIconComponent {
   resolveGridColumn() {
     switch (this.position) {
       case IgcDockingIndicatorPosition.outerLeft:
-        return '1';
+        return this.direction !== 'rtl' ? '1' : '5';
       case IgcDockingIndicatorPosition.left:
-        return this.isDocHost ? '2' : '1';
+        if (this.direction !== 'rtl') {
+          return this.isDocHost ? '2' : '1';
+        }
+        else {
+          return this.isDocHost ? '4' : '3';
+        }
       case IgcDockingIndicatorPosition.center:
         return this.isDocHost ? '3' : '2';
       case IgcDockingIndicatorPosition.outerTop:
@@ -90,9 +95,14 @@ export class IgcJoystickIconComponent {
       case IgcDockingIndicatorPosition.bottom:
         return this.isDocHost ? '3' : '2';
       case IgcDockingIndicatorPosition.outerRight:
-        return '5';
+        return this.direction !== 'rtl' ? '5' : '1';
       case IgcDockingIndicatorPosition.right:
-        return this.isDocHost ? '4' : '3';
+        if (this.direction !== 'rtl') {
+          return this.isDocHost ? '4' : '3';
+        }
+        else {
+          return this.isDocHost ? '2' : '1';
+        }
     }
   }
   renderIcon() {
@@ -184,6 +194,23 @@ export class IgcJoystickIconComponent {
       "attribute": "position",
       "reflect": false
     },
+    "direction": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "direction",
+      "reflect": false
+    },
     "empty": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/dockmanager/docking/joystick-indicator-component.js

@@ -1,4 +1,5 @@
-import { Component, Host, Prop, h } from '@stencil/core';
+import { Component, Element, Host, Prop, h } from '@stencil/core';
+import { Utils } from '../../../utils/utils';
 import { IgcDockManagerPaneType, IgcDockingIndicatorPosition } from '../dockmanager.public-interfaces';
 /**
  * @hidden
@@ -14,8 +15,12 @@ export class IgcJoystickIndicatorComponent {
       && position !== IgcDockingIndicatorPosition.center
       && this.dropTargetPaneInfo.pane.type === IgcDockManagerPaneType.documentHost;
   }
+  closestElement(selector, el) {
+    return ((el && el.closest(selector)) ||
+      this.closestElement(selector, el.getRootNode().host));
+  }
   renderIndicator(position) {
-    return (h("igc-joystick-icon-component", { isDocHost: this.isDocHost, position: position, empty: this.isEmptyCenter(position) || this.isEmptyEdge(position) }));
+    return (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) }));
   }
   render() {
     this.isDocHost = !!this.dropTargetPaneInfo.docHost;
@@ -86,4 +91,5 @@ export class IgcJoystickIndicatorComponent {
       "reflect": false
     }
   }; }
+  static get elementRef() { return "element"; }
 }

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

@@ -737,7 +737,8 @@ export class IgcDockManager {
     if (dockingIndicatorElement) {
       this.service.dockingIndicator = {
         position: dockingIndicatorElement.position,
-        isRoot: true
+        isRoot: true,
+        direction: Utils.getDirection(this.element)
       };
     }
     if (!dockingIndicatorElement) {
@@ -746,7 +747,8 @@ export class IgcDockManager {
         dockingIndicatorElement = joystickIcon;
         this.service.dockingIndicator = {
           position: joystickIcon.position,
-          isRoot: false
+          isRoot: false,
+          direction: Utils.getDirection(this.element)
         };
         const joystickIndicator = joystickIcon.closest('igc-joystick-indicator-component');
         indicatorTarget = joystickIndicator.dropTargetPaneInfo;
@@ -1174,6 +1176,8 @@ export class IgcDockManager {
     return (h("igc-root-docking-indicator-component", { position: position }));
   }
   renderDockingIndicators() {
+    const startPosition = Utils.getDirection(this.element) !== 'rtl' ? IgcDockingIndicatorPosition.left : IgcDockingIndicatorPosition.right;
+    const endPosition = Utils.getDirection(this.element) !== 'rtl' ? IgcDockingIndicatorPosition.right : IgcDockingIndicatorPosition.left;
     return (h("div", { class: "docking-indicators-container", style: {
         display: this.showDockingIndicators ? 'flex' : 'none'
       } },
@@ -1184,8 +1188,8 @@ export class IgcDockManager {
           flexDirection: 'row',
           justifyContent: 'space-between'
         } },
-        !this.documentOnlyDrag && this.renderRootDockingIndicator(IgcDockingIndicatorPosition.left),
-        !this.documentOnlyDrag && this.renderRootDockingIndicator(IgcDockingIndicatorPosition.right)),
+        !this.documentOnlyDrag && this.renderRootDockingIndicator(startPosition),
+        !this.documentOnlyDrag && this.renderRootDockingIndicator(endPosition)),
       !this.documentOnlyDrag && this.renderRootDockingIndicator(IgcDockingIndicatorPosition.bottom),
       this.dropTargetPaneInfo &&
         h("igc-joystick-indicator-component", { dropTargetPaneInfo: this.dropTargetPaneInfo, documentOnlyDrag: this.documentOnlyDrag })));

package/dist/collection/components/dockmanager/dockmanager.public-interfaces.js

@@ -55,16 +55,8 @@ export class IgcDockManagerComponent extends HTMLElement {
     pane = pane;
     return null;
   }
-  addEventListener(type, listener, options) {
-    type = type;
-    listener = listener;
-    options = options;
-  }
-  removeEventListener(type, listener, options) {
-    type = type;
-    listener = listener;
-    options = options;
-  }
+  addEventListener() { }
+  removeEventListener() { }
 }
 export var IgcResizerLocation;
 (function (IgcResizerLocation) {

package/dist/collection/components/dockmanager/dockmanager.service.js

@@ -317,6 +317,7 @@ export class IgcDockManagerService {
     const paneIndex = targetParent.panes.indexOf(targetPane);
     const isIndicatorVertical = Utils.isDockingIndicatorVertical(position);
     const isSplitPaneVertical = Utils.isSplitPaneVertical(targetParent);
+    const isRTL = this.dockingIndicator && this.dockingIndicator.direction === 'rtl';
     let draggedPane = this.dockManager.draggedPane;
     if ((draggedPane === null || draggedPane === void 0 ? void 0 : draggedPane.type) === IgcDockManagerPaneType.splitPane &&
       this.dockManager.documentOnlyDrag &&
@@ -337,7 +338,8 @@ export class IgcDockManagerService {
     }
     const paneToDock = draggedPane ? this.getPaneToDock(draggedPane) : this.dockManager.activePane;
     if ((isIndicatorVertical && isSplitPaneVertical) || (!isIndicatorVertical && !isSplitPaneVertical)) {
-      const insertIndex = Utils.isDockingIndicatorBefore(position) ?
+      const insertIndex = Utils.isDockingIndicatorBefore(position) && !isRTL ||
+        Utils.isDockingIndicatorBeforeRTL(position) && isRTL ?
         paneIndex :
         paneIndex + 1;
       targetParent.panes.splice(insertIndex, 0, paneToDock);
@@ -346,7 +348,8 @@ export class IgcDockManagerService {
       const newSplitPane = {
         type: IgcDockManagerPaneType.splitPane,
         orientation: isSplitPaneVertical ? IgcSplitPaneOrientation.horizontal : IgcSplitPaneOrientation.vertical,
-        panes: Utils.isDockingIndicatorBefore(position) ?
+        panes: Utils.isDockingIndicatorBefore(position) && !isRTL ||
+          Utils.isDockingIndicatorBeforeRTL(position) && isRTL ?
           [paneToDock, targetPane] :
           [targetPane, paneToDock],
         size: targetPane.size
@@ -716,8 +719,11 @@ export class IgcDockManagerService {
     this.removePane(paneToDock);
     const isIndicatorVertical = position === IgcDockingIndicatorPosition.top || position === IgcDockingIndicatorPosition.bottom;
     const isSplitPaneVertical = Utils.isSplitPaneVertical(rootPane);
+    const isRTL = this.dockingIndicator && this.dockingIndicator.direction === 'rtl';
     if ((isIndicatorVertical && isSplitPaneVertical) || (!isIndicatorVertical && !isSplitPaneVertical)) {
-      const insertIndex = (position === IgcDockingIndicatorPosition.left || position === IgcDockingIndicatorPosition.top) ?
+      const insertIndex = position === IgcDockingIndicatorPosition.left && !isRTL ||
+        position === IgcDockingIndicatorPosition.right && isRTL ||
+        position === IgcDockingIndicatorPosition.top ?
         0 :
         rootPane.panes.length;
       rootPane.panes.splice(insertIndex, 0, paneToDock);
@@ -726,7 +732,9 @@ export class IgcDockManagerService {
       const newRootPane = {
         type: IgcDockManagerPaneType.splitPane,
         orientation: isSplitPaneVertical ? IgcSplitPaneOrientation.horizontal : IgcSplitPaneOrientation.vertical,
-        panes: (position === IgcDockingIndicatorPosition.left || position === IgcDockingIndicatorPosition.top) ?
+        panes: position === IgcDockingIndicatorPosition.left && !isRTL ||
+          position === IgcDockingIndicatorPosition.right && isRTL ||
+          position === IgcDockingIndicatorPosition.top ?
           [paneToDock, rootPane] :
           [rootPane, paneToDock],
       };
@@ -1176,9 +1184,14 @@ export class IgcDockManagerService {
     const isIndicatorVertical = Utils.isDockingIndicatorVertical(this.dockingIndicator.position);
     const isSplitPaneVertical = Utils.isSplitPaneVertical(targetParent);
     const isSameSplitPane = ((isIndicatorVertical && isSplitPaneVertical) || (!isIndicatorVertical && !isSplitPaneVertical));
+    const isRTL = this.dockingIndicator.direction === 'rtl';
     const panesTotalSize = panes.reduce((a, b) => a + (b.size || IGC_DEFAULT_PANE_SIZE), 0);
-    const beforePanesTotalSize = panes.slice(0, dropTargetIndex).reduce((a, b) => a + (b.size || IGC_DEFAULT_PANE_SIZE), 0);
-    const afterPanesTotalSize = panes.slice(0, dropTargetIndex + 1).reduce((a, b) => a + (b.size || IGC_DEFAULT_PANE_SIZE), 0);
+    const beforePanesTotalSize = !isRTL || isIndicatorVertical
+      ? panes.slice(0, dropTargetIndex).reduce((a, b) => a + (b.size || IGC_DEFAULT_PANE_SIZE), 0)
+      : panes.slice(dropTargetIndex, panes.length).reduce((a, b) => a + (b.size || IGC_DEFAULT_PANE_SIZE), 0);
+    const afterPanesTotalSize = !isRTL || isIndicatorVertical
+      ? panes.slice(0, dropTargetIndex + 1).reduce((a, b) => a + (b.size || IGC_DEFAULT_PANE_SIZE), 0)
+      : panes.slice(dropTargetIndex + 1, panes.length).reduce((a, b) => a + (b.size || IGC_DEFAULT_PANE_SIZE), 0);
     switch (this.dockingIndicator.position) {
       case IgcDockingIndicatorPosition.left:
       case IgcDockingIndicatorPosition.outerLeft:
@@ -1187,7 +1200,9 @@ export class IgcDockManagerService {
         shadowRect.height = baseRect.height;
         if (isSameSplitPane) {
           shadowRect.width = (draggedPaneSize / (draggedPaneSize + panesTotalSize)) * parentRect.width;
-          shadowRect.x = parentRect.left + beforePanesTotalSize / (draggedPaneSize + panesTotalSize) * parentRect.width;
+          !isRTL
+            ? shadowRect.x = parentRect.left + beforePanesTotalSize / (draggedPaneSize + panesTotalSize) * parentRect.width
+            : shadowRect.x = parentRect.left + afterPanesTotalSize / (draggedPaneSize + panesTotalSize) * parentRect.width;
         }
         else {
           shadowRect.width = parentRect.width / 2;
@@ -1199,7 +1214,9 @@ export class IgcDockManagerService {
         shadowRect.height = baseRect.height;
         if (isSameSplitPane) {
           shadowRect.width = (draggedPaneSize / (draggedPaneSize + panesTotalSize)) * parentRect.width;
-          shadowRect.x = parentRect.left + afterPanesTotalSize / (draggedPaneSize + panesTotalSize) * parentRect.width;
+          !isRTL
+            ? shadowRect.x = parentRect.left + afterPanesTotalSize / (draggedPaneSize + panesTotalSize) * parentRect.width
+            : shadowRect.x = parentRect.left + beforePanesTotalSize / (draggedPaneSize + panesTotalSize) * parentRect.width;
         }
         else {
           shadowRect.width = parentRect.width / 2;