igniteui-dockmanager 1.18.0-beta.2 → 1.18.0-beta.3

package/custom-elements.json

@@ -5654,35 +5654,10 @@
                   "default": "false"
                 },
                 {
-                  "name": "isRoot",
+                  "name": "_isRoot",
                   "default": "false"
                 }
               ]
-            },
-            {
-              "kind": "method",
-              "name": "shiftPlaceholderStartToNewRoot",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "oldRootPane",
-                  "type": {
-                    "text": "IgcSplitPane"
-                  }
-                },
-                {
-                  "name": "newRootPane",
-                  "type": {
-                    "text": "IgcSplitPane"
-                  }
-                },
-                {
-                  "name": "isDockingBefore",
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ]
             }
           ],
           "events": []
@@ -9091,6 +9066,14 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "splitterBaseElement",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "flyoutMaxSize",
@@ -9108,6 +9091,15 @@
               "privacy": "private",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "isRTL",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "element",
@@ -9158,15 +9150,6 @@
               },
               "default": "false"
             },
-            {
-              "kind": "field",
-              "name": "resizable",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
-              "description": "Determines whether the splitter can be used to resize adjacent panes."
-            },
             {
               "kind": "field",
               "name": "scrollSpeed",
@@ -9273,7 +9256,15 @@
             },
             {
               "kind": "method",
-              "name": "handleMouseDown"
+              "name": "handleMouseDown",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
             },
             {
               "kind": "field",
@@ -9390,13 +9381,6 @@
                 "text": "boolean"
               }
             },
-            {
-              "name": "resizable",
-              "fieldName": "resizable",
-              "type": {
-                "text": "boolean"
-              }
-            },
             {
               "name": "scroll-speed",
               "fieldName": "scrollSpeed",

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

@@ -966,17 +966,13 @@ class IgcDockManagerService {
     }
     // If the pane to close is the last non-placeholder pane of a split pane, close the whole split pane.
     // Also check if the pane to close is inside a split pane and close the top split pane that holds the placeholder.
-    if (parent.type === locale.IgcDockManagerPaneType.splitPane) {
-      const hasPlaceholderStart = parent.panes.some(p => p.type === locale.IgcDockManagerPaneType.contentPane && p.contentId === "placeholderStart");
+    if (parent.type === locale.IgcDockManagerPaneType.splitPane && parent.panes.length === 2) {
       const hasPlaceholderEnd = parent.panes.some(p => p.type === locale.IgcDockManagerPaneType.contentPane && p.contentId === "placeholderEnd");
-      const expectedLength = hasPlaceholderStart && hasPlaceholderEnd ? 3 : 2;
-      if (parent.panes.length === expectedLength) {
-        const isValidContentPane = parent.panes.every(p => p.type === locale.IgcDockManagerPaneType.contentPane ||
-          p.type === locale.IgcDockManagerPaneType.tabGroupPane ||
-          (p.type === locale.IgcDockManagerPaneType.splitPane && p.panes.length === 1 && p.panes[0].type === locale.IgcDockManagerPaneType.contentPane));
-        if ((hasPlaceholderStart || hasPlaceholderEnd) && isValidContentPane) {
-          return parent;
-        }
+      const isValidContentPane = parent.panes.every(p => p.type === locale.IgcDockManagerPaneType.contentPane ||
+        p.type === locale.IgcDockManagerPaneType.tabGroupPane ||
+        (p.type === locale.IgcDockManagerPaneType.splitPane && p.panes.length === 1 && p.panes[0].type === locale.IgcDockManagerPaneType.contentPane));
+      if (hasPlaceholderEnd && isValidContentPane) {
+        return parent;
       }
     }
     return this.checkUseFixedSizeParent(parent);
@@ -1298,9 +1294,6 @@ class IgcDockManagerService {
             [paneToDock, rootPane] :
             [rootPane, paneToDock],
         };
-        if (rootPane.useFixedSize) {
-          this.shiftPlaceholderStartToNewRoot(rootPane, newRootPane, isDockingBefore);
-        }
         layout.rootPane = newRootPane;
       }
       if (!rootPane.useFixedSize) {
@@ -2084,24 +2077,10 @@ class IgcDockManagerService {
     const parent = this.getParent(pane);
     return this.isSplitPaneIgnoringResizeConstraints(parent);
   }
-  checkAndAddPlaceholderPane(pane, ignoreNestedPanes = false, isRoot = false) {
+  checkAndAddPlaceholderPane(pane, ignoreNestedPanes = false, _isRoot = false) {
     //Add placeholder pane in every splitPane that ignores resize constraints
     if (this.isSplitPaneIgnoringResizeConstraints(pane)) {
-      const firstPane = pane.panes[0];
       const lastPane = pane.panes.at(-1);
-      if (firstPane && isRoot && (firstPane.type !== locale.IgcDockManagerPaneType.contentPane || firstPane.header !== 'Placeholder')) {
-        const placeholderPaneTop = {
-          type: locale.IgcDockManagerPaneType.contentPane,
-          contentId: "placeholderStart",
-          header: 'Placeholder',
-          allowDocking: false,
-          allowFloating: false,
-          allowMaximize: false,
-          allowPinning: false,
-          size: 0
-        };
-        pane.panes.unshift(placeholderPaneTop);
-      }
       if (lastPane && (lastPane.type !== locale.IgcDockManagerPaneType.contentPane || lastPane.header !== 'Placeholder')) {
         const placeholderPaneBottom = {
           type: locale.IgcDockManagerPaneType.contentPane,
@@ -2123,17 +2102,6 @@ class IgcDockManagerService {
       this.checkAndAddPlaceholderPane(pane.rootPane);
     }
   }
-  shiftPlaceholderStartToNewRoot(oldRootPane, newRootPane, isDockingBefore) {
-    if (!oldRootPane || oldRootPane.type !== locale.IgcDockManagerPaneType.splitPane)
-      return;
-    const firstPane = oldRootPane.panes[0];
-    const firstIsPlaceholder = (firstPane === null || firstPane === void 0 ? void 0 : firstPane.type) === locale.IgcDockManagerPaneType.contentPane
-      && firstPane.contentId.startsWith('placeholder');
-    if (isDockingBefore && firstIsPlaceholder) {
-      const [placeholder] = oldRootPane.panes.splice(0, 1);
-      newRootPane.panes.splice(0, 0, placeholder);
-    }
-  }
 }
 
 /**
@@ -2639,6 +2607,13 @@ const IgcDockManager = class {
       const splitPaneEl = pathHTMLElements.filter(p => p.tagName.toLowerCase() === "igc-split-pane-component")[0];
       const splitPane = this.panesElementMap.getByValue(splitPaneEl);
       this.splitPaneToResize = splitPane;
+      if (this.flyoutPane) {
+        const splitterEl = pathHTMLElements.find((p) => p.tagName.toLowerCase() === 'igc-splitter-component');
+        const isFlyoutSplitter = (splitterEl === null || splitterEl === void 0 ? void 0 : splitterEl.flyoutLocation) !== undefined;
+        if (!isFlyoutSplitter) {
+          this.service.flyoutPane(this.flyoutPane);
+        }
+      }
     }
   }
   handlePointerUp() {
@@ -2673,9 +2648,25 @@ const IgcDockManager = class {
   handlePointerMove(event) {
     var _a;
     this.lastPointerEvent = event;
+    // check if resize is in progress
     if (this.isSplitterResizing && ((_a = this.splitPaneToResize) === null || _a === void 0 ? void 0 : _a.useFixedSize)) {
-      if (!this.rafId) {
-        this.startResizeLoop();
+      const rect = this.getDockedPanesContainerRect();
+      // Check if the pointer is outside the bounds
+      const isOutsideHorizontal = event.pageX < rect.left || event.pageX > rect.right;
+      const isOutsideVertical = event.pageY < rect.top || event.pageY > rect.bottom;
+      const splitPaneElement = this.panesElementMap.get(this.splitPaneToResize);
+      const isScrollable = this.splitPaneToResize.orientation === locale.IgcSplitPaneOrientation.horizontal && (splitPaneElement === null || splitPaneElement === void 0 ? void 0 : splitPaneElement.scrollWidth) > (splitPaneElement === null || splitPaneElement === void 0 ? void 0 : splitPaneElement.clientWidth) ||
+        this.splitPaneToResize.orientation === locale.IgcSplitPaneOrientation.vertical && (splitPaneElement === null || splitPaneElement === void 0 ? void 0 : splitPaneElement.scrollHeight) > (splitPaneElement === null || splitPaneElement === void 0 ? void 0 : splitPaneElement.clientHeight);
+      if ((isOutsideHorizontal || isOutsideVertical) && isScrollable) {
+        if (!this.rafId)
+          this.startResizeLoop();
+      }
+      else {
+        // Stop continuous loop
+        if (this.rafId) {
+          cancelAnimationFrame(this.rafId);
+          this.rafId = null;
+        }
       }
     }
   }
@@ -2785,18 +2776,22 @@ const IgcDockManager = class {
       return;
     const panesSizeSum = ctx.sizeSum;
     const rect = parentSplitPane.getBoundingClientRect();
-    // Config
     const maxDistance = 100; // px threshold for max autoscroll speed
     const baseScrollSpeed = this.autoScrollConfig.scrollSpeed;
     // Distances outside container bounds
     const outBottom = this.lastPointerEvent.pageY - (rect.bottom);
     const outTop = (rect.top) - this.lastPointerEvent.pageY;
-    const outRight = this.lastPointerEvent.pageX - (rect.right);
-    const outLeft = (rect.left) - this.lastPointerEvent.pageX;
+    let outRight = this.lastPointerEvent.pageX - (rect.right);
+    let outLeft = (rect.left) - this.lastPointerEvent.pageX;
+    const isRTL = this.direction === 'rtl';
     // Scale factor 0 → 1 based on distance outside
     const scrollFactor = (dist) => Math.min(Math.max(dist, 0), maxDistance) / maxDistance;
     const verticalSpeed = scrollFactor(Math.max(outBottom, outTop)) * baseScrollSpeed;
     const horizontalSpeed = scrollFactor(Math.max(outRight, outLeft)) * baseScrollSpeed;
+    if (isRTL) {
+      outRight *= -1;
+      outLeft *= -1;
+    }
     // Compute resize percentage based on total drag
     let deltaPercentage = 0;
     if (ctx.orientation === locale.IgcSplitPaneOrientation.vertical) {
@@ -2810,20 +2805,41 @@ const IgcDockManager = class {
       }
     }
     else {
-      if (outRight > 0) {
+      const scrollRight = () => {
         deltaPercentage += outRight / panesSizeSum;
         parentSplitPane.scrollLeft = Math.min(parentSplitPane.scrollWidth - parentSplitPane.clientWidth, parentSplitPane.scrollLeft + horizontalSpeed);
-      }
-      if (outLeft > 0) {
+      };
+      const scrollLeft = () => {
         deltaPercentage -= outLeft / panesSizeSum;
-        parentSplitPane.scrollLeft = Math.max(0, parentSplitPane.scrollLeft - horizontalSpeed);
+        parentSplitPane.scrollLeft = isRTL ?
+          Math.max(parentSplitPane.scrollLeft - horizontalSpeed, -parentSplitPane.scrollWidth) :
+          Math.max(0, parentSplitPane.scrollLeft - horizontalSpeed);
+      };
+      if (isRTL) {
+        // - `outRight > 0` (pointer past "right" visual edge) means scroll should go "left" (decrease scrollLeft)
+        // - `outLeft > 0` (pointer past "left" visual edge) means scroll should go "right" (increase scrollLeft)
+        if (outRight > 0) {
+          scrollLeft();
+        }
+        if (outLeft > 0) {
+          scrollRight();
+        }
+      }
+      else { // LTR
+        // - `outRight > 0` (pointer past right edge) means scroll should go "right" (increase scrollLeft)
+        // - `outLeft > 0` (pointer past left edge) means scroll should go "left" (decrease scrollLeft)
+        if (outRight > 0) {
+          scrollRight();
+        }
+        if (outLeft > 0) {
+          scrollLeft();
+        }
       }
     }
-    if (deltaPercentage !== 0) {
-      ctx.splitter.applyAutoDrag();
+    if (deltaPercentage >= 0) {
+      ctx.splitter.applyAutoDrag(isRTL);
       return;
     }
-    // Accumulate resize delta (deferred until mouseup or live-applied)
     ctx.accumulatedDelta = deltaPercentage;
   }
   handleTabsRendered(pane) {
@@ -3009,6 +3025,9 @@ const IgcDockManager = class {
       size = pane.getBoundingClientRect().width;
       minSize = parseFloat(getComputedStyle(pane).minWidth);
       maxSize = parseFloat(getComputedStyle(pane).maxWidth);
+      if (this.direction === 'rtl') {
+        offset *= -1;
+      }
     }
     else {
       size = pane.getBoundingClientRect().height;
@@ -3036,6 +3055,9 @@ const IgcDockManager = class {
       this.isPaneSizeWithinConstraints(previousPane, event.detail, orientation, 'previous') ?
       this.splitterOffset * event.detail :
       0;
+    if (this.direction === 'rtl' && orientation === locale.IgcSplitPaneOrientation.horizontal) {
+      offset *= -1;
+    }
     this.service.resizeFlyoutPane(offset);
     let rect;
     rect = splitter.previousElementSibling.getBoundingClientRect();
@@ -3047,12 +3069,6 @@ const IgcDockManager = class {
     const splitter = event.target;
     const splitterEl = splitter;
     const prevEl = splitterEl.previousElementSibling;
-    const prevPane = this.panesElementMap.getByValue(prevEl);
-    if (prevPane && prevPane.contentId === "placeholderStart") {
-      this.splitterOffset = 0;
-      splitter.showDragGhost = false;
-      return;
-    }
     const orientation = splitter.splitPaneOrientation;
     let rect;
     rect = pane === this.flyoutPane ? splitterEl.previousElementSibling.getBoundingClientRect() : splitterEl.nextElementSibling.getBoundingClientRect();
@@ -3095,6 +3111,7 @@ const IgcDockManager = class {
     }
   }
   handleSplitterResizeEnd(parentPane, pane, event) {
+    var _a;
     const splitter = event.target;
     const previousPane = splitter.previousElementSibling;
     const nextPane = splitter.nextElementSibling;
@@ -3108,22 +3125,9 @@ const IgcDockManager = class {
     const offset = parentPane.useFixedSize ||
       this.isPaneSizeWithinConstraints(previousPane, event.detail, parentPane.orientation, 'previous') &&
         this.isPaneSizeWithinConstraints(nextPane, event.detail, parentPane.orientation) ? event.detail : 0;
-    let offsetPercentage = (this.splitterOffset + this.splitterResizingContext.accumulatedDelta) * offset / sizeSum;
-    let rtl = false;
-    if (this.element.dir !== '') {
-      rtl = this.element.dir === 'rtl';
-    }
-    else {
-      let parent = this.element.parentElement;
-      while (parent) {
-        if (parent.dir !== '') {
-          rtl = parent.dir === 'rtl';
-          break;
-        }
-        parent = parent.parentElement;
-      }
-    }
-    if (rtl && parentPane.orientation === locale.IgcSplitPaneOrientation.horizontal) {
+    const accumulatedDelta = (_a = this.splitterResizingContext.accumulatedDelta) !== null && _a !== void 0 ? _a : 0;
+    let offsetPercentage = (this.splitterOffset + accumulatedDelta) * offset / sizeSum;
+    if (this.direction === 'rtl' && parentPane.orientation === locale.IgcSplitPaneOrientation.horizontal) {
       offsetPercentage *= -1;
     }
     this.service.resizePane(pane, offsetPercentage);
@@ -4053,11 +4057,8 @@ const IgcDockManager = class {
   }
   renderSplitter(parentPane, pane) {
     var _a;
-    const index$1 = parentPane.panes.indexOf(pane);
-    const prevPane = index$1 > 0 ? parentPane.panes[index$1 - 1] : null;
-    const resizable = !(prevPane && prevPane.contentId === 'placeholderStart');
     const scrollSpeed = (_a = this.autoScrollConfig) === null || _a === void 0 ? void 0 : _a.scrollSpeed;
-    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), parentUseFixedSize: parentPane.useFixedSize, resizable: resizable, scrollSpeed: scrollSpeed }));
+    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), parentUseFixedSize: parentPane.useFixedSize, scrollSpeed: scrollSpeed }));
   }
   renderDocumentHost(docHost) {
     return (index.h("igc-document-host-component", { key: docHost.id, size: docHost.size, parentUseFixedSize: this.service.isParentUseFixedSize(docHost), ref: el => {
@@ -4265,7 +4266,7 @@ const IgcDockManager = class {
             display: 'flex',
             flexDirection: 'row',
             justifyContent: 'space-between'
-          } }, this.renderEdgeDockingIndicator(locale.IgcDockingIndicatorPosition.leftMost), this.renderEdgeDockingIndicator(locale.IgcDockingIndicatorPosition.rightMost))), this.dropTargetPaneInfo && !this.proximityDock && !hideJoystickIndicator && ((_c = this.splitterDockingIndicator) === null || _c === void 0 ? void 0 : _c.style.visibility) !== 'visible' && !this.autoScrollInterval &&
+          } }, this.renderEdgeDockingIndicator(this.direction !== 'rtl' ? locale.IgcDockingIndicatorPosition.leftMost : locale.IgcDockingIndicatorPosition.rightMost), this.renderEdgeDockingIndicator(this.direction !== 'rtl' ? locale.IgcDockingIndicatorPosition.rightMost : locale.IgcDockingIndicatorPosition.leftMost))), this.dropTargetPaneInfo && !this.proximityDock && !hideJoystickIndicator && ((_c = this.splitterDockingIndicator) === null || _c === void 0 ? void 0 : _c.style.visibility) !== 'visible' && !this.autoScrollInterval &&
       index.h("igc-joystick-indicator-component", { dropTargetPaneInfo: this.dropTargetPaneInfo, documentOnlyDrag: this.documentOnlyDrag, allowCenterDock: this.allowInnerDock }), this.allowSplitterDock && !this.proximityDock &&
       index.h("igc-splitter-docking-indicator-component", { style: {
           position: 'fixed',
@@ -5189,7 +5190,7 @@ const IgcSplitPaneComponent = class {
 };
 IgcSplitPaneComponent.style = splitPaneComponentCss;
 
-const splitterComponentCss = ":host{position:relative;display:flex;flex:0 0 var(--igc-splitter-width, 4px);box-sizing:border-box;pointer-events:all}.splitter{display:flex;justify-content:center;align-items:center;width:100%;height:100%;cursor:ew-resize;background:var(--igc-splitter-background, #D3D6D9);outline-style:none}.splitter:not(.splitter--custom-handle)::after{position:absolute;content:\"\";background:var(--igc-splitter-handle, var(--igc-accent-color, #fff));top:50%;left:50%;width:var(--igc-resize-handle-width, 2px);height:var(--igc-resize-handle-height, 80px);max-height:100%;max-width:100%;border-radius:1px;transform:translateX(-50%) translateY(-50%)}.splitter:focus-within{background-color:var(--igc-active-color, cornflowerblue)}.splitter--vertical{cursor:ns-resize}.splitter--vertical:not(.splitter--custom-handle)::after{width:var(--igc-resize-handle-height, 80px);height:var(--igc-resize-handle-width, 2px)}.splitter--disabled{cursor:default;pointer-events:none}.splitter-ghost{position:absolute;cursor:ew-resize;opacity:0.3;background:black;width:100%;height:100%;z-index:5}.splitter-ghost--vertical{cursor:ns-resize}";
+const splitterComponentCss = ":host{position:relative;display:flex;flex:0 0 var(--igc-splitter-thickness, 4px);box-sizing:border-box;pointer-events:all}.splitter{display:flex;justify-content:center;align-items:center;width:100%;height:100%;cursor:ew-resize;background:var(--igc-splitter-background, #D3D6D9);outline-style:none}.splitter:not(.splitter--custom-handle)::after{position:absolute;content:\"\";background:var(--igc-splitter-handle, var(--igc-accent-color, #fff));top:50%;left:50%;width:var(--igc-resize-handle-thickness, var(--igc-resize-handle-width, 2px));height:var(--igc-resize-handle-size, var(--igc-resize-handle-height, 80px));max-height:100%;max-width:100%;border-radius:1px;transform:translateX(-50%) translateY(-50%)}.splitter:focus-within{background-color:var(--igc-active-color, cornflowerblue)}.splitter--vertical{cursor:ns-resize}.splitter--vertical:not(.splitter--custom-handle)::after{width:var(--igc-resize-handle-size, var(--igc-resize-handle-height, 80px));height:var(--igc-resize-handle-thickness, var(--igc-resize-handle-width, 2px))}.splitter-ghost{position:absolute;cursor:ew-resize;opacity:0.3;background:black;width:100%;height:100%;z-index:5}.splitter-ghost--vertical{cursor:ns-resize}";
 
 const SCROLL_SPEED = 15;
 const IgcSplitterComponent = class {
@@ -5236,7 +5237,7 @@ const IgcSplitterComponent = class {
           offset = scrollFactor(args.clientY - rect.bottom) * scrollSpeed;
         }
         else if (this.element.parentElement.scrollWidth - this.element.parentElement.clientWidth > 0) {
-          offset = scrollFactor(args.clientX - rect.left) * scrollSpeed;
+          offset = (this.isRTL ? -1 : 1) * scrollFactor(args.clientX - rect.left) * scrollSpeed;
         }
       }
       this.dragOffset += offset;
@@ -5247,13 +5248,15 @@ const IgcSplitterComponent = class {
         this.constrainSplitPaneResize();
       }
     };
-    this.applyAutoDrag = () => {
+    this.applyAutoDrag = (isRTL = false) => {
       var _a;
       const scrollFactor = (dist) => Math.min(Math.max(dist, 0), 100) / 100;
       const scrollSpeed = ((_a = this.scrollSpeed) !== null && _a !== void 0 ? _a : SCROLL_SPEED) / 2;
-      if (this.element.parentElement.scrollHeight - this.element.parentElement.clientHeight > 0
-        || this.element.parentElement.scrollWidth - this.element.parentElement.clientWidth > 0) {
-        this.dragOffset += scrollFactor(scrollSpeed) * scrollSpeed * 0.9;
+      if (this.element.parentElement.scrollHeight - this.element.parentElement.clientHeight > 0) {
+        this.dragOffset += scrollFactor(scrollSpeed) * scrollSpeed;
+      }
+      else if (this.element.parentElement.scrollWidth - this.element.parentElement.clientWidth > 0) {
+        this.dragOffset += (isRTL ? -1 : 1) * scrollFactor(scrollSpeed) * scrollSpeed;
       }
     };
     this.dragOffset = undefined;
@@ -5262,12 +5265,12 @@ const IgcSplitterComponent = class {
     this.splitPaneOrientation = undefined;
     this.flyoutLocation = undefined;
     this.parentUseFixedSize = false;
-    this.resizable = true;
     this.scrollSpeed = undefined;
   }
+  get isRTL() {
+    return Utils.getDirection(this.closestElement('igc-dockmanager', this.element)) === 'rtl';
+  }
   connectedCallback() {
-    if (!this.resizable)
-      return;
     this.dragService = new IgcDragService(this.element, this.parentUseFixedSize);
     this.dragService.dragStart = this.dragStart;
     this.dragService.dragEnd = this.dragEnd;
@@ -5307,6 +5310,7 @@ const IgcSplitterComponent = class {
       (!this.isArrowUp(event) && !this.isArrowDown(event))) {
       return;
     }
+    event.preventDefault();
     this.showDragGhost = false;
     this.resizeEndEmitted = false;
     this.dragStartHelper(this.calculateOffset(event));
@@ -5318,9 +5322,11 @@ const IgcSplitterComponent = class {
     }
     this.dragEndHelper();
   }
-  handleMouseDown() {
-    if (!this.resizable)
-      return;
+  handleMouseDown(event) {
+    event.preventDefault();
+    if (this.splitterBaseElement) {
+      this.splitterBaseElement.focus();
+    }
     this.showDragGhost = true;
     this.resizeEndEmitted = false;
     document.documentElement.addEventListener('mouseup', this.handleMouseUp, false);
@@ -5370,23 +5376,11 @@ const IgcSplitterComponent = class {
     }
   }
   constrainSplitPaneResize() {
-    let rtl = false;
-    const dockmanager = this.closestElement('igc-dockmanager', this.element);
-    if (dockmanager.dir !== '') {
-      rtl = dockmanager.dir === 'rtl';
-    }
-    else {
-      let parent = dockmanager.parentElement;
-      while (parent) {
-        if (parent.dir !== '') {
-          rtl = parent.dir === 'rtl';
-          break;
-        }
-        parent = parent.parentElement;
-      }
-    }
+    let rtl = this.isRTL;
     const isVertical = this.splitPaneOrientation === locale.IgcSplitPaneOrientation.vertical;
     if (this.dragOffset < 0) {
+      if (!isVertical && this.parentUseFixedSize && rtl)
+        return;
       const referencePaneSize = !rtl || isVertical ? this.paneSizes[0] : this.paneSizes[1];
       if (referencePaneSize > IGC_RESIZING_MIN_SIZE) {
         if (referencePaneSize + this.dragOffset < IGC_RESIZING_MIN_SIZE) {
@@ -5398,17 +5392,19 @@ const IgcSplitterComponent = class {
       }
     }
     else {
-      if (!this.parentUseFixedSize) {
-        const referencePaneSize = !rtl || isVertical ? this.paneSizes[1] : this.paneSizes[0];
-        if (referencePaneSize > IGC_RESIZING_MIN_SIZE) {
-          if (referencePaneSize - this.dragOffset < IGC_RESIZING_MIN_SIZE) {
-            this.dragOffset = referencePaneSize - IGC_RESIZING_MIN_SIZE;
-          }
-        }
-        else {
-          this.dragOffset = 0;
+      if (this.parentUseFixedSize && (isVertical || (!isVertical && !rtl)))
+        return;
+      const referencePaneSize = !rtl || isVertical ? this.paneSizes[1] : this.paneSizes[0];
+      if (referencePaneSize === 0)
+        return;
+      if (referencePaneSize > IGC_RESIZING_MIN_SIZE) {
+        if (referencePaneSize - this.dragOffset < IGC_RESIZING_MIN_SIZE) {
+          this.dragOffset = referencePaneSize - IGC_RESIZING_MIN_SIZE;
         }
       }
+      else {
+        this.dragOffset = 0;
+      }
     }
   }
   closestElement(selector, el) {
@@ -5433,7 +5429,6 @@ const IgcSplitterComponent = class {
     const isVertical = this.splitPaneOrientation === locale.IgcSplitPaneOrientation.vertical;
     const splitterClasses = {
       'splitter': true,
-      'splitter--disabled': !this.resizable,
       'splitter--vertical': isVertical,
       'splitter--custom-handle': this.hasCustomSplitterHandle
     };
@@ -5442,18 +5437,12 @@ const IgcSplitterComponent = class {
       'splitter-ghost--vertical': isVertical
     };
     return (index.h(index.Host, { part: "splitter", exportparts: "splitter,\r\n                     splitter-base,\r\n                     splitter-ghost", style: {
-        cursor: this.resizable
-          ? `${isVertical ? `ns-resize` : `ew-resize`}`
-          : 'default',
-        userSelect: 'none',
-        WebkitUserSelect: 'none',
-        MozUserSelect: 'none',
-        msUserSelect: 'none',
-      } }, index.h("div", { part: "splitter-base", class: splitterClasses, tabIndex: this.resizable ? 0 : -1, role: "separator", "aria-orientation": this.splitPaneOrientation.toString(), draggable: false }, index.h("slot", { name: "splitterHandle", onSlotchange: this.handleSlotChange.bind(this) })), this.resizable && this.showDragGhost &&
+        cursor: `${isVertical ? `ns-resize` : `ew-resize`}`
+      } }, index.h("div", { part: "splitter-base", class: splitterClasses, tabIndex: 0, role: "separator", "aria-orientation": this.splitPaneOrientation.toString(), ref: el => this.splitterBaseElement = el }, index.h("slot", { name: "splitterHandle", onSlotchange: this.handleSlotChange.bind(this) })), this.showDragGhost &&
       index.h("div", { part: "splitter-ghost", class: ghostClasses, style: {
           left: `${isVertical ? 0 : this.dragOffset}px`,
           top: `${isVertical ? this.dragOffset : 0}px`
-        }, ref: el => this.ghostElement = el, draggable: false })));
+        }, ref: el => this.ghostElement = el })));
   }
   get element() { return index.getElement(this); }
 };
@@ -5950,7 +5939,7 @@ const IgcUnpinnedPaneHeaderComponent = class {
 };
 IgcUnpinnedPaneHeaderComponent.style = unpinnedPaneHeaderComponentCss;
 
-const sampleComponentCss = ".sc-sample-component-h{display:flex;flex-direction:column;height:100%}igc-dockmanager.sc-sample-component{--igc-resize-handle-width:10px;--igc-resize-handle-height:150px}igc-dockmanager.sc-sample-component{margin:10px;border:1px solid black}";
+const sampleComponentCss = ".sc-sample-component-h{display:flex;flex-direction:column;height:100%}igc-dockmanager.sc-sample-component{--igc-resize-handle-thickness:10px;--igc-resize-handle-size:150px}igc-dockmanager.sc-sample-component{margin:10px;border:1px solid black}";
 
 /**
  * @hidden